@kupola/kupola 1.2.0 → 1.4.0

package/js/image-preview.js

@@ -7,6 +7,12 @@ class ImagePreview {
     this.keyHandler = this.handleKeydown.bind(this);
     this.clickHandler = this.handleOverlayClick.bind(this);
     
+    this.zoom = 1;
+    this.rotation = 0;
+    this.zoomStep = options.zoomStep || 0.2;
+    this.minZoom = options.minZoom || 0.5;
+    this.maxZoom = options.maxZoom || 3;
+    
     this.init();
   }
 
@@ -36,6 +42,38 @@ class ImagePreview {
           </svg>
         </button>
       </div>
+      <div class="ds-image-preview__toolbar">
+        <button class="ds-image-preview__toolbar-btn" type="button" aria-label="Zoom in" data-action="zoom-in">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="12" y1="5" x2="12" y2="19"/>
+            <line x1="5" y1="12" x2="19" y2="12"/>
+          </svg>
+        </button>
+        <button class="ds-image-preview__toolbar-btn" type="button" aria-label="Zoom out" data-action="zoom-out">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="5" y1="12" x2="19" y2="12"/>
+          </svg>
+        </button>
+        <button class="ds-image-preview__toolbar-btn" type="button" aria-label="Reset zoom" data-action="zoom-reset">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/>
+            <line x1="12" y1="5" x2="12" y2="19"/>
+            <line x1="5" y1="12" x2="19" y2="12"/>
+          </svg>
+        </button>
+        <button class="ds-image-preview__toolbar-btn" type="button" aria-label="Rotate left" data-action="rotate-left">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="1 4 1 10 7 10"/>
+            <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
+          </svg>
+        </button>
+        <button class="ds-image-preview__toolbar-btn" type="button" aria-label="Rotate right" data-action="rotate-right">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="23 4 23 10 17 10"/>
+            <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+          </svg>
+        </button>
+      </div>
       <div class="ds-image-preview__content">
         <img src="" alt="" />
       </div>
@@ -62,6 +100,82 @@ class ImagePreview {
     closeBtn.addEventListener('click', this.closeHandler);
     prevBtn.addEventListener('click', this._prevHandler);
     nextBtn.addEventListener('click', this._nextHandler);
+
+    const toolbarBtns = this.overlay.querySelectorAll('.ds-image-preview__toolbar-btn');
+    toolbarBtns.forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        const action = btn.getAttribute('data-action');
+        this.handleToolbarAction(action);
+      });
+    });
+
+    const content = this.overlay.querySelector('.ds-image-preview__content');
+    content.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      if (e.deltaY < 0) {
+        this.zoomIn();
+      } else {
+        this.zoomOut();
+      }
+    }, { passive: false });
+  }
+
+  handleToolbarAction(action) {
+    switch (action) {
+      case 'zoom-in':
+        this.zoomIn();
+        break;
+      case 'zoom-out':
+        this.zoomOut();
+        break;
+      case 'zoom-reset':
+        this.resetZoom();
+        break;
+      case 'rotate-left':
+        this.rotate(-90);
+        break;
+      case 'rotate-right':
+        this.rotate(90);
+        break;
+    }
+  }
+
+  zoomIn() {
+    this.zoom = Math.min(this.maxZoom, this.zoom + this.zoomStep);
+    this.updateTransform();
+  }
+
+  zoomOut() {
+    this.zoom = Math.max(this.minZoom, this.zoom - this.zoomStep);
+    this.updateTransform();
+  }
+
+  resetZoom() {
+    this.zoom = 1;
+    this.rotation = 0;
+    this.updateTransform();
+  }
+
+  rotate(degrees) {
+    this.rotation += degrees;
+    this.updateTransform();
+  }
+
+  setRotation(degrees) {
+    this.rotation = degrees;
+    this.updateTransform();
+  }
+
+  setZoom(zoom) {
+    this.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, zoom));
+    this.updateTransform();
+  }
+
+  updateTransform() {
+    const img = this.overlay.querySelector('.ds-image-preview__content img');
+    if (img) {
+      img.style.transform = `scale(${this.zoom}) rotate(${this.rotation}deg)`;
+    }
   }
 
   handleKeydown(e) {
@@ -77,6 +191,28 @@ class ImagePreview {
       case 'ArrowRight':
         this.next();
         break;
+      case '+':
+      case '=':
+        e.preventDefault();
+        this.zoomIn();
+        break;
+      case '-':
+      case '_':
+        e.preventDefault();
+        this.zoomOut();
+        break;
+      case '0':
+        e.preventDefault();
+        this.resetZoom();
+        break;
+      case '[':
+        e.preventDefault();
+        this.rotate(-90);
+        break;
+      case ']':
+        e.preventDefault();
+        this.rotate(90);
+        break;
     }
   }
 
@@ -90,6 +226,7 @@ class ImagePreview {
     this.images = images;
     this.currentIndex = Math.min(Math.max(index, 0), images.length - 1);
     
+    this.resetZoom();
     this.render();
     this.overlay.classList.add('is-visible');
     
@@ -109,6 +246,7 @@ class ImagePreview {
   prev() {
     if (this.currentIndex > 0) {
       this.currentIndex--;
+      this.resetZoom();
       this.render();
     }
   }
@@ -116,6 +254,7 @@ class ImagePreview {
   next() {
     if (this.currentIndex < this.images.length - 1) {
       this.currentIndex++;
+      this.resetZoom();
       this.render();
     }
   }
@@ -123,6 +262,7 @@ class ImagePreview {
   goTo(index) {
     if (index >= 0 && index < this.images.length) {
       this.currentIndex = index;
+      this.resetZoom();
       this.render();
     }
   }
@@ -213,6 +353,10 @@ function showImagePreview(images, index = 0) {
   imagePreviewInstance.show(images, index);
 }
 
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { ImagePreview, initImagePreview, showImagePreview };
+export { ImagePreview, initImagePreview, showImagePreview };
+
+if (typeof window !== 'undefined') {
+  window.ImagePreview = ImagePreview;
+  window.initImagePreview = initImagePreview;
+  window.showImagePreview = showImagePreview;
 }

package/js/initializer.js

@@ -1,15 +1,40 @@
+/**
+ * Component Initializer Registry — auto-discovery and lifecycle management for declarative components.
+ * Scans the DOM for `data-*` attributes or CSS classes, calls init functions,
+ * and uses MutationObserver for dynamically added elements.
+ */
 class ComponentInitializerRegistry {
   constructor() {
     this.initializers = new Map();
     this.cleanupFunctions = new Map();
     this.processedElements = new WeakSet();
+    // Single source of truth for selectors
+    this._dataAttrs = ['data-component'];
+    this._cssClasses = [];
+    this._cachedSelector = null;
   }
 
-  register(name, initFn, cleanupFn = null) {
+  /**
+   * Register a component initializer.
+   * @param {string} name - Component name
+   * @param {Function} initFn - Init function called with the DOM element
+   * @param {Function} [cleanupFn] - Optional cleanup/destroy function
+   * @param {Object} [options] - { dataAttribute, cssClass } for auto-discovery
+   */
+  register(name, initFn, cleanupFn = null, options = {}) {
     this.initializers.set(name, initFn);
     if (cleanupFn) {
       this.cleanupFunctions.set(name, cleanupFn);
     }
+    // Auto-register selectors
+    if (options.dataAttribute && !this._dataAttrs.includes(options.dataAttribute)) {
+      this._dataAttrs.push(options.dataAttribute);
+      this._cachedSelector = null;
+    }
+    if (options.cssClass && !this._cssClasses.includes(options.cssClass)) {
+      this._cssClasses.push(options.cssClass);
+      this._cachedSelector = null;
+    }
   }
 
   unregister(name) {
@@ -25,20 +50,26 @@ class ComponentInitializerRegistry {
     return this.initializers.get(name);
   }
 
+  _buildSelector() {
+    if (this._cachedSelector !== null) return this._cachedSelector;
+    const parts = this._dataAttrs.map(a => `[${a}]`);
+    for (const cls of this._cssClasses) {
+      parts.push(`.${cls}`);
+    }
+    this._cachedSelector = parts.join(', ');
+    return this._cachedSelector;
+  }
+
+  /** Initialize a single DOM element if it matches a registered component. */
   async initialize(element) {
     if (this.processedElements.has(element)) return;
 
-    const dataAttrs = ['data-component', 'data-dropdown', 'data-select', 'data-datepicker', 
-                       'data-timepicker', 'data-slider', 'data-carousel', 'data-drawer', 
-                       'data-modal', 'data-dialog', 'data-color-picker', 'data-calendar',
-                       'data-slide-captcha', 'data-heatmap'];
-
-    for (const attr of dataAttrs) {
+    // Check data attributes
+    for (const attr of this._dataAttrs) {
       const value = element.getAttribute(attr);
-      if (value) {
+      if (value !== null) {
         const name = value || attr.replace('data-', '');
         const initFn = this.initializers.get(name) || this.initializers.get(attr.replace('data-', ''));
-        
         if (initFn) {
           try {
             await initFn(element);
@@ -51,46 +82,35 @@ class ComponentInitializerRegistry {
       }
     }
 
+    // Check CSS classes
     const className = element.className;
-    const classSelectors = [
-      '.ds-dropdown', '.ds-select', '.ds-datepicker', '.ds-timepicker', 
-      '.ds-slider', '.ds-carousel', '.ds-drawer', '.ds-modal', '.ds-dialog',
-      '.ds-color-picker', '.ds-calendar', '.ds-slider-captcha', '.ds-heatmap',
-      '.ds-tooltip', '.ds-tag', '.ds-statcard', '.ds-collapse', '.ds-fileupload',
-      '.ds-notification', '.ds-message'
-    ];
-
-    for (const selector of classSelectors) {
-      const classNamePart = selector.replace('.', '');
-      if (className.includes(classNamePart)) {
-        const name = classNamePart.replace('ds-', '');
-        const initFn = this.initializers.get(name) || this.initializers.get(classNamePart);
-        
-        if (initFn) {
-          try {
-            await initFn(element);
-            this.processedElements.add(element);
-          } catch (error) {
-            console.error(`[ComponentInitializerRegistry] Error initializing "${name}":`, error);
+    if (typeof className === 'string') {
+      for (const cls of this._cssClasses) {
+        if (className.includes(cls)) {
+          const name = cls.replace('ds-', '');
+          const initFn = this.initializers.get(name) || this.initializers.get(cls);
+          if (initFn) {
+            try {
+              await initFn(element);
+              this.processedElements.add(element);
+            } catch (error) {
+              console.error(`[ComponentInitializerRegistry] Error initializing "${name}":`, error);
+            }
+            return;
           }
-          return;
         }
       }
     }
   }
 
+  /** Run cleanup/destroy for a single DOM element. */
   cleanup(element) {
-    const dataAttrs = ['data-component', 'data-dropdown', 'data-select', 'data-datepicker', 
-                       'data-timepicker', 'data-slider', 'data-carousel', 'data-drawer', 
-                       'data-modal', 'data-dialog', 'data-color-picker', 'data-calendar',
-                       'data-slide-captcha', 'data-heatmap'];
-
-    for (const attr of dataAttrs) {
+    // Check data attributes
+    for (const attr of this._dataAttrs) {
       const value = element.getAttribute(attr);
-      if (value) {
+      if (value !== null) {
         const name = value || attr.replace('data-', '');
         const cleanupFn = this.cleanupFunctions.get(name) || this.cleanupFunctions.get(attr.replace('data-', ''));
-        
         if (cleanupFn) {
           try {
             cleanupFn(element);
@@ -103,45 +123,33 @@ class ComponentInitializerRegistry {
       }
     }
 
+    // Check CSS classes
     const className = element.className;
-    const classSelectors = [
-      '.ds-dropdown', '.ds-select', '.ds-datepicker', '.ds-timepicker', 
-      '.ds-slider', '.ds-carousel', '.ds-drawer', '.ds-modal', '.ds-dialog',
-      '.ds-color-picker', '.ds-calendar', '.ds-slider-captcha', '.ds-heatmap',
-      '.ds-tooltip', '.ds-tag', '.ds-statcard', '.ds-collapse', '.ds-fileupload',
-      '.ds-notification', '.ds-message'
-    ];
-
-    for (const selector of classSelectors) {
-      const classNamePart = selector.replace('.', '');
-      if (className.includes(classNamePart)) {
-        const name = classNamePart.replace('ds-', '');
-        const cleanupFn = this.cleanupFunctions.get(name) || this.cleanupFunctions.get(classNamePart);
-        
-        if (cleanupFn) {
-          try {
-            cleanupFn(element);
-          } catch (error) {
-            console.error(`[ComponentInitializerRegistry] Error cleaning up "${name}":`, error);
+    if (typeof className === 'string') {
+      for (const cls of this._cssClasses) {
+        if (className.includes(cls)) {
+          const name = cls.replace('ds-', '');
+          const cleanupFn = this.cleanupFunctions.get(name) || this.cleanupFunctions.get(cls);
+          if (cleanupFn) {
+            try {
+              cleanupFn(element);
+            } catch (error) {
+              console.error(`[ComponentInitializerRegistry] Error cleaning up "${name}":`, error);
+            }
+            this.processedElements.delete(element);
+            return;
           }
-          this.processedElements.delete(element);
-          return;
         }
       }
     }
   }
 
+  /** Scan and initialize all matching components. Uses MutationObserver for dynamic content. */
   async initializeAll(root = document) {
-    const elements = root.querySelectorAll('[data-component], [data-dropdown], [data-select], ' +
-      '[data-datepicker], [data-timepicker], [data-slider], [data-carousel], ' +
-      '[data-drawer], [data-modal], [data-dialog], [data-color-picker], ' +
-      '[data-calendar], [data-slide-captcha], [data-heatmap], ' +
-      '.ds-dropdown, .ds-select, .ds-datepicker, .ds-timepicker, ' +
-      '.ds-slider, .ds-carousel, .ds-drawer, .ds-modal, .ds-dialog, ' +
-      '.ds-color-picker, .ds-calendar, .ds-slider-captcha, .ds-heatmap, ' +
-      '.ds-tooltip, .ds-tag, .ds-statcard, .ds-collapse, .ds-fileupload, ' +
-      '.ds-notification, .ds-message');
+    const selector = this._buildSelector();
+    if (!selector) return;
 
+    const elements = root.querySelectorAll(selector);
     const promises = [];
     elements.forEach(element => {
       if (!this.processedElements.has(element)) {
@@ -152,11 +160,83 @@ class ComponentInitializerRegistry {
   }
 }
 
+/** @type {ComponentInitializerRegistry} Global initializer instance */
 const kupolaInitializer = new ComponentInitializerRegistry();
 
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { ComponentInitializerRegistry, kupolaInitializer };
-} else {
+// Pre-register known component selectors
+const knownComponents = [
+  { attr: 'data-dropdown', cls: 'ds-dropdown' },
+  { attr: 'data-select', cls: 'ds-select' },
+  { attr: 'data-datepicker', cls: 'ds-datepicker' },
+  { attr: 'data-timepicker', cls: 'ds-timepicker' },
+  { attr: 'data-slider', cls: 'ds-slider' },
+  { attr: 'data-carousel', cls: 'ds-carousel' },
+  { attr: 'data-drawer', cls: 'ds-drawer' },
+  { attr: 'data-modal', cls: 'ds-modal' },
+  { attr: 'data-dialog', cls: 'ds-dialog' },
+  { attr: 'data-color-picker', cls: 'ds-color-picker' },
+  { attr: 'data-calendar', cls: 'ds-calendar' },
+  { attr: 'data-slide-captcha', cls: 'ds-slide-captcha' },
+  { attr: 'data-heatmap', cls: 'ds-heatmap' },
+  { cls: 'ds-tooltip' },
+  { cls: 'ds-tag' },
+  { cls: 'ds-statcard' },
+  { cls: 'ds-collapse' },
+  { cls: 'ds-fileupload' },
+  { cls: 'ds-notification' },
+  { cls: 'ds-message' }
+];
+
+for (const comp of knownComponents) {
+  if (comp.attr && !kupolaInitializer._dataAttrs.includes(comp.attr)) {
+    kupolaInitializer._dataAttrs.push(comp.attr);
+  }
+  if (comp.cls && !kupolaInitializer._cssClasses.includes(comp.cls)) {
+    kupolaInitializer._cssClasses.push(comp.cls);
+  }
+}
+
+export { ComponentInitializerRegistry, kupolaInitializer };
+
+/**
+ * Kupola global namespace — convenience API for external consumers.
+ * Provides Kupola.refresh(root) to re-initialize dynamically inserted DOM.
+ */
+if (typeof window !== 'undefined') {
+  window.Kupola = window.Kupola || {};
+
+  /**
+   * Re-scan and initialize components within a given scope.
+   * @param {Element|Document} [root=document] - Scope to scan
+   * @returns {Promise<void>}
+   */
+  window.Kupola.refresh = async function refresh(root) {
+    return kupolaInitializer.initializeAll(root || document);
+  };
+
+  /**
+   * Initialize a single element or container.
+   * @param {Element} element
+   * @returns {Promise<void>}
+   */
+  window.Kupola.init = async function init(element) {
+    return kupolaInitializer.initialize(element);
+  };
+
+  /**
+   * Cleanup a single element.
+   * @param {Element} element
+   */
+  window.Kupola.cleanup = function cleanup(element) {
+    return kupolaInitializer.cleanup(element);
+  };
+
+  /** Expose the initializer registry directly */
+  window.Kupola.initializer = kupolaInitializer;
+  window.Kupola.ComponentInitializerRegistry = ComponentInitializerRegistry;
+}
+
+if (typeof window !== 'undefined') {
   window.ComponentInitializerRegistry = ComponentInitializerRegistry;
   window.kupolaInitializer = kupolaInitializer;
 }