added a javascript build pipeline for transpiling and minifying; updated readme

javascript/src/zulma_switchcss.js

@@ -0,0 +1,105 @@
+(function (switch_css) {
+    //Constants
+    const THEME_KEY = "ZULMA_THEME";
+    const STOP_BLINK_CSS_ID = "stop-blink";
+    const STYLESHEET_CLASSNAME = "stylesheet"
+
+    //Variables
+    let link = null;
+    let theme = localStorage.getItem(THEME_KEY);
+
+    //Private Methods
+    /* Called when the theme is changed */
+    function changeTheme(themeName, firstLoad) {
+        //create the css link element
+        var fileref = document.createElement("link");
+        fileref.rel = "stylesheet";
+        fileref.type = "text/css";
+        fileref.href = `/${themeName}.css`;
+
+        //append it to the head
+        link = document.getElementsByTagName("head")[0].appendChild(fileref);
+
+        //when it's loaded, call onLinkLoad
+        link.addEventListener('load', onLinkLoad);
+
+        //if this is the first load of the page, remove the current stylesheet early to avoid flash of wrongly styled content
+        if (firstLoad) {
+            removeStylesheets();
+        }
+
+        saveTheme(themeName);
+    };
+
+    function removeStylesheets() {
+        document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`).forEach((el) => {
+            el.remove();
+        });
+    }
+
+    /* The function called when the css has finished loading */
+    function onLinkLoad() {
+        link.removeEventListener('load', onLinkLoad);
+        //remove the previous stylesheet(s)
+        removeStylesheets();
+        //add stylesheet class
+        link.className += STYLESHEET_CLASSNAME;
+        //make body visible again if it was hidden
+        showBody();
+    };
+
+    /* Saves the current theme in localstorage */
+    function saveTheme(themeName) {
+        localStorage.setItem(THEME_KEY, themeName);
+    };
+
+    /* Hides the body of the page */
+    function hideBody() {
+        var head = document.getElementsByTagName('head')[0];
+        var style = document.createElement('style');
+
+        style.id = STOP_BLINK_CSS_ID;
+        style.setAttribute('type', 'text/css');
+
+        if (style.styleSheet) {
+            style.styleSheet.cssText = css;
+        } else {
+            style.appendChild(document.createTextNode('body{visibility:hidden;}'));
+        }
+        head.appendChild(style);
+    };
+
+    /* Shows the body of the page */
+    function showBody() {
+        let css = document.getElementById(STOP_BLINK_CSS_ID);
+        if (css)
+            css.remove();
+    };
+
+    //Public Methods
+    switch_css.init = function () {
+        //if user has selected and theme and it is not the current theme
+        if (theme && !document.getElementById(theme)) {
+            //hide the body to stop FOUC
+            hideBody();
+            //change the theme
+            changeTheme(theme, true);
+            //when the DOM is loaded, change the select to their current choice
+            window.addEventListener('DOMContentLoaded', () => {
+                document.querySelectorAll('#theme-select>option').forEach(element => {
+                    if (element.value === theme) {
+                        element.selected = 'selected';
+                    }
+                });
+            });
+        }
+        //when the DOM is loaded, set the dropdown to trigger the theme change
+        window.addEventListener('DOMContentLoaded', () => {
+            document.getElementById('theme-select').onchange = function () {
+                changeTheme(this.value);
+            }
+        });
+    }
+}(switch_css = window.switch_css || {}));
+
+switch_css.init();