added demo url

This commit is contained in:
Worble 2019-05-12 22:48:29 +01:00
parent 3835d0d9ce
commit c59659ca1d
2 changed files with 155 additions and 153 deletions

View file

@ -2,20 +2,19 @@
//Constants //Constants
const THEME_KEY = "ZULMA_THEME"; const THEME_KEY = "ZULMA_THEME";
const STOP_BLINK_CSS_ID = "stop-blink"; const STOP_BLINK_CSS_ID = "stop-blink";
const STYLESHEET_CLASSNAME = "stylesheet" const STYLESHEET_CLASSNAME = "stylesheet";
//Variables //Variables
//let link = null;
let previousLink = null; let previousLink = null;
let theme = localStorage.getItem(THEME_KEY); let theme = localStorage.getItem(THEME_KEY);
//Events //Events
/* The function called when the css has finished loading */ /* The function called when the css has finished loading */
const onLinkLoad = (event) => { const onLinkLoad = event => {
//remove event listeners //remove event listeners
let link = event.currentTarget; let link = event.currentTarget;
link.removeEventListener('load', onLinkLoad); link.removeEventListener("load", onLinkLoad);
link.removeEventListener('error', onLinkError); link.removeEventListener("error", onLinkError);
//remove the previous stylesheet(s) //remove the previous stylesheet(s)
removeStylesheets(); removeStylesheets();
//add stylesheet class //add stylesheet class
@ -24,13 +23,13 @@
previousLink = null; previousLink = null;
//make body visible again if it was hidden //make body visible again if it was hidden
showBody(); showBody();
} };
const onLinkError = (event) => { const onLinkError = event => {
//remove event listeners //remove event listeners
let link = event.currentTarget; let link = event.currentTarget;
link.removeEventListener('load', onLinkLoad); link.removeEventListener("load", onLinkLoad);
link.removeEventListener('error', onLinkError); link.removeEventListener("error", onLinkError);
//remove theme from localstorage //remove theme from localstorage
clearTheme(); clearTheme();
//remove theme from dropdown list //remove theme from dropdown list
@ -42,10 +41,13 @@
document.getElementsByTagName("head")[0].appendChild(previousLink); document.getElementsByTagName("head")[0].appendChild(previousLink);
} }
//set the theme select to the previous stylesheet //set the theme select to the previous stylesheet
updateThemeSelect(document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`)[0].id, true) updateThemeSelect(
document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`)[0].id,
true
);
//make body visible again if it was hidden //make body visible again if it was hidden
showBody(); showBody();
} };
//Private Methods //Private Methods
/* Called when the theme is changed */ /* Called when the theme is changed */
@ -61,9 +63,9 @@
let link = document.getElementsByTagName("head")[0].appendChild(fileref); let link = document.getElementsByTagName("head")[0].appendChild(fileref);
//when it's loaded, call onLinkLoad //when it's loaded, call onLinkLoad
link.addEventListener('load', onLinkLoad); link.addEventListener("load", onLinkLoad);
//if it errors, call onLinkError //if it errors, call onLinkError
link.addEventListener('error', onLinkError); link.addEventListener("error", onLinkError);
//if this is the first load of the page, remove the current stylesheet early to avoid flash of wrongly styled content //if this is the first load of the page, remove the current stylesheet early to avoid flash of wrongly styled content
if (firstLoad) { if (firstLoad) {
@ -77,7 +79,7 @@
/* Removes all current stylesheets on the page */ /* Removes all current stylesheets on the page */
function removeStylesheets() { function removeStylesheets() {
document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`).forEach((el) => { document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`).forEach(el => {
el.remove(); el.remove();
}); });
} }
@ -94,12 +96,12 @@
/* Hides the body of the page */ /* Hides the body of the page */
function hideBody() { function hideBody() {
let head = document.getElementsByTagName('head')[0]; let head = document.getElementsByTagName("head")[0];
let style = document.createElement('style'); let style = document.createElement("style");
let css = 'body{visibility:hidden;}'; let css = "body{visibility:hidden;}";
style.id = STOP_BLINK_CSS_ID; style.id = STOP_BLINK_CSS_ID;
style.setAttribute('type', 'text/css'); style.setAttribute("type", "text/css");
if (style.styleSheet) { if (style.styleSheet) {
style.styleSheet.cssText = css; style.styleSheet.cssText = css;
@ -112,20 +114,19 @@
/* Shows the body of the page */ /* Shows the body of the page */
function showBody() { function showBody() {
let css = document.getElementById(STOP_BLINK_CSS_ID); let css = document.getElementById(STOP_BLINK_CSS_ID);
if (css) if (css) css.remove();
css.remove();
} }
/* Either sets the theme selection to the given theme, or removes it from the list */ /* Either sets the theme selection to the given theme, or removes it from the list */
function updateThemeSelect(theme, setSelected) { function updateThemeSelect(theme, setSelected) {
//get all select options //get all select options
let elements = document.querySelectorAll('#theme-select>option'); let elements = document.querySelectorAll("#theme-select>option");
//if there are elements, the page is loaded and continue //if there are elements, the page is loaded and continue
if (elements.length) { if (elements.length) {
elements.forEach(element => { elements.forEach(element => {
if (element.value === theme) { if (element.value === theme) {
if (setSelected) { if (setSelected) {
element.selected = 'selected'; element.selected = "selected";
} else { } else {
element.remove(); element.remove();
} }
@ -133,7 +134,7 @@
}); });
} else { } else {
//if there are no elements, the page is not yet loaded; wait for loaded event and try again. //if there are no elements, the page is not yet loaded; wait for loaded event and try again.
window.addEventListener('DOMContentLoaded', () => { window.addEventListener("DOMContentLoaded", () => {
updateThemeSelect(theme, setSelected); updateThemeSelect(theme, setSelected);
}); });
} }
@ -151,12 +152,12 @@
updateThemeSelect(theme, true); updateThemeSelect(theme, true);
} }
//when the DOM is loaded, set the dropdown to trigger the theme change //when the DOM is loaded, set the dropdown to trigger the theme change
window.addEventListener('DOMContentLoaded', () => { window.addEventListener("DOMContentLoaded", () => {
document.getElementById('theme-select').onchange = function () { document.getElementById("theme-select").onchange = function() {
changeTheme(this.value); changeTheme(this.value);
} };
}); });
} };
}(switch_css = window.switch_css || {})); // eslint-disable-line })((switch_css = window.switch_css || {})); // eslint-disable-line
switch_css.init(); // eslint-disable-line switch_css.init(); // eslint-disable-line

View file

@ -2,6 +2,7 @@ name = "Zulma"
description = "A zola theme based off bulma.css" description = "A zola theme based off bulma.css"
license = "MIT" license = "MIT"
min_version = "0.6.0" min_version = "0.6.0"
demo = "https://festive-morse-47d46c.netlify.com/"
[extra] [extra]
zulma_themes = ["default", "darkly", "flatly", "pulse", "simplex", "lux", "slate", "solar", "superhero"] zulma_themes = ["default", "darkly", "flatly", "pulse", "simplex", "lux", "slate", "solar", "superhero"]