@customviews-js/customviews 1.3.0 → 1.4.0

package/dist/custom-views.esm.js

@@ -1,5 +1,5 @@
 /*!
- * @customviews-js/customviews v1.3.0
+ * @customviews-js/customviews v1.4.0
  * (c) 2025 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -430,6 +430,14 @@ function getShareIcon() {
             <path fill="currentColor" d="M11 6.41V12a1 1 0 0 0 2 0V6.41l1.29 1.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-3-3a1 1 0 0 0-1.42 0l-3 3a1 1 0 1 0 1.42 1.42L11 6.41z"/>
           </svg>`;
 }
+/**
+ * GitHub icon for footer link
+ */
+function getGitHubIcon() {
+    return `<svg viewBox="0 0 98 96" width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
+          </svg>`;
+}
 
 // Constants for selectors
 const TABGROUP_SELECTOR$1 = 'cv-tabgroup';
@@ -2133,114 +2141,6 @@ class ShareManager {
     }
 }
 
-const SHARE_BUTTON_ID = 'cv-share-button';
-const SHARE_BUTTON_STYLES = `
-  #${SHARE_BUTTON_ID} {
-    position: fixed;
-    bottom: 20px;
-    right: 100px;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background-color: #007bff; /* Primary Blue */
-    color: white;
-    border: none;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Drop shadow */
-    z-index: 9998; /* Below modals (9999) but above content */
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s;
-    opacity: 1;
-    transform: scale(1);
-    padding: 0;
-    margin: 0;
-  }
-
-  #${SHARE_BUTTON_ID}:hover {
-    background-color: #0056b3; /* Darker blue on hover */
-    transform: scale(1.05);
-  }
-
-  #${SHARE_BUTTON_ID}:active {
-    transform: scale(0.95);
-  }
-
-  #${SHARE_BUTTON_ID}.cv-hidden {
-    opacity: 0;
-    pointer-events: none;
-    transform: scale(0.8);
-  }
-
-  @media print {
-    #${SHARE_BUTTON_ID} {
-      display: none !important;
-    }
-  }
-
-  #${SHARE_BUTTON_ID} svg {
-    width: 24px;
-    height: 24px;
-    fill: currentColor;
-  }
-`;
-
-class ShareButton {
-    shareManager;
-    button = null;
-    boundHandleClick;
-    constructor(shareManager) {
-        this.shareManager = shareManager;
-        this.boundHandleClick = () => this.shareManager.toggleShareMode();
-    }
-    init() {
-        if (this.button)
-            return;
-        this.injectStyles();
-        this.button = this.createButton();
-        document.body.appendChild(this.button);
-        // Subscribe to share manager state changes
-        this.shareManager.addStateChangeListener((isActive) => {
-            this.setShareModeActive(isActive);
-        });
-    }
-    destroy() {
-        if (this.button) {
-            this.button.remove();
-            this.button = null;
-        }
-    }
-    createButton() {
-        const btn = document.createElement('button');
-        btn.id = SHARE_BUTTON_ID;
-        btn.setAttribute('aria-label', 'Share specific sections');
-        btn.title = 'Select sections to share';
-        // Using the link icon from utils, ensuring it's white via CSS currentColor
-        btn.innerHTML = getShareIcon();
-        btn.addEventListener('click', this.boundHandleClick);
-        return btn;
-    }
-    injectStyles() {
-        if (!document.getElementById('cv-share-button-styles')) {
-            const style = document.createElement('style');
-            style.id = 'cv-share-button-styles';
-            style.textContent = SHARE_BUTTON_STYLES;
-            document.head.appendChild(style);
-        }
-    }
-    setShareModeActive(isActive) {
-        if (!this.button)
-            return;
-        if (isActive) {
-            this.button.classList.add('cv-hidden');
-        }
-        else {
-            this.button.classList.remove('cv-hidden');
-        }
-    }
-}
-
 const FOCUS_MODE_STYLE_ID = 'cv-focus-mode-styles';
 const BODY_FOCUS_CLASS = 'cv-focus-mode';
 const HIDDEN_CLASS = 'cv-focus-hidden';
@@ -2582,7 +2482,6 @@ class CustomViewsCore {
     visibilityManager;
     observer = null;
     shareManager;
-    shareButton;
     focusManager;
     componentRegistry = {
         toggles: new Set(),
@@ -2605,7 +2504,6 @@ class CustomViewsCore {
         const excludedIds = [...DEFAULT_EXCLUDED_IDS, ...(this.config.shareExclusions?.ids || [])];
         const commonOptions = { excludedTags, excludedIds };
         this.shareManager = new ShareManager(commonOptions);
-        this.shareButton = new ShareButton(this.shareManager);
         this.focusManager = new FocusManager(this.rootEl, commonOptions);
     }
     getShareManager() {
@@ -2756,7 +2654,6 @@ class CustomViewsCore {
         });
         this.loadAndCallApplyState();
         this.focusManager.init();
-        this.shareButton.init();
         this.initObserver();
     }
     initializeNewComponents() {
@@ -4065,6 +3962,33 @@ const WIDGET_STYLES = `
   padding: 0.75rem;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
+  
+.cv-footer-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.5);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.cv-footer-link:hover {
+  color: #3e84f4;
+}
+
+.cv-footer-link svg {
+  opacity: 0.8;
+}
+
+.cv-widget-theme-dark .cv-footer-link {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.cv-widget-theme-dark .cv-footer-link:hover {
+  color: #60a5fa;
+}
 
 .cv-reset-btn,
 .cv-share-btn {
@@ -4256,6 +4180,154 @@ const WIDGET_STYLES = `
     display: none !important;
   }
 }
+/* Widget Modal Tabs */
+.cv-modal-tabs {
+  display: flex;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: 0.5rem;
+}
+
+.cv-tab-content > .cv-content-section + .cv-content-section {
+  margin-top: 1.5rem;
+}
+
+.cv-modal-tab {
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cv-modal-tab:hover {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.cv-modal-tab.active {
+  color: #3e84f4;
+  border-bottom-color: #3e84f4;
+}
+
+.cv-tab-content {
+  display: none;
+  animation: fadeIn 0.3s ease;
+}
+
+.cv-tab-content.active {
+  display: block;
+}
+
+/* Share Tab Content */
+.cv-share-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem 0;
+  align-items: center;
+  text-align: center;
+}
+
+.cv-share-instruction {
+  font-size: 0.9rem;
+  color: rgba(0, 0, 0, 0.7);
+  margin-bottom: 1rem;
+}
+
+.cv-share-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 12px 16px;
+  background: white;
+  color: #333;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.cv-share-action-btn:hover {
+  background: #f8f9fa;
+  border-color: rgba(0, 0, 0, 0.25);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.cv-share-action-btn.primary {
+  background: #3e84f4;
+  color: white;
+  border-color: #3e84f4;
+}
+
+.cv-share-action-btn.primary:hover {
+  background: #2b74e6;
+  border-color: #2b74e6;
+}
+
+.cv-done-btn {
+  padding: 0.375rem 1rem;
+  background: #3e84f4;
+  color: white;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cv-done-btn:hover {
+  background: #2b74e6;
+}
+
+/* Dark Theme Adjustments */
+.cv-widget-theme-dark .cv-modal-tabs {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.cv-widget-theme-dark .cv-modal-tab {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.cv-widget-theme-dark .cv-modal-tab:hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.cv-widget-theme-dark .cv-modal-tab.active {
+  color: #60a5fa;
+  border-bottom-color: #60a5fa;
+}
+
+.cv-widget-theme-dark .cv-share-instruction {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.cv-widget-theme-dark .cv-share-action-btn {
+  background: #1a202c;
+  color: white;
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.cv-widget-theme-dark .cv-share-action-btn:hover {
+  background: #2d3748;
+}
+
+.cv-widget-theme-dark .cv-share-action-btn.primary {
+  background: #3e84f4;
+  border-color: #3e84f4;
+}
+
+.cv-widget-theme-dark .cv-share-action-btn.primary:hover {
+  background: #2b74e6;
+}
 `;
 /**
  * Inject widget styles into the document head
@@ -4278,6 +4350,7 @@ class CustomViewsWidget {
     _hasVisibleConfig = false;
     pageToggleIds = new Set();
     pageTabIds = new Set();
+    currentTab = 'customize';
     // Modal state
     stateModal = null;
     constructor(options) {
@@ -4453,12 +4526,12 @@ class CustomViewsWidget {
             </div>
             <div class="cv-tabgroup-info">
               <div class="cv-tabgroup-title-container">
-                <p class="cv-tabgroup-title">Navigation Headers</p>
+                <p class="cv-tabgroup-title">Show only the selected tab</p>
               </div>
-              <p class="cv-tabgroup-description">Show or hide navigation headers</p>
+              <p class="cv-tabgroup-description">Hide the navigation headers</p>
             </div>
             <label class="cv-toggle-switch cv-nav-toggle">
-              <input class="cv-nav-pref-input" type="checkbox" ${initialNavsVisible ? 'checked' : ''} aria-label="Show or hide navigation headers" />
+              <input class="cv-nav-pref-input" type="checkbox" ${initialNavsVisible ? '' : 'checked'} aria-label="Show only the selected tab" />
               <span class="cv-switch-bg"></span>
               <span class="cv-switch-knob"></span>
             </label>
@@ -4494,37 +4567,64 @@ class CustomViewsWidget {
         <main class="cv-modal-main">
           ${this.options.description ? `<p class="cv-modal-description">${this.options.description}</p>` : ''}
           
-          ${visibleToggles.length ? `
-          <div class="cv-content-section">
-            <div class="cv-section-heading">Toggles</div>
-            <div class="cv-toggles-container">
-              ${toggleControlsHtml}
+          <div class="cv-modal-tabs">
+            <button class="cv-modal-tab ${this.currentTab === 'customize' ? 'active' : ''}" data-tab="customize">Customize</button>
+            <button class="cv-modal-tab ${this.currentTab === 'share' ? 'active' : ''}" data-tab="share">Share</button>
+          </div>
+
+          <div class="cv-tab-content ${this.currentTab === 'customize' ? 'active' : ''}" data-content="customize">
+            ${visibleToggles.length ? `
+            <div class="cv-content-section">
+              <div class="cv-section-heading">Toggles</div>
+              <div class="cv-toggles-container">
+                ${toggleControlsHtml}
+              </div>
             </div>
+            ` : ''}
+            
+            ${this.options.showTabGroups && tabGroups && tabGroups.length > 0 ? `
+            <div class="cv-content-section">
+              <div class="cv-section-heading">Tab Groups</div>
+              <div class="cv-tabgroups-container">
+                ${tabGroupControlsHTML}
+              </div>
+            </div>
+            ` : ''}
           </div>
-          ` : ''}
-          
-          ${this.options.showTabGroups && tabGroups && tabGroups.length > 0 ? `
-          <div class="cv-content-section">
-            <div class="cv-section-heading">Tab Groups</div>
-            <div class="cv-tabgroups-container">
-              ${tabGroupControlsHTML}
+
+          <div class="cv-tab-content ${this.currentTab === 'share' ? 'active' : ''}" data-content="share">
+            <div class="cv-share-content">
+              <div class="cv-share-instruction">
+                Create a shareable link for your current customization, or select specific parts of the page to share.
+              </div>
+              
+              <button class="cv-share-action-btn primary cv-start-share-btn">
+                <span class="cv-btn-icon">${getShareIcon()}</span>
+                <span>Select elements to share</span>
+              </button>
+              
+              <button class="cv-share-action-btn cv-copy-url-btn">
+                <span class="cv-btn-icon">${getCopyIcon()}</span>
+                <span>Copy Shareable URL of Settings</span>
+              </button>
             </div>
           </div>
-          ` : ''}
         </main>
 
         <footer class="cv-modal-footer">
           ${this.options.showReset ? `
-          <button class="cv-reset-btn">
+          <button class="cv-reset-btn" title="Reset to Default">
             <span class="cv-reset-btn-icon">${getResetIcon()}</span>
-            <span>Reset to Default</span>
-          </button>
-          ` : ''}
-          <button class="cv-share-btn">
-            <span>Copy Shareable URL</span>
-            <span class="cv-share-btn-icon">${getCopyIcon()}</span>
+            <span>Reset</span>
           </button>
+          ` : '<div></div>'}
+          
+          <a href="https://github.com/customviews-js/customviews" target="_blank" class="cv-footer-link">
+            ${getGitHubIcon()}
+            <span>View on GitHub</span>
+          </a>
 
+          <button class="cv-done-btn">Done</button>
         </footer>
       </div>
     `;
@@ -4545,20 +4645,6 @@ class CustomViewsWidget {
                 this.closeModal();
                 return;
             }
-            // Copy URL button
-            if (target.closest('.cv-share-btn')) {
-                this.copyShareableURL();
-                const copyUrlBtn = target.closest('.cv-share-btn');
-                const iconContainer = copyUrlBtn?.querySelector('.cv-share-btn-icon');
-                if (iconContainer) {
-                    const originalIcon = iconContainer.innerHTML;
-                    iconContainer.innerHTML = getTickIcon();
-                    setTimeout(() => {
-                        iconContainer.innerHTML = originalIcon;
-                    }, 3000);
-                }
-                return;
-            }
             // Reset to default button
             if (target.closest('.cv-reset-btn')) {
                 const resetBtn = target.closest('.cv-reset-btn');
@@ -4575,6 +4661,11 @@ class CustomViewsWidget {
                 }, 600);
                 return;
             }
+            // Done button
+            if (target.closest('.cv-done-btn')) {
+                this.closeModal();
+                return;
+            }
             // Overlay click to close
             if (e.target === this.stateModal) {
                 this.closeModal();
@@ -4635,10 +4726,10 @@ class CustomViewsWidget {
                     navIcon.innerHTML = isVisible ? getNavHeadingOnIcon() : getNavHeadingOffIcon();
                 }
             };
-            navHeaderCard.addEventListener('mouseenter', () => updateIcon(tabNavToggle.checked, true));
-            navHeaderCard.addEventListener('mouseleave', () => updateIcon(tabNavToggle.checked, false));
+            navHeaderCard.addEventListener('mouseenter', () => updateIcon(!tabNavToggle.checked, true));
+            navHeaderCard.addEventListener('mouseleave', () => updateIcon(!tabNavToggle.checked, false));
             tabNavToggle.addEventListener('change', () => {
-                const visible = tabNavToggle.checked;
+                const visible = !tabNavToggle.checked;
                 updateIcon(visible, false);
                 this.core.persistTabNavVisibility(visible);
                 try {
@@ -4649,6 +4740,48 @@ class CustomViewsWidget {
                 }
             });
         }
+        // Tab switching
+        const tabs = this.stateModal.querySelectorAll('.cv-modal-tab');
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                const tabId = tab.dataset.tab;
+                if (tabId === 'customize' || tabId === 'share') {
+                    this.currentTab = tabId;
+                    // Update UI without full re-render
+                    tabs.forEach(t => t.classList.remove('active'));
+                    tab.classList.add('active');
+                    const contents = this.stateModal?.querySelectorAll('.cv-tab-content');
+                    contents?.forEach(c => {
+                        c.classList.remove('active');
+                        if (c.dataset.content === tabId) {
+                            c.classList.add('active');
+                        }
+                    });
+                }
+            });
+        });
+        // Share buttons (inside content)
+        const startShareBtn = this.stateModal.querySelector('.cv-start-share-btn');
+        if (startShareBtn) {
+            startShareBtn.addEventListener('click', () => {
+                this.closeModal();
+                this.core.toggleShareMode();
+            });
+        }
+        const copyUrlBtn = this.stateModal.querySelector('.cv-copy-url-btn');
+        if (copyUrlBtn) {
+            copyUrlBtn.addEventListener('click', () => {
+                this.copyShareableURL();
+                const iconContainer = copyUrlBtn.querySelector('.cv-btn-icon');
+                if (iconContainer) {
+                    const originalIcon = iconContainer.innerHTML;
+                    iconContainer.innerHTML = getTickIcon();
+                    setTimeout(() => {
+                        iconContainer.innerHTML = originalIcon;
+                    }, 2000);
+                }
+            });
+        }
     }
     /**
      * Apply theme class to the modal overlay based on options
@@ -4744,7 +4877,7 @@ class CustomViewsWidget {
         const tabNavToggle = this.stateModal.querySelector('.cv-nav-pref-input');
         const navIcon = this.stateModal?.querySelector('#cv-nav-icon');
         if (tabNavToggle) {
-            tabNavToggle.checked = navPref;
+            tabNavToggle.checked = !navPref;
             // Ensure UI matches actual visibility
             TabManager.setNavsVisibility(document.body, navPref);
             // Update the nav icon to reflect the current state