Light Mode on Steriods; Move JS to files

3 files changed, 264 insertions, 0 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);
+    }
+});
+
+