added demo url
This commit is contained in:
parent
3835d0d9ce
commit
c59659ca1d
2 changed files with 155 additions and 153 deletions
|
@ -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
|
|
@ -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"]
|
||||||
|
|
Loading…
Add table
Reference in a new issue