37 lines
14 KiB
JavaScript
37 lines
14 KiB
JavaScript
/**
|
||
* @file felexdev-theme-manager.js
|
||
* @description Модуль переключения тем. Рекомендации по применению: статические/генерируемые сайты. Минимизировано вручную.
|
||
* @description Singleton theme switcher module. Manualy minified version
|
||
* @version 0.0.1
|
||
* @author felex67 (admin@felexdev.ru)
|
||
* @license Apache2.0
|
||
* @warning Системная версия('auto') должна регистрироваться первой!!!
|
||
* @warning The system theme must be addet first!!!
|
||
*/
|
||
class ThemeManager {
|
||
/** Cunfigurations */
|
||
static #c = {
|
||
btnid:'btn-toggle', // Идентификатор кнопки переключения: `gpfx + btnid == 'flxd-tm-btn-toggle'`
|
||
btnti:0, // Индекс табуляции кнопки переключения тем
|
||
gpfx:'flxd-tm', // Глобальный префикс: `gpfx + '-' == 'flxd-tm-'`
|
||
stid:'color-scheme', // Селектор CSS: `gpfx + stdid == 'flxd-tm-color-scheme'`
|
||
svg:'<svg width="100%" height="100%" viewBox="0 0 135.46666 135.46667"version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><path id="path1" style="opacity:100%;fill:currentColor;fill-opacity:1;stroke:#171717;stroke-width:0" d="M 67.777258,12.777515 A 55,55 0 0 0 12.777515,67.777258 55,55 0 0 0 67.777258,122.77752 55,55 0 0 0 122.77752,67.777258 55,55 0 0 0 67.777258,12.777515 Z m -0.128157,4.95577 V 117.73338 A 50,50 0 0 1 17.733285,67.733333 50,50 0 0 1 67.649101,17.733285 Z"/></svg>',
|
||
/* */
|
||
};static #cl=document.documentElement.classList;static #b=document.createElement('div');static #i=0;static #t=[];static toggle=()=>{this.#s((this.#i+1)%this.#t.length);};static{let m=this;let c=m.#c;c.gpfx=c.gpfx+'-';c.stid=c.gpfx+c.stid;m.#b.id=c.btnid=c.gpfx+c.btnid;m.#b.tabIndex=m.#c.btnti;m.#b.setAttribute('aria-label', 'toggle color scheme');m.#b.addEventListener('click',m.toggle);m.#b.addEventListener('keydown',(e)=>{if(e.key==' '||e.key=='Enter')this.toggle();});};static #at=(n,i=null)=>{this.#t.push({n:n,i:i||this.#c.svg,s:`${this.#c.stid}-${n}`});};static #s(i){if(i==this.#i)return;let m=this;if(i&&m.#i)m.#cl.replace(m.#t[m.#i].s,m.#t[i].s);else if(m.#i)m.#cl.remove(m.#t[m.#i].s);else m.#cl.add(m.#t[i].s);m.#sv(m.#i=i);m.#b.innerHTML=m.#t[i].i;m.#b.setAttribute('aria-current',m.#t[i].n);};static #sv=(()=>{let m=this;let s=(i)=>{console.error(m.#c.gpfx+'#sv: Can`t save theme id, storages are unreachable.');};try{m.#i=parseInt(localStorage.getItem(m.#c.stid))||0;s=(i)=>{try{localStorage.setItem(m.#c.stid,i);}catch(e){console.error(e);}};}catch(e){console.error(m.#c.gpfx+'#sv-IIFE: localStorage is unreachable, trying cookie.');try{let c=document.cookie.match(`${m.#c.stid}\\s*=\\s*(\\d+)`);m.#i=c?parseInt(c[1])||0:0;s=(i)=>{try{document.cookie=`${m.#c.stid}=${i};max-age=${31536000};path=/`;}catch(e){console.error(e);}};}catch(e){console.error(m.#c.gpfx+`#s-IIFE: All storages are unreachable('localStorage' & 'document.cookie')`);}}return s;})();static{let m=this;
|
||
/**
|
||
* Add new theme
|
||
* @typedef {function} add
|
||
* @param {string} themeName - Название темы используемое в селекторе CSS. 'auto' -> 'flxd-tm-color-scheme-auto'
|
||
* @param {string?} themeIcon - Текстовое векторное изображение PlainSVG, если равно нулю используется иконка по умолчанию: 2-я фаза луны.
|
||
*/ let add=m.#at;
|
||
/** @warning Системная версия('auto') должна регистрироваться первой!!! */
|
||
add('auto','<svg width="100%" height="100%" version="1.1" viewBox="0 0 5.2917 5.2917" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"><path style="opacity:1.0;fill:currentColor;" d="m4.4476 2.5745a1.3875 1.3423 19.362 0 0-0.75325-0.21319 1.1274 1.192 39.474 0 1 0.34686 0.1377 1.1274 1.192 39.474 0 1 0.32108 1.5973 1.1274 1.192 39.474 0 1-1.6003 0.4122 1.1274 1.192 39.474 0 1-0.29802-0.27356 1.3875 1.3423 19.362 0 0 0.53957 0.60799 1.3875 1.3423 19.362 0 0 1.901-0.40727 1.3875 1.3423 19.362 0 0-0.457-1.8611z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(.70717 -.70704 .69993 .71421 0 0)" d="m-3.6635 3.708h7.4025v0.067989h-7.4025z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" d="m2.3299 1.4771a0.81545 0.81545 0 0 1-0.81546 0.81546 0.81545 0.81545 0 0 1-0.81545-0.81546 0.81545 0.81545 0 0 1 0.81545-0.81545 0.81545 0.81545 0 0 1 0.81546 0.81545z" opacity=".99169"/></g><g stroke-width="0"><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m2.1854 0.26287c0.03577 0.020652 0.049011 0.064222 0.029688 0.097691l-0.13061 0.22622c-0.019323 0.033469-0.063676 0.043787-0.099447 0.023135-0.03577-0.020652-0.049011-0.064222-0.029688-0.097691l0.13061-0.22622c0.019323-0.033469 0.063677-0.043787 0.099447-0.023135z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m2.6702 0.72792c0.020652 0.03577 0.010334 0.080124-0.023135 0.099447l-0.22622 0.13061c-0.033469 0.019323-0.077039 0.006082-0.097691-0.029688-0.020652-0.03577-0.010334-0.080124 0.023135-0.099447l0.22622-0.13061c0.033469-0.019323 0.077039-0.006082 0.097691 0.029688z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m2.8575 1.3731c0 0.041304-0.031113 0.074556-0.069759 0.074556h-0.26122c-0.038647 0-0.069759-0.033252-0.069759-0.074556s0.031112-0.074556 0.069759-0.074556h0.26122c0.038647 0 0.069759 0.033252 0.069759 0.074556z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m2.6971 2.0254c-0.020652 0.03577-0.064222 0.049011-0.097691 0.029688l-0.22622-0.13061c-0.033469-0.019323-0.043787-0.063677-0.023135-0.099447s0.064222-0.049011 0.097691-0.029688l0.22622 0.13061c0.033469 0.019323 0.043787 0.063677 0.023135 0.099447z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m2.2321 2.5102c-0.03577 0.020652-0.080124 0.010334-0.099447-0.023135l-0.13061-0.22622c-0.019323-0.033469-0.00608-0.077039 0.029688-0.097691 0.03577-0.020652 0.080124-0.010334 0.099447 0.023135l0.13061 0.22622c0.019323 0.033469 0.00608 0.077039-0.029688 0.097691z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m1.5869 2.6975c-0.041304 0-0.074556-0.031113-0.074556-0.069759v-0.26122c0-0.038646 0.033252-0.069759 0.074556-0.069759s0.074556 0.031113 0.074556 0.069759v0.26122c0 0.038647-0.033252 0.069759-0.074556 0.069759z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m0.93459 2.5371c-0.03577-0.020652-0.049011-0.064222-0.029688-0.097691l0.13061-0.22622c0.019323-0.033469 0.063676-0.043787 0.099447-0.023135 0.03577 0.020652 0.049011 0.064222 0.029688 0.097691l-0.13061 0.22622c-0.019323 0.033469-0.063677 0.043787-0.099447 0.023135z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m0.44982 2.0721c-0.020652-0.03577-0.010334-0.080124 0.023135-0.099447l0.22622-0.13061c0.033469-0.019323 0.077039-0.00608 0.097691 0.029688 0.020652 0.03577 0.010334 0.080124-0.023135 0.099447l-0.22622 0.13061c-0.033469 0.019323-0.077039 0.00608-0.097691-0.029688z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m0.26251 1.4269c0-0.041304 0.031112-0.074556 0.069759-0.074556h0.26122c0.038646 0 0.069759 0.033252 0.069759 0.074556s-0.031112 0.074556-0.069759 0.074556h-0.26122c-0.038646 0-0.069759-0.033252-0.069759-0.074556z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m0.42287 0.77459c0.020652-0.03577 0.064222-0.049011 0.097691-0.029688l0.22622 0.13061c0.033469 0.019323 0.043787 0.063676 0.023135 0.099447s-0.064222 0.049011-0.097691 0.029688l-0.22622-0.13061c-0.033469-0.019323-0.043787-0.063677-0.023135-0.099447z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m0.88792 0.28982c0.03577-0.020652 0.080124-0.010334 0.099447 0.023135l0.13061 0.22622c0.019323 0.033469 0.00608 0.077039-0.029688 0.097691-0.03577 0.020652-0.080124 0.010334-0.099447-0.023135l-0.13061-0.22622c-0.019323-0.033469-0.006082-0.077039 0.029688-0.097691z" opacity=".99169"/><path style="opacity:1.0;fill:currentColor;" transform="matrix(1.0395 0 0 1.0359 -.10357 .033596)" d="m1.5331 0.10251c0.041304 0 0.074556 0.031112 0.074556 0.069759v0.26122c0 0.038646-0.033252 0.069759-0.074556 0.069759s-0.074556-0.031112-0.074556-0.069759v-0.26122c0-0.038646 0.033252-0.069759 0.074556-0.069759z" opacity=".99169"/></g></svg>');
|
||
add('light','<svg id="theme-icon-light" width="100%" height="100%" version="1.1" viewBox="0 0 3.7451 3.7688" xmlns="http://www.w3.org/2000/svg"><g style="opacity:1.0;fill:currentColor;" stroke-width="0"><path d="m2.7254 1.8844a0.85289 0.85494 0 0 1-0.85289 0.85494 0.85289 0.85494 0 0 1-0.85289-0.85494 0.85289 0.85494 0 0 1 0.85289-0.85494 0.85289 0.85494 0 0 1 0.85289 0.85494z"/><path d="m2.7453 0.36254c0.037199 0.021529 0.049857 0.06888 0.028379 0.10617l-0.31014 0.53847c-0.021477 0.03729-0.068715 0.049977-0.10592 0.028449-0.0372-0.021529-0.049857-0.068881-0.02838-0.10617l0.31014-0.53847c0.021477-0.037289 0.068714-0.049977 0.10592-0.028448z"/><path d="m3.3875 1.0039c0.021477 0.03729 0.00882 0.08464-0.02838 0.10617l-0.53718 0.31089c-0.037199 0.021527-0.084439 0.00885-0.10592-0.02845-0.021478-0.037289-0.00882-0.084641 0.028379-0.10617l0.53718-0.31089c0.037199-0.021528 0.084439-0.008843 0.10592 0.028448z"/><path d="m3.6237 1.8811c0 0.043057-0.03458 0.07772-0.077536 0.07772h-0.62028c-0.042954 0-0.077536-0.034663-0.077536-0.07772 0-0.043058 0.03458-0.077723 0.077536-0.077723h0.62028c0.042955 0 0.077536 0.034663 0.077535 0.077723z"/><path d="m3.3907 2.7593c-0.021477 0.037289-0.068714 0.049977-0.10592 0.028449l-0.53718-0.31089c-0.037199-0.021528-0.049856-0.068881-0.028379-0.10617 0.021478-0.037289 0.068714-0.049977 0.10592-0.028449l0.53718 0.31089c0.0372 0.021527 0.049857 0.068881 0.028379 0.10617z"/><path d="m2.7509 3.403c-0.037199 0.021527-0.084439 0.00885-0.10592-0.02845l-0.31014-0.53847c-0.021477-0.037289-0.00882-0.084641 0.02838-0.10617 0.037199-0.021529 0.084439-0.00885 0.10592 0.028449l0.31014 0.53847c0.021478 0.037289 0.00882 0.084641-0.028379 0.10617z"/><path d="m1.8758 3.6398c-0.042956 0-0.077536-0.034663-0.077536-0.077721v-0.62177c0-0.043058 0.03458-0.077721 0.077536-0.077721 0.042955 0 0.077536 0.034663 0.077536 0.077721v0.62177c0 0.043058-0.03458 0.077722-0.077536 0.077722z"/><path d="m0.99973 3.4062c-0.0372-0.021528-0.049857-0.068881-0.02838-0.10617l0.31014-0.53847c0.021477-0.037289 0.068714-0.049977 0.10592-0.028449 0.037199 0.021528 0.049858 0.068881 0.02838 0.10617l-0.31014 0.53847c-0.021478 0.037289-0.068715 0.049977-0.10592 0.028448z"/><path d="m0.35757 2.7649c-0.021477-0.037289-0.00882-0.084641 0.02838-0.10617l0.53718-0.31089c0.0372-0.021528 0.084438-0.00885 0.10592 0.028449 0.021478 0.037289 0.00881 0.084642-0.02838 0.10617l-0.53718 0.31088c-0.0372 0.021527-0.084438 0.00885-0.10591-0.028448z"/><path d="m0.12134 1.8876c0-0.043059 0.034581-0.077721 0.077535-0.077721h0.62028c0.042954 0 0.077535 0.034664 0.077535 0.077721s-0.03458 0.077721-0.077535 0.077721h-0.62028c-0.042955 3e-7 -0.077535-0.034664-0.077535-0.077721z"/><path d="m0.35434 1.0095c0.021477-0.03729 0.068716-0.049976 0.10592-0.028448l0.53718 0.31089c0.0372 0.021528 0.049857 0.068881 0.02838 0.10617-0.021478 0.037289-0.068716 0.049977-0.10592 0.028449l-0.53718-0.31089c-0.0372-0.02153-0.049858-0.068882-0.02838-0.10617z"/><path d="m0.99414 0.36578c0.0372-0.021529 0.084439-0.00884 0.10592 0.028448l0.31014 0.53847c0.021479 0.03729 0.00882 0.08464-0.028379 0.10617-0.0372 0.021527-0.084439 0.00885-0.10592-0.028448l-0.31014-0.53847c-0.021477-0.037289-0.00881-0.084641 0.02838-0.10617z"/><path d="m1.8693 0.12898c0.042955 0 0.077536 0.034664 0.077536 0.077722v0.62177c0 0.043058-0.034579 0.077721-0.077536 0.077721-0.042956 0-0.077536-0.034664-0.077536-0.077721v-0.62177c0-0.043058 0.034579-0.077722 0.077536-0.077722z"/></g></svg>');
|
||
add('dark','<svg width="100%" height="100%" viewBox="0 0 5.291 5.291" version="1.1" id="theme-icon-dark" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#"><path id="path1" style="display:inline;opacity:100%;fill:currentColor;fill-opacity:1;stroke:#171717;stroke-width:0" d="M 3.9317287,1.130201 A 2,2 0 0 0 2.7399338,0.64767413 1.5206705,1.8 40.797111 0 1 3.4192441,0.95205616 1.5206705,1.8 40.797111 0 1 3.394544,3.3083119 1.5206705,1.8 40.797111 0 1 1.0672109,3.6771907 1.5206705,1.8 40.797111 0 1 0.66679518,3.0496732 2,2 0 0 0 1.3183584,4.1581283 2,2 0 0 0 4.1390072,3.9508498 2,2 0 0 0 3.9317287,1.130201 Z" /></svg>');
|
||
/* Темы добавлять здесь. */
|
||
/* Add new themes here. */
|
||
add('old-terminal','<svg width="100%" height="100%" version="1.1" viewBox="0 0 5.2917 5.2917" xmlns="http://www.w3.org/2000/svg"><g style="opacity:1.0;fill:currentColor;" transform="matrix(1.1692 0 0 1.1544 -.44779 -.40842)" stroke-width="0"><path d="m1.0459 1.1457c-0.277 0-0.50023 0.22323-0.50023 0.50023v1.9999c0 0.277 0.22323 0.50023 0.50023 0.50023h3.1998c0.277 0 0.50023-0.22323 0.50023-0.50023v-1.9999c0-0.277-0.22323-0.50023-0.50023-0.50023zm0 0.30024h3.1998c0.1108 0 0.19999 0.089188 0.19999 0.19999v1.9999c0 0.1108-0.089188 0.19999-0.19999 0.19999h-3.1998c-0.1108 0-0.19999-0.089188-0.19999-0.19999v-1.9999c0-0.1108 0.089188-0.19999 0.19999-0.19999z" opacity=".99169"/><rect x="1.0458" y="1.6458" width="3.2" height="2" rx=".17611" ry=".1752" opacity=".99169"/></g></svg>');
|
||
/* */
|
||
if(m.#i>=m.#t.length||m.#i<0){console.error(`${m.#c.gpfx}bottom-static: Invalid theme index loaded '${m.#i}'`);m.#i=0;m.#sv(m.#i)}if(m.#i)m.#cl.add(m.#t[m.#i].s);m.#b.innerHTML=m.#t[m.#i].i;m.#b.setAttribute('aria-current',m.#t[m.#i].n);
|
||
};static set=(name)=>{let i=-1;for(let j=0;j<this.#t.length;j++){if(this.#t[j].n===name){i=j;break;}}if(i==-1){throw new Error(`Invalid color sсheme.'${name}'`);}this.#s(i);};static #_=()=>{window.removeEventListener('DOMContentLoaded',this.#_);document.body.appendChild(this.#b);};static{let m=this;m.#s(m.#i);if(!document.body)window.addEventListener('DOMContentLoaded',this.#_);}
|
||
}; |