@customviews-js/customviews 1.1.2 → 1.1.4

package/dist/custom-views.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.
  */
@@ -130,14 +130,16 @@
             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);
@@ -163,7 +165,7 @@
             }
         }
         /**
-         * Decode custom state from URL parameter
+         * Decode custom state from URL parameter (Toggles and Tabs only currently)
          */
         static decodeState(encoded) {
             try {
@@ -188,10 +190,12 @@
                 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) {
@@ -281,8 +285,12 @@
         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) {
@@ -874,7 +882,7 @@ ${TAB_STYLES}
             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() {
@@ -1074,9 +1082,9 @@ ${TAB_STYLES}
             });
         }
         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) {
@@ -1085,7 +1093,7 @@ ${TAB_STYLES}
             if (this.config) {
                 return this.cloneState(this.config.defaultState);
             }
-            return { toggles: [] };
+            return {};
         }
     }
 
@@ -1176,8 +1184,14 @@ ${TAB_STYLES}
             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);
@@ -1190,7 +1204,7 @@ ${TAB_STYLES}
             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,
@@ -1651,9 +1665,61 @@ ${TAB_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 {
@@ -1882,11 +1948,11 @@ ${TAB_STYLES}
                 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
@@ -1969,7 +2035,9 @@ ${TAB_STYLES}
                 ? 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>
@@ -1978,12 +2046,34 @@ ${TAB_STYLES}
             // 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>
@@ -2000,7 +2090,7 @@ ${TAB_STYLES}
             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">
@@ -2055,10 +2145,11 @@ ${TAB_STYLES}
                     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);
                 });
@@ -2107,14 +2198,14 @@ ${TAB_STYLES}
          */
         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);
                 }
             });
@@ -2127,7 +2218,11 @@ ${TAB_STYLES}
                     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
@@ -2147,20 +2242,16 @@ ${TAB_STYLES}
                 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
@@ -2213,7 +2304,7 @@ ${TAB_STYLES}
         </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>
@@ -2334,13 +2425,8 @@ ${TAB_STYLES}
                         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 {