From 04bfe108c3df00db2b6a1b3f79241a6ad66d3072 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Fri, 17 Jan 2020 10:42:02 +0100
Subject: [PATCH] Javascript cleanup

---
 app/static/js/nopaque.js   | 112 +++++++++++++++++++++++++++++++++
 app/templates/base.html.j2 | 125 ++++---------------------------------
 2 files changed, 123 insertions(+), 114 deletions(-)
 create mode 100644 app/static/js/nopaque.js

diff --git a/app/static/js/nopaque.js b/app/static/js/nopaque.js
new file mode 100644
index 00000000..f06950ed
--- /dev/null
+++ b/app/static/js/nopaque.js
@@ -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');
+});
diff --git a/app/templates/base.html.j2 b/app/templates/base.html.j2
index 17fa636a..b4a6b9e9 100644
--- a/app/templates/base.html.j2
+++ b/app/templates/base.html.j2
@@ -2,96 +2,32 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {% if title %}
     <title>nopaque – {{ title }}</title>
     {% else %}
     <title>nopaque</title>
     {% endif %}
-    <link href="{{ url_for('static', filename='images/favicon.png') }}" rel="icon" type="image/png">
-    <link type="text/css" 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 type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}" media="screen,projection"/>
+    <link rel="icon" href="{{ url_for('static', filename='images/favicon.png') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}">
+    <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/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/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/CorpusList.js') }}"></script>
     <script src="{{ url_for('static', filename='js/JobList.js') }}"></script>
     <script>
-      {% if current_user.is_dark == True %}
-      DarkReader.enable({
-        brightness: 100,
-        contrast: 100,
-        sepia: 0
-      });
-      {% else %}
-      DarkReader.disable();
+      {% if current_user.is_authenticated and current_user.is_dark %}
+      darkModeEnabled = true;
       {% endif %}
+      {% for flashed_message in get_flashed_messages() %}
+      flashedMessages.push("{{ flashed_message }}");
+      {% endfor %}
     </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>
   <body>
     <header>
@@ -168,45 +104,6 @@
         </div>
       </div>
     </footer>
-
-    <script>
-      socket.emit('subscribe_user_ressources');
-    </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>
 </html>