@unlk/keymaster 1.4.5 → 1.4.7

package/js/accordion-scroll.js

@@ -0,0 +1,43 @@
+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 = 'accordionScroll';
+const EVENT_SHOWN = 'shown.bs.collapse';
+const SELECTOR_ACCORDION = '.accordion';
+const SELECTOR_ITEM = '.accordion-item';
+const SELECTOR_HEADER = '.accordion-header';
+
+class AccordionScroll extends BaseComponent {
+  _onShown(e) {
+    const item = e.target.closest(SELECTOR_ITEM);
+    if (!item) return;
+
+    const header = SelectorEngine.findOne(SELECTOR_HEADER, item);
+    if (!header) return;
+
+    const rect = header.getBoundingClientRect();
+    if (rect.top < 0) {
+      header.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }
+
+  static get NAME() {
+    return NAME;
+  }
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      AccordionScroll.getOrCreateInstance(this, config);
+    });
+  }
+}
+
+EventHandler.on(document, EVENT_SHOWN, SELECTOR_ACCORDION, function (e) {
+  AccordionScroll.getOrCreateInstance(this)._onShown(e);
+});
+
+defineJQueryPlugin(AccordionScroll);
+
+export default AccordionScroll;

package/js/bootstrap.js

@@ -14,3 +14,4 @@ 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';
+export { default as AccordionScroll } from './accordion-scroll';

package/js/video-modal.js

@@ -84,6 +84,13 @@ class VideoModal extends BaseComponent {
       this._element.dataset.vimeoId = String(vimeoId);
       this._element.__unlkVimeoPlayer = this._vimeoPlayer;
 
+      this._element.dispatchEvent(
+        new CustomEvent('videomodal.ready', {
+          bubbles: true,
+          detail: { provider: 'vimeo', player: this._vimeoPlayer, videoId: vimeoId }
+        })
+      );
+
       return;
     }
 
@@ -99,6 +106,13 @@ class VideoModal extends BaseComponent {
 
       this._element.dataset.ytId = youtubeId;
       this._element.__unlkYtPlayer = this._youtubePlayer;
+
+      this._element.dispatchEvent(
+        new CustomEvent('videomodal.ready', {
+          bubbles: true,
+          detail: { provider: 'youtube', player: this._youtubePlayer, videoId: youtubeId }
+        })
+      );
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "publishConfig": {
     "access": "public"
   },
@@ -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,5 @@
+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';
+export { useAccordionScroll } from './use-accordion-scroll.js';

package/react/use-accordion-scroll.js

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+/**
+ * Replicates accordion-scroll.js behaviour in React.
+ *
+ * After an accordion panel finishes opening, scrolls its header into view
+ * if it has been pushed above the viewport, replacing the Bootstrap
+ * shown.bs.collapse event listener.
+ *
+ * Usage:
+ *   const { onEntered } = useAccordionScroll();
+ *   <Accordion>
+ *     <Accordion.Item eventKey="0">
+ *       <Accordion.Header>Header</Accordion.Header>
+ *       <Accordion.Collapse eventKey="0" onEntered={onEntered}>
+ *         <Accordion.Body>Content</Accordion.Body>
+ *       </Accordion.Collapse>
+ *     </Accordion.Item>
+ *   </Accordion>
+ */
+export function useAccordionScroll() {
+  const onEntered = useCallback((node) => {
+    const item = node.closest('.accordion-item');
+    if (!item) return;
+
+    const header = item.querySelector('.accordion-header');
+    if (!header) return;
+
+    const rect = header.getBoundingClientRect();
+    if (rect.top < 0) {
+      header.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, []);
+
+  return { onEntered };
+}

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,143 @@
+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
+ * @param {function} [options.onReady]    - Called with { provider, player, videoId } when the player is ready
+ *
+ * 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, onReady } = {}) {
+  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();
+      const vimeoId = getVimeoId(vimeoUrl);
+
+      players.current.vimeo = new globalThis.Vimeo.Player(container, {
+        id: vimeoId,
+        autoplay: true,
+      });
+
+      if (onReady) {
+        onReady({ provider: 'vimeo', player: players.current.vimeo, videoId: vimeoId });
+      }
+
+      return;
+    }
+
+    if (youtubeSrc) {
+      await loadYouTubeAPI();
+      const youtubeId = getYouTubeId(youtubeSrc);
+
+      const playerDiv = container.querySelector('[data-yt-player]');
+
+      players.current.youtube = new globalThis.YT.Player(playerDiv, {
+        videoId: youtubeId,
+        playerVars: { autoplay: 1, rel: 0 },
+      });
+
+      if (onReady) {
+        onReady({ provider: 'youtube', player: players.current.youtube, videoId: youtubeId });
+      }
+    }
+  }, [youtubeSrc, vimeoUrl, onReady]);
+
+  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

@@ -26,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.5" !default;
+$km-version: "1.4.7" !default;