softui-css 1.5.0 → 1.7.0

package/dist/softui.js

@@ -3645,5 +3645,558 @@ const SoftUI = (() => {
     });
   }, true);
 
-  return { modal, sheet, toast, carousel, sidebar };
+  // =========================================
+  // Image Lightbox
+  // =========================================
+  var lightboxOverlay = null;
+  var lightboxImages = [];
+  var lightboxIndex = 0;
+
+  function createLightbox() {
+    if (lightboxOverlay) return;
+    lightboxOverlay = document.createElement('div');
+    lightboxOverlay.className = 'sui-lightbox-overlay';
+    lightboxOverlay.innerHTML =
+      '<button class="sui-lightbox-close" aria-label="Close">&times;</button>' +
+      '<span class="sui-lightbox-counter"></span>' +
+      '<button class="sui-lightbox-prev" aria-label="Previous"><svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg></button>' +
+      '<button class="sui-lightbox-next" aria-label="Next"><svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg></button>' +
+      '<img src="" alt="">' +
+      '<div class="sui-lightbox-caption"></div>';
+    document.body.appendChild(lightboxOverlay);
+
+    lightboxOverlay.querySelector('.sui-lightbox-close').addEventListener('click', closeLightbox);
+    lightboxOverlay.querySelector('.sui-lightbox-prev').addEventListener('click', function() { showLightboxImage(lightboxIndex - 1); });
+    lightboxOverlay.querySelector('.sui-lightbox-next').addEventListener('click', function() { showLightboxImage(lightboxIndex + 1); });
+    lightboxOverlay.addEventListener('click', function(e) {
+      if (e.target === lightboxOverlay) closeLightbox();
+      if (e.target.tagName === 'IMG') {
+        lightboxOverlay.classList.toggle('zoomed');
+      }
+    });
+    document.addEventListener('keydown', function(e) {
+      if (!lightboxOverlay || !lightboxOverlay.classList.contains('open')) return;
+      if (e.key === 'Escape') closeLightbox();
+      if (e.key === 'ArrowLeft') showLightboxImage(lightboxIndex - 1);
+      if (e.key === 'ArrowRight') showLightboxImage(lightboxIndex + 1);
+    });
+  }
+
+  function openLightbox(images, index) {
+    createLightbox();
+    lightboxImages = images;
+    lightboxIndex = index || 0;
+    showLightboxImage(lightboxIndex);
+    lightboxOverlay.classList.add('open');
+    lightboxOverlay.classList.remove('zoomed');
+    document.body.style.overflow = 'hidden';
+    var hasMultiple = images.length > 1;
+    lightboxOverlay.querySelector('.sui-lightbox-prev').style.display = hasMultiple ? '' : 'none';
+    lightboxOverlay.querySelector('.sui-lightbox-next').style.display = hasMultiple ? '' : 'none';
+    lightboxOverlay.querySelector('.sui-lightbox-counter').style.display = hasMultiple ? '' : 'none';
+  }
+
+  function closeLightbox() {
+    if (lightboxOverlay) {
+      lightboxOverlay.classList.remove('open', 'zoomed');
+      document.body.style.overflow = '';
+    }
+  }
+
+  function showLightboxImage(idx) {
+    if (lightboxImages.length === 0) return;
+    lightboxIndex = (idx + lightboxImages.length) % lightboxImages.length;
+    var item = lightboxImages[lightboxIndex];
+    var img = lightboxOverlay.querySelector('img');
+    var caption = lightboxOverlay.querySelector('.sui-lightbox-caption');
+    var counter = lightboxOverlay.querySelector('.sui-lightbox-counter');
+    img.src = item.src;
+    img.alt = item.alt || '';
+    caption.textContent = item.caption || '';
+    caption.style.display = item.caption ? '' : 'none';
+    counter.textContent = (lightboxIndex + 1) + ' / ' + lightboxImages.length;
+    lightboxOverlay.classList.remove('zoomed');
+  }
+
+  // Vertical gallery — click side thumb to update main
+  document.addEventListener('click', function(e) {
+    var thumb = e.target.closest('.sui-lightbox-vertical-strip .sui-lightbox-thumb');
+    if (!thumb) return;
+    var gallery = thumb.closest('.sui-lightbox-vertical');
+    var main = gallery.querySelector('.sui-lightbox-vertical-main img');
+    var img = thumb.querySelector('img');
+    if (main && img) {
+      main.src = thumb.getAttribute('data-src') || img.src;
+      main.alt = thumb.getAttribute('data-alt') || img.alt;
+    }
+    gallery.querySelectorAll('.sui-lightbox-vertical-strip .sui-lightbox-thumb').forEach(function(t) { t.classList.remove('active'); });
+    thumb.classList.add('active');
+  });
+
+  // Click main image in vertical gallery to open lightbox
+  document.addEventListener('click', function(e) {
+    var main = e.target.closest('.sui-lightbox-vertical-main');
+    if (!main) return;
+    var gallery = main.closest('.sui-lightbox-vertical');
+    var thumbs = Array.from(gallery.querySelectorAll('.sui-lightbox-vertical-strip .sui-lightbox-thumb'));
+    var images = thumbs.map(function(t) {
+      var img = t.querySelector('img');
+      return {
+        src: t.getAttribute('data-src') || (img ? img.src : ''),
+        alt: t.getAttribute('data-alt') || (img ? img.alt : ''),
+        caption: t.getAttribute('data-caption') || ''
+      };
+    });
+    var activeIdx = thumbs.findIndex(function(t) { return t.classList.contains('active'); });
+    openLightbox(images, activeIdx >= 0 ? activeIdx : 0);
+  });
+
+  // Click on thumbnail
+  document.addEventListener('click', function(e) {
+    var thumb = e.target.closest('.sui-lightbox-thumb');
+    if (!thumb) return;
+    // Skip if inside vertical strip (handled above)
+    if (thumb.closest('.sui-lightbox-vertical-strip')) return;
+    var grid = thumb.closest('.sui-lightbox-grid');
+    var thumbs = grid ? Array.from(grid.querySelectorAll('.sui-lightbox-thumb')) : [thumb];
+    var images = thumbs.map(function(t) {
+      var img = t.querySelector('img');
+      return {
+        src: t.getAttribute('data-src') || (img ? img.src : ''),
+        alt: t.getAttribute('data-alt') || (img ? img.alt : ''),
+        caption: t.getAttribute('data-caption') || ''
+      };
+    });
+    var index = thumbs.indexOf(thumb);
+    openLightbox(images, index);
+  });
+
+  // =========================================
+  // Typewriter
+  // =========================================
+  function initTypewriters() {
+    document.querySelectorAll('[data-sui-typewriter]').forEach(function(el) {
+      if (el.dataset.suiTypewriterInit) return;
+      el.dataset.suiTypewriterInit = '1';
+      var words = el.getAttribute('data-words');
+      var speed = parseInt(el.getAttribute('data-speed')) || 80;
+      var deleteSpeed = parseInt(el.getAttribute('data-delete-speed')) || 40;
+      var pause = parseInt(el.getAttribute('data-pause')) || 1500;
+      var loop = el.hasAttribute('data-loop');
+
+      if (words) {
+        // Multiple phrases mode
+        var phrases = words.split('|').map(function(s) { return s.trim(); });
+        var phraseIdx = 0;
+        var charIdx = 0;
+        var deleting = false;
+
+        function tick() {
+          var current = phrases[phraseIdx];
+          if (!deleting) {
+            charIdx++;
+            el.textContent = current.substring(0, charIdx);
+            if (charIdx === current.length) {
+              if (!loop && phraseIdx === phrases.length - 1) return;
+              setTimeout(function() { deleting = true; tick(); }, pause);
+              return;
+            }
+            setTimeout(tick, speed);
+          } else {
+            charIdx--;
+            el.textContent = current.substring(0, charIdx);
+            if (charIdx === 0) {
+              deleting = false;
+              phraseIdx = (phraseIdx + 1) % phrases.length;
+              setTimeout(tick, speed);
+              return;
+            }
+            setTimeout(tick, deleteSpeed);
+          }
+        }
+
+        el.textContent = '';
+        setTimeout(tick, 500);
+      } else {
+        // Single text mode — type out existing content
+        var text = el.textContent;
+        el.textContent = '';
+        var i = 0;
+        function typeChar() {
+          if (i < text.length) {
+            el.textContent += text[i];
+            i++;
+            setTimeout(typeChar, speed);
+          }
+        }
+        setTimeout(typeChar, 500);
+      }
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTypewriters);
+  } else {
+    initTypewriters();
+  }
+
+  // =========================================
+  // Text Rotate
+  // =========================================
+  function initTextRotate() {
+    document.querySelectorAll('[data-sui-text-rotate]').forEach(function(el) {
+      if (el.dataset.suiRotateInit) return;
+      el.dataset.suiRotateInit = '1';
+      var words = el.querySelectorAll('.sui-text-rotate-word');
+      if (words.length < 2) return;
+      var interval = parseInt(el.getAttribute('data-interval')) || 2000;
+      var index = 0;
+
+      words[0].classList.add('active');
+
+      setInterval(function() {
+        var current = words[index];
+        current.classList.remove('active');
+        current.classList.add('exit');
+        setTimeout(function() { current.classList.remove('exit'); }, 400);
+
+        index = (index + 1) % words.length;
+        words[index].classList.add('active');
+      }, interval);
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTextRotate);
+  } else {
+    initTextRotate();
+  }
+
+  // =========================================
+  // Copy Button
+  // =========================================
+  var clipboardSvg = '<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>';
+  var checkSvg = '<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>';
+
+  document.addEventListener('click', function(e) {
+    var btn = e.target.closest('[data-sui-copy]');
+    if (!btn) return;
+    var text = btn.getAttribute('data-sui-copy');
+    if (!text) {
+      var wrap = btn.closest('.sui-copy, .sui-copy-input');
+      if (wrap) {
+        var textEl = wrap.querySelector('.sui-copy-text');
+        var inputEl = wrap.querySelector('.sui-input');
+        text = textEl ? textEl.textContent : inputEl ? inputEl.value : '';
+      }
+    }
+    if (!text) return;
+    try { navigator.clipboard.writeText(text.trim()); } catch (err) {}
+    btn.classList.add('copied');
+    btn.innerHTML = checkSvg;
+    setTimeout(function() {
+      btn.classList.remove('copied');
+      btn.innerHTML = clipboardSvg;
+    }, 1500);
+  });
+
+  // =========================================
+  // Diff — Image Compare Slider
+  // =========================================
+  function initDiffSliders() {
+    document.querySelectorAll('.sui-diff[data-sui-diff]').forEach(function(diff) {
+      if (diff.dataset.suiDiffInit) return;
+      diff.dataset.suiDiffInit = '1';
+      var handle = diff.querySelector('.sui-diff-handle');
+      var before = diff.querySelector('.sui-diff-before');
+      if (!handle || !before) return;
+      var isVertical = diff.classList.contains('sui-diff-vertical');
+
+      function onMove(e) {
+        e.preventDefault();
+        var rect = diff.getBoundingClientRect();
+        var pos;
+        if (isVertical) {
+          var clientY = e.touches ? e.touches[0].clientY : e.clientY;
+          pos = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
+          var pct = (pos * 100);
+          before.style.clipPath = 'inset(0 0 ' + (100 - pct) + '% 0)';
+          handle.style.top = pct + '%';
+        } else {
+          var clientX = e.touches ? e.touches[0].clientX : e.clientX;
+          pos = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+          var pct = (pos * 100);
+          before.style.clipPath = 'inset(0 ' + (100 - pct) + '% 0 0)';
+          handle.style.left = pct + '%';
+        }
+      }
+
+      function onDown(e) {
+        e.preventDefault();
+        onMove(e);
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('touchmove', onMove, { passive: false });
+        document.addEventListener('touchend', onUp);
+      }
+
+      function onUp() {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        document.removeEventListener('touchmove', onMove);
+        document.removeEventListener('touchend', onUp);
+      }
+
+      diff.addEventListener('mousedown', onDown);
+      diff.addEventListener('touchstart', onDown, { passive: false });
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initDiffSliders);
+  } else {
+    initDiffSliders();
+  }
+
+  // =========================================
+  // Speed Dial
+  // =========================================
+  document.addEventListener('click', function(e) {
+    var trigger = e.target.closest('.sui-speed-dial-trigger');
+    if (trigger) {
+      var dial = trigger.closest('.sui-speed-dial');
+      dial.classList.toggle('open');
+      return;
+    }
+    var action = e.target.closest('.sui-speed-dial-action');
+    if (action) {
+      var dial = action.closest('.sui-speed-dial');
+      dial.classList.remove('open');
+      return;
+    }
+    // Close all open dials when clicking outside
+    document.querySelectorAll('.sui-speed-dial.open').forEach(function(d) {
+      d.classList.remove('open');
+    });
+  });
+
+  // Hover mode
+  document.addEventListener('mouseenter', function(e) {
+    var dial = e.target.closest('.sui-speed-dial-hover');
+    if (dial) dial.classList.add('open');
+  }, true);
+
+  document.addEventListener('mouseleave', function(e) {
+    var dial = e.target.closest('.sui-speed-dial-hover');
+    if (dial) dial.classList.remove('open');
+  }, true);
+
+  // =========================================
+  // Tree View
+  // =========================================
+  document.addEventListener('click', function(e) {
+    var label = e.target.closest('.sui-tree-label');
+    if (!label) return;
+    if (e.target.closest('.sui-checkbox')) return;
+    var item = label.closest('.sui-tree-item');
+    var children = item.querySelector('.sui-tree-children');
+    if (children) {
+      item.classList.toggle('expanded');
+    }
+  });
+
+  // Tree checkbox propagation
+  document.addEventListener('change', function(e) {
+    if (!e.target.closest('.sui-tree .sui-checkbox input')) return;
+    var checkbox = e.target;
+    var item = checkbox.closest('.sui-tree-item');
+    var checked = checkbox.checked;
+
+    // Propagate down — check/uncheck all children
+    var childBoxes = item.querySelectorAll('.sui-tree-children .sui-checkbox input');
+    childBoxes.forEach(function(cb) {
+      cb.checked = checked;
+      cb.indeterminate = false;
+    });
+
+    // Propagate up — update parent state
+    updateTreeParent(item);
+  });
+
+  function updateTreeParent(item) {
+    var parentChildren = item.closest('.sui-tree-children');
+    if (!parentChildren) return;
+    var parentItem = parentChildren.closest('.sui-tree-item');
+    if (!parentItem) return;
+    var parentCb = parentItem.querySelector(':scope > .sui-tree-label .sui-checkbox input');
+    if (!parentCb) return;
+
+    var siblings = parentChildren.querySelectorAll(':scope > .sui-tree-item > .sui-tree-label .sui-checkbox input');
+    var total = siblings.length;
+    var checkedCount = 0;
+    siblings.forEach(function(cb) { if (cb.checked) checkedCount++; });
+
+    if (checkedCount === 0) {
+      parentCb.checked = false;
+      parentCb.indeterminate = false;
+    } else if (checkedCount === total) {
+      parentCb.checked = true;
+      parentCb.indeterminate = false;
+    } else {
+      parentCb.checked = false;
+      parentCb.indeterminate = true;
+    }
+
+    // Continue up the tree
+    updateTreeParent(parentItem);
+  }
+
+  // =========================================
+  // Tour / Walkthrough
+  // =========================================
+  function tour(steps, options) {
+    options = options || {};
+    var currentStep = 0;
+    var overlay, backdrop, spotlight, tooltip;
+    var padding = options.padding || 8;
+    var noOverlay = options.noOverlay || false;
+
+    function create() {
+      overlay = document.createElement('div');
+      overlay.className = 'sui-tour-overlay' + (noOverlay ? ' sui-tour-no-overlay' : '');
+      backdrop = document.createElement('div');
+      backdrop.className = 'sui-tour-backdrop';
+      spotlight = document.createElement('div');
+      spotlight.className = 'sui-tour-spotlight';
+      tooltip = document.createElement('div');
+      tooltip.className = 'sui-tour-tooltip';
+      overlay.appendChild(backdrop);
+      overlay.appendChild(spotlight);
+      overlay.appendChild(tooltip);
+      document.body.appendChild(overlay);
+
+      backdrop.addEventListener('click', close);
+    }
+
+    var firstShow = true;
+
+    function show(idx) {
+      currentStep = idx;
+      var step = steps[idx];
+      var target = document.querySelector(step.target);
+
+      // Only hide on first show to avoid flash between steps
+      if (firstShow) {
+        spotlight.style.opacity = '0';
+        tooltip.style.opacity = '0';
+        firstShow = false;
+      }
+
+      // Scroll if element isn't comfortably in view (with margin for tooltip)
+      var needsScroll = false;
+      if (target) {
+        var r = target.getBoundingClientRect();
+        var margin = 120;
+        needsScroll = r.top < margin || r.bottom > window.innerHeight - margin;
+        if (needsScroll) target.scrollIntoView({ block: 'center', behavior: 'smooth' });
+      }
+      setTimeout(function() {
+      if (target) {
+        var rect = target.getBoundingClientRect();
+        spotlight.style.top = (rect.top - padding) + 'px';
+        spotlight.style.left = (rect.left - padding) + 'px';
+        spotlight.style.width = (rect.width + padding * 2) + 'px';
+        spotlight.style.height = (rect.height + padding * 2) + 'px';
+      }
+
+      // Build tooltip content
+      var dotsHtml = '';
+      if (steps.length > 1) {
+        dotsHtml = '<div class="sui-tour-dots">';
+        for (var i = 0; i < steps.length; i++) {
+          dotsHtml += '<span class="sui-tour-dot' + (i === idx ? ' active' : '') + '"></span>';
+        }
+        dotsHtml += '</div>';
+      }
+
+      tooltip.innerHTML =
+        '<div class="sui-tour-tooltip-title">' + (step.title || '') + '</div>' +
+        '<div class="sui-tour-tooltip-desc">' + (step.description || '') + '</div>' +
+        '<div class="sui-tour-tooltip-footer">' +
+          dotsHtml +
+          '<div class="sui-tour-tooltip-actions">' +
+            (idx > 0 ? '<button class="sui-btn sui-btn-sm sui-tour-prev">Back</button>' : '<button class="sui-btn sui-btn-sm sui-tour-skip">Skip</button>') +
+            (idx < steps.length - 1 ? '<button class="sui-btn sui-btn-primary sui-btn-sm sui-tour-next">Next</button>' : '<button class="sui-btn sui-btn-primary sui-btn-sm sui-tour-done">Done</button>') +
+          '</div>' +
+        '</div>';
+
+      // Button handlers
+      var nextBtn = tooltip.querySelector('.sui-tour-next');
+      var prevBtn = tooltip.querySelector('.sui-tour-prev');
+      var skipBtn = tooltip.querySelector('.sui-tour-skip');
+      var doneBtn = tooltip.querySelector('.sui-tour-done');
+      if (nextBtn) nextBtn.addEventListener('click', function() { show(currentStep + 1); });
+      if (prevBtn) prevBtn.addEventListener('click', function() { show(currentStep - 1); });
+      if (skipBtn) skipBtn.addEventListener('click', close);
+      if (doneBtn) doneBtn.addEventListener('click', close);
+
+      // Position tooltip after scroll settles
+      if (target) {
+        var rect = target.getBoundingClientRect();
+        var pos = step.position || 'bottom';
+        var tooltipW = 300;
+        var centerX = rect.left + rect.width / 2 - tooltipW / 2;
+        var top, left;
+
+        tooltip.style.transform = '';
+
+        if (pos === 'bottom') {
+          top = rect.bottom + padding + 12;
+          left = centerX;
+        } else if (pos === 'top') {
+          top = rect.top - padding - 12;
+          left = centerX;
+          tooltip.style.transform = 'translateY(-100%)';
+        } else if (pos === 'left') {
+          top = rect.top + rect.height / 2;
+          left = rect.left - padding - tooltipW - 12;
+          tooltip.style.transform = 'translateY(-50%)';
+        } else if (pos === 'right') {
+          top = rect.top + rect.height / 2;
+          left = rect.right + padding + 12;
+          tooltip.style.transform = 'translateY(-50%)';
+        }
+
+        // Keep tooltip within viewport
+        left = Math.max(8, Math.min(left, window.innerWidth - tooltipW - 8));
+        top = Math.max(8, Math.min(top, window.innerHeight - 200));
+        tooltip.style.top = top + 'px';
+        tooltip.style.left = left + 'px';
+      }
+      // Reveal after positioning
+      spotlight.style.opacity = '1';
+      tooltip.style.opacity = '1';
+      }, needsScroll ? 350 : 50);
+
+      overlay.classList.add('active');
+    }
+
+    function close() {
+      if (overlay) {
+        overlay.classList.remove('active');
+        setTimeout(function() {
+          if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+          overlay = null;
+        }, 300);
+      }
+      if (options.onComplete) options.onComplete();
+    }
+
+    create();
+    show(0);
+
+    return { next: function() { show(currentStep + 1); }, prev: function() { show(currentStep - 1); }, close: close, goTo: show };
+  }
+
+  return { modal, sheet, toast, carousel, sidebar, tour };
 })();