Try to make the JavaScript a bit less pythonic. :D

This commit is contained in:
Patrick Jentsch 2020-01-31 13:41:46 +01:00
parent 56315c4e33
commit 87cf04a87f

View File

@ -2,28 +2,28 @@ var nopaque = {};
// nopaque ressources // nopaque ressources
nopaque["socket"] = io(); nopaque.socket = io();
nopaque["corpora"] = undefined; nopaque.corpora = undefined;
nopaque["corporaSubscribers"] = []; nopaque.corporaSubscribers = [];
nopaque["jobs"] = undefined; nopaque.jobs = undefined;
nopaque["jobsSubscribers"] = []; nopaque.jobsSubscribers = [];
nopaque["foreignCorpora"] = undefined; nopaque.foreignCorpora = undefined;
nopaque["foreignCorporaSubscribers"] = []; nopaque.foreignCorporaSubscribers = [];
nopaque["foreignJobs"] = undefined; nopaque.foreignJobs = undefined;
nopaque["foreignJobsSubscribers"] = []; nopaque.foreignJobsSubscribers = [];
// nopaque functions // nopaque functions
nopaque["forms"] = {}; nopaque.forms = {};
nopaque["forms"]["init"] = function() { nopaque.forms.init = function() {
var abortRequestElement, progressElement, progressModal, var abortRequestElement, progressElement, progressModal,
progressModalElement, request; progressModalElement, request;
for (let form of document.querySelectorAll(".nopaque-job-form")) { for (let form of document.querySelectorAll(".nopaque-job-form")) {
request = new XMLHttpRequest(); request = new XMLHttpRequest();
if (form.dataset.hasOwnProperty('progressModal')) { if (form.dataset.hasOwnProperty("progressModal")) {
progressModalElement = document.getElementById(form.dataset.progressModal); progressModalElement = document.getElementById(form.dataset.progressModal);
progressModal = M.Modal.getInstance(progressModalElement); progressModal = M.Modal.getInstance(progressModalElement);
progressModal.options.dismissible = false; progressModal.options.dismissible = false;
@ -48,19 +48,16 @@ nopaque["forms"]["init"] = function() {
request.send(formData); request.send(formData);
}); });
request.addEventListener("load", function(event) { request.addEventListener("load", function(event) {
var errorElement, fieldElement; var fieldElement;
if (request.status === 201) { if (request.status === 201) {
window.location.href = JSON.parse(this.responseText)['redirect_url']; window.location.href = JSON.parse(this.responseText).redirect_url;
} }
if (request.status === 400) { if (request.status === 400) {
for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) { for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) {
fieldElement = form.querySelector(`input[name="${field}"]`).closest(".input-field"); fieldElement = form.querySelector(`input[name="${field}"]`).closest(".input-field");
for (let error of errors) { for (let error of errors) {
errorElement = document.createElement("span"); fieldElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">${error}</span>`);
errorElement.classList.add("helper-text", "red-text");
errorElement.innerText = error;
fieldElement.appendChild(errorElement);
} }
} }
if (progressModalElement) { if (progressModalElement) {
@ -79,8 +76,8 @@ nopaque["forms"]["init"] = function() {
} }
} }
nopaque["navigation"] = {}; nopaque.navigation = {};
nopaque["navigation"]["init"] = function() { nopaque.navigation.init = function() {
for (let entry of document.querySelectorAll("#slide-out a:not(.subheader)")) { for (let entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
if (entry.href === window.location.href) { if (entry.href === window.location.href) {
entry.parentNode.classList.add("active"); entry.parentNode.classList.add("active");
@ -89,16 +86,16 @@ nopaque["navigation"]["init"] = function() {
} }
nopaque["toast"] = function(message, color="") { nopaque.toast = function(message, color="") {
var toast; var toast;
var toastActionElement; var toastActionElement;
toast = M.toast({"classes": color, toast = M.toast({classes: color,
"html": `<span>${message}</span> html: `<span>${message}</span>
<button class="btn-flat toast-action white-text" data-action="close"> <button data-action="close" class="btn-flat toast-action white-text">
<i class="material-icons">close</i> <i class="material-icons">close</i>
</button>`}); </button>`});
toastActionElement = toast.el.querySelector(`.toast-action[data-action="close"]`); toastActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
if (toastActionElement) { if (toastActionElement) {
toastActionElement.addEventListener("click", function() { toastActionElement.addEventListener("click", function() {
toast.dismiss(); toast.dismiss();
@ -108,19 +105,19 @@ nopaque["toast"] = function(message, color="") {
// socket event handlers // socket event handlers
nopaque.socket.on('corpora_init', function(msg) { nopaque.socket.on("corpora_init", function(msg) {
nopaque.corpora = JSON.parse(msg); nopaque.corpora = JSON.parse(msg);
for (let subscriber of nopaque.corporaSubscribers) {subscriber._init(nopaque.corpora);} for (let subscriber of nopaque.corporaSubscribers) {subscriber._init(nopaque.corpora);}
}); });
nopaque.socket.on('jobs_init', function(msg) { nopaque.socket.on("jobs_init", function(msg) {
nopaque.jobs = JSON.parse(msg); nopaque.jobs = JSON.parse(msg);
for (let subscriber of nopaque.jobsSubscribers) {subscriber._init(nopaque.jobs);} for (let subscriber of nopaque.jobsSubscribers) {subscriber._init(nopaque.jobs);}
}); });
nopaque.socket.on('corpora_update', function(msg) { nopaque.socket.on("corpora_update", function(msg) {
var patch; var patch;
patch = JSON.parse(msg); patch = JSON.parse(msg);
@ -129,7 +126,7 @@ nopaque.socket.on('corpora_update', function(msg) {
}); });
nopaque.socket.on('jobs_update', function(msg) { nopaque.socket.on("jobs_update", function(msg) {
var patch; var patch;
patch = JSON.parse(msg); patch = JSON.parse(msg);
@ -138,19 +135,19 @@ nopaque.socket.on('jobs_update', function(msg) {
}); });
nopaque.socket.on('foreign_corpora_init', function(msg) { nopaque.socket.on("foreign_corpora_init", function(msg) {
nopaque.foreignCorpora = JSON.parse(msg); nopaque.foreignCorpora = JSON.parse(msg);
for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._init(nopaque.foreignCorpora);} for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._init(nopaque.foreignCorpora);}
}); });
nopaque.socket.on('foreign_jobs_init', function(msg) { nopaque.socket.on("foreign_jobs_init", function(msg) {
nopaque.foreignJobs = JSON.parse(msg); nopaque.foreignJobs = JSON.parse(msg);
for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._init(nopaque.foreignJobs);} for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._init(nopaque.foreignJobs);}
}); });
nopaque.socket.on('foreign_corpora_update', function(msg) { nopaque.socket.on("foreign_corpora_update", function(msg) {
var patch; var patch;
patch = JSON.parse(msg); patch = JSON.parse(msg);
@ -159,7 +156,7 @@ nopaque.socket.on('foreign_corpora_update', function(msg) {
}); });
nopaque.socket.on('foreign_jobs_update', function(msg) { nopaque.socket.on("foreign_jobs_update", function(msg) {
var patch; var patch;
patch = JSON.parse(msg); patch = JSON.parse(msg);
@ -170,9 +167,9 @@ nopaque.socket.on('foreign_jobs_update', function(msg) {
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
M.AutoInit(); M.AutoInit();
M.CharacterCounter.init(document.querySelectorAll(`input[data-length][type="text"]`)); M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="text"]'));
M.Dropdown.init(document.querySelectorAll('#nav-notifications, #nav-account'), M.Dropdown.init(document.querySelectorAll("#nav-notifications, #nav-account"),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}); {alignment: "right", constrainWidth: false, coverTrigger: false});
nopaque.forms.init(); nopaque.forms.init();
nopaque.navigation.init(); nopaque.navigation.init();
nopaque.socket.emit("user_ressources_init"); nopaque.socket.emit("user_ressources_init");