@customviews-js/customviews 1.1.2 → 1.1.4

package/dist/custom-views.esm.js

@@ -1,5 +1,5 @@
 /*!
- * @customviews-js/customviews v1.1.2
+ * @customviews-js/customviews v1.1.4
  * (c) 2025 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -124,14 +124,16 @@ class URLStateManager {
         return url.toString();
     }
     /**
-     * Encode state into URL-safe string
+     * Encode state into URL-safe string (Toggles and Tabs only currently)
      */
     static encodeState(state) {
         try {
             // Create a compact representation
-            const compact = {
-                t: state.toggles
-            };
+            const compact = {};
+            // Add toggles if present and non-empty
+            if (state.toggles && state.toggles.length > 0) {
+                compact.t = state.toggles;
+            }
             // Add tab groups if present
             if (state.tabs && Object.keys(state.tabs).length > 0) {
                 compact.g = Object.entries(state.tabs);
@@ -157,7 +159,7 @@ class URLStateManager {
         }
     }
     /**
-     * Decode custom state from URL parameter
+     * Decode custom state from URL parameter (Toggles and Tabs only currently)
      */
     static decodeState(encoded) {
         try {
@@ -182,10 +184,12 @@ class URLStateManager {
             if (!compact || typeof compact !== 'object') {
                 throw new Error('Invalid compact state structure');
             }
+            // Reconstruct State from compact format
+            // Reconstruct Toggles
             const state = {
                 toggles: Array.isArray(compact.t) ? compact.t : []
             };
-            // Reconstruct tabs from compact format
+            // Reconstruct Tabs
             if (Array.isArray(compact.g)) {
                 state.tabs = {};
                 for (const [groupId, tabId] of compact.g) {
@@ -275,8 +279,12 @@ function ensureFontAwesomeInjected() {
     document.head.appendChild(link);
 }
 function replaceIconShortcodes(text) {
-    // Handle Font Awesome shortcodes
-    return text.replace(/:fa-([\w-]+):/g, (_, icon) => `<i class="fa fa-${icon}"></i>`);
+    // Matches :fa-*, :fas-*, :fab-* etc.
+    return text.replace(/:(fa[b|s|r]?)-([\w-]+):/g, (_, style, icon) => {
+        // style = fa, fas, fab, far, etc.
+        // Default to "fa" if only "fa-" is given
+        return `<i class="${style} fa-${icon}"></i>`;
+    });
 }
 /** --- Basic renderers --- */
 function renderImage(el, asset) {
@@ -868,7 +876,7 @@ class CustomViewsCore {
         this.rootEl = opt.rootEl || document.body;
         this.persistenceManager = new PersistenceManager();
         this.visibilityManager = new VisibilityManager();
-        this.showUrlEnabled = opt.showUrl ?? true;
+        this.showUrlEnabled = opt.showUrl ?? false;
         this.lastAppliedState = this.cloneState(this.config?.defaultState);
     }
     getConfig() {
@@ -1068,9 +1076,9 @@ class CustomViewsCore {
         });
     }
     cloneState(state) {
-        const toggles = state?.toggles ? [...state.toggles] : [];
-        const tabs = state?.tabs ? { ...state.tabs } : undefined;
-        return tabs ? { toggles, tabs } : { toggles };
+        if (!state)
+            return {};
+        return JSON.parse(JSON.stringify(state));
     }
     getTrackedStateSnapshot() {
         if (this.lastAppliedState) {
@@ -1079,7 +1087,7 @@ class CustomViewsCore {
         if (this.config) {
             return this.cloneState(this.config.defaultState);
         }
-        return { toggles: [] };
+        return {};
     }
 }
 
@@ -1170,8 +1178,14 @@ class CustomViews {
         const baseURL = opts.baseURL || '';
         if (opts.assetsJsonPath) {
             const assetsPath = prependBaseUrl(opts.assetsJsonPath, baseURL);
-            const assetsJson = await (await fetch(assetsPath)).json();
-            assetsManager = new AssetsManager(assetsJson, baseURL);
+            try {
+                const assetsJson = await (await fetch(assetsPath)).json();
+                assetsManager = new AssetsManager(assetsJson, baseURL);
+            }
+            catch (error) {
+                console.error(`[CustomViews] Failed to load assets JSON from ${assetsPath}:`, error);
+                assetsManager = new AssetsManager({}, baseURL);
+            }
         }
         else {
             assetsManager = new AssetsManager({}, baseURL);
@@ -1184,7 +1198,7 @@ class CustomViews {
         else {
             console.error("No config provided, using minimal default config");
             // Create a minimal default config
-            config = { allToggles: [], defaultState: { toggles: [] } };
+            config = { allToggles: [], defaultState: {} };
         }
         const coreOptions = {
             assetsManager,
@@ -1645,9 +1659,61 @@ const WIDGET_STYLES = `
   margin: 0;
 }
 
-.cv-custom-toggle-checkbox {
-  margin-right: 8px;
-  width: auto;
+.cv-toggle-switch {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: #ccc;
+  border-radius: 12px;
+  margin-right: 12px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  flex-shrink: 0;
+}
+
+.cv-toggle-switch:hover {
+  background: #bbb;
+}
+
+.cv-toggle-switch.cv-toggle-active {
+  background: #007bff;
+}
+
+.cv-toggle-switch.cv-toggle-active:hover {
+  background: #0056b3;
+}
+
+.cv-toggle-handle {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.cv-toggle-switch.cv-toggle-active .cv-toggle-handle {
+  transform: translateX(20px);
+}
+
+/* Dark theme toggle switch styles */
+.cv-widget-theme-dark .cv-toggle-switch {
+  background: #4a5568;
+}
+
+.cv-widget-theme-dark .cv-toggle-switch:hover {
+  background: #5a6578;
+}
+
+.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active {
+  background: #63b3ed;
+}
+
+.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active:hover {
+  background: #4299e1;
 }
 
 .cv-tab-groups {
@@ -1876,11 +1942,11 @@ class CustomViewsWidget {
             position: options.position || 'middle-left',
             theme: options.theme || 'light',
             showReset: options.showReset ?? true,
-            title: options.title || 'Custom Views',
+            title: options.title || 'Customize View',
             description: options.description || 'Toggle different content sections to customize your view. Changes are applied instantly and the URL will be updated for sharing.',
             showWelcome: options.showWelcome ?? false,
-            welcomeTitle: options.welcomeTitle || 'This website uses Custom Views',
-            welcomeMessage: options.welcomeMessage || 'This site uses Custom Views to let you personalize your experience. Use the widget on the side (⚙) to show or hide different content sections based on your preferences. Your selections will be saved and can be shared via URL.',
+            welcomeTitle: options.welcomeTitle || 'Site Customization',
+            welcomeMessage: options.welcomeMessage || 'This site is powered by Custom Views. Use the widget on the side (⚙) to customize your experience. Your preferences will be saved and can be shared via URL.<br><br>Learn more at <a href="https://github.com/customviews-js/customviews" target="_blank">customviews GitHub</a>.',
             showTabGroups: options.showTabGroups ?? true
         };
         // No external state manager to initialize
@@ -1963,7 +2029,9 @@ class CustomViewsWidget {
             ? toggles.map(toggle => `
         <div class="cv-custom-state-toggle">
           <label>
-            <input type="checkbox" class="cv-custom-toggle-checkbox" data-toggle="${toggle}" />
+            <div class="cv-toggle-switch" data-toggle="${toggle}">
+              <div class="cv-toggle-handle"></div>
+            </div>
             ${this.formatToggleName(toggle)}
           </label>
         </div>
@@ -1972,12 +2040,34 @@ class CustomViewsWidget {
         // Get tab groups
         const tabGroups = this.core.getTabGroups();
         let tabGroupsHTML = '';
+        // Check if any tab group or tab labels contain Font Awesome shortcodes
+        let hasFontAwesomeShortcodes = false;
+        if (this.options.showTabGroups && tabGroups && tabGroups.length > 0) {
+            for (const group of tabGroups) {
+                if (group.label && /:fa-[\w-]+:/.test(group.label)) {
+                    hasFontAwesomeShortcodes = true;
+                    break;
+                }
+                for (const tab of group.tabs) {
+                    if (tab.label && /:fa-[\w-]+:/.test(tab.label)) {
+                        hasFontAwesomeShortcodes = true;
+                        break;
+                    }
+                }
+                if (hasFontAwesomeShortcodes)
+                    break;
+            }
+        }
+        // Inject Font Awesome only if shortcodes are found
+        if (hasFontAwesomeShortcodes) {
+            ensureFontAwesomeInjected();
+        }
         if (this.options.showTabGroups && tabGroups && tabGroups.length > 0) {
             const tabGroupControls = tabGroups.map(group => {
-                const options = group.tabs.map(tab => `<option value="${tab.id}">${tab.label || tab.id}</option>`).join('');
+                const options = group.tabs.map(tab => `<option value="${tab.id}">${replaceIconShortcodes(tab.label || tab.id)}</option>`).join('');
                 return `
           <div class="cv-tab-group-control">
-            <label for="tab-group-${group.id}">${group.label || group.id}</label>
+            <label for="tab-group-${group.id}">${replaceIconShortcodes(group.label || group.id)}</label>
             <select id="tab-group-${group.id}" class="cv-tab-group-select" data-group-id="${group.id}">
               ${options}
             </select>
@@ -1994,7 +2084,7 @@ class CustomViewsWidget {
         this.modal.innerHTML = `
       <div class="cv-widget-modal cv-custom-state-modal">
         <div class="cv-widget-modal-header">
-          <h3>Customize View</h3>
+          <h3>${this.options.title}</h3>
           <button class="cv-widget-modal-close" aria-label="Close modal">×</button>
         </div>
         <div class="cv-widget-modal-content">
@@ -2049,10 +2139,11 @@ class CustomViewsWidget {
                 this.loadCurrentStateIntoForm();
             });
         }
-        // Listen to toggle checkboxes
-        const toggleCheckboxes = this.modal.querySelectorAll('.cv-custom-toggle-checkbox');
-        toggleCheckboxes.forEach(checkbox => {
-            checkbox.addEventListener('change', () => {
+        // Listen to toggle switches
+        const toggleSwitches = this.modal.querySelectorAll('.cv-toggle-switch');
+        toggleSwitches.forEach(toggleSwitch => {
+            toggleSwitch.addEventListener('click', () => {
+                toggleSwitch.classList.toggle('cv-toggle-active');
                 const state = this.getCurrentCustomStateFromModal();
                 this.core.applyState(state);
             });
@@ -2101,14 +2192,14 @@ class CustomViewsWidget {
      */
     getCurrentCustomStateFromModal() {
         if (!this.modal) {
-            return { toggles: [] };
+            return {};
         }
         // Collect toggle values
         const toggles = [];
-        const toggleCheckboxes = this.modal.querySelectorAll('.cv-custom-toggle-checkbox');
-        toggleCheckboxes.forEach(checkbox => {
-            const toggle = checkbox.dataset.toggle;
-            if (toggle && checkbox.checked) {
+        const toggleSwitches = this.modal.querySelectorAll('.cv-toggle-switch');
+        toggleSwitches.forEach(toggleSwitch => {
+            const toggle = toggleSwitch.dataset.toggle;
+            if (toggle && toggleSwitch.classList.contains('cv-toggle-active')) {
                 toggles.push(toggle);
             }
         });
@@ -2121,7 +2212,11 @@ class CustomViewsWidget {
                 tabs[groupId] = select.value;
             }
         });
-        return Object.keys(tabs).length > 0 ? { toggles, tabs } : { toggles };
+        const result = { toggles };
+        if (Object.keys(tabs).length > 0) {
+            result.tabs = tabs;
+        }
+        return result;
     }
     /**
      * Copy shareable URL to clipboard
@@ -2141,20 +2236,16 @@ class CustomViewsWidget {
             return;
         // Get currently active toggles (from custom state or default configuration)
         const activeToggles = this.core.getCurrentActiveToggles();
-        // First, uncheck all checkboxes
-        const allCheckboxes = this.modal.querySelectorAll('.cv-custom-toggle-checkbox');
-        allCheckboxes.forEach(checkbox => {
-            checkbox.checked = false;
-            checkbox.disabled = false;
-            checkbox.parentElement?.removeAttribute('aria-hidden');
+        // First, deactivate all toggle switches
+        const allToggleSwitches = this.modal.querySelectorAll('.cv-toggle-switch');
+        allToggleSwitches.forEach(toggleSwitch => {
+            toggleSwitch.classList.remove('cv-toggle-active');
         });
-        // Then check the ones that should be active
+        // Then activate the ones that should be active
         activeToggles.forEach(toggle => {
-            const checkbox = this.modal?.querySelector(`[data-toggle="${toggle}"]`);
-            if (checkbox) {
-                if (!checkbox.disabled) {
-                    checkbox.checked = true;
-                }
+            const toggleSwitch = this.modal?.querySelector(`[data-toggle="${toggle}"]`);
+            if (toggleSwitch) {
+                toggleSwitch.classList.add('cv-toggle-active');
             }
         });
         // Load tab group selections
@@ -2207,7 +2298,7 @@ class CustomViewsWidget {
         </div>
         <div class="cv-widget-modal-content">
           <div class="cv-welcome-content">
-            <p>${this.options.welcomeMessage}</p>
+            <p style="text-align: justify;">${this.options.welcomeMessage}</p>
             
             <div class="cv-welcome-widget-preview">
               <div class="cv-welcome-widget-icon">⚙</div>
@@ -2328,13 +2419,8 @@ function initializeFromScript() {
                     console.warn(`[CustomViews] Config file not found at ${fullConfigPath}. Using defaults.`);
                     // Provide minimal default config structure
                     configFile = {
-                        config: {
-                            allToggles: [],
-                            defaultState: { toggles: [] }
-                        },
-                        widget: {
-                            enabled: true
-                        }
+                        config: { allToggles: [], defaultState: {} },
+                        widget: { enabled: true }
                     };
                 }
                 else {