slicejs-web-framework 2.3.1 → 2.3.2

package/Slice/Components/Structural/StylesManager/StylesManager.js

@@ -1,49 +1,64 @@
-
-export default class StylesManager {
-   constructor() {
-      this.componentStyles = document.createElement('style');
-      this.componentStyles.id = 'slice-component-styles';
-      document.head.appendChild(this.componentStyles);
-
-   }
-
-   async init() {
-      for (let i = 0; i < slice.stylesConfig.requestedStyles.length; i++) {
-         const styles = await slice.controller.fetchText(slice.stylesConfig.requestedStyles[i], 'styles');
-         this.componentStyles.innerText += styles;
-         slice.logger.logInfo('StylesManager', `${slice.stylesConfig.requestedStyles[i]} styles loaded`);
-      }
-
-      if (slice.themeConfig.enabled) {
-         const module = await import(`${slice.paths.structuralComponentFolderPath}/StylesManager/ThemeManager/ThemeManager.js`);
-
-         this.themeManager = new module.default();
-         let theme;
-
-         if (slice.themeConfig.saveThemeLocally) {
-            theme = localStorage.getItem('sliceTheme');
-         }
-
-         if (!theme) {
-            theme = slice.themeConfig.defaultTheme;
-         }
-
-         if (slice.themeConfig.useBrowserTheme) {
-            const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'Dark' : 'Light';
-            theme = browserTheme;
-         }
-
-         await this.themeManager.applyTheme(theme);
-      }
-   }
-
-   //add a method that will add css as text to the componentStyles element
-   appendComponentStyles(cssText) {
-      this.componentStyles.appendChild(document.createTextNode(cssText));
-   }
-
-   registerComponentStyles(componentName, cssText) {
-      slice.controller.requestedStyles.add(componentName);
-      this.appendComponentStyles(cssText);
-   }
-}
+
+export default class StylesManager {
+   constructor() {
+      this.componentStyles = document.createElement('style');
+      this.componentStyles.id = 'slice-component-styles';
+      document.head.appendChild(this.componentStyles);
+
+   }
+
+   /**
+    * Load global styles and initialize ThemeManager if enabled.
+    * @returns {Promise<void>}
+    */
+   async init() {
+      for (let i = 0; i < slice.stylesConfig.requestedStyles.length; i++) {
+         const styles = await slice.controller.fetchText(slice.stylesConfig.requestedStyles[i], 'styles');
+         this.componentStyles.innerText += styles;
+         slice.logger.logInfo('StylesManager', `${slice.stylesConfig.requestedStyles[i]} styles loaded`);
+      }
+
+      if (slice.themeConfig.enabled) {
+         const module = await import(`${slice.paths.structuralComponentFolderPath}/StylesManager/ThemeManager/ThemeManager.js`);
+
+         this.themeManager = new module.default();
+         let theme;
+
+         if (slice.themeConfig.saveThemeLocally) {
+            theme = localStorage.getItem('sliceTheme');
+         }
+
+         if (!theme) {
+            theme = slice.themeConfig.defaultTheme;
+         }
+
+         if (slice.themeConfig.useBrowserTheme) {
+            const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'Dark' : 'Light';
+            theme = browserTheme;
+         }
+
+         await this.themeManager.applyTheme(theme);
+      }
+   }
+
+   //add a method that will add css as text to the componentStyles element
+   /**
+    * Append raw CSS to the global component style tag.
+    * @param {string} cssText
+    * @returns {void}
+    */
+   appendComponentStyles(cssText) {
+      this.componentStyles.appendChild(document.createTextNode(cssText));
+   }
+
+   /**
+    * Register CSS for a component.
+    * @param {string} componentName
+    * @param {string} cssText
+    * @returns {void}
+    */
+   registerComponentStyles(componentName, cssText) {
+      slice.controller.requestedStyles.add(componentName);
+      this.appendComponentStyles(cssText);
+   }
+}

package/Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js

@@ -1,56 +1,84 @@
-export default class ThemeManager {
-   constructor() {
-      this.themeStyles = new Map();
-      this.currentTheme = null;
-      this.themeStyle = document.createElement('style');
-      document.head.appendChild(this.themeStyle);
-   }
-
-   async applyTheme(themeName) {
-      if (!themeName) {
-         slice.logger.logError('ThemeManager', 'Invalid theme name');
-         return;
-      }
-
-      if (!this.themeStyles.has(themeName)) {
-         await this.loadThemeCSS(themeName);
-      } else {
-         this.setThemeStyle(themeName);
-         this.saveThemeLocally(themeName, this.themeStyles.get(themeName));
-      }
-   }
-
-   async loadThemeCSS(themeName) {
-      let themeContent =
-         localStorage.getItem(`sliceTheme-${themeName}`) || (await slice.controller.fetchText(themeName, 'theme'));
-
-      if (!themeContent) {
-         slice.logger.logError('ThemeManager', `Failed to load theme: ${themeName}`);
-         return;
-      }
-
-      this.themeStyles.set(themeName, themeContent);
-      this.setThemeStyle(themeName);
-      this.saveThemeLocally(themeName, themeContent);
-   }
-
-   saveThemeLocally(themeName, themeContent) {
-      if (slice.themeConfig.saveThemeLocally) {
-         localStorage.setItem('sliceTheme', themeName);
-         localStorage.setItem(`sliceTheme-${themeName}`, themeContent);
-         slice.logger.logInfo('ThemeManager', `Theme ${themeName} saved locally`);
-      }
-   }
-
-   removeCurrentTheme() {
-      if (this.currentTheme) {
-         this.themeStyle.textContent = '';
-      }
-   }
-
-   setThemeStyle(themeName) {
-      this.themeStyle.textContent = this.themeStyles.get(themeName);
-      this.currentTheme = themeName;
-      slice.logger.logInfo('ThemeManager', `Theme ${themeName} applied`);
-   }
-}
+/**
+ * Manages theme CSS loading and persistence.
+ */
+export default class ThemeManager {
+   constructor() {
+      this.themeStyles = new Map();
+      this.currentTheme = null;
+      this.themeStyle = document.createElement('style');
+      document.head.appendChild(this.themeStyle);
+   }
+
+   /**
+    * Apply a theme by name.
+    * @param {string} themeName
+    * @returns {Promise<void>}
+    */
+   async applyTheme(themeName) {
+      if (!themeName) {
+         slice.logger.logError('ThemeManager', 'Invalid theme name');
+         return;
+      }
+
+      if (!this.themeStyles.has(themeName)) {
+         await this.loadThemeCSS(themeName);
+      } else {
+         this.setThemeStyle(themeName);
+         this.saveThemeLocally(themeName, this.themeStyles.get(themeName));
+      }
+   }
+
+   /**
+    * Load theme CSS and cache it.
+    * @param {string} themeName
+    * @returns {Promise<void>}
+    */
+   async loadThemeCSS(themeName) {
+      let themeContent =
+         localStorage.getItem(`sliceTheme-${themeName}`) || (await slice.controller.fetchText(themeName, 'theme'));
+
+      if (!themeContent) {
+         slice.logger.logError('ThemeManager', `Failed to load theme: ${themeName}`);
+         return;
+      }
+
+      this.themeStyles.set(themeName, themeContent);
+      this.setThemeStyle(themeName);
+      this.saveThemeLocally(themeName, themeContent);
+   }
+
+   /**
+    * Persist a theme in localStorage when enabled.
+    * @param {string} themeName
+    * @param {string} themeContent
+    * @returns {void}
+    */
+   saveThemeLocally(themeName, themeContent) {
+      if (slice.themeConfig.saveThemeLocally) {
+         localStorage.setItem('sliceTheme', themeName);
+         localStorage.setItem(`sliceTheme-${themeName}`, themeContent);
+         slice.logger.logInfo('ThemeManager', `Theme ${themeName} saved locally`);
+      }
+   }
+
+   /**
+    * Clear currently applied theme styles.
+    * @returns {void}
+    */
+   removeCurrentTheme() {
+      if (this.currentTheme) {
+         this.themeStyle.textContent = '';
+      }
+   }
+
+   /**
+    * Set theme style text and mark current theme.
+    * @param {string} themeName
+    * @returns {void}
+    */
+   setThemeStyle(themeName) {
+      this.themeStyle.textContent = this.themeStyles.get(themeName);
+      this.currentTheme = themeName;
+      slice.logger.logInfo('ThemeManager', `Theme ${themeName} applied`);
+   }
+}