(function() {
// Functions
// =========================================================================
/**
* Adds event listeners to change active stylesheet and restore previously
* activated stylesheet on reload.
*
* @example
*
* This link:
* Foo
* Will active this existing link:
*
*
* @example
*
* This link:
* Bar
* Will activate this existing link:
*
* Or generate this active link:
*
*/
function initStyleSwitcher() {
var isInitialzed = false;
var sessionStorageKey = 'activeStylesheetHref';
function handleSwitch(activeHref, activeTitle) {
var activeElm = document.querySelector('link[href*="' + activeHref +'"],link[title="' + activeTitle +'"]');
if (!activeElm && activeHref) {
activeElm = document.createElement('link');
activeElm.setAttribute('href', activeHref);
activeElm.setAttribute('rel', 'stylesheet');
activeElm.setAttribute('title', activeTitle);
document.head.appendChild(activeElm);
activeElm.addEventListener('load', function linkOnLoad() {
activeElm.removeEventListener('load', linkOnLoad);
setActiveLink(activeElm);
});
}
else if (activeElm) {
setActiveLink(activeElm);
}
}
function setActiveLink(activeElm) {
var activeHref = activeElm.getAttribute('href');
var activeTitle = activeElm.getAttribute('title');
var inactiveElms = document.querySelectorAll('link[title]:not([href*="' + activeHref +'"]):not([title="' + activeTitle +'"])');
// Remove "alternate" keyword
activeElm.setAttribute('rel', (activeElm.rel || '').replace(/\s*alternate/g, '').trim());
// Force enable stylesheet (required for some browsers)
activeElm.disabled = true;
activeElm.disabled = false;
// Store active style sheet
sessionStorage.setItem(sessionStorageKey, activeHref);
// Disable other elms
for (var i = 0; i < inactiveElms.length; i++) {
var elm = inactiveElms[i];
elm.disabled = true;
// Fix for browsersync and alternate stylesheet updates. Will
// cause FOUC when switching stylesheets during development, but
// required to properly apply style updates when alternate
// stylesheets are enabled.
if (window.browsersyncObserver) {
var linkRel = elm.getAttribute('rel') || '';
var linkRelAlt = linkRel.indexOf('alternate') > -1 ? linkRel : (linkRel + ' alternate').trim();
elm.setAttribute('rel', linkRelAlt);
}
}
// CSS custom property ponyfil
if ((window.$docsify || {}).themeable) {
window.$docsify.themeable.util.cssVars();
}
}
// Event listeners
if (!isInitialzed) {
isInitialzed = true;
// Restore active stylesheet
document.addEventListener('DOMContentLoaded', function() {
var activeHref = sessionStorage.getItem(sessionStorageKey);
if (activeHref) {
handleSwitch(activeHref);
}
});
// Update active stylesheet
document.addEventListener('click', function(evt) {
var dataHref = evt.target.getAttribute('data-link-href');
var dataTitle = evt.target.getAttribute('data-link-title')
if (dataHref || dataTitle) {
dataTitle = dataTitle
|| evt.target.textContent
|| '_' + Math.random().toString(36).substr(2, 9); // UID
handleSwitch(dataHref, dataTitle);
evt.preventDefault();
}
});
}
}
// Main
// =========================================================================
initStyleSwitcher();
})();