softui-css 1.13.0 → 1.14.0

package/dist/softui.js

@@ -303,6 +303,21 @@ const SoftUI = (() => {
     // Drawers
     initDrawers();
 
+    // Editable Text
+    initEditable();
+
+    // Scrollspy
+    initScrollspy();
+
+    // Countdowns
+    initCountdowns();
+
+    // Segmented Controls
+    initSegmented();
+
+    // Navigation Menu
+    initNavMenu();
+
     // Data Tables
     initDataTables();
 
@@ -2646,6 +2661,304 @@ const SoftUI = (() => {
     });
   }
 
+  function initEditable() {
+    document.querySelectorAll('.sui-editable').forEach(function(el) {
+      const valueEl = el.querySelector('.sui-editable-value');
+      if (!valueEl) return;
+
+      el.addEventListener('click', function() {
+        if (el.querySelector('.sui-editable-input')) return; // Already editing
+
+        const currentText = valueEl.textContent;
+        const input = document.createElement('input');
+        input.className = 'sui-editable-input';
+        input.type = 'text';
+        input.value = currentText;
+        input.style.fontSize = getComputedStyle(valueEl).fontSize;
+        input.style.fontWeight = getComputedStyle(valueEl).fontWeight;
+
+        valueEl.style.display = 'none';
+        const icon = el.querySelector('.sui-editable-icon');
+        if (icon) icon.style.display = 'none';
+
+        el.insertBefore(input, valueEl);
+        input.focus();
+        input.select();
+
+        let cancelled = false;
+
+        function save() {
+          if (cancelled) return;
+          const newVal = input.value.trim() || currentText;
+          valueEl.textContent = newVal;
+          valueEl.style.display = '';
+          if (icon) icon.style.display = '';
+          input.remove();
+          el.dispatchEvent(new CustomEvent('editable:save', { detail: { value: newVal, previous: currentText } }));
+        }
+
+        function cancel() {
+          cancelled = true;
+          valueEl.style.display = '';
+          if (icon) icon.style.display = '';
+          input.remove();
+          el.dispatchEvent(new CustomEvent('editable:cancel'));
+        }
+
+        input.addEventListener('keydown', function(e) {
+          if (e.key === 'Enter') { e.preventDefault(); save(); }
+          if (e.key === 'Escape') { e.preventDefault(); cancel(); }
+        });
+
+        input.addEventListener('blur', save);
+      });
+    });
+  }
+
+  function initScrollspy() {
+    document.querySelectorAll('[data-sui-scrollspy]').forEach(function(nav) {
+      const links = nav.querySelectorAll('a[href^="#"]');
+      if (!links.length) return;
+
+      const targetIds = [];
+      links.forEach(function(link) {
+        const id = link.getAttribute('href').slice(1);
+        if (id) targetIds.push(id);
+      });
+
+      // Find scroll container — either specified or auto-detect from first target's scrollable parent
+      const firstTarget = document.getElementById(targetIds[0]);
+      let scrollRoot = null;
+      if (firstTarget) {
+        let parent = firstTarget.parentElement;
+        while (parent && parent !== document.body) {
+          const style = getComputedStyle(parent);
+          if (style.overflowY === 'auto' || style.overflowY === 'scroll') {
+            scrollRoot = parent;
+            break;
+          }
+          parent = parent.parentElement;
+        }
+      }
+
+      const visibleSections = new Set();
+      let clickLock = false;
+
+      const observer = new IntersectionObserver(function(entries) {
+        if (clickLock) return;
+        entries.forEach(function(entry) {
+          if (entry.isIntersecting) {
+            visibleSections.add(entry.target.id);
+          } else {
+            visibleSections.delete(entry.target.id);
+          }
+        });
+        // Check if scrolled to bottom of container
+        let atBottom = false;
+        if (scrollRoot) {
+          atBottom = scrollRoot.scrollTop + scrollRoot.clientHeight >= scrollRoot.scrollHeight - 5;
+        } else {
+          atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 5;
+        }
+
+        if (atBottom && visibleSections.size > 0) {
+          // At bottom — pick the last visible section
+          for (let i = targetIds.length - 1; i >= 0; i--) {
+            if (visibleSections.has(targetIds[i])) {
+              links.forEach(function(l) { l.classList.remove('active'); });
+              const active = nav.querySelector('a[href="#' + targetIds[i] + '"]');
+              if (active) active.classList.add('active');
+              break;
+            }
+          }
+        } else {
+          // Pick the first visible section in document order
+          for (let i = 0; i < targetIds.length; i++) {
+            if (visibleSections.has(targetIds[i])) {
+              links.forEach(function(l) { l.classList.remove('active'); });
+              const active = nav.querySelector('a[href="#' + targetIds[i] + '"]');
+              if (active) active.classList.add('active');
+              break;
+            }
+          }
+        }
+      }, {
+        root: scrollRoot,
+        rootMargin: '0px 0px -30% 0px',
+        threshold: 0
+      });
+
+      targetIds.forEach(function(id) {
+        const el = document.getElementById(id);
+        if (el) observer.observe(el);
+      });
+
+      // Click to scroll and activate
+      links.forEach(function(link) {
+        link.addEventListener('click', function(e) {
+          e.preventDefault();
+          const id = link.getAttribute('href').slice(1);
+          const el = document.getElementById(id);
+          if (!el) return;
+          clickLock = true;
+          links.forEach(function(l) { l.classList.remove('active'); });
+          link.classList.add('active');
+          if (scrollRoot) {
+            scrollRoot.scrollTo({ top: el.offsetTop - scrollRoot.offsetTop, behavior: 'smooth' });
+          } else {
+            el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          }
+          setTimeout(function() { clickLock = false; }, 600);
+        });
+      });
+    });
+  }
+
+  function initCountdowns() {
+    document.querySelectorAll('.sui-countdown[data-date]').forEach(function(el) {
+      const dateStr = el.getAttribute('data-date');
+
+      // Support relative dates: "+2y", "+30d", "+2y5d", "+6h30m"
+      let target;
+      if (dateStr.startsWith('+')) {
+        target = new Date();
+        const parts = dateStr.slice(1).matchAll(/(\d+)([ydhms])/g);
+        for (const p of parts) {
+          const val = parseInt(p[1], 10);
+          const unit = p[2];
+          if (unit === 'y') target.setFullYear(target.getFullYear() + val);
+          else if (unit === 'd') target.setDate(target.getDate() + val);
+          else if (unit === 'h') target.setHours(target.getHours() + val);
+          else if (unit === 'm') target.setMinutes(target.getMinutes() + val);
+          else if (unit === 's') target.setSeconds(target.getSeconds() + val);
+        }
+        target = target.getTime();
+      } else {
+        target = new Date(dateStr).getTime();
+      }
+
+      const yearsEl = el.querySelector('[data-years]');
+      const daysEl = el.querySelector('[data-days]');
+      const hoursEl = el.querySelector('[data-hours]');
+      const minsEl = el.querySelector('[data-minutes]');
+      const secsEl = el.querySelector('[data-seconds]');
+
+      function update() {
+        const now = Date.now();
+        const diff = Math.max(0, target - now);
+        let remaining = diff;
+        const y = Math.floor(remaining / 31536000000);
+        remaining %= 31536000000;
+        const d = Math.floor(remaining / 86400000);
+        remaining %= 86400000;
+        const h = Math.floor(remaining / 3600000);
+        remaining %= 3600000;
+        const m = Math.floor(remaining / 60000);
+        remaining %= 60000;
+        const s = Math.floor(remaining / 1000);
+        if (yearsEl) yearsEl.textContent = String(y).padStart(2, '0');
+        if (daysEl) daysEl.textContent = String(d).padStart(2, '0');
+        if (hoursEl) hoursEl.textContent = String(h).padStart(2, '0');
+        if (minsEl) minsEl.textContent = String(m).padStart(2, '0');
+        if (secsEl) secsEl.textContent = String(s).padStart(2, '0');
+        if (diff === 0) {
+          clearInterval(timer);
+          el.dispatchEvent(new Event('countdown:end'));
+        }
+      }
+
+      update();
+      const timer = setInterval(update, 1000);
+    });
+  }
+
+  function initSegmented() {
+    document.querySelectorAll('.sui-segmented').forEach(function(seg) {
+      const indicator = seg.querySelector('.sui-segmented-indicator');
+      if (!indicator) return;
+
+      function updateIndicator() {
+        const checked = seg.querySelector('input:checked');
+        if (!checked) return;
+        const label = checked.nextElementSibling;
+        if (!label) return;
+        indicator.style.left = label.offsetLeft + 'px';
+        indicator.style.width = label.offsetWidth + 'px';
+      }
+
+      // Initial position
+      updateIndicator();
+
+      // Listen for changes
+      seg.querySelectorAll('input').forEach(function(input) {
+        input.addEventListener('change', updateIndicator);
+      });
+
+      // Recalculate on resize
+      window.addEventListener('resize', updateIndicator);
+    });
+  }
+
+  function initNavMenu() {
+    // Toggle on click
+    document.addEventListener('click', function(e) {
+      if (!e.target.closest) return;
+      const trigger = e.target.closest('.sui-nav-menu-trigger');
+      if (trigger && !trigger.hasAttribute('href')) {
+        const item = trigger.closest('.sui-nav-menu-item');
+        if (!item) return;
+        // Close other open items
+        document.querySelectorAll('.sui-nav-menu-item.open').forEach(function(i) {
+          if (i !== item) i.classList.remove('open');
+        });
+        item.classList.toggle('open');
+        e.stopPropagation();
+        return;
+      }
+      // Click on sub-menu trigger (click mode)
+      const subLink = e.target.closest('.sui-nav-menu-sub > .sui-nav-menu-link');
+      if (subLink) {
+        const sub = subLink.closest('.sui-nav-menu-sub');
+        const panel = sub.closest('.sui-nav-menu-panel');
+        if (panel && panel.closest('.sui-nav-menu-sub-click')) {
+          e.preventDefault();
+          e.stopPropagation();
+          // Close sibling subs
+          panel.querySelectorAll('.sui-nav-menu-sub.open').forEach(function(s) {
+            if (s !== sub) s.classList.remove('open');
+          });
+          sub.classList.toggle('open');
+          return;
+        }
+      }
+
+      // Click on a nav-menu link closes everything
+      const link = e.target.closest('.sui-nav-menu-link');
+      if (link && link.closest('.sui-nav-menu-item')) {
+        document.querySelectorAll('.sui-nav-menu-item.open').forEach(function(i) {
+          i.classList.remove('open');
+        });
+        return;
+      }
+
+      // Click outside closes all
+      if (!e.target.closest('.sui-nav-menu-item')) {
+        document.querySelectorAll('.sui-nav-menu-item.open').forEach(function(i) {
+          i.classList.remove('open');
+        });
+      }
+    });
+
+    // Escape closes
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape') {
+        document.querySelectorAll('.sui-nav-menu-item.open').forEach(function(i) {
+          i.classList.remove('open');
+        });
+      }
+    });
+  }
+
   function initDrawers() {
     document.querySelectorAll('.sui-drawer').forEach(function(backdrop) {
       const panel = backdrop.querySelector('.sui-sheet-bottom');