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

app/static/js/nopaque.js

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