@thisiscrowd/crowdbox 1.0.0

package/src/core/EventEmitter.js

@@ -0,0 +1,43 @@
+export class EventEmitter {
+  constructor() {
+    this._events = Object.create(null);
+  }
+
+  on(event, listener) {
+    if (!this._events[event]) this._events[event] = [];
+    this._events[event].push(listener);
+    return this;
+  }
+
+  once(event, listener) {
+    const wrapper = (...args) => {
+      listener(...args);
+      this.off(event, wrapper);
+    };
+    wrapper._original = listener;
+    return this.on(event, wrapper);
+  }
+
+  off(event, listener) {
+    if (!this._events[event]) return this;
+    this._events[event] = this._events[event].filter(
+      (l) => l !== listener && l._original !== listener
+    );
+    return this;
+  }
+
+  emit(event, ...args) {
+    if (!this._events[event]) return false;
+    [...this._events[event]].forEach((l) => l(...args));
+    return true;
+  }
+
+  removeAllListeners(event) {
+    if (event) {
+      delete this._events[event];
+    } else {
+      this._events = Object.create(null);
+    }
+    return this;
+  }
+}

package/src/core/LightboxGallery.js

@@ -0,0 +1,2 @@
+export { Crowdbox, LightboxGallery } from './Crowdbox.js';
+export { Crowdbox as default } from './Crowdbox.js';

package/src/core/Registry.js

@@ -0,0 +1,26 @@
+// Central registry for media adapters and plugins so the host app
+// can swap or extend them without forking the library.
+const adapters = new Map();
+const plugins = new Map();
+
+export const Registry = {
+  registerAdapter(type, adapter) {
+    adapters.set(type, adapter);
+  },
+
+  getAdapter(type) {
+    return adapters.get(type) ?? null;
+  },
+
+  registerPlugin(name, plugin) {
+    plugins.set(name, plugin);
+  },
+
+  getPlugin(name) {
+    return plugins.get(name) ?? null;
+  },
+
+  getPlugins() {
+    return [...plugins.values()];
+  },
+};

package/src/core/utils.js

@@ -0,0 +1,115 @@
+export function createElement(tag, attrs = {}, ...children) {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs)) {
+    if (k === 'class') el.className = v;
+    else if (k.startsWith('data-')) el.dataset[k.slice(5).replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = v;
+    else if (k === 'aria' || k.startsWith('aria-')) el.setAttribute(k, v);
+    else el[k] = v;
+  }
+  children.flat().forEach((child) => {
+    if (child == null) return;
+    el.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+  });
+  return el;
+}
+
+export function mergeDeep(target, ...sources) {
+  for (const src of sources) {
+    for (const key of Object.keys(src ?? {})) {
+      if (src[key] && typeof src[key] === 'object' && !Array.isArray(src[key])) {
+        if (!target[key] || typeof target[key] !== 'object') target[key] = {};
+        mergeDeep(target[key], src[key]);
+      } else {
+        target[key] = src[key];
+      }
+    }
+  }
+  return target;
+}
+
+export function getYouTubeId(url) {
+  const m = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+  return m ? m[1] : null;
+}
+
+export function getVimeoId(url) {
+  const m = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+  return m ? m[1] : null;
+}
+
+export function isVideoUrl(url) {
+  return /\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(url);
+}
+
+export function isYouTubeUrl(url) {
+  return /youtube\.com|youtu\.be/.test(url);
+}
+
+export function isVimeoUrl(url) {
+  return /vimeo\.com/.test(url);
+}
+
+export function detectMediaType(src) {
+  if (!src) return 'unknown';
+  if (isYouTubeUrl(src)) return 'youtube';
+  if (isVimeoUrl(src)) return 'vimeo';
+  if (isVideoUrl(src)) return 'video';
+  if (/\.(jpg|jpeg|png|gif|webp|avif|svg)(\?.*)?$/i.test(src)) return 'image';
+  return 'iframe';
+}
+
+export function trapFocus(container) {
+  const focusable = container.querySelectorAll(
+    'a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])'
+  );
+  const first = focusable[0];
+  const last = focusable[focusable.length - 1];
+
+  function handler(e) {
+    if (e.key !== 'Tab') return;
+    if (e.shiftKey) {
+      if (document.activeElement === first) { e.preventDefault(); last?.focus(); }
+    } else {
+      if (document.activeElement === last) { e.preventDefault(); first?.focus(); }
+    }
+  }
+  container.addEventListener('keydown', handler);
+  return () => container.removeEventListener('keydown', handler);
+}
+
+export function requestFullscreen(el) {
+  return (el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen)?.call(el);
+}
+
+export function exitFullscreen() {
+  return (document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen)?.call(document);
+}
+
+export function isFullscreen() {
+  return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement);
+}
+
+export function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function noop() {}
+
+export function debounce(fn, ms) {
+  let t;
+  return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
+}
+
+export function isTouchDevice() {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
+
+export function supportsPassive() {
+  let ok = false;
+  try {
+    window.addEventListener('test', null, Object.defineProperty({}, 'passive', { get() { ok = true; } }));
+  } catch (_) {}
+  return ok;
+}
+
+export const passiveOpt = supportsPassive() ? { passive: true } : false;

package/src/index.js

@@ -0,0 +1,61 @@
+// Core
+export { Crowdbox, LightboxGallery } from './core/Crowdbox.js';
+export { EventEmitter }    from './core/EventEmitter.js';
+export { Registry }        from './core/Registry.js';
+
+// Adapters
+import { ImageAdapter }   from './adapters/image.js';
+import { VideoAdapter }   from './adapters/video.js';
+import { YouTubeAdapter } from './adapters/youtube.js';
+import { VimeoAdapter }   from './adapters/vimeo.js';
+import { IframeAdapter }  from './adapters/iframe.js';
+
+// Plugins
+import { ZoomPlugin }       from './plugins/zoom/zoom.js';
+import { ThumbsPlugin }     from './plugins/thumbs/thumbs.js';
+import { FullscreenPlugin } from './plugins/fullscreen/fullscreen.js';
+import { DownloadPlugin }   from './plugins/download/download.js';
+import { SharePlugin }      from './plugins/share/share.js';
+
+export { ImageAdapter, VideoAdapter, YouTubeAdapter, VimeoAdapter, IframeAdapter };
+export { ZoomPlugin, ThumbsPlugin, FullscreenPlugin, DownloadPlugin, SharePlugin };
+
+// Auto-register everything so the library works out of the box
+import { Registry as Reg } from './core/Registry.js';
+
+Reg.registerAdapter('image',   ImageAdapter);
+Reg.registerAdapter('video',   VideoAdapter);
+Reg.registerAdapter('youtube', YouTubeAdapter);
+Reg.registerAdapter('vimeo',   VimeoAdapter);
+Reg.registerAdapter('iframe',  IframeAdapter);
+
+Reg.registerPlugin('zoom',       ZoomPlugin);
+Reg.registerPlugin('thumbnails', ThumbsPlugin);
+Reg.registerPlugin('fullscreen', FullscreenPlugin);
+Reg.registerPlugin('download',   DownloadPlugin);
+Reg.registerPlugin('share',      SharePlugin);
+
+// ─── Convenience factory ─────────────────────────────────────────────────────
+import { Crowdbox } from './core/Crowdbox.js';
+
+/**
+ * Create a Crowdbox instance and return it.
+ * This is the primary public API for vanilla / script-tag usage.
+ */
+export function createGallery(options = {}) {
+  return new Crowdbox(options);
+}
+
+// Auto-init from [data-lgx-init] attribute
+if (typeof document !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[data-lgx-init]').forEach((root) => {
+      try {
+        const opts = JSON.parse(root.dataset.lgxInit || '{}');
+        new Crowdbox({ selector: `#${root.id} [data-lgx]`, ...opts });
+      } catch (_) {}
+    });
+  });
+}
+
+export default Crowdbox;

package/src/plugins/download/download.js

@@ -0,0 +1,50 @@
+export class DownloadPlugin {
+  static pluginName = 'download';
+
+  constructor(gallery) {
+    this.gallery = gallery;
+    this._btn = null;
+  }
+
+  init(gallery) {
+    this.gallery = gallery;
+  }
+
+  buildToolbar(toolbar) {
+    if (!this.gallery.opts.download) return;
+
+    this._btn = document.createElement('button');
+    this._btn.type = 'button';
+    this._btn.className = 'lgx-btn lgx-btn--download';
+    this._btn.setAttribute('aria-label', this.gallery.opts.i18n.download);
+    this._btn.title = this.gallery.opts.i18n.download;
+    this._btn.innerHTML = this.gallery._svgIcon('download').outerHTML;
+    this._btn.addEventListener('click', () => this._download());
+
+    const close = toolbar.querySelector('.lgx-btn--close');
+    toolbar.insertBefore(this._btn, close);
+  }
+
+  afterSlide(index, item) {
+    if (!this._btn) return;
+    // Hide download for video embeds where we can't trigger a download
+    const canDownload = ['image', 'video'].includes(item.type);
+    this._btn.style.display = canDownload ? '' : 'none';
+  }
+
+  _download() {
+    const item = this.gallery._items[this.gallery._index];
+    if (!item) return;
+    const url = item.download || item.src;
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = item.downloadName || url.split('/').pop() || 'download';
+    a.style.display = 'none';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    this.gallery.emit('download', { item });
+  }
+
+  destroy() {}
+}

package/src/plugins/fullscreen/fullscreen.js

@@ -0,0 +1,65 @@
+import { requestFullscreen, exitFullscreen, isFullscreen } from '../../core/utils.js';
+
+export class FullscreenPlugin {
+  static pluginName = 'fullscreen';
+
+  constructor(gallery) {
+    this.gallery = gallery;
+    this._btn = null;
+    this._onChange = null;
+  }
+
+  init(gallery) {
+    this.gallery = gallery;
+  }
+
+  buildToolbar(toolbar) {
+    if (!this.gallery.opts.fullscreen) return;
+
+    this._btn = document.createElement('button');
+    this._btn.type = 'button';
+    this._btn.className = 'lgx-btn lgx-btn--fullscreen';
+    this._btn.setAttribute('aria-label', this.gallery.opts.i18n.fullscreen);
+    this._btn.title = this.gallery.opts.i18n.fullscreen;
+    this._btn.innerHTML = this.gallery._svgIcon('fullscreen').outerHTML;
+    this._btn.addEventListener('click', () => this.toggle());
+
+    const close = toolbar.querySelector('.lgx-btn--close');
+    toolbar.insertBefore(this._btn, close);
+
+    this._onChange = () => this._updateBtn();
+    document.addEventListener('fullscreenchange', this._onChange);
+    document.addEventListener('webkitfullscreenchange', this._onChange);
+  }
+
+  toggle() {
+    if (isFullscreen()) {
+      exitFullscreen();
+    } else {
+      requestFullscreen(this.gallery._dom.modal);
+    }
+  }
+
+  toggleFullscreen() {
+    this.toggle();
+  }
+
+  _updateBtn() {
+    if (!this._btn) return;
+    const full = isFullscreen();
+    this._btn.setAttribute('aria-pressed', full ? 'true' : 'false');
+    this.gallery._dom.modal?.classList.toggle('lgx-modal--fullscreen', full);
+  }
+
+  afterClose() {
+    if (isFullscreen()) exitFullscreen();
+    if (this._onChange) {
+      document.removeEventListener('fullscreenchange', this._onChange);
+      document.removeEventListener('webkitfullscreenchange', this._onChange);
+    }
+  }
+
+  destroy() {
+    this.afterClose();
+  }
+}

package/src/plugins/share/share.js

@@ -0,0 +1,63 @@
+export class SharePlugin {
+  static pluginName = 'share';
+
+  constructor(gallery) {
+    this.gallery = gallery;
+    this._btn = null;
+  }
+
+  init(gallery) {
+    this.gallery = gallery;
+  }
+
+  buildToolbar(toolbar) {
+    if (!this.gallery.opts.share) return;
+
+    this._btn = document.createElement('button');
+    this._btn.type = 'button';
+    this._btn.className = 'lgx-btn lgx-btn--share';
+    this._btn.setAttribute('aria-label', this.gallery.opts.i18n.share);
+    this._btn.title = this.gallery.opts.i18n.share;
+    this._btn.innerHTML = this.gallery._svgIcon('share').outerHTML;
+    this._btn.addEventListener('click', () => this._share());
+
+    const close = toolbar.querySelector('.lgx-btn--close');
+    toolbar.insertBefore(this._btn, close);
+  }
+
+  async _share() {
+    const item = this.gallery._items[this.gallery._index];
+    if (!item) return;
+
+    const shareData = {
+      title: item.caption || document.title,
+      url: item.shareUrl || item.src,
+    };
+
+    // Native Web Share API (mobile)
+    if (navigator.share) {
+      try {
+        await navigator.share(shareData);
+        this.gallery.emit('share', { item, method: 'native' });
+        return;
+      } catch (_) {}
+    }
+
+    // Fallback: copy URL to clipboard
+    if (navigator.clipboard) {
+      await navigator.clipboard.writeText(shareData.url);
+      this._showToast('Link copied!');
+      this.gallery.emit('share', { item, method: 'clipboard' });
+    }
+  }
+
+  _showToast(msg) {
+    const toast = document.createElement('div');
+    toast.className = 'lgx-toast';
+    toast.textContent = msg;
+    this.gallery._dom.modal?.appendChild(toast);
+    setTimeout(() => toast.remove(), 2500);
+  }
+
+  destroy() {}
+}

package/src/plugins/thumbs/thumbs.js

@@ -0,0 +1,108 @@
+export class ThumbsPlugin {
+  static pluginName = 'thumbnails';
+
+  constructor(gallery) {
+    this.gallery = gallery;
+    this._strip = null;
+    this._thumbEls = [];
+    this._observer = null;
+  }
+
+  init(gallery) {
+    this.gallery = gallery;
+  }
+
+  afterBuildDOM() {
+    if (!this.gallery.opts.thumbnails) return;
+    if (this.gallery._items.length < 2) return;
+
+    this._buildStrip();
+  }
+
+  afterSlide(index) {
+    this._activate(index);
+  }
+
+  _buildStrip() {
+    const gallery = this.gallery;
+    const strip = document.createElement('div');
+    strip.className = 'lgx-thumbs';
+    strip.setAttribute('role', 'tablist');
+    strip.setAttribute('aria-label', 'Gallery thumbnails');
+
+    this._thumbEls = gallery._items.map((item, i) => {
+      const thumb = document.createElement('button');
+      thumb.type = 'button';
+      thumb.className = 'lgx-thumb';
+      thumb.setAttribute('role', 'tab');
+      thumb.setAttribute('aria-label', `Slide ${i + 1}${item.caption ? ': ' + item.caption : ''}`);
+      thumb.setAttribute('aria-selected', i === gallery._index ? 'true' : 'false');
+      thumb.dataset.lgxThumbIndex = i;
+
+      const adapter = gallery._resolveAdapter(item);
+      const thumbSrc = adapter?.getThumbnail(item);
+
+      if (thumbSrc) {
+        const img = document.createElement('img');
+        img.alt = '';
+        img.loading = 'lazy';
+
+        // IntersectionObserver lazy load
+        if ('IntersectionObserver' in window) {
+          img.dataset.src = thumbSrc;
+          this._observe(img);
+        } else {
+          img.src = thumbSrc;
+        }
+
+        thumb.appendChild(img);
+      } else {
+        // Video/iframe fallback: show index number
+        thumb.appendChild(document.createTextNode(i + 1));
+        thumb.classList.add('lgx-thumb--no-image');
+      }
+
+      thumb.addEventListener('click', () => gallery.goTo(i));
+      return thumb;
+    });
+
+    this._thumbEls.forEach((t) => strip.appendChild(t));
+    gallery._dom.container.appendChild(strip);
+    gallery._dom.thumbStrip = strip;
+    this._strip = strip;
+
+    this._activate(gallery._index);
+  }
+
+  _activate(index) {
+    this._thumbEls.forEach((t, i) => {
+      const active = i === index;
+      t.classList.toggle('lgx-thumb--active', active);
+      t.setAttribute('aria-selected', active ? 'true' : 'false');
+    });
+
+    // Scroll active thumb into view
+    const activeThumb = this._thumbEls[index];
+    if (activeThumb && this._strip) {
+      activeThumb.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    }
+  }
+
+  _observe(img) {
+    if (!this._observer) {
+      this._observer = new IntersectionObserver((entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            e.target.src = e.target.dataset.src;
+            this._observer.unobserve(e.target);
+          }
+        });
+      }, { rootMargin: '100px' });
+    }
+    this._observer.observe(img);
+  }
+
+  destroy() {
+    this._observer?.disconnect();
+  }
+}

package/src/plugins/zoom/zoom.js

@@ -0,0 +1,51 @@
+export class ZoomPlugin {
+  static pluginName = 'zoom';
+
+  constructor(gallery) {
+    this.gallery = gallery;
+    this._btnIn = null;
+    this._btnOut = null;
+  }
+
+  init(gallery) {
+    this.gallery = gallery;
+  }
+
+  buildToolbar(toolbar) {
+    if (!this.gallery.opts.zoom) return;
+
+    this._btnIn = this._makeBtn('zoomin', this.gallery.opts.i18n.zoomIn, () => this.gallery.zoomIn());
+    this._btnOut = this._makeBtn('zoomout', this.gallery.opts.i18n.zoomOut, () => this.gallery.zoomOut());
+
+    // Insert before close button
+    const close = toolbar.querySelector('.lgx-btn--close');
+    toolbar.insertBefore(this._btnOut, close);
+    toolbar.insertBefore(this._btnIn, this._btnOut);
+  }
+
+  afterSlide(index, item) {
+    const isImage = item.type === 'image';
+    if (this._btnIn) this._btnIn.style.display = isImage ? '' : 'none';
+    if (this._btnOut) this._btnOut.style.display = isImage ? '' : 'none';
+  }
+
+  afterZoom(zoom) {
+    const min = this.gallery.opts.zoomMin;
+    const max = this.gallery.opts.zoomMax;
+    if (this._btnIn) this._btnIn.disabled = zoom >= max;
+    if (this._btnOut) this._btnOut.disabled = zoom <= min;
+  }
+
+  _makeBtn(iconName, label, onClick) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = `lgx-btn lgx-btn--${iconName}`;
+    btn.setAttribute('aria-label', label);
+    btn.title = label;
+    btn.innerHTML = this.gallery._svgIcon(iconName).outerHTML;
+    btn.addEventListener('click', onClick);
+    return btn;
+  }
+
+  destroy() {}
+}

package/src/react/GalleryGrid.jsx

@@ -0,0 +1,75 @@
+import { useState, useCallback } from 'react';
+import { Lightbox } from './Lightbox.jsx';
+
+/**
+ * A ready-to-use responsive grid that opens a Lightbox on click.
+ *
+ * Props:
+ *   items            GalleryItem[]
+ *   columns          number (default 3)
+ *   gap              number in px (default 8)
+ *   lightboxOptions  CrowdboxOptions
+ *   className        string
+ */
+export function GalleryGrid({ items = [], columns = 3, gap = 8, lightboxOptions = {}, className = '' }) {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const handleClick = useCallback((index) => {
+    setActiveIndex(index);
+    setLightboxOpen(true);
+  }, []);
+
+  const gridStyle = {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+    gap: `${gap}px`,
+  };
+
+  return (
+    <>
+      <div className={`lgx-grid ${className}`} style={gridStyle}>
+        {items.map((item, i) => {
+          const thumb = item.thumb || (item.type === 'image' ? item.src : null);
+          return (
+            <button
+              key={i}
+              type="button"
+              className="lgx-grid__item"
+              onClick={() => handleClick(i)}
+              aria-label={item.caption || `Open item ${i + 1}`}
+              style={{
+                padding: 0,
+                border: 'none',
+                background: '#111',
+                cursor: 'pointer',
+                overflow: 'hidden',
+                borderRadius: 4,
+                aspectRatio: '1',
+              }}
+            >
+              {thumb ? (
+                <img
+                  src={thumb}
+                  alt={item.alt || item.caption || ''}
+                  loading="lazy"
+                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+                />
+              ) : (
+                <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#fff', fontSize: 24 }}>▶</span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      <Lightbox
+        items={items}
+        open={lightboxOpen}
+        startIndex={activeIndex}
+        onClose={() => setLightboxOpen(false)}
+        {...lightboxOptions}
+      />
+    </>
+  );
+}