@thisiscrowd/crowdbox 1.0.0

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@thisiscrowd/crowdbox",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A modern, lightweight, extensible Crowdbox gallery plugin supporting images and video",
+  "main": "dist/crowdbox.umd.js",
+  "module": "dist/crowdbox.esm.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/crowdbox.esm.js",
+      "require": "./dist/crowdbox.umd.js"
+    },
+    "./styles": "./dist/crowdbox.css"
+  },
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
+  "scripts": {
+    "dev": "rollup -c rollup.config.js -w",
+    "build": "rollup -c rollup.config.js",
+    "build:css": "sass src/styles/main.scss dist/crowdbox.css --style=compressed",
+    "build:all": "npm run build && npm run build:css",
+    "lint": "eslint src --ext .js",
+    "prepublishOnly": "npm run build:all"
+  },
+  "keywords": [
+    "lightbox",
+    "gallery",
+    "image",
+    "video",
+    "modal",
+    "fancybox",
+    "slider",
+    "zoom",
+    "wordpress",
+    "nextjs",
+    "react"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "rollup": "^3.0.0",
+    "rollup-plugin-scss": "^4.0.0",
+    "sass": "^1.60.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true }
+  }
+}

package/src/adapters/iframe.js

@@ -0,0 +1,30 @@
+export const IframeAdapter = {
+  type: 'iframe',
+
+  canHandle(item) {
+    return item.type === 'iframe';
+  },
+
+  render(item) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'lgx-content lgx-content--iframe';
+
+    const iframe = document.createElement('iframe');
+    iframe.className = 'lgx-iframe';
+    iframe.src = item.src;
+    iframe.allowFullscreen = true;
+    iframe.setAttribute('loading', 'lazy');
+    iframe.title = item.caption ?? 'Embedded content';
+    if (item.iframeWidth) iframe.style.width = item.iframeWidth;
+    if (item.iframeHeight) iframe.style.height = item.iframeHeight;
+
+    iframe.addEventListener('load', () => wrapper.classList.add('lgx-content--loaded'));
+
+    wrapper.appendChild(iframe);
+    return wrapper;
+  },
+
+  getThumbnail(item) {
+    return item.thumb ?? null;
+  },
+};

package/src/adapters/image.js

@@ -0,0 +1,91 @@
+const COLS = 8;
+const ROWS = 7;
+const TILE_DURATION = 420;  // ms — must match CSS animation duration
+const MAX_DELAY     = 380;  // ms — last tile starts at this offset
+
+// Tile colours — dark palette with subtle variation
+const TILE_COLORS = [
+  '#111116', '#13131a', '#0f0f14', '#161620',
+  '#121218', '#101015', '#141419', '#0e0e13',
+];
+
+function buildMosaic() {
+  const mosaic = document.createElement('div');
+  mosaic.className = 'lgx-mosaic';
+  mosaic.style.gridTemplateColumns = `repeat(${COLS}, 1fr)`;
+  mosaic.style.gridTemplateRows    = `repeat(${ROWS}, 1fr)`;
+
+  for (let r = 0; r < ROWS; r++) {
+    for (let c = 0; c < COLS; c++) {
+      const tile = document.createElement('div');
+      tile.className = 'lgx-mosaic__tile';
+
+      // Diagonal wave: top-left tiles dissolve first
+      const diagRatio = (r + c) / (ROWS + COLS - 2); // 0 → 1
+      const delay = Math.round(diagRatio * MAX_DELAY);
+      tile.style.setProperty('--lgx-tile-delay', `${delay}ms`);
+
+      // Pick a colour from the palette so adjacent tiles vary slightly
+      tile.style.background = TILE_COLORS[(r * COLS + c) % TILE_COLORS.length];
+
+      mosaic.appendChild(tile);
+    }
+  }
+
+  return mosaic;
+}
+
+export const ImageAdapter = {
+  type: 'image',
+
+  canHandle(item) {
+    return item.type === 'image' || /\.(jpg|jpeg|png|gif|webp|avif|svg)(\?.*)?$/i.test(item.src ?? '');
+  },
+
+  render(item) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'lgx-content lgx-content--image';
+    // position:relative and overflow:hidden are set in CSS on .lgx-content--image
+    // so the mosaic tiles (position:absolute inside) are clipped correctly.
+
+    const img = document.createElement('img');
+    img.className = 'lgx-image';
+    img.alt = item.alt ?? item.caption ?? '';
+    img.draggable = false;
+
+    // Low-res thumb while full image loads
+    if (item.thumb) {
+      img.src = item.thumb;
+      img.style.filter = 'blur(8px)';
+    }
+
+    const loadStart = Date.now();
+    const hi = new Image();
+    hi.onload = () => {
+      img.src = hi.src;
+      img.style.filter = '';
+      img.style.transition = 'filter 0.3s';
+      wrapper.classList.add('lgx-content--loaded');
+
+      // Skip mosaic when the image was served from cache (load time < 40 ms) —
+      // it would collide with the slide-in transition and cause flickering.
+      const fromNetwork = Date.now() - loadStart > 40;
+      if (fromNetwork) {
+        const mosaic = buildMosaic();
+        wrapper.appendChild(mosaic);
+        const totalMs = MAX_DELAY + TILE_DURATION + 60;
+        setTimeout(() => mosaic.remove(), totalMs);
+      }
+    };
+
+    hi.onerror = () => wrapper.classList.add('lgx-content--error');
+    hi.src = item.src;
+
+    wrapper.appendChild(img);
+    return wrapper;
+  },
+
+  getThumbnail(item) {
+    return item.thumb ?? item.src;
+  },
+};

package/src/adapters/video.js

@@ -0,0 +1,44 @@
+export const VideoAdapter = {
+  type: 'video',
+
+  canHandle(item) {
+    return item.type === 'video' || /\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(item.src ?? '');
+  },
+
+  render(item) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'lgx-content lgx-content--video';
+
+    const video = document.createElement('video');
+    video.className = 'lgx-video';
+    video.controls = true;
+    video.playsInline = true;
+    video.preload = 'metadata';
+    if (item.autoplay) video.autoplay = true;
+    if (item.loop) video.loop = true;
+    if (item.muted) video.muted = true;
+    if (item.poster) video.poster = item.poster;
+    video.addEventListener('play', () => {
+      wrapper.dispatchEvent(new CustomEvent('lgx:media-play', { bubbles: true }));
+    });
+
+    const sources = Array.isArray(item.src) ? item.src : [item.src];
+    sources.forEach((s) => {
+      const src = typeof s === 'string' ? { src: s } : s;
+      const source = document.createElement('source');
+      source.src = src.src;
+      if (src.type) source.type = src.type;
+      video.appendChild(source);
+    });
+
+    wrapper.appendChild(video);
+    wrapper.classList.add('lgx-content--loaded');
+
+    wrapper._pause = () => video.pause();
+    return wrapper;
+  },
+
+  getThumbnail(item) {
+    return item.thumb ?? item.poster ?? null;
+  },
+};

package/src/adapters/vimeo.js

@@ -0,0 +1,52 @@
+import { getVimeoId } from '../core/utils.js';
+
+export const VimeoAdapter = {
+  type: 'vimeo',
+
+  canHandle(item) {
+    return item.type === 'vimeo' || /vimeo\.com/.test(item.src ?? '');
+  },
+
+  render(item) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'lgx-content lgx-content--vimeo lgx-content--iframe';
+
+    const id = getVimeoId(item.src);
+    if (!id) {
+      wrapper.textContent = 'Invalid Vimeo URL';
+      return wrapper;
+    }
+
+    const params = new URLSearchParams({
+      autoplay: item.autoplay ? '1' : '0',
+      title: '0',
+      byline: '0',
+      portrait: '0',
+      api: '1',
+    });
+
+    const iframe = document.createElement('iframe');
+    iframe.className = 'lgx-iframe';
+    iframe.src = `https://player.vimeo.com/video/${id}?${params}`;
+    iframe.allow = 'autoplay; fullscreen; picture-in-picture';
+    iframe.allowFullscreen = true;
+    iframe.setAttribute('loading', 'lazy');
+    iframe.title = item.caption ?? 'Vimeo video';
+
+    iframe.addEventListener('load', () => wrapper.classList.add('lgx-content--loaded'));
+
+    wrapper.appendChild(iframe);
+
+    wrapper._pause = () => {
+      try {
+        iframe.contentWindow?.postMessage('{"method":"pause"}', '*');
+      } catch (_) {}
+    };
+
+    return wrapper;
+  },
+
+  getThumbnail(item) {
+    return item.thumb ?? null;
+  },
+};

package/src/adapters/youtube.js

@@ -0,0 +1,54 @@
+import { getYouTubeId } from '../core/utils.js';
+
+export const YouTubeAdapter = {
+  type: 'youtube',
+
+  canHandle(item) {
+    return item.type === 'youtube' || /youtube\.com|youtu\.be/.test(item.src ?? '');
+  },
+
+  render(item) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'lgx-content lgx-content--youtube lgx-content--iframe';
+
+    const id = getYouTubeId(item.src);
+    if (!id) {
+      wrapper.textContent = 'Invalid YouTube URL';
+      return wrapper;
+    }
+
+    const params = new URLSearchParams({
+      autoplay: item.autoplay ? '1' : '0',
+      rel: '0',
+      modestbranding: '1',
+      enablejsapi: '1',
+      ...(item.start ? { start: item.start } : {}),
+    });
+
+    const iframe = document.createElement('iframe');
+    iframe.className = 'lgx-iframe';
+    iframe.src = `https://www.youtube.com/embed/${id}?${params}`;
+    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
+    iframe.allowFullscreen = true;
+    iframe.setAttribute('loading', 'lazy');
+    iframe.title = item.caption ?? 'YouTube video';
+
+    iframe.addEventListener('load', () => wrapper.classList.add('lgx-content--loaded'));
+
+    wrapper.appendChild(iframe);
+
+    wrapper._pause = () => {
+      try {
+        iframe.contentWindow?.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
+      } catch (_) {}
+    };
+
+    return wrapper;
+  },
+
+  getThumbnail(item) {
+    if (item.thumb) return item.thumb;
+    const id = getYouTubeId(item.src);
+    return id ? `https://img.youtube.com/vi/${id}/mqdefault.jpg` : null;
+  },
+};

package/src/browser.js

@@ -0,0 +1,7 @@
+// Browser / UMD entry point.
+// Runs all adapter + plugin registrations from index.js,
+// then exports Crowdbox as the single default so that
+// window.Crowdbox is the constructor in script-tag usage.
+import './index.js';
+
+export { Crowdbox as default } from './index.js';