some js updates

javascript/src/zulma_switchcss.js

@@ -5,10 +5,48 @@
     const STYLESHEET_CLASSNAME = "stylesheet"
 
     //Variables
-    let link = null;
+    //let link = null;
     let previousLink = null;
     let theme = localStorage.getItem(THEME_KEY);
 
+    //Events
+    /* The function called when the css has finished loading */
+    const onLinkLoad = (event) => {
+        //remove event listeners
+        let link = event.currentTarget;
+        link.removeEventListener('load', onLinkLoad);
+        link.removeEventListener('error', onLinkError);
+        //remove the previous stylesheet(s)
+        removeStylesheets();
+        //add stylesheet class
+        link.className += STYLESHEET_CLASSNAME;
+        //everything is good, so we don't need this
+        previousLink = null;
+        //make body visible again if it was hidden
+        showBody();
+    }
+
+    const onLinkError = (event) => {
+        //remove event listeners
+        let link = event.currentTarget;
+        link.removeEventListener('load', onLinkLoad);
+        link.removeEventListener('error', onLinkError);
+        //remove theme from localstorage
+        clearTheme();
+        //remove theme from dropdown list
+        updateThemeSelect(link.id, false);
+        //remove link from page
+        link.remove();
+        //re-add the previous stylesheet (if any)
+        if (previousLink) {
+            document.getElementsByTagName("head")[0].appendChild(previousLink);
+        }
+        //set the theme select to the previous stylesheet
+        updateThemeSelect(document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`)[0].id, true)
+        //make body visible again if it was hidden
+        showBody();
+    }
+
     //Private Methods
     /* Called when the theme is changed */
     function changeTheme(themeName, firstLoad) {
@@ -20,7 +58,7 @@
         fileref.id = themeName;
 
         //append it to the head
-        link = document.getElementsByTagName("head")[0].appendChild(fileref);
+        let link = document.getElementsByTagName("head")[0].appendChild(fileref);
 
         //when it's loaded, call onLinkLoad
         link.addEventListener('load', onLinkLoad);
@@ -44,41 +82,6 @@
         });
     }
 
-    /* The function called when the css has finished loading */
-    function onLinkLoad() {
-        //remove event listeners
-        link.removeEventListener('load', onLinkLoad);
-        link.removeEventListener('error', onLinkError);
-        //remove the previous stylesheet(s)
-        removeStylesheets();
-        //add stylesheet class
-        link.className += STYLESHEET_CLASSNAME;
-        //everything is good, so we don't need this
-        previousLink = null;
-        //make body visible again if it was hidden
-        showBody();
-    }
-
-    function onLinkError() {
-        //remove event listeners
-        link.removeEventListener('load', onLinkLoad);
-        link.removeEventListener('error', onLinkError);
-        //remove theme from localstorage
-        clearTheme();
-        //remove theme from dropdown list
-        removeFromThemeSelect(link.id);
-        //remove link from page
-        link.remove();
-        //re-add the previous stylesheet (if any)
-        if (previousLink) {
-            document.getElementsByTagName("head")[0].appendChild(previousLink);
-        }
-        //set the theme select to the previous stylesheet
-        setThemeSelect(document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`)[0].id)
-        //make body visible again if it was hidden
-        showBody();
-    }
-
     /* Saves the current theme in localstorage */
     function saveTheme(themeName) {
         localStorage.setItem(THEME_KEY, themeName);
@@ -113,39 +116,25 @@
             css.remove();
     }
 
-    /* Sets the theme selection to the given theme */
+    /* Either sets the theme selection to the given theme, or removes it from the list */
-    function setThemeSelect(theme) {
+    function updateThemeSelect(theme, setSelected) {
         //get all select options
         let elements = document.querySelectorAll('#theme-select>option');
         //if there are elements, the page is loaded and continue
         if (elements.length) {
             elements.forEach(element => {
                 if (element.value === theme) {
-                    element.selected = 'selected';
+                    if (setSelected) {
+                        element.selected = 'selected';
+                    } else {
+                        element.remove();
+                    }
                 }
             });
         } else {
             //if there are no elements, the page is not yet loaded; wait for loaded event and try again.
             window.addEventListener('DOMContentLoaded', () => {
-                setThemeSelect(theme)
+                updateThemeSelect(theme, setSelected);
-            });
-        }
-    }
-
-    function removeFromThemeSelect(theme) {
-        //get all select options
-        let elements = document.querySelectorAll('#theme-select>option');
-        //if there are elements, the page is loaded
-        if (elements.length) {
-            elements.forEach(element => {
-                if (element.value === theme) {
-                    element.remove();
-                }
-            });
-        } else {
-            //if there are no elements, the page is not yet loaded; wait for loaded event and try again.
-            window.addEventListener('DOMContentLoaded', () => {
-                removeFromThemeSelect(theme)
             });
         }
     }
@@ -159,7 +148,7 @@
             //change the theme
             changeTheme(theme, true);
             //when the DOM is loaded, change the select to their current choice
-            setThemeSelect(theme);
+            updateThemeSelect(theme, true);
         }
         //when the DOM is loaded, set the dropdown to trigger the theme change
         window.addEventListener('DOMContentLoaded', () => {

static/js/zulma_switchcss.js

@@ -1,2 +1,2 @@
-!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}({2:function(e,t){!function(e){var t="ZULMA_THEME",n="stop-blink",o="stylesheet",r=null,c=null,l=localStorage.getItem(t);function i(e,n){var l=document.createElement("link");l.rel="stylesheet",l.type="text/css",l.href="/".concat(e,".css"),l.id=e,(r=document.getElementsByTagName("head")[0].appendChild(l)).addEventListener("load",d),r.addEventListener("error",a),n&&(c=document.querySelectorAll(".".concat(o))[0],u()),function(e){localStorage.setItem(t,e)}(e)}function u(){document.querySelectorAll(".".concat(o)).forEach(function(e){e.remove()})}function d(){r.removeEventListener("load",d),r.removeEventListener("error",a),u(),r.className+=o,c=null,s()}function a(){r.removeEventListener("load",d),r.removeEventListener("error",a),localStorage.removeItem(t),function e(t){var n=document.querySelectorAll("#theme-select>option");n.length?n.forEach(function(e){e.value===t&&e.remove()}):window.addEventListener("DOMContentLoaded",function(){e(t)})}(r.id),r.remove(),c&&document.getElementsByTagName("head")[0].appendChild(c),f(document.querySelectorAll(".".concat(o))[0].id),s()}function s(){var e=document.getElementById(n);e&&e.remove()}function f(e){var t=document.querySelectorAll("#theme-select>option");t.length?t.forEach(function(t){t.value===e&&(t.selected="selected")}):window.addEventListener("DOMContentLoaded",function(){f(e)})}e.init=function(){var e,t,o;l&&!document.getElementById(l)&&(e=document.getElementsByTagName("head")[0],t=document.createElement("style"),o="body{visibility:hidden;}",t.id=n,t.setAttribute("type","text/css"),t.styleSheet?t.styleSheet.cssText=o:t.appendChild(document.createTextNode(o)),e.appendChild(t),i(l,!0),f(l)),window.addEventListener("DOMContentLoaded",function(){document.getElementById("theme-select").onchange=function(){i(this.value)}})}}(switch_css=window.switch_css||{}),switch_css.init()}});
+!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}({2:function(e,t){!function(e){var t="ZULMA_THEME",n="stop-blink",o="stylesheet",r=null,c=localStorage.getItem(t),l=function e(t){var n=t.currentTarget;n.removeEventListener("load",e),n.removeEventListener("error",i),a(),n.className+=o,r=null,d()},i=function e(n){var c=n.currentTarget;c.removeEventListener("load",l),c.removeEventListener("error",e),localStorage.removeItem(t),s(c.id,!1),c.remove(),r&&document.getElementsByTagName("head")[0].appendChild(r),s(document.querySelectorAll(".".concat(o))[0].id,!0),d()};function u(e,n){var c=document.createElement("link");c.rel="stylesheet",c.type="text/css",c.href="/".concat(e,".css"),c.id=e;var u=document.getElementsByTagName("head")[0].appendChild(c);u.addEventListener("load",l),u.addEventListener("error",i),n&&(r=document.querySelectorAll(".".concat(o))[0],a()),function(e){localStorage.setItem(t,e)}(e)}function a(){document.querySelectorAll(".".concat(o)).forEach(function(e){e.remove()})}function d(){var e=document.getElementById(n);e&&e.remove()}function s(e,t){var n=document.querySelectorAll("#theme-select>option");n.length?n.forEach(function(n){n.value===e&&(t?n.selected="selected":n.remove())}):window.addEventListener("DOMContentLoaded",function(){s(e,t)})}e.init=function(){var e,t,o;c&&!document.getElementById(c)&&(e=document.getElementsByTagName("head")[0],t=document.createElement("style"),o="body{visibility:hidden;}",t.id=n,t.setAttribute("type","text/css"),t.styleSheet?t.styleSheet.cssText=o:t.appendChild(document.createTextNode(o)),e.appendChild(t),u(c,!0),s(c,!0)),window.addEventListener("DOMContentLoaded",function(){document.getElementById("theme-select").onchange=function(){u(this.value)}})}}(switch_css=window.switch_css||{}),switch_css.init()}});
 //# sourceMappingURL=zulma_switchcss.js.map