From 9fe01a82b91696dd1d61350c97bb201fe7d4e35e Mon Sep 17 00:00:00 2001 From: Bobby Date: Tue, 6 Jun 2023 01:37:12 -0400 Subject: Light Mode on Steriods; Move JS to files --- static/js/globals.js | 53 ++++++++++++ static/js/mjxConfig.js | 53 ++++++++++++ static/js/postHandler.js | 158 +++++++++++++++++++++++++++++++++++ templates/blog/partials/base.html | 74 ++-------------- templates/blog/partials/mathjax.html | 43 +--------- templates/blog/post.html | 122 +++------------------------ 6 files changed, 287 insertions(+), 216 deletions(-) create mode 100644 static/js/globals.js create mode 100644 static/js/mjxConfig.js create mode 100644 static/js/postHandler.js 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 @@

+ + + + {% if request.COOKIES.summonOneko == 'true' %} + + {% endif %} + {% block scripts %} {% endblock %} + + - {% if request.COOKIES.summonOneko == 'true' %} - - {% endif %} - - - - - {% block scripts %} {% endblock %} - - - 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 %} - - + + 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 @@ - {% 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 %} - -{% endif %} -{% endfor %} -{% endif %} - + {% include 'blog/partials/mathjax.html' %} {% endblock %} -- cgit v1.2.3