added demo url
This commit is contained in:
parent
3835d0d9ce
commit
c59659ca1d
2 changed files with 155 additions and 153 deletions
|
@ -1,162 +1,163 @@
|
||||||
(function (switch_css) {
|
(function(switch_css) {
|
||||||
//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
|
||||||
link.className += STYLESHEET_CLASSNAME;
|
link.className += STYLESHEET_CLASSNAME;
|
||||||
//everything is good, so we don't need this
|
//everything is good, so we don't need this
|
||||||
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 => {
|
||||||
|
//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) {
|
||||||
|
//create the css link element
|
||||||
|
var fileref = document.createElement("link");
|
||||||
|
fileref.rel = "stylesheet";
|
||||||
|
fileref.type = "text/css";
|
||||||
|
fileref.href = `/${themeName}.css`;
|
||||||
|
fileref.id = themeName;
|
||||||
|
|
||||||
|
//append it to the head
|
||||||
|
let link = document.getElementsByTagName("head")[0].appendChild(fileref);
|
||||||
|
|
||||||
|
//when it's loaded, call onLinkLoad
|
||||||
|
link.addEventListener("load", onLinkLoad);
|
||||||
|
//if it errors, call 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 (firstLoad) {
|
||||||
|
//keep the old link in case something goes wrong
|
||||||
|
previousLink = document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`)[0];
|
||||||
|
removeStylesheets();
|
||||||
}
|
}
|
||||||
|
|
||||||
const onLinkError = (event) => {
|
saveTheme(themeName);
|
||||||
//remove event listeners
|
}
|
||||||
let link = event.currentTarget;
|
|
||||||
link.removeEventListener('load', onLinkLoad);
|
/* Removes all current stylesheets on the page */
|
||||||
link.removeEventListener('error', onLinkError);
|
function removeStylesheets() {
|
||||||
//remove theme from localstorage
|
document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`).forEach(el => {
|
||||||
clearTheme();
|
el.remove();
|
||||||
//remove theme from dropdown list
|
});
|
||||||
updateThemeSelect(link.id, false);
|
}
|
||||||
//remove link from page
|
|
||||||
link.remove();
|
/* Saves the current theme in localstorage */
|
||||||
//re-add the previous stylesheet (if any)
|
function saveTheme(themeName) {
|
||||||
if (previousLink) {
|
localStorage.setItem(THEME_KEY, themeName);
|
||||||
document.getElementsByTagName("head")[0].appendChild(previousLink);
|
}
|
||||||
|
|
||||||
|
/* Clears the current theme in localstorage */
|
||||||
|
function clearTheme() {
|
||||||
|
localStorage.removeItem(THEME_KEY);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hides the body of the page */
|
||||||
|
function hideBody() {
|
||||||
|
let head = document.getElementsByTagName("head")[0];
|
||||||
|
let style = document.createElement("style");
|
||||||
|
let css = "body{visibility:hidden;}";
|
||||||
|
|
||||||
|
style.id = STOP_BLINK_CSS_ID;
|
||||||
|
style.setAttribute("type", "text/css");
|
||||||
|
|
||||||
|
if (style.styleSheet) {
|
||||||
|
style.styleSheet.cssText = css;
|
||||||
|
} else {
|
||||||
|
style.appendChild(document.createTextNode(css));
|
||||||
|
}
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Shows the body of the page */
|
||||||
|
function showBody() {
|
||||||
|
let css = document.getElementById(STOP_BLINK_CSS_ID);
|
||||||
|
if (css) css.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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) {
|
||||||
|
if (setSelected) {
|
||||||
|
element.selected = "selected";
|
||||||
|
} else {
|
||||||
|
element.remove();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
//set the theme select to the previous stylesheet
|
});
|
||||||
updateThemeSelect(document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`)[0].id, true)
|
} else {
|
||||||
//make body visible again if it was hidden
|
//if there are no elements, the page is not yet loaded; wait for loaded event and try again.
|
||||||
showBody();
|
window.addEventListener("DOMContentLoaded", () => {
|
||||||
|
updateThemeSelect(theme, setSelected);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//Private Methods
|
//Public Methods
|
||||||
/* Called when the theme is changed */
|
switch_css.init = function() {
|
||||||
function changeTheme(themeName, firstLoad) {
|
//if user has selected and theme and it is not the current theme
|
||||||
//create the css link element
|
if (theme && !document.getElementById(theme)) {
|
||||||
var fileref = document.createElement("link");
|
//hide the body to stop FOUC
|
||||||
fileref.rel = "stylesheet";
|
hideBody();
|
||||||
fileref.type = "text/css";
|
//change the theme
|
||||||
fileref.href = `/${themeName}.css`;
|
changeTheme(theme, true);
|
||||||
fileref.id = themeName;
|
//when the DOM is loaded, change the select to their current choice
|
||||||
|
updateThemeSelect(theme, true);
|
||||||
//append it to the head
|
|
||||||
let link = document.getElementsByTagName("head")[0].appendChild(fileref);
|
|
||||||
|
|
||||||
//when it's loaded, call onLinkLoad
|
|
||||||
link.addEventListener('load', onLinkLoad);
|
|
||||||
//if it errors, call 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 (firstLoad) {
|
|
||||||
//keep the old link in case something goes wrong
|
|
||||||
previousLink = document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`)[0];
|
|
||||||
removeStylesheets();
|
|
||||||
}
|
|
||||||
|
|
||||||
saveTheme(themeName);
|
|
||||||
}
|
}
|
||||||
|
//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 || {})); // eslint-disable-line
|
||||||
|
|
||||||
/* Removes all current stylesheets on the page */
|
switch_css.init(); // eslint-disable-line
|
||||||
function removeStylesheets() {
|
|
||||||
document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`).forEach((el) => {
|
|
||||||
el.remove();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Saves the current theme in localstorage */
|
|
||||||
function saveTheme(themeName) {
|
|
||||||
localStorage.setItem(THEME_KEY, themeName);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Clears the current theme in localstorage */
|
|
||||||
function clearTheme() {
|
|
||||||
localStorage.removeItem(THEME_KEY);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hides the body of the page */
|
|
||||||
function hideBody() {
|
|
||||||
let head = document.getElementsByTagName('head')[0];
|
|
||||||
let style = document.createElement('style');
|
|
||||||
let css = 'body{visibility:hidden;}';
|
|
||||||
|
|
||||||
style.id = STOP_BLINK_CSS_ID;
|
|
||||||
style.setAttribute('type', 'text/css');
|
|
||||||
|
|
||||||
if (style.styleSheet) {
|
|
||||||
style.styleSheet.cssText = css;
|
|
||||||
} else {
|
|
||||||
style.appendChild(document.createTextNode(css));
|
|
||||||
}
|
|
||||||
head.appendChild(style);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Shows the body of the page */
|
|
||||||
function showBody() {
|
|
||||||
let css = document.getElementById(STOP_BLINK_CSS_ID);
|
|
||||||
if (css)
|
|
||||||
css.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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) {
|
|
||||||
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', () => {
|
|
||||||
updateThemeSelect(theme, setSelected);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//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
|
|
||||||
updateThemeSelect(theme, true);
|
|
||||||
}
|
|
||||||
//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 || {})); // 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