Light Mode on Steriods; Move JS to files

6 files changed, 287 insertions, 216 deletions

diff --git a/static/js/globals.js b/static/js/globals.js
new file mode 100644
index 00000000..9850afb2
--- /dev/null
+++ b/static/js/globals.js
@@ -0,0 +1,53 @@
+window.dataLayer = window.dataLayer || [];
+function gtag() {
+  dataLayer.push(arguments);
+}
+gtag("js", new Date());
+
+gtag("config", "G-72XTC500FR");
+
+// Smooth scroll to anchor
+$(document).ready(function () {
+  $('a[href^="#"]').on("click", function (e) {
+    e.preventDefault();
+
+    const target = $(this.getAttribute("href"));
+    if (target.length) {
+      $("html, body").stop().animate(
+        {
+          scrollTop: target.offset().top,
+        },
+        500
+      );
+    }
+  });
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+  var equationElements = document.getElementsByTagName("*");
+
+  for (var i = 0; i < equationElements.length; i++) {
+    var element = equationElements[i];
+
+    if (
+      element.innerHTML.startsWith("$$") &&
+      element.innerHTML.endsWith("$$")
+    ) {
+      element.style.overflowX = "scroll";
+      element.style.whiteSpace = "nowrap";
+      element.classList.add("equation-container");
+    }
+  }
+});
+
+function summonOneko() {
+  document.cookie =
+    "summonOneko=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
+  location.reload();
+}
+
+function withdrawOneko() {
+  document.cookie =
+    "summonOneko=false; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
+  location.reload();
+}
diff --git a/static/js/mjxConfig.js b/static/js/mjxConfig.js
new file mode 100644
index 00000000..1fad8599
--- /dev/null
+++ b/static/js/mjxConfig.js
@@ -0,0 +1,53 @@
+var BROWSER = MathJax.Hub.Browser;
+
+var canUseMML =
+  (BROWSER.isFirefox && BROWSER.versionAtLeast("1.5")) ||
+  (BROWSER.isMSIE && BROWSER.hasMathPlayer) ||
+  (BROWSER.isSafari && BROWSER.versionAtLeast("5.0")) ||
+  (BROWSER.isOpera &&
+    BROWSER.versionAtLeast("9.52") &&
+    !BROWSER.versionAtLeast("14.0"));
+
+var CONFIG = MathJax.Hub.CombineConfig("default", {
+  prefer: {
+    MSIE: "HTML",
+    Firefox: "HTML",
+    Opera: "HTML",
+    Chrome: "CommonHTML",
+    Safari: "HTML",
+    other: "HTML",
+  },
+});
+
+var jax = CONFIG.prefer[BROWSER] || CONFIG.prefer.other;
+if (jax === "HTML") jax = "HTML-CSS";
+else if (jax === "MML") jax = "NativeMML";
+if (jax === "NativeMML" && !canUseMML) jax = CONFIG.prefer.other;
+
+MathJax.Hub.Config({
+  jax: ["input/TeX", "output/" + jax],
+  extensions: ["tex2jax.js"],
+  TeX: {
+    extensions: [
+      "AMSmath.js",
+      "AMSsymbols.js",
+      "noErrors.js",
+      "noUndefined.js",
+    ],
+  },
+  "HTML-CSS": { availableFonts: ["TeX"] },
+  tex2jax: {
+    inlineMath: [
+      ["$", "$"],
+      ["\\(", "\\)"],
+    ],
+    displayMath: [
+      ["$$", "$$"],
+      ["\\[", "\\]"],
+    ],
+    processEscapes: true,
+  },
+  "fast-preview": { disabled: true },
+  showProcessingMessages: false,
+  "HTML-CSS": { imageFont: null },
+});
diff --git a/static/js/postHandler.js b/static/js/postHandler.js
new file mode 100644
index 00000000..c6f169b3
--- /dev/null
+++ b/static/js/postHandler.js
@@ -0,0 +1,158 @@
+function editComment(id) {
+    document.getElementById('comment-body-' + id).style.display = 'none';
+    document.getElementById('edit-form-' + id).style.display = 'block';
+}
+
+function cancelEdit(id) {
+    document.getElementById('comment-body-' + id).style.display = 'block';
+    document.getElementById('edit-form-' + id).style.display = 'none';
+}
+
+function cd() {
+    // we will clear the user cookies
+    document.cookie = 'anonymous_name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    document.cookie = 'anonymous_email=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    document.cookie = 'anonymous_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    window.location.reload();
+}
+
+function toggleTips() {
+    var tips = document.getElementById('tips');
+    $('#tips').slideToggle('fast');
+}
+
+function toggleGotchas() {
+    var gotchas = document.getElementById('gotchas');
+    $('#gotchas').slideToggle('fast');
+}
+
+function toggleAnon() {
+    $('#ancmClick').toggle();
+    $('#anonymous-comment-form').slideToggle('fast');
+};
+
+function toggleCreds() {
+    $('#creds').slideToggle('fast');
+};
+
+function lightsOff() {
+    // #overlay. Go from 0.8 -> 0.9 opacity
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    var windowWidth = document.documentElement.clientWidth;
+    if (currentStatus == 'off') {
+        $('#overlay').fadeTo('fast', 0.8);
+        if (windowWidth > 480) {
+            $('#sidebar').children().fadeTo('fast', 1);
+            $('#header').fadeTo('fast', 1);
+            $('#footer').fadeTo('fast', 1);
+        }
+        $('#lightsStatus').attr('data-status', 'on');
+        $('#lightsStatus').attr('src', onImage);
+    } else {
+        $('#overlay').fadeTo('fast', 0.9);
+        if (windowWidth > 480) {
+            $('#sidebar').children().fadeTo('fast', 0.2);
+            $('#header').fadeTo('fast', 0.2);
+            $('#footer').fadeTo('fast', 0.2);
+        }
+        $('#lightsStatus').attr('data-status', 'off');
+        $('#lightsStatus').attr('src', offImage);
+    }
+}
+
+function blindMode() {
+    var articleBody = $('#article-body');
+    var currentStatus = $('#blindStatus').attr('data-status');
+    var windowWidth = document.documentElement.clientWidth;
+    if (currentStatus == 'off') {
+        // turn on. On phones set font-size to 16px (<480 units), on desktop set font-size to 13px
+        if (windowWidth < 480) {
+            articleBody.animate({
+                fontSize: '15px'
+              }, 100);             
+        } else {
+            articleBody.animate({
+                fontSize: '13px'
+              }, 100);
+           
+        }
+        $('#blindStatus').attr('data-status', 'on');
+        $('#blindStatus').attr('src', onImage);
+    } else {
+        // turn off. Phones - 12px, Desktop - 11px
+        if (windowWidth < 480) {
+            articleBody.animate({
+                fontSize: '13px'
+            }, 100);
+        } else {
+            articleBody.animate({
+                fontSize: '11px'
+            }, 100);
+        }
+        $('#blindStatus').attr('data-status', 'off');
+        $('#blindStatus').attr('src', offImage);
+    }
+}
+
+var allInputElementsOnPage = $('input');
+
+// If lights are off, then on hover on sidebar .children(), fadeTo 1 for currently hovered child
+$('#sidebar').children().hover(function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        $(this).fadeTo('fast', 0.85);
+    }
+}, function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    // if none of the input elements are focused, then fadeTo 0.2
+    if (currentStatus == 'off' && allInputElementsOnPage.is(':focus') == false) {
+        $(this).fadeTo('fast', 0.2);
+    }
+});
+
+// same for header and footer
+$('#header').hover(function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        $(this).fadeTo('fast', 0.85);
+    }
+}, function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off' && allInputElementsOnPage.is(':focus') == false) {
+        $(this).fadeTo('fast', 0.2);
+    }
+});
+
+$('#search-form > input[type=text]').blur(function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        var isHovered = $('#header').is(':hover');
+        if (isHovered == false) {
+            $('#header').fadeTo('fast', 0.2);
+        }
+    }
+});
+
+$('#login-form > input').blur(function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        var isHovered = $('#login-area').is(':hover');
+        if (isHovered == false) {
+            $('#login-area').fadeTo('fast', 0.2);
+        }
+    }
+});
+
+$('#footer').hover(function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        $(this).fadeTo('fast', 0.85);
+    }
+}, function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        $(this).fadeTo('fast', 0.2);
+    }
+});
+
+
diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index af0bb774..ddb12727 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -144,70 +144,14 @@
         </p>
       </div>
     </div>
+    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
+    <script src="{% static 'js/globals.js' %}"></script>
+    <script src="{% static 'js/phone_compatibility.js' %}"></script>
+    {% if request.COOKIES.summonOneko == 'true' %}
+      <script src="{% static 'js/oneko.js' %}"></script>
+    {% endif %}
+    {% block scripts %} {% endblock %}
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-72XTC500FR"></script>
   </body>
-  {% if request.COOKIES.summonOneko == 'true' %}
-    <script src="{% static 'js/oneko.js' %}"></script>
-  {% endif %}
-
-
-  <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
-  <script src="{% static 'js/phone_compatibility.js' %}"></script>
-  {% block scripts %} {% endblock %}
-  <!-- Google tag (gtag.js) -->
-  <script
-    async
-    src="https://www.googletagmanager.com/gtag/js?id=G-72XTC500FR"
-  ></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() {
-      dataLayer.push(arguments);
-    }
-    gtag("js", new Date());
-
-    gtag("config", "G-72XTC500FR");
-
-    // Smooth scroll to anchor
-    $(document).ready(function () {
-      $('a[href^="#"]').on("click", function (e) {
-        e.preventDefault();
-
-        const target = $(this.getAttribute("href"));
-        if (target.length) {
-          $("html, body")
-            .stop()
-            .animate(
-              {
-                scrollTop: target.offset().top,
-              },
-              500
-            );
-        };
-      });
-    });
-
-    document.addEventListener("DOMContentLoaded", function() {
-      var equationElements = document.getElementsByTagName("*");
-  
-      for (var i = 0; i < equationElements.length; i++) {
-        var element = equationElements[i];
-  
-        if (element.innerHTML.startsWith("$$") && element.innerHTML.endsWith("$$")) {
-          element.style.overflowX = "scroll";
-          element.style.whiteSpace = "nowrap";
-          element.classList.add("equation-container");
-        }
-      }
-    });
-
-    function summonOneko() {
-      document.cookie = "summonOneko=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
-      location.reload();
-    } 
-
-    function withdrawOneko() {
-      document.cookie = "summonOneko=false; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
-      location.reload();
-    }
-  </script>
 </html>
diff --git a/templates/blog/partials/mathjax.html b/templates/blog/partials/mathjax.html
index 3697590d..5f80d390 100644
--- a/templates/blog/partials/mathjax.html
+++ b/templates/blog/partials/mathjax.html
@@ -1,42 +1,3 @@
 {% load static %}
-<script
-  type="text/javascript"
-  src="{% static 'js/MathJax/MathJax.js' %}?config=default"
-></script>
-<script type="text/x-mathjax-config">
-  var BROWSER = MathJax.Hub.Browser;
-
-  var canUseMML = (BROWSER.isFirefox && BROWSER.versionAtLeast("1.5")) ||
-                  (BROWSER.isMSIE    && BROWSER.hasMathPlayer) ||
-                  (BROWSER.isSafari  && BROWSER.versionAtLeast("5.0")) ||
-                  (BROWSER.isOpera   && BROWSER.versionAtLeast("9.52") &&
-                                       !BROWSER.versionAtLeast("14.0"));
-
-  var CONFIG = MathJax.Hub.CombineConfig("default",{
-    prefer: {
-      MSIE:"HTML", Firefox:"HTML", Opera:"HTML", Chrome:"CommonHTML", Safari:"HTML",
-      other:"HTML"
-    }
-  });
-
-  var jax = CONFIG.prefer[BROWSER] || CONFIG.prefer.other;
-  if (jax === "HTML") jax = "HTML-CSS"; else if (jax === "MML")  jax = "NativeMML";
-  if (jax === "NativeMML" && !canUseMML) jax = CONFIG.prefer.other;
-
-  MathJax.Hub.Config({
-    jax: ["input/TeX","output/"+jax],
-    extensions: ["tex2jax.js"],
-    TeX: {
-      extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
-    },
-    "HTML-CSS": { availableFonts: ["TeX"] },
-    tex2jax: {
-      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
-      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
-      processEscapes: true
-    },
-    "fast-preview": { disabled: true },
-    showProcessingMessages: false,
-    "HTML-CSS": { imageFont: null }
-  });
-</script>
+<script type="text/javascript" src="{% static 'js/MathJax/MathJax.js' %}?config=default"></script>
+<script type="text/x-mathjax-config" src="{% static 'js/mjxConfig.js' %}"></script>
diff --git a/templates/blog/post.html b/templates/blog/post.html
index a5ae1542..4e44bfe7 100644
--- a/templates/blog/post.html
+++ b/templates/blog/post.html
@@ -339,123 +339,25 @@
     </div>
 </div>
 
-
 {% endif %}
 {% endblock %}
 {% block scripts %}
-{% comment %} check if there are error messages with extra tags 'spam' to see if the comment was spam {% endcomment %}
-{% if messages %}
-{% for message in messages %}
-{% if 'spam' in message.tags %}
-<script type="text/javascript">
-    alert('Your comment was marked as spam. If you think this is a mistake, please contact me.');
-</script>
-{% endif %}
-{% endfor %}
-{% endif %}
 <script type="text/javascript">
-    function editComment(id) {
-        document.getElementById('comment-body-' + id).style.display = 'none';
-        document.getElementById('edit-form-' + id).style.display = 'block';
-    }
-
-    function cancelEdit(id) {
-        document.getElementById('comment-body-' + id).style.display = 'block';
-        document.getElementById('edit-form-' + id).style.display = 'none';
-    }
-
-    function cd() {
-        // we will clear the user cookies
-        document.cookie = 'anonymous_name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-        document.cookie = 'anonymous_email=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-        document.cookie = 'anonymous_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-        window.location.reload();
-    }
-
-    function toggleTips() {
-        var tips = document.getElementById('tips');
-        $('#tips').slideToggle('fast');
-    }
-
-    function toggleGotchas() {
-        var gotchas = document.getElementById('gotchas');
-        $('#gotchas').slideToggle('fast');
-    }
-
-    function toggleAnon() {
-        $('#ancmClick').toggle();
-        $('#anonymous-comment-form').slideToggle('fast');
-    };
-
-    function toggleCreds() {
-        $('#creds').slideToggle('fast');
-    };
-
-    function lightsOff() {
-        // #overlay. Go from 0.8 -> 0.9 opacity
-        var currentStatus = $('#lightsStatus').attr('data-status');
-        var windowWidth = document.documentElement.clientWidth;
-        if (currentStatus == 'off') {
-            $('#overlay').fadeTo('fast', 0.8);
-            if (windowWidth > 480) {
-                $('#sidebar').fadeTo('fast', 1);
-                $('#header').fadeTo('fast', 1);
-                $('#footer').fadeTo('fast', 1);
-            }
-            $('#lightsStatus').attr('data-status', 'on');
-            $('#lightsStatus').attr('src', "{% static 'images/site/on.png' %}");
-        } else {
-            $('#overlay').fadeTo('fast', 0.9);
-            if (windowWidth > 480) {
-                $('#sidebar').fadeTo('fast', 0.2);
-                $('#header').fadeTo('fast', 0.2);
-                $('#footer').fadeTo('fast', 0.2);
-            }
-            $('#lightsStatus').attr('data-status', 'off');
-            $('#lightsStatus').attr('src', "{% static 'images/site/off.png' %}");
-        }
-    }
-
-    function blindMode() {
-        var articleBody = $('#article-body');
-        var currentStatus = $('#blindStatus').attr('data-status');
-        var windowWidth = document.documentElement.clientWidth;
-        if (currentStatus == 'off') {
-            // turn on. On phones set font-size to 16px (<480 units), on desktop set font-size to 13px
-            if (windowWidth < 480) {
-                articleBody.animate({
-                    fontSize: '15px'
-                  }, 100);             
-            } else {
-                articleBody.animate({
-                    fontSize: '13px'
-                  }, 100);
-               
-            }
-            $('#blindStatus').attr('data-status', 'on');
-            $('#blindStatus').attr('src', "{% static 'images/site/on.png' %}");
-        } else {
-            // turn off. Phones - 12px, Desktop - 11px
-            if (windowWidth < 480) {
-                articleBody.animate({
-                    fontSize: '13px'
-                }, 100);
-            } else {
-                articleBody.animate({
-                    fontSize: '11px'
-                }, 100);
-            }
-            $('#blindStatus').attr('data-status', 'off');
-            $('#blindStatus').attr('src', "{% static 'images/site/off.png' %}");
-        }
-    }
-
+    var onImage = "{% static 'images/site/on.png' %}";
+    var offImage = "{% static 'images/site/off.png' %}";
+    {% if messages %}
+    {% for message in messages %}
+    {% if 'spam' in message.tags %}
+        alert('Your comment was marked as spam. If you think this is a mistake, please contact me.');
+    {% endif %}
+    {% endfor %}
+    {% endif %}
     {% if request.COOKIES.anonymous_name and request.COOKIES.anonymous_email and request.COOKIES.anonymous_token %}
-    $('#ancmClick').toggle();
-    $('#anonymous-comment-form').toggle();
+        $('#ancmClick').toggle();
+        $('#anonymous-comment-form').toggle();
     {% endif %}
 </script>
-
+<script type="text/javascript" src="{% static 'js/postHandler.js' %}"></script>
 {% include 'blog/partials/mathjax.html' %}
 {% endblock %}