@unlk/keymaster 1.4.6 → 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.6",
+  "version": "1.4.7",
   "publishConfig": {
     "access": "public"
   },

package/react/index.js

@@ -2,3 +2,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';
+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-video-modal.js

@@ -73,8 +73,9 @@ function getVimeoId(url) {
  * 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 {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: '...' });
@@ -84,7 +85,7 @@ function getVimeoId(url) {
  *     </div>
  *   </Modal>
  */
-export function useVideoModal({ youtubeSrc, vimeoUrl } = {}) {
+export function useVideoModal({ youtubeSrc, vimeoUrl, onReady } = {}) {
   const containerRef = useRef(null);
   const players = useRef({ youtube: null, vimeo: null });
 
@@ -95,26 +96,36 @@ export function useVideoModal({ youtubeSrc, vimeoUrl } = {}) {
 
     if (vimeoUrl) {
       await loadVimeoAPI();
+      const vimeoId = getVimeoId(vimeoUrl);
 
       players.current.vimeo = new globalThis.Vimeo.Player(container, {
-        id: getVimeoId(vimeoUrl),
+        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: getYouTubeId(youtubeSrc),
+        videoId: youtubeId,
         playerVars: { autoplay: 1, rel: 0 },
       });
+
+      if (onReady) {
+        onReady({ provider: 'youtube', player: players.current.youtube, videoId: youtubeId });
+      }
     }
-  }, [youtubeSrc, vimeoUrl]);
+  }, [youtubeSrc, vimeoUrl, onReady]);
 
   const onHide = useCallback(() => {
     if (players.current.vimeo) {

package/scss/theme/_version.scss

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