softui-css 1.5.0 → 1.6.0

package/dist/softui.js

@@ -3645,5 +3645,282 @@ const SoftUI = (() => {
     });
   }, true);
 
+  // =========================================
+  // 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);
+  });
+
+  // =========================================
+  // 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);
+  }
+
   return { modal, sheet, toast, carousel, sidebar };
 })();