diff --git a/javascript/src/zulma_switchcss.js b/javascript/src/zulma_switchcss.js index f292039..074a7fb 100644 --- a/javascript/src/zulma_switchcss.js +++ b/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 */ - function setThemeSelect(theme) { + /* Either sets the theme selection to the given theme, or removes it from the list */ + 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) - }); - } - } - - 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) + updateThemeSelect(theme, setSelected); }); } } @@ -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', () => { diff --git a/static/js/zulma_switchcss.js b/static/js/zulma_switchcss.js index 53c9679..0a86f39 100644 --- a/static/js/zulma_switchcss.js +++ b/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 \ No newline at end of file diff --git a/static/js/zulma_switchcss.js.map b/static/js/zulma_switchcss.js.map index 2db7d77..57cf5dd 100644 --- a/static/js/zulma_switchcss.js.map +++ b/static/js/zulma_switchcss.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/zulma_switchcss.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","switch_css","THEME_KEY","STOP_BLINK_CSS_ID","STYLESHEET_CLASSNAME","link","previousLink","theme","localStorage","getItem","changeTheme","themeName","firstLoad","fileref","document","createElement","rel","type","href","concat","id","getElementsByTagName","appendChild","addEventListener","onLinkLoad","onLinkError","querySelectorAll","removeStylesheets","setItem","saveTheme","forEach","el","remove","removeEventListener","className","showBody","removeItem","removeFromThemeSelect","elements","length","element","window","setThemeSelect","css","getElementById","selected","init","head","style","setAttribute","styleSheet","cssText","createTextNode","onchange","this"],"mappings":"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","file":"zulma_switchcss.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 2);\n","(function (switch_css) {\r\n //Constants\r\n const THEME_KEY = \"ZULMA_THEME\";\r\n const STOP_BLINK_CSS_ID = \"stop-blink\";\r\n const STYLESHEET_CLASSNAME = \"stylesheet\"\r\n\r\n //Variables\r\n let link = null;\r\n let previousLink = null;\r\n let theme = localStorage.getItem(THEME_KEY);\r\n\r\n //Private Methods\r\n /* Called when the theme is changed */\r\n function changeTheme(themeName, firstLoad) {\r\n //create the css link element\r\n var fileref = document.createElement(\"link\");\r\n fileref.rel = \"stylesheet\";\r\n fileref.type = \"text/css\";\r\n fileref.href = `/${themeName}.css`;\r\n fileref.id = themeName;\r\n\r\n //append it to the head\r\n link = document.getElementsByTagName(\"head\")[0].appendChild(fileref);\r\n\r\n //when it's loaded, call onLinkLoad\r\n link.addEventListener('load', onLinkLoad);\r\n //if it errors, call onLinkError\r\n link.addEventListener('error', onLinkError);\r\n\r\n //if this is the first load of the page, remove the current stylesheet early to avoid flash of wrongly styled content\r\n if (firstLoad) {\r\n //keep the old link in case something goes wrong\r\n previousLink = document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`)[0];\r\n removeStylesheets();\r\n }\r\n\r\n saveTheme(themeName);\r\n }\r\n\r\n /* Removes all current stylesheets on the page */\r\n function removeStylesheets() {\r\n document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`).forEach((el) => {\r\n el.remove();\r\n });\r\n }\r\n\r\n /* The function called when the css has finished loading */\r\n function onLinkLoad() {\r\n //remove event listeners\r\n link.removeEventListener('load', onLinkLoad);\r\n link.removeEventListener('error', onLinkError);\r\n //remove the previous stylesheet(s)\r\n removeStylesheets();\r\n //add stylesheet class\r\n link.className += STYLESHEET_CLASSNAME;\r\n //everything is good, so we don't need this\r\n previousLink = null;\r\n //make body visible again if it was hidden\r\n showBody();\r\n }\r\n\r\n function onLinkError() {\r\n //remove event listeners\r\n link.removeEventListener('load', onLinkLoad);\r\n link.removeEventListener('error', onLinkError);\r\n //remove theme from localstorage\r\n clearTheme();\r\n //remove theme from dropdown list\r\n removeFromThemeSelect(link.id);\r\n //remove link from page\r\n link.remove();\r\n //re-add the previous stylesheet (if any)\r\n if (previousLink) {\r\n document.getElementsByTagName(\"head\")[0].appendChild(previousLink);\r\n }\r\n //set the theme select to the previous stylesheet\r\n setThemeSelect(document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`)[0].id)\r\n //make body visible again if it was hidden\r\n showBody();\r\n }\r\n\r\n /* Saves the current theme in localstorage */\r\n function saveTheme(themeName) {\r\n localStorage.setItem(THEME_KEY, themeName);\r\n }\r\n\r\n /* Clears the current theme in localstorage */\r\n function clearTheme() {\r\n localStorage.removeItem(THEME_KEY);\r\n }\r\n\r\n /* Hides the body of the page */\r\n function hideBody() {\r\n let head = document.getElementsByTagName('head')[0];\r\n let style = document.createElement('style');\r\n let css = 'body{visibility:hidden;}';\r\n\r\n style.id = STOP_BLINK_CSS_ID;\r\n style.setAttribute('type', 'text/css');\r\n\r\n if (style.styleSheet) {\r\n style.styleSheet.cssText = css;\r\n } else {\r\n style.appendChild(document.createTextNode(css));\r\n }\r\n head.appendChild(style);\r\n }\r\n\r\n /* Shows the body of the page */\r\n function showBody() {\r\n let css = document.getElementById(STOP_BLINK_CSS_ID);\r\n if (css)\r\n css.remove();\r\n }\r\n\r\n /* Sets the theme selection to the given theme */\r\n function setThemeSelect(theme) {\r\n //get all select options\r\n let elements = document.querySelectorAll('#theme-select>option');\r\n //if there are elements, the page is loaded and continue\r\n if (elements.length) {\r\n elements.forEach(element => {\r\n if (element.value === theme) {\r\n element.selected = 'selected';\r\n }\r\n });\r\n } else {\r\n //if there are no elements, the page is not yet loaded; wait for loaded event and try again.\r\n window.addEventListener('DOMContentLoaded', () => {\r\n setThemeSelect(theme)\r\n });\r\n }\r\n }\r\n\r\n function removeFromThemeSelect(theme) {\r\n //get all select options\r\n let elements = document.querySelectorAll('#theme-select>option');\r\n //if there are elements, the page is loaded\r\n if (elements.length) {\r\n elements.forEach(element => {\r\n if (element.value === theme) {\r\n element.remove();\r\n }\r\n });\r\n } else {\r\n //if there are no elements, the page is not yet loaded; wait for loaded event and try again.\r\n window.addEventListener('DOMContentLoaded', () => {\r\n removeFromThemeSelect(theme)\r\n });\r\n }\r\n }\r\n\r\n //Public Methods\r\n switch_css.init = function () {\r\n //if user has selected and theme and it is not the current theme\r\n if (theme && !document.getElementById(theme)) {\r\n //hide the body to stop FOUC\r\n hideBody();\r\n //change the theme\r\n changeTheme(theme, true);\r\n //when the DOM is loaded, change the select to their current choice\r\n setThemeSelect(theme);\r\n }\r\n //when the DOM is loaded, set the dropdown to trigger the theme change\r\n window.addEventListener('DOMContentLoaded', () => {\r\n document.getElementById('theme-select').onchange = function () {\r\n changeTheme(this.value);\r\n }\r\n });\r\n }\r\n}(switch_css = window.switch_css || {})); // eslint-disable-line\r\n\r\nswitch_css.init(); // eslint-disable-line"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/zulma_switchcss.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","switch_css","THEME_KEY","STOP_BLINK_CSS_ID","STYLESHEET_CLASSNAME","previousLink","theme","localStorage","getItem","onLinkLoad","event","link","currentTarget","removeEventListener","onLinkError","removeStylesheets","className","showBody","removeItem","updateThemeSelect","id","remove","document","getElementsByTagName","appendChild","querySelectorAll","concat","changeTheme","themeName","firstLoad","fileref","createElement","rel","type","href","addEventListener","setItem","saveTheme","forEach","el","css","getElementById","setSelected","elements","length","element","selected","window","init","head","style","setAttribute","styleSheet","cssText","createTextNode","onchange","this"],"mappings":"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","file":"zulma_switchcss.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 2);\n","(function (switch_css) {\r\n //Constants\r\n const THEME_KEY = \"ZULMA_THEME\";\r\n const STOP_BLINK_CSS_ID = \"stop-blink\";\r\n const STYLESHEET_CLASSNAME = \"stylesheet\"\r\n\r\n //Variables\r\n //let link = null;\r\n let previousLink = null;\r\n let theme = localStorage.getItem(THEME_KEY);\r\n\r\n //Events\r\n /* The function called when the css has finished loading */\r\n const onLinkLoad = (event) => {\r\n //remove event listeners\r\n let link = event.currentTarget;\r\n link.removeEventListener('load', onLinkLoad);\r\n link.removeEventListener('error', onLinkError);\r\n //remove the previous stylesheet(s)\r\n removeStylesheets();\r\n //add stylesheet class\r\n link.className += STYLESHEET_CLASSNAME;\r\n //everything is good, so we don't need this\r\n previousLink = null;\r\n //make body visible again if it was hidden\r\n showBody();\r\n }\r\n\r\n const onLinkError = (event) => {\r\n //remove event listeners\r\n let link = event.currentTarget;\r\n link.removeEventListener('load', onLinkLoad);\r\n link.removeEventListener('error', onLinkError);\r\n //remove theme from localstorage\r\n clearTheme();\r\n //remove theme from dropdown list\r\n updateThemeSelect(link.id, false);\r\n //remove link from page\r\n link.remove();\r\n //re-add the previous stylesheet (if any)\r\n if (previousLink) {\r\n document.getElementsByTagName(\"head\")[0].appendChild(previousLink);\r\n }\r\n //set the theme select to the previous stylesheet\r\n updateThemeSelect(document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`)[0].id, true)\r\n //make body visible again if it was hidden\r\n showBody();\r\n }\r\n\r\n //Private Methods\r\n /* Called when the theme is changed */\r\n function changeTheme(themeName, firstLoad) {\r\n //create the css link element\r\n var fileref = document.createElement(\"link\");\r\n fileref.rel = \"stylesheet\";\r\n fileref.type = \"text/css\";\r\n fileref.href = `/${themeName}.css`;\r\n fileref.id = themeName;\r\n\r\n //append it to the head\r\n let link = document.getElementsByTagName(\"head\")[0].appendChild(fileref);\r\n\r\n //when it's loaded, call onLinkLoad\r\n link.addEventListener('load', onLinkLoad);\r\n //if it errors, call onLinkError\r\n link.addEventListener('error', onLinkError);\r\n\r\n //if this is the first load of the page, remove the current stylesheet early to avoid flash of wrongly styled content\r\n if (firstLoad) {\r\n //keep the old link in case something goes wrong\r\n previousLink = document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`)[0];\r\n removeStylesheets();\r\n }\r\n\r\n saveTheme(themeName);\r\n }\r\n\r\n /* Removes all current stylesheets on the page */\r\n function removeStylesheets() {\r\n document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`).forEach((el) => {\r\n el.remove();\r\n });\r\n }\r\n\r\n /* Saves the current theme in localstorage */\r\n function saveTheme(themeName) {\r\n localStorage.setItem(THEME_KEY, themeName);\r\n }\r\n\r\n /* Clears the current theme in localstorage */\r\n function clearTheme() {\r\n localStorage.removeItem(THEME_KEY);\r\n }\r\n\r\n /* Hides the body of the page */\r\n function hideBody() {\r\n let head = document.getElementsByTagName('head')[0];\r\n let style = document.createElement('style');\r\n let css = 'body{visibility:hidden;}';\r\n\r\n style.id = STOP_BLINK_CSS_ID;\r\n style.setAttribute('type', 'text/css');\r\n\r\n if (style.styleSheet) {\r\n style.styleSheet.cssText = css;\r\n } else {\r\n style.appendChild(document.createTextNode(css));\r\n }\r\n head.appendChild(style);\r\n }\r\n\r\n /* Shows the body of the page */\r\n function showBody() {\r\n let css = document.getElementById(STOP_BLINK_CSS_ID);\r\n if (css)\r\n css.remove();\r\n }\r\n\r\n /* Either sets the theme selection to the given theme, or removes it from the list */\r\n function updateThemeSelect(theme, setSelected) {\r\n //get all select options\r\n let elements = document.querySelectorAll('#theme-select>option');\r\n //if there are elements, the page is loaded and continue\r\n if (elements.length) {\r\n elements.forEach(element => {\r\n if (element.value === theme) {\r\n if (setSelected) {\r\n element.selected = 'selected';\r\n } else {\r\n element.remove();\r\n }\r\n }\r\n });\r\n } else {\r\n //if there are no elements, the page is not yet loaded; wait for loaded event and try again.\r\n window.addEventListener('DOMContentLoaded', () => {\r\n updateThemeSelect(theme, setSelected);\r\n });\r\n }\r\n }\r\n\r\n //Public Methods\r\n switch_css.init = function () {\r\n //if user has selected and theme and it is not the current theme\r\n if (theme && !document.getElementById(theme)) {\r\n //hide the body to stop FOUC\r\n hideBody();\r\n //change the theme\r\n changeTheme(theme, true);\r\n //when the DOM is loaded, change the select to their current choice\r\n updateThemeSelect(theme, true);\r\n }\r\n //when the DOM is loaded, set the dropdown to trigger the theme change\r\n window.addEventListener('DOMContentLoaded', () => {\r\n document.getElementById('theme-select').onchange = function () {\r\n changeTheme(this.value);\r\n }\r\n });\r\n }\r\n}(switch_css = window.switch_css || {})); // eslint-disable-line\r\n\r\nswitch_css.init(); // eslint-disable-line"],"sourceRoot":""} \ No newline at end of file