mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-01-23 08:10:34 +00:00
Javascript cleanup
This commit is contained in:
parent
554cc735b0
commit
04bfe108c3
112
app/static/js/nopaque.js
Normal file
112
app/static/js/nopaque.js
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
var darkModeEnabled = false;
|
||||||
|
var flashedMessages = [];
|
||||||
|
var socket = io();
|
||||||
|
|
||||||
|
var corpora;
|
||||||
|
var corporaSubscribers = [];
|
||||||
|
var jobs;
|
||||||
|
var jobsSubscribers = [];
|
||||||
|
|
||||||
|
var foreignCorpora;
|
||||||
|
var foreignCorporaSubscribers = [];
|
||||||
|
var foreignJobs;
|
||||||
|
var foreignJobsSubscribers = [];
|
||||||
|
|
||||||
|
|
||||||
|
function toast(message) {
|
||||||
|
var toast;
|
||||||
|
var toastActionElement;
|
||||||
|
|
||||||
|
toast = M.toast({"html": `<span>${message}</span>
|
||||||
|
<button class="btn-flat toast-action red-text" data-action="close">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>`});
|
||||||
|
toastActionElement = toast.el.querySelector(`.toast-action[data-action="close"]`);
|
||||||
|
if (toastActionElement) {
|
||||||
|
toastActionElement.addEventListener("click", function() {
|
||||||
|
toast.dismiss();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
socket.on('init-corpora', function(msg) {
|
||||||
|
corpora = JSON.parse(msg);
|
||||||
|
for (let subscriber of corporaSubscribers) {subscriber._init(corpora);}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
socket.on('init-jobs', function(msg) {
|
||||||
|
jobs = JSON.parse(msg);
|
||||||
|
for (let subscriber of jobsSubscribers) {subscriber._init(jobs);}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
socket.on('update-corpora', function(msg) {
|
||||||
|
var patch;
|
||||||
|
|
||||||
|
patch = JSON.parse(msg);
|
||||||
|
corpora = jsonpatch.apply_patch(corpora, patch);
|
||||||
|
for (let subscriber of corporaSubscribers) {subscriber._update(patch);}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
socket.on('update-jobs', function(msg) {
|
||||||
|
var patch;
|
||||||
|
|
||||||
|
patch = JSON.parse(msg);
|
||||||
|
jobs = jsonpatch.apply_patch(jobs, patch);
|
||||||
|
for (let subscriber of jobsSubscribers) {subscriber._update(patch);}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
socket.on('init-foreign-corpora', function(msg) {
|
||||||
|
foreignCorpora = JSON.parse(msg);
|
||||||
|
for (let subscriber of foreignCorporaSubscribers) {subscriber._init(foreignCorpora);}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
socket.on('init-foreign-jobs', function(msg) {
|
||||||
|
foreignJobs = JSON.parse(msg);
|
||||||
|
for (let subscriber of foreignJobsSubscribers) {subscriber._init(foreignJobs);}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
socket.on('update-foreign-corpora', function(msg) {
|
||||||
|
var patch;
|
||||||
|
|
||||||
|
patch = JSON.parse(msg);
|
||||||
|
foreignCorpora = jsonpatch.apply_patch(foreignCorpora, patch);
|
||||||
|
for (let subscriber of foreignCorporaSubscribers) {subscriber._update(patch);}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
socket.on('update-foreign-jobs', function(msg) {
|
||||||
|
var patch;
|
||||||
|
|
||||||
|
patch = JSON.parse(msg);
|
||||||
|
foreignJobs = jsonpatch.apply_patch(foreignJobs, patch);
|
||||||
|
for (let subscriber of foreignJobsSubscribers) {subscriber._update(patch);}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
M.AutoInit();
|
||||||
|
M.CharacterCounter.init(document.querySelectorAll(`input[data-length][type="text"]`));
|
||||||
|
M.Dropdown.init(document.getElementById("nav-notifications"),
|
||||||
|
{"alignment": "right", "constrainWidth": false, "coverTrigger": false});
|
||||||
|
M.Dropdown.init(document.getElementById("nav-account"),
|
||||||
|
{"alignment": "right", "constrainWidth": false, "coverTrigger": false});
|
||||||
|
for (let entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
|
||||||
|
if (entry.href === window.location.href) {
|
||||||
|
entry.parentNode.classList.add("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (darkModeEnabled) {
|
||||||
|
DarkReader.enable({"brightness": 100, "contrast": 100, "sepia": 0});
|
||||||
|
}
|
||||||
|
for (flashedMessage of flashedMessages) {
|
||||||
|
toast(flashedMessage);
|
||||||
|
}
|
||||||
|
socket.emit('subscribe_user_ressources');
|
||||||
|
});
|
@ -2,96 +2,32 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
{% if title %}
|
{% if title %}
|
||||||
<title>nopaque – {{ title }}</title>
|
<title>nopaque – {{ title }}</title>
|
||||||
{% else %}
|
{% else %}
|
||||||
<title>nopaque</title>
|
<title>nopaque</title>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<link href="{{ url_for('static', filename='images/favicon.png') }}" rel="icon" type="image/png">
|
<link rel="icon" href="{{ url_for('static', filename='images/favicon.png') }}">
|
||||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}">
|
||||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}" media="screen,projection"/>
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}">
|
||||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}" media="screen,projection"/>
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}">
|
||||||
<script src="{{ url_for('static', filename='js/JSONPatch.js/jsonpatch.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/JSONPatch.js/jsonpatch.min.js') }}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/Dark_Reader/darkreader.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/Dark_Reader/darkreader.js') }}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/List.js/list.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/List.js/list.min.js') }}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/Socket.IO/socket.io.slim.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/Socket.IO/socket.io.slim.js') }}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/add_job.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/add_job.js') }}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/CorpusList.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/CorpusList.js') }}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/JobList.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/JobList.js') }}"></script>
|
||||||
<script>
|
<script>
|
||||||
{% if current_user.is_dark == True %}
|
{% if current_user.is_authenticated and current_user.is_dark %}
|
||||||
DarkReader.enable({
|
darkModeEnabled = true;
|
||||||
brightness: 100,
|
|
||||||
contrast: 100,
|
|
||||||
sepia: 0
|
|
||||||
});
|
|
||||||
{% else %}
|
|
||||||
DarkReader.disable();
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% for flashed_message in get_flashed_messages() %}
|
||||||
|
flashedMessages.push("{{ flashed_message }}");
|
||||||
|
{% endfor %}
|
||||||
</script>
|
</script>
|
||||||
<script>
|
|
||||||
var corpora;
|
|
||||||
var corporaSubscribers = [];
|
|
||||||
var jobs;
|
|
||||||
var jobsSubscribers = [];
|
|
||||||
var socket = io();
|
|
||||||
|
|
||||||
socket.on('init-corpora', function(msg) {
|
|
||||||
corpora = JSON.parse(msg);
|
|
||||||
for (let subscriber of corporaSubscribers) {subscriber._init(corpora);}
|
|
||||||
});
|
|
||||||
socket.on('init-jobs', function(msg) {
|
|
||||||
jobs = JSON.parse(msg);
|
|
||||||
for (let subscriber of jobsSubscribers) {subscriber._init(jobs);}
|
|
||||||
});
|
|
||||||
socket.on('update-corpora', function(msg) {
|
|
||||||
var patch;
|
|
||||||
|
|
||||||
patch = JSON.parse(msg);
|
|
||||||
corpora = jsonpatch.apply_patch(corpora, patch);
|
|
||||||
for (let subscriber of corporaSubscribers) {subscriber._update(patch);}
|
|
||||||
});
|
|
||||||
socket.on('update-jobs', function(msg) {
|
|
||||||
var patch;
|
|
||||||
|
|
||||||
patch = JSON.parse(msg);
|
|
||||||
jobs = jsonpatch.apply_patch(jobs, patch);
|
|
||||||
for (let subscriber of jobsSubscribers) {subscriber._update(patch);}
|
|
||||||
});
|
|
||||||
socket.on('message', function(msg) {
|
|
||||||
console.log(msg);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
var foreignCorpora;
|
|
||||||
var foreignCorporaSubscribers = [];
|
|
||||||
var foreignJobs;
|
|
||||||
var foreignJobsSubscribers = [];
|
|
||||||
|
|
||||||
socket.on('init-foreign-corpora', function(msg) {
|
|
||||||
foreignCorpora = JSON.parse(msg);
|
|
||||||
for (let subscriber of foreignCorporaSubscribers) {subscriber._init(foreignCorpora);}
|
|
||||||
});
|
|
||||||
socket.on('init-foreign-jobs', function(msg) {
|
|
||||||
foreignJobs = JSON.parse(msg);
|
|
||||||
for (let subscriber of foreignJobsSubscribers) {subscriber._init(foreignJobs);}
|
|
||||||
});
|
|
||||||
socket.on('update-foreign-corpora', function(msg) {
|
|
||||||
var patch;
|
|
||||||
|
|
||||||
patch = JSON.parse(msg);
|
|
||||||
foreignCorpora = jsonpatch.apply_patch(foreignCorpora, patch);
|
|
||||||
for (let subscriber of foreignCorporaSubscribers) {subscriber._update(patch);}
|
|
||||||
});
|
|
||||||
socket.on('update-foreign-jobs', function(msg) {
|
|
||||||
var patch;
|
|
||||||
|
|
||||||
patch = JSON.parse(msg);
|
|
||||||
foreignJobs = jsonpatch.apply_patch(foreignJobs, patch);
|
|
||||||
for (let subscriber of foreignJobsSubscribers) {subscriber._update(patch);}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -168,45 +104,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script>
|
|
||||||
socket.emit('subscribe_user_ressources');
|
|
||||||
</script>
|
|
||||||
<script src="{{ url_for('static', filename='js/Materialize/materialize.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/Materialize/materialize.min.js') }}"></script>
|
||||||
<script>
|
|
||||||
M.AutoInit();
|
|
||||||
M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="text"]'))
|
|
||||||
M.Dropdown.init(
|
|
||||||
document.getElementById("nav-notifications"),
|
|
||||||
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
|
|
||||||
);
|
|
||||||
M.Dropdown.init(
|
|
||||||
document.getElementById("nav-account"),
|
|
||||||
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
|
|
||||||
);
|
|
||||||
// Highlight current navigation entry
|
|
||||||
var entry;
|
|
||||||
for (entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
|
|
||||||
if (entry.href === window.location.href) {
|
|
||||||
entry.parentNode.classList.add("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var toast;
|
|
||||||
var toastActionElement;
|
|
||||||
{% for message in get_flashed_messages() %}
|
|
||||||
toast = M.toast({"html": `<span>{{ message }}</span><button class="btn-flat toast-action red-text" data-action="close"><i class="material-icons">close</i></button>`});
|
|
||||||
toastActionElement = toast.el.querySelector(".toast-action[data-action='close']");
|
|
||||||
if (toastActionElement) {
|
|
||||||
toastActionElement.addEventListener("click", function() {
|
|
||||||
toast.dismiss();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
{% endfor %}
|
|
||||||
for (toastActionElement of document.querySelectorAll(".toast-action[data-action='close']")) {
|
|
||||||
toastActionElement.addEventListener("click", function(event) {
|
|
||||||
M.Toast.getInstance(toastActionElement.parentElement).dismiss();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user