Create and use a nopaque namespace for functions and ressources

app/static/js/nopaque.js

@@ -1,17 +1,32 @@
-var socket = io();
+var nopaque = {};
-
-var corpora;
-var corporaSubscribers = [];
-var jobs;
-var jobsSubscribers = [];
-
-var foreignCorpora;
-var foreignCorporaSubscribers = [];
-var foreignJobs;
-var foreignJobsSubscribers = [];
 
 
-function toast(message, color="") {
+// nopaque ressources
+nopaque["socket"] = io();
+
+nopaque["corpora"] = undefined;
+nopaque["corporaSubscribers"] = [];
+nopaque["jobs"] = undefined;
+nopaque["jobsSubscribers"] = [];
+
+nopaque["foreignCorpora"] = undefined;
+nopaque["foreignCorporaSubscribers"] = [];
+nopaque["foreignJobs"] = undefined;
+nopaque["foreignJobsSubscribers"] = [];
+
+
+// nopaque functions
+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");
+    }
+  }
+}
+
+
+nopaque["toast"] = function(message, color="") {
   var toast;
   var toastActionElement;
 
@@ -29,63 +44,64 @@ function toast(message, color="") {
 }
 
 
-socket.on('init-corpora', function(msg) {
+// socket event handlers
-  corpora = JSON.parse(msg);
+nopaque.socket.on('init-corpora', function(msg) {
-  for (let subscriber of corporaSubscribers) {subscriber._init(corpora);}
+  nopaque.corpora = JSON.parse(msg);
+  for (let subscriber of nopaque.corporaSubscribers) {subscriber._init(nopaque.corpora);}
 });
 
 
-socket.on('init-jobs', function(msg) {
+nopaque.socket.on('init-jobs', function(msg) {
-  jobs = JSON.parse(msg);
+  nopaque.jobs = JSON.parse(msg);
-  for (let subscriber of jobsSubscribers) {subscriber._init(jobs);}
+  for (let subscriber of nopaque.jobsSubscribers) {subscriber._init(nopaque.jobs);}
 });
 
 
-socket.on('update-corpora', function(msg) {
+nopaque.socket.on('update-corpora', function(msg) {
   var patch;
 
   patch = JSON.parse(msg);
-  corpora = jsonpatch.apply_patch(corpora, patch);
+  nopaque.corpora = jsonpatch.apply_patch(nopaque.corpora, patch);
-  for (let subscriber of corporaSubscribers) {subscriber._update(patch);}
+  for (let subscriber of nopaque.corporaSubscribers) {subscriber._update(patch);}
 });
 
 
-socket.on('update-jobs', function(msg) {
+nopaque.socket.on('update-jobs', function(msg) {
   var patch;
 
   patch = JSON.parse(msg);
-  jobs = jsonpatch.apply_patch(jobs, patch);
+  nopaque.jobs = jsonpatch.apply_patch(nopaque.jobs, patch);
-  for (let subscriber of jobsSubscribers) {subscriber._update(patch);}
+  for (let subscriber of nopaque.jobsSubscribers) {subscriber._update(patch);}
 });
 
 
-socket.on('init-foreign-corpora', function(msg) {
+nopaque.socket.on('init-foreign-corpora', function(msg) {
-  foreignCorpora = JSON.parse(msg);
+  nopaque.foreignCorpora = JSON.parse(msg);
-  for (let subscriber of foreignCorporaSubscribers) {subscriber._init(foreignCorpora);}
+  for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._init(nopaque.foreignCorpora);}
 });
 
 
-socket.on('init-foreign-jobs', function(msg) {
+nopaque.socket.on('init-foreign-jobs', function(msg) {
-  foreignJobs = JSON.parse(msg);
+  nopaque.foreignJobs = JSON.parse(msg);
-  for (let subscriber of foreignJobsSubscribers) {subscriber._init(foreignJobs);}
+  for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._init(nopaque.foreignJobs);}
 });
 
 
-socket.on('update-foreign-corpora', function(msg) {
+nopaque.socket.on('update-foreign-corpora', function(msg) {
   var patch;
 
   patch = JSON.parse(msg);
-  foreignCorpora = jsonpatch.apply_patch(foreignCorpora, patch);
+  nopaque.foreignCorpora = jsonpatch.apply_patch(nopaque.foreignCorpora, patch);
-  for (let subscriber of foreignCorporaSubscribers) {subscriber._update(patch);}
+  for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._update(patch);}
 });
 
 
-socket.on('update-foreign-jobs', function(msg) {
+nopaque.socket.on('update-foreign-jobs', function(msg) {
   var patch;
 
   patch = JSON.parse(msg);
-  foreignJobs = jsonpatch.apply_patch(foreignJobs, patch);
+  nopaque.foreignJobs = jsonpatch.apply_patch(nopaque.foreignJobs, patch);
-  for (let subscriber of foreignJobsSubscribers) {subscriber._update(patch);}
+  for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._update(patch);}
 });
 
 
@@ -96,10 +112,6 @@ document.addEventListener("DOMContentLoaded", function() {
                   {"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)")) {
+  nopaque.navigation.init();
-    if (entry.href === window.location.href) {
+  nopaque.socket.emit("subscribe_user_ressources");
-      entry.parentNode.classList.add("active");
-    }
-  }
-  socket.emit("subscribe_user_ressources");
 });

app/templates/admin/index.html.j2

@@ -2,13 +2,12 @@
 
 {% block page_content %}
 <div class="col s12">
-  <div id="user-list">
   <div class="card">
-      <div class="card-content">
+    <div class="card-content" id="users">
       <span class="card-title">User list</span>
       <div class="input-field">
         <i class="material-icons prefix">search</i>
-          <input id="search-user" class="search" type="text"></input>
+        <input id="search-user" class="search" type="search"></input>
         <label for="search-user">Search user</label>
       </div>
       <ul class="pagination paginationTop"></ul>
@@ -16,18 +15,14 @@
       <ul class="pagination paginationBottom"></ul>
     </div>
   </div>
-  </div>
 </div>
 
 <script>
   var options = {page: 10,
-                 pagination: [{
+                 pagination: [{name: "paginationTop",
-                               name: "paginationTop",
+                               paginationClass: "paginationTop",},
-                               paginationClass: "paginationTop",
+                              {paginationClass: "paginationBottom"}],
-                             }, {
-                               paginationClass: "paginationBottom",
-                             }],
                  valueNames: ['username', 'email', 'role', 'confirmed', 'id']};
-  var userList = new List('user-list', options);
+  var userList = new List('users', options);
 </script>
 {% endblock %}

app/templates/admin/user.html.j2

@@ -100,8 +100,8 @@
 
 
 <script>
-  var corpusList = new CorpusList("corpora", foreignCorporaSubscribers);
+  var corpusList = new CorpusList("corpora", nopaque.foreignCorporaSubscribers);
-  var jobList = new JobList("jobs", foreignJobsSubscribers);
+  var jobList = new JobList("jobs", nopaque.foreignJobsSubscribers);
-  socket.emit("subscribe_foreign_user_ressources", {{ user.id }});
+  nopaque.socket.emit("subscribe_foreign_user_ressources", {{ user.id }});
 </script>
 {% endblock %}

app/templates/corpora/analyse_corpus.html.j2

@@ -181,18 +181,16 @@
   var loadingModal;
   document.addEventListener("DOMContentLoaded", function() {
     contextModal = M.Modal.init(document.getElementById("context-modal"),
-                                {"dismissible": true,
+                                {"onCloseEnd": function() {
-                                 "onCloseEnd": function() {
                                    document.getElementById("context-modal-loading").classList.remove("hide");
-                                   document.getElementById("context-modal-ready").classList.add("hide");}
+                                   document.getElementById("context-modal-ready").classList.add("hide");}});
-                                });
     loadingModal = M.Modal.init(document.getElementById("loading-modal"),
                                 {"dismissible": false});
     loadingModal.open();
-    socket.emit("request_corpus_analysis", {{ corpus_id }});
+    nopaque.socket.emit("request_corpus_analysis", {{ corpus_id }});
   });
 
-  socket.on("request_corpus_analysis", function(msg) {
+  nopaque.socket.on("request_corpus_analysis", function(msg) {
     if (msg === "[201]: Created") {loadingModal.close();}
   });
 
@@ -230,13 +228,13 @@
                      "hits_per_page": formData.get("hits_per_page"),
                      "query": formData.get("query")};
     hitsPerPage = formData.get("hits_per_page");
-    socket.emit("corpus_analysis", queryData);
+    nopaque.socket.emit("corpus_analysis", queryData);
     queryLoadingElement.classList.remove("hide");
     queryResultsTableElement.classList.add("hide");
-    toast("Query has been sent!")
+    nopaque.toast("Query has been sent!")
   });
 
-  socket.on("corpus_analysis", function(message) {
+  nopaque.socket.on("corpus_analysis", function(message) {
     console.log("### corpus_analysis ###");
     console.log(message);
     queryLoadingElement.classList.add("hide");
@@ -250,11 +248,11 @@
 
     if (message === null) {
       queryResultsTableElement.classList.add("hide");
-      toast("No results for this query!")
+      nopaque.toast("No results for this query!")
       return;
     } else if (message === "CQI_CQP_ERROR_GENERAL") {
         queryResultsTableElement.classList.add("hide");
-        toast("Invalid query entered!", "red");
+        nopaque.toast("Invalid query entered!", "red");
         return;
       } else {
         total_nr_matches = message["total_nr_matches"];
@@ -365,7 +363,7 @@
         var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index");
         inspectBtn.onclick = function() {
           contextModal.open();
-          socket.emit("inspect_match", {"cpos": matches[dataIndex]["hit"]});
+          nopaque.socket.emit("inspect_match", {"cpos": matches[dataIndex]["hit"]});
         };
       }
   });
@@ -399,7 +397,7 @@
   }
 
 
-  socket.on("match_context", function(message) {
+  nopaque.socket.on("match_context", function(message) {
     console.log("### match_context ###");
     console.log(message);
     contextResultsElement.innerHTML = "<p>&nbsp;</p>";

app/templates/corpora/corpus.html.j2

@@ -102,21 +102,27 @@
       this.corpusId = corpusId;
       this.foreignCorpusFlag = foreignCorpusFlag;
       if (this.foreignCorpusFlag) {
-        foreignCorporaSubscribers.push(this);
+        nopaque.foreignCorporaSubscribers.push(this);
       } else {
-        corporaSubscribers.push(this);
+        nopaque.corporaSubscribers.push(this);
       }
     }
 
     _init() {
-      var corpus = this.foreignCorpusFlag ? foreignCorpora[this.corpusId] : corpora[this.corpusId];
+      let corpus;
+
+      if (this.foreignCorpusFlag) {
+        corpus = nopaque.foreignCorpora[this.corpusId];
+      } else {
+        corpus = nopaque.corpora[this.corpusId];
+      }
 
       // Status
       this.setStatus(corpus.status);
     }
 
     _update(patch) {
-      var pathArray;
+      let pathArray;
 
       for (let operation of patch) {
         /* "/corpusId/valueName" -> ["corpusId", "valueName"] */
@@ -141,12 +147,13 @@
     }
 
     setStatus(status) {
-      var statusElement;
+      let analyseBtn, statusElement;
+
       statusElement = document.getElementById("status");
       statusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
       statusElement.classList.add(CorpusList.STATUS_COLORS[status] || CorpusList.STATUS_COLORS['default']);
       statusElement.innerText = status;
-      var analyseBtn = document.getElementById('analyse');
+      analyseBtn = document.getElementById('analyse');
       if (status === 'prepared' || status === 'analysing' || status === 'failed') {
         analyseBtn.classList.remove('hide', 'disabled');
       } else if (status === 'start analysis' || status === 'stop analysis') {
@@ -164,7 +171,7 @@
   var informationUpdater = new InformationUpdater({{ corpus.id }}, false);
   {% else %}
   var informationUpdater = new InformationUpdater({{ corpus.id }}, true);
-  socket.emit('subscribe_foreign_user_ressources', {{ corpus.user_id }});
+  nopaque.socket.emit('subscribe_foreign_user_ressources', {{ corpus.user_id }});
   {% endif %}
 </script>
 {% endblock %}

app/templates/jobs/job.html.j2

@@ -122,14 +122,20 @@
       this.jobId = jobId;
       this.foreignJobFlag = foreignJobFlag;
       if (this.foreignJobFlag) {
-        foreignJobsSubscribers.push(this);
+        nopaque.foreignJobsSubscribers.push(this);
       } else {
-        jobsSubscribers.push(this);
+        nopaque.jobsSubscribers.push(this);
       }
     }
 
     _init() {
-      var job = this.foreignJobFlag ? foreignJobs[this.jobId] : jobs[this.jobId];
+      let job;
+
+      if (this.foreignJobFlag) {
+        job = nopaque.foreignJobs[this.jobId];
+      } else {
+        job = nopaque.jobs[this.jobId];
+      }
 
       // End date
       this.setEndDate(job.end_date);
@@ -146,7 +152,7 @@
     }
 
     _update(patch) {
-      var pathArray;
+      let pathArray;
 
       for (let operation of patch) {
         /* "/jobId/valueName" -> ["jobId", "valueName"] */
@@ -175,7 +181,8 @@
     }
 
     setEndDate(timestamp) {
-      var end_date;
+      let end_date;
+
       if (timestamp === null) {
         end_date = "N.a.";
       } else {
@@ -186,8 +193,9 @@
     }
 
     setResult(result) {
-      var resultsElement, resultDownloadButtonElement,
+      let resultsElement, resultDownloadButtonElement,
           resultDownloadButtonIconElement;
+
       resultsElement = document.getElementById(`input-${result.job_input_id}-results`);
       resultDownloadButtonElement = document.createElement("a");
       resultDownloadButtonElement.classList.add("waves-effect", "waves-light", "btn-small");
@@ -203,7 +211,8 @@
     }
 
     setStatus(status) {
-      var statusElement;
+      let statusElement;
+
       statusElement = document.getElementById("status");
       statusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
       statusElement.classList.add(JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default']);
@@ -215,7 +224,7 @@
   var informationUpdater = new InformationUpdater({{ job.id }}, false);
   {% else %}
   var informationUpdater = new InformationUpdater({{ job.id }}, true);
-  socket.emit('subscribe_foreign_user_ressources', {{ job.user_id }});
+  nopaque.socket.emit('subscribe_foreign_user_ressources', {{ job.user_id }});
   {% endif %}
 </script>
 {% endblock %}

app/templates/main/dashboard.html.j2

@@ -86,10 +86,7 @@
 </div>
 
 <script>
-  // Init corpus list
+  var corpusList = new CorpusList("corpora", nopaque.corporaSubscribers);
-  var corpusList = new CorpusList("corpora", corporaSubscribers);
+  var jobList = new JobList("jobs", nopaque.jobsSubscribers);
-
-  // Init job list
-  var jobList = new JobList("jobs", jobsSubscribers);
 </script>
 {% endblock %}