@unlk/keymaster 1.4.3 → 1.4.5

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.5",
   "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",

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);

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.5" !default;