@unlk/keymaster 1.4.3 → 1.4.6

package/js/bootstrap.js

@@ -12,4 +12,5 @@ export { default as Tab } from 'bootstrap/js/dist/tab';
 export { default as Tooltip } from 'bootstrap/js/dist/tooltip';
 export { default as Datepicker } from './datepicker';
 export { default as CarouselCaption } from './carousel-caption';
+export { default as CarouselHeight } from './carousel-height';
 export { default as VideoModal } from './video-modal';

package/js/carousel-caption.js

@@ -4,7 +4,6 @@ import SelectorEngine from 'bootstrap/js/src/dom/selector-engine.js';
 import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js';
 
 const NAME = 'carouselCaption';
-const DATA_KEY = 'bs.carouselCaption';
 const EVENT_SLID = 'slid.bs.carousel';
 const SELECTOR_CAROUSEL = '.carousel';
 const SELECTOR_CAPTION = '.carousel-caption-container p';
@@ -12,31 +11,14 @@ const SELECTOR_CAPTION = '.carousel-caption-container p';
 class CarouselCaption extends BaseComponent {
   constructor(element) {
     super(element);
-
     this._captionEl = this._findCaptionEl();
-    if (!this._captionEl) {
-      return;
-    }
-
-    this._updateCaption(); // Initialize
-    this._bindEvents();
-  }
-
-  dispose() {
-    EventHandler.off(this._element, EVENT_SLID);
-    super.dispose();
-  }
-
-  _bindEvents() {
-    EventHandler.on(this._element, EVENT_SLID, () => this._updateCaption());
+    this._updateCaption();
   }
 
   _updateCaption() {
+    if (!this._captionEl) return;
     const activeItem = SelectorEngine.findOne('.carousel-item.active', this._element);
-    const newCaption = activeItem?.getAttribute('data-caption');
-    if (this._captionEl && newCaption) {
-      this._captionEl.textContent = newCaption || '';
-    }
+    this._captionEl.textContent = activeItem?.getAttribute('data-caption') ?? '';
   }
 
   _findCaptionEl() {
@@ -54,11 +36,8 @@ class CarouselCaption extends BaseComponent {
   }
 }
 
-// Auto-init on DOMContentLoaded
-document.addEventListener('DOMContentLoaded', () => {
-  for (const el of SelectorEngine.find(SELECTOR_CAROUSEL)) {
-    CarouselCaption.getOrCreateInstance(el);
-  }
+EventHandler.on(document, EVENT_SLID, SELECTOR_CAROUSEL, function () {
+  CarouselCaption.getOrCreateInstance(this)._updateCaption();
 });
 
 defineJQueryPlugin(CarouselCaption);

package/js/carousel-height.js

@@ -0,0 +1,56 @@
+import BaseComponent from 'bootstrap/js/src/base-component.js';
+import EventHandler from 'bootstrap/js/src/dom/event-handler.js';
+import SelectorEngine from 'bootstrap/js/src/dom/selector-engine.js';
+import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js';
+
+const NAME = 'carouselHeight';
+const EVENT_SLIDE = 'slide.bs.carousel';
+const EVENT_SLID = 'slid.bs.carousel';
+const SELECTOR_CAROUSEL = '.carousel';
+const SELECTOR_INNER = '.carousel-inner';
+
+class CarouselHeight extends BaseComponent {
+  constructor(element) {
+    super(element);
+    this._inner = SelectorEngine.findOne(SELECTOR_INNER, this._element);
+  }
+
+  _onSlide(e) {
+    if (!this._inner) return;
+    const nextSlide = e.relatedTarget;
+    if (!nextSlide) return;
+
+    this._inner.style.height = `${this._inner.offsetHeight}px`;
+
+    requestAnimationFrame(() => {
+      this._inner.style.height = `${nextSlide.offsetHeight}px`;
+    });
+  }
+
+  _onSlid() {
+    if (!this._inner) return;
+    this._inner.style.height = '';
+  }
+
+  static get NAME() {
+    return NAME;
+  }
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      CarouselHeight.getOrCreateInstance(this, config);
+    });
+  }
+}
+
+EventHandler.on(document, EVENT_SLIDE, SELECTOR_CAROUSEL, function (e) {
+  CarouselHeight.getOrCreateInstance(this)._onSlide(e);
+});
+
+EventHandler.on(document, EVENT_SLID, SELECTOR_CAROUSEL, function () {
+  CarouselHeight.getOrCreateInstance(this)._onSlid();
+});
+
+defineJQueryPlugin(CarouselHeight);
+
+export default CarouselHeight;

package/js/datepicker.js

@@ -67,7 +67,7 @@ EventHandler.on(document, EVENT_FOCUS_DATA_API, SELECTOR_INPUT, (event) => {
 });
 
 function isTouchDevice() {
-  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+  return 'ontouchstart' in globalThis || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
 }
 
 /**

package/js/video-modal.js

@@ -4,24 +4,25 @@ import SelectorEngine from 'bootstrap/js/src/dom/selector-engine.js';
 import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js';
 
 const NAME = 'videoModal';
-const DATA_KEY = 'bs.videoModal';
 const EVENT_SHOW = 'show.bs.modal';
 const EVENT_HIDDEN = 'hidden.bs.modal';
+const SELECTOR_MODAL = '.modal';
 const SELECTOR_DIALOG = '.modal-dialog-media';
 const SELECTOR_RATIO = '.ratio';
 
 // eslint-disable-next-line no-unused-vars
 let youTubeAPIReady = false;
 const youTubeAPIInitPromise = new Promise((resolve) => {
-  if (window.YT?.Player) {
+  if (globalThis.YT?.Player) {
     youTubeAPIReady = true;
     resolve();
   } else {
-    const prev = window.onYouTubeIframeAPIReady;
-    window.onYouTubeIframeAPIReady = () => {
+    const prev = globalThis.onYouTubeIframeAPIReady;
+    globalThis.onYouTubeIframeAPIReady = () => {
       try {
         if (typeof prev === 'function') prev();
       } catch {}
+
       youTubeAPIReady = true;
       resolve();
     };
@@ -35,7 +36,7 @@ const youTubeAPIInitPromise = new Promise((resolve) => {
 // eslint-disable-next-line no-unused-vars
 let vimeoAPIReady = false;
 const vimeoAPIInitPromise = new Promise((resolve) => {
-  if (window.Vimeo?.Player) {
+  if (globalThis.Vimeo?.Player) {
     vimeoAPIReady = true;
     resolve();
   } else {
@@ -56,18 +57,10 @@ class VideoModal extends BaseComponent {
 
     this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
     this._container = SelectorEngine.findOne(SELECTOR_RATIO, this._element);
-
-    if (!this._dialog || !this._container) {
-      return;
-    }
-
-    this._youtubeSrc = this._container.getAttribute('data-src');
-    this._vimeoUrl = this._container.getAttribute('data-vimeo-url');
+    this._youtubeSrc = this._container?.getAttribute('data-src');
+    this._vimeoUrl = this._container?.getAttribute('data-vimeo-url');
     this._youtubePlayer = null;
     this._vimeoPlayer = null;
-
-    EventHandler.on(this._element, EVENT_SHOW, () => this._onShow());
-    EventHandler.on(this._element, EVENT_HIDDEN, () => this._onHide());
   }
 
   dispose() {
@@ -83,7 +76,7 @@ class VideoModal extends BaseComponent {
       await vimeoAPIInitPromise;
       const vimeoId = this._getVimeoId(this._vimeoUrl);
 
-      this._vimeoPlayer = new window.Vimeo.Player(this._container, {
+      this._vimeoPlayer = new globalThis.Vimeo.Player(this._container, {
         id: vimeoId,
         autoplay: true
       });
@@ -99,7 +92,7 @@ class VideoModal extends BaseComponent {
       const youtubeId = this._getYouTubeId(this._youtubeSrc);
       const playerDiv = this._container.querySelector(`#${playerID}`);
 
-      this._youtubePlayer = new window.YT.Player(playerDiv, {
+      this._youtubePlayer = new globalThis.YT.Player(playerDiv, {
         videoId: youtubeId,
         playerVars: { autoplay: 1, rel: 0 }
       });
@@ -147,16 +140,14 @@ class VideoModal extends BaseComponent {
   }
 }
 
-// Auto-init
-document.addEventListener('DOMContentLoaded', () => {
-  const modals = SelectorEngine.find('[data-bs-toggle="modal"][data-bs-target]');
-  for (const btn of modals) {
-    const targetSelector = btn.getAttribute('data-bs-target');
-    const modal = document.querySelector(targetSelector);
-    if (modal?.querySelector(SELECTOR_DIALOG)) {
-      VideoModal.getOrCreateInstance(modal);
-    }
-  }
+EventHandler.on(document, EVENT_SHOW, SELECTOR_MODAL, function () {
+  if (!SelectorEngine.findOne(SELECTOR_DIALOG, this)) return;
+  VideoModal.getOrCreateInstance(this)._onShow();
+});
+
+EventHandler.on(document, EVENT_HIDDEN, SELECTOR_MODAL, function () {
+  if (!SelectorEngine.findOne(SELECTOR_DIALOG, this)) return;
+  VideoModal.getOrCreateInstance(this)._onHide();
 });
 
 defineJQueryPlugin(VideoModal);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.4.3",
+  "version": "1.4.6",
   "publishConfig": {
     "access": "public"
   },
@@ -8,12 +8,12 @@
   "main": "index.js",
   "scripts": {
     "bs": "browser-sync start --config build/browser-sync.config.js",
-    "css": "npm-run-all css-compile css-postcss css-minify",
+    "css": "npm-run-all css-lint css-compile css-postcss css-minify",
     "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css --quiet scss/keymaster.scss:dist/css/keymaster.css",
-    "css-lint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
+    "css-lint": "stylelint \"**/*.{scss,css}\" --cache --cache-location .cache/.stylelintcache --rd",
     "css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-postcss": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
-    "js": "npm-run-all js-compile js-minify",
+    "js": "npm-run-all js-lint js-compile js-minify",
     "js-compile": "rollup --config build/rollup.config.js --sourcemap",
     "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js .",
     "js-minify": "terser --config-file build/terser.config.json --output dist/js/keymaster.min.js dist/js/keymaster.js",
@@ -28,10 +28,15 @@
     "dist-clean": "node build/dist-clean.js",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint"
   },
+  "exports": {
+    "./*": "./*",
+    "./react": "./react/index.js"
+  },
   "files": [
     "dist",
     "scss",
     "js",
+    "react",
     "fonts",
     "README.md",
     "CHANGELOG.md"
@@ -51,7 +56,13 @@
   "homepage": "https://keymaster.unlock.com",
   "peerDependencies": {
     "@popperjs/core": "^2.11.0",
-    "bootstrap": "^5.3.0"
+    "bootstrap": "^5.3.0",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",

package/react/index.js

@@ -0,0 +1,4 @@
+export { useDatepicker } from './use-datepicker.js';
+export { useCarouselCaption } from './use-carousel-caption.js';
+export { useCarouselHeight } from './use-carousel-height.js';
+export { useVideoModal } from './use-video-modal.js';

package/react/use-carousel-caption.js

@@ -0,0 +1,24 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Replicates carousel-caption.js behaviour in React.
+ *
+ * Tracks the active slide index and returns the caption for that slide,
+ * replacing the Bootstrap slid.bs.carousel event listener.
+ *
+ * @param {Array<{ caption: string }>} slides - Array of slide data objects
+ *
+ * Usage:
+ *   const { activeIndex, onSelect, caption } = useCarouselCaption(slides);
+ *   <Carousel activeIndex={activeIndex} onSelect={onSelect}>...</Carousel>
+ *   <div className="carousel-caption-container"><p>{caption}</p></div>
+ */
+export function useCarouselCaption(slides) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const onSelect = useCallback((index) => setActiveIndex(index), []);
+
+  const caption = slides[activeIndex]?.caption ?? '';
+
+  return { activeIndex, onSelect, caption };
+}

package/react/use-carousel-height.js

@@ -0,0 +1,39 @@
+import { useRef, useCallback } from 'react';
+
+/**
+ * Replicates carousel-height.js behaviour in React.
+ *
+ * Animates .carousel-inner height between slides of different heights,
+ * replacing the Bootstrap slide.bs.carousel / slid.bs.carousel listeners.
+ *
+ * Attach `ref` to the wrapping element or the <Carousel> element,
+ * and pass onSlide / onSlid to the <Carousel> component.
+ *
+ * Usage:
+ *   const { ref, onSlide, onSlid } = useCarouselHeight();
+ *   <Carousel ref={ref} onSlide={onSlide} onSlid={onSlid}>...</Carousel>
+ */
+export function useCarouselHeight() {
+  const ref = useRef(null);
+
+  const onSlide = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const inner = el.querySelector('.carousel-inner');
+    const next = el.querySelector('.carousel-item-next, .carousel-item-prev');
+    if (!inner || !next) return;
+    inner.style.height = `${inner.offsetHeight}px`;
+    requestAnimationFrame(() => {
+      inner.style.height = `${next.offsetHeight}px`;
+    });
+  }, []);
+
+  const onSlid = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const inner = el.querySelector('.carousel-inner');
+    if (inner) inner.style.height = '';
+  }, []);
+
+  return { ref, onSlide, onSlid };
+}

package/react/use-datepicker.js

@@ -0,0 +1,33 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Replicates datepicker.js behaviour in React.
+ *
+ * Renders as type="text" (so the floating label placeholder shows),
+ * switches to type="date" on focus (opens the native date picker),
+ * and reverts on blur if no value is selected.
+ *
+ * Usage:
+ *   const dp = useDatepicker();
+ *   <input type={dp.type} className={dp.hasValue ? 'has-value' : ''}
+ *          onFocus={dp.onFocus} onBlur={dp.onBlur} onChange={dp.onChange} />
+ */
+export function useDatepicker() {
+  const [type, setType] = useState('text');
+  const [hasValue, setHasValue] = useState(false);
+
+  const onFocus = useCallback(() => setType('date'), []);
+
+  const onBlur = useCallback((e) => {
+    if (!e.target.value) {
+      setType('text');
+      setHasValue(false);
+    }
+  }, []);
+
+  const onChange = useCallback((e) => {
+    setHasValue(Boolean(e.target.value));
+  }, []);
+
+  return { type, hasValue, onFocus, onBlur, onChange };
+}

package/react/use-video-modal.js

@@ -0,0 +1,132 @@
+import { useRef, useCallback } from 'react';
+
+// Module-level promises so the API scripts are only ever loaded once
+let ytAPIPromise = null;
+let vimeoAPIPromise = null;
+
+function loadYouTubeAPI() {
+  if (ytAPIPromise) return ytAPIPromise;
+
+  ytAPIPromise = new Promise((resolve) => {
+    if (globalThis.YT?.Player) {
+      resolve();
+
+      return;
+    }
+
+    const prev = globalThis.onYouTubeIframeAPIReady;
+
+    globalThis.onYouTubeIframeAPIReady = () => {
+      try {
+        if (typeof prev === 'function') prev();
+      } catch {}
+
+      resolve();
+    };
+
+    const s = document.createElement('script');
+
+    s.src = 'https://www.youtube.com/iframe_api';
+    document.head.append(s);
+  });
+
+  return ytAPIPromise;
+}
+
+function loadVimeoAPI() {
+  if (vimeoAPIPromise) return vimeoAPIPromise;
+
+  vimeoAPIPromise = new Promise((resolve) => {
+    if (globalThis.Vimeo?.Player) {
+      resolve();
+
+      return;
+    }
+
+    const s = document.createElement('script');
+
+    s.src = 'https://player.vimeo.com/api/player.js';
+    s.addEventListener('load', resolve);
+    document.head.append(s);
+  });
+
+  return vimeoAPIPromise;
+}
+
+function getYouTubeId(url) {
+  const m = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/)|youtu\.be\/)([\w-]{11})/);
+
+  return m?.[1] ?? '';
+}
+
+function getVimeoId(url) {
+  const m = url.match(/vimeo\.com\/(\d+)/);
+
+  return m?.[1] ?? '';
+}
+
+/**
+ * Replicates video-modal.js behaviour in React.
+ *
+ * Auto-initialises a YouTube or Vimeo player when the modal opens and
+ * destroys it when the modal closes, replacing the Bootstrap
+ * show.bs.modal / hidden.bs.modal event listeners.
+ *
+ * @param {object} options
+ * @param {string} [options.youtubeSrc]  - YouTube video URL
+ * @param {string} [options.vimeoUrl]   - Vimeo video URL
+ *
+ * Usage:
+ *   const { containerRef, onShow, onHide } = useVideoModal({ youtubeSrc: '...' });
+ *   <Modal onShow={onShow} onHide={onHide}>
+ *     <div className="ratio ratio-16x9" ref={containerRef}>
+ *       <div data-yt-player />   ← YouTube mounts here
+ *     </div>
+ *   </Modal>
+ */
+export function useVideoModal({ youtubeSrc, vimeoUrl } = {}) {
+  const containerRef = useRef(null);
+  const players = useRef({ youtube: null, vimeo: null });
+
+  const onShow = useCallback(async () => {
+    const container = containerRef.current;
+
+    if (!container) return;
+
+    if (vimeoUrl) {
+      await loadVimeoAPI();
+
+      players.current.vimeo = new globalThis.Vimeo.Player(container, {
+        id: getVimeoId(vimeoUrl),
+        autoplay: true,
+      });
+
+      return;
+    }
+
+    if (youtubeSrc) {
+      await loadYouTubeAPI();
+
+      const playerDiv = container.querySelector('[data-yt-player]');
+
+      players.current.youtube = new globalThis.YT.Player(playerDiv, {
+        videoId: getYouTubeId(youtubeSrc),
+        playerVars: { autoplay: 1, rel: 0 },
+      });
+    }
+  }, [youtubeSrc, vimeoUrl]);
+
+  const onHide = useCallback(() => {
+    if (players.current.vimeo) {
+      players.current.vimeo.unload().catch(() => {});
+      players.current.vimeo = null;
+    }
+
+    if (players.current.youtube) {
+      players.current.youtube.destroy();
+      players.current.youtube = null;
+    }
+  }, []);
+
+  return { containerRef, onShow, onHide };
+}

package/scss/theme/_carousel.scss

@@ -1,3 +1,7 @@
+.carousel-inner {
+  @include transition(height $carousel-transition-duration ease);
+}
+
 .carousel-item {
   img {
     @include border-radius($border-radius-xl);
@@ -22,19 +26,19 @@
   @extend .mt-3;
   display: flex;
   justify-content: end;
-}
-.carousel-control-prev,
-.carousel-control-next {
-  position: unset;
-  width: fit-content;
-  padding: rfs-value(6px);
-}
-.carousel-indicators {
-  position: unset;
-  margin-bottom: 0;
-  margin-left: 0;
-  @include margin-right($spacer * 1.5);
-  [data-bs-target] {
-    @extend .rounded-circle;
+  .carousel-control-prev,
+  .carousel-control-next {
+    position: unset;
+    width: fit-content;
+    padding: rfs-value(6px);
+  }
+  .carousel-indicators {
+    position: unset;
+    margin-bottom: 0;
+    margin-left: 0;
+    @include margin-right($spacer * 1.5);
+    [data-bs-target] {
+      @extend .rounded-circle;
+    }
   }
 }

package/scss/theme/_version.scss

@@ -1,2 +1,2 @@
 // GENERATED FILE – do not edit manually
-$km-version: "1.4.3" !default;
+$km-version: "1.4.6" !default;