flexacore-ui-dev
Version:
Universal UI Framework for CDN, React, Angular, Vue, Svelte with TypeScript support
1 lines • 6.43 kB
JavaScript
!function(e,t){"use strict";class s{constructor(){this.name="theme-manager",this.version="2.0.0",this.currentTheme="default",this.themes=new Map,this.engine=null}init(e){this.engine=e,this.registerDefaultThemes(),this.initThemeSystem(),this.setupThemeSwitching(),this.applySavedTheme(),this.engine.log("Theme Manager Plugin initialized")}registerDefaultThemes(){this.registerTheme("default",{name:"Default",colors:{primary:"#007bff",secondary:"#6c757d",success:"#28a745",danger:"#dc3545",warning:"#ffc107",info:"#17a2b8",light:"#f8f9fa",dark:"#343a40",background:"#ffffff",surface:"#ffffff",text:"#212529",textSecondary:"#6c757d",border:"#dee2e6",shadow:"rgba(0, 0, 0, 0.1)"},typography:{fontFamily:"sans",fontSize:"base",lineHeight:1.5},spacing:{base:"1rem",small:"0.5rem",large:"1.5rem"},borderRadius:{small:"0.25rem",base:"0.375rem",large:"0.5rem"},shadows:{small:"0 1px 3px rgba(0, 0, 0, 0.1)",base:"0 4px 6px rgba(0, 0, 0, 0.1)",large:"0 10px 15px rgba(0, 0, 0, 0.1)"}}),this.registerTheme("dark",{name:"Dark",colors:{primary:"#0d6efd",secondary:"#6c757d",success:"#198754",danger:"#dc3545",warning:"#ffc107",info:"#0dcaf0",light:"#212529",dark:"#f8f9fa",background:"#121212",surface:"#1e1e1e",text:"#ffffff",textSecondary:"#adb5bd",border:"#343a40",shadow:"rgba(0, 0, 0, 0.3)"},typography:{fontFamily:"sans",fontSize:"base",lineHeight:1.5},spacing:{base:"1rem",small:"0.5rem",large:"1.5rem"},borderRadius:{small:"0.25rem",base:"0.375rem",large:"0.5rem"},shadows:{small:"0 1px 3px rgba(0, 0, 0, 0.3)",base:"0 4px 6px rgba(0, 0, 0, 0.3)",large:"0 10px 15px rgba(0, 0, 0, 0.3)"}}),this.registerTheme("light",{name:"Light",colors:{primary:"#0d6efd",secondary:"#6c757d",success:"#198754",danger:"#dc3545",warning:"#ffc107",info:"#0dcaf0",light:"#f8f9fa",dark:"#212529",background:"#ffffff",surface:"#f8f9fa",text:"#212529",textSecondary:"#6c757d",border:"#dee2e6",shadow:"rgba(0, 0, 0, 0.05)"},typography:{fontFamily:"sans",fontSize:"base",lineHeight:1.6},spacing:{base:"1rem",small:"0.5rem",large:"1.5rem"},borderRadius:{small:"0.25rem",base:"0.375rem",large:"0.5rem"},shadows:{small:"0 1px 3px rgba(0, 0, 0, 0.05)",base:"0 4px 6px rgba(0, 0, 0, 0.05)",large:"0 10px 15px rgba(0, 0, 0, 0.05)"}}),this.registerTheme("high-contrast",{name:"High Contrast",colors:{primary:"#000000",secondary:"#333333",success:"#006600",danger:"#cc0000",warning:"#cc6600",info:"#0066cc",light:"#ffffff",dark:"#000000",background:"#ffffff",surface:"#ffffff",text:"#000000",textSecondary:"#333333",border:"#000000",shadow:"rgba(0, 0, 0, 0.5)"},typography:{fontFamily:"sans",fontSize:"lg",lineHeight:1.4},spacing:{base:"1.25rem",small:"0.75rem",large:"2rem"},borderRadius:{small:"0",base:"0",large:"0"},shadows:{small:"2px 2px 0 rgba(0, 0, 0, 0.5)",base:"4px 4px 0 rgba(0, 0, 0, 0.5)",large:"6px 6px 0 rgba(0, 0, 0, 0.5)"}})}initThemeSystem(){this.createThemeStylesheet(),this.setupThemeObserver()}createThemeStylesheet(){const e=t.createElement("style");e.id="flexacore-theme-styles",t.head.appendChild(e),this.themeStylesheet=e}setupThemeObserver(){this.engine.on("theme-change",e=>{this.applyTheme(e.theme)}),this.engine.on("rtl-change",e=>{this.applyRTL(e.rtl)})}setupThemeSwitching(){this.detectSystemTheme(),this.setupThemeToggles(),this.setupKeyboardShortcuts()}detectSystemTheme(){const t=e.matchMedia("(prefers-color-scheme: dark)"),s=e=>{const t=e.matches?"dark":"light";"auto"===this.currentTheme&&this.applyTheme(t)};t.addListener(s),"auto"===this.currentTheme&&s(t)}setupThemeToggles(){t.addEventListener("click",e=>{if(e.target.matches("[data-fc-theme-toggle]")&&(e.preventDefault(),this.toggleTheme()),e.target.matches("[data-fc-theme]")){e.preventDefault();const t=e.target.getAttribute("data-fc-theme");this.applyTheme(t)}})}setupKeyboardShortcuts(){t.addEventListener("keydown",e=>{(e.ctrlKey||e.metaKey)&&"t"===e.key&&(e.preventDefault(),this.toggleTheme()),(e.ctrlKey||e.metaKey)&&"d"===e.key&&(e.preventDefault(),this.applyTheme("dark")),(e.ctrlKey||e.metaKey)&&"l"===e.key&&(e.preventDefault(),this.applyTheme("light"))})}applySavedTheme(){const e=localStorage.getItem("flexacore-theme")||"default";this.applyTheme(e)}registerTheme(e,t){this.themes.set(e,{...t,name:t.name||e}),this.engine.log(`Theme "${e}" registered`)}applyTheme(e){const t=this.themes.get(e);t?(this.currentTheme=e,this.updateCSSProperties(t),this.updateBodyClasses(e),localStorage.setItem("flexacore-theme",e),this.engine.setState("theme",e),this.engine.emit("theme-change",{theme:e,themeData:t}),this.engine.log(`Theme "${e}" applied`)):this.engine.warn(`Theme "${e}" not found`)}updateCSSProperties(e){const s=t.documentElement;e.colors&&Object.entries(e.colors).forEach(([e,t])=>{s.style.setProperty(`--fc-${e}`,t)}),e.typography&&Object.entries(e.typography).forEach(([e,t])=>{if("fontFamily"===e)try{const e=this.engine.getConfig("typography.fontFamily");if(e&&e[t]){const r=e[t];s.style.setProperty("--fc-font-family",r.join(", "))}else s.style.setProperty("--fc-font-family",'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif')}catch(e){s.style.setProperty("--fc-font-family",'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif')}else s.style.setProperty(`--fc-${e}`,t)}),e.spacing&&Object.entries(e.spacing).forEach(([e,t])=>{s.style.setProperty(`--fc-spacing-${e}`,t)}),e.borderRadius&&Object.entries(e.borderRadius).forEach(([e,t])=>{s.style.setProperty(`--fc-radius-${e}`,t)}),e.shadows&&Object.entries(e.shadows).forEach(([e,t])=>{s.style.setProperty(`--fc-shadow-${e}`,t)})}updateBodyClasses(e){const s=t.body;this.themes.forEach((e,t)=>{s.classList.remove(`theme-${t}`)}),"default"!==e&&s.classList.add(`theme-${e}`)}applyRTL(e){const s=t.body;e?(s.classList.add("rtl"),s.setAttribute("dir","rtl")):(s.classList.remove("rtl"),s.setAttribute("dir","ltr")),this.engine.setState("rtl",e)}toggleTheme(){const e=["default","light","dark"],t=(e.indexOf(this.currentTheme)+1)%e.length;this.applyTheme(e[t])}getCurrentTheme(){return this.currentTheme}getTheme(e){return this.themes.get(e)}getAllThemes(){return Array.from(this.themes.entries())}getAPI(){return{applyTheme:this.applyTheme.bind(this),toggleTheme:this.toggleTheme.bind(this),getCurrentTheme:this.getCurrentTheme.bind(this),getTheme:this.getTheme.bind(this),getAllThemes:this.getAllThemes.bind(this),registerTheme:this.registerTheme.bind(this)}}}if(e.flexacore){const t=new s;e.flexacore.registerPlugin("theme-manager",t),e.FCTheme=t.getAPI()}}(window,document);