@unlk/keymaster 1.6.2 → 1.6.3

package/js/carousel-caption.js

@@ -1,18 +1,18 @@
-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 = 'carouselCaption';
-const EVENT_SLID = 'slid.bs.carousel';
+const EVENT_SLID        = 'slid.bs.carousel';
 const SELECTOR_CAROUSEL = '.carousel';
-const SELECTOR_CAPTION = '.carousel-caption-container p';
+const SELECTOR_CAPTION  = '.carousel-caption-container p';
 
-class CarouselCaption extends BaseComponent {
+const instances = new WeakMap();
+
+class CarouselCaption {
   constructor(element) {
-    super(element);
-    this._captionEl = this._findCaptionEl();
+    this._element   = element;
+    this._captionEl = element.querySelector(SELECTOR_CAPTION) || null;
     this._updateCaption();
+    instances.set(element, this);
   }
 
   _updateCaption() {
@@ -21,18 +21,8 @@ class CarouselCaption extends BaseComponent {
     this._captionEl.textContent = activeItem?.getAttribute('data-caption') ?? '';
   }
 
-  _findCaptionEl() {
-    return this._element.querySelector(SELECTOR_CAPTION) || null;
-  }
-
-  static get NAME() {
-    return NAME;
-  }
-
-  static jQueryInterface(config) {
-    return this.each(function () {
-      CarouselCaption.getOrCreateInstance(this, config);
-    });
+  static getOrCreateInstance(element) {
+    return instances.get(element) || new CarouselCaption(element);
   }
 }
 
@@ -40,6 +30,4 @@ EventHandler.on(document, EVENT_SLID, SELECTOR_CAROUSEL, function () {
   CarouselCaption.getOrCreateInstance(this)._updateCaption();
 });
 
-defineJQueryPlugin(CarouselCaption);
-
 export default CarouselCaption;

package/js/carousel-height.js

@@ -1,56 +1,54 @@
-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 {
+const instances = new WeakMap();
+
+class CarouselHeight {
   constructor(element) {
-    super(element);
-    this._inner = SelectorEngine.findOne(SELECTOR_INNER, this._element);
+    this._element = element;
+    this._inner = SelectorEngine.findOne(SELECTOR_INNER, element);
+    if (this._inner) this._bindEvents();
+    instances.set(element, this);
+  }
+
+  dispose() {
+    EventHandler.off(this._element, EVENT_SLIDE);
+    EventHandler.off(this._element, EVENT_SLID);
+    instances.delete(this._element);
+  }
+
+  _bindEvents() {
+    EventHandler.on(this._element, EVENT_SLIDE, (e) => this._onSlide(e));
+    EventHandler.on(this._element, EVENT_SLID, () => this._onSlid());
   }
 
   _onSlide(e) {
-    if (!this._inner) return;
     const nextSlide = e.relatedTarget;
     if (!nextSlide) return;
-
-    this._inner.style.height = `${this._inner.offsetHeight}px`;
-
+    this._inner.style.height = `${this._inner.offsetHeight  }px`;
     requestAnimationFrame(() => {
-      this._inner.style.height = `${nextSlide.offsetHeight}px`;
+      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);
-    });
+  static getOrCreateInstance(element) {
+    return instances.get(element) || new CarouselHeight(element);
   }
 }
 
-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();
+document.addEventListener('DOMContentLoaded', () => {
+  for (const el of SelectorEngine.find(SELECTOR_CAROUSEL)) {
+    CarouselHeight.getOrCreateInstance(el);
+  }
 });
 
-defineJQueryPlugin(CarouselHeight);
-
 export default CarouselHeight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "publishConfig": {
     "access": "public"
   },

package/scss/theme/_version.scss

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