@kupola/kupola 1.2.0 → 1.4.0

package/js/tooltip.js

@@ -1,27 +1,172 @@
 class Tooltip {
-  constructor(element) {
-    this.element = element;
-    this.tooltipEl = null;
-    
-    this._showTooltip = null;
-    this._hideTooltip = null;
-  }
-
-  init() {
-    if (this.element.__kupolaInitialized) return;
-
-    this._showTooltip = () => {
-      const text = this.element.getAttribute('data-tooltip');
-      const position = this.element.getAttribute('data-tooltip-position') || 'top';
-      if (!text) return;
-      
-      this.tooltipEl = document.createElement('div');
-      this.tooltipEl.className = 'ds-tooltip is-visible';
-      this.tooltipEl.textContent = text;
-      
-      document.body.appendChild(this.tooltipEl);
-      
-      requestAnimationFrame(() => {
+    constructor(element, options = {}) {
+        this.element = element;
+        this.tooltipEl = null;
+        
+        this.options = options;
+        this.delay = options.delay || parseInt(element.getAttribute('data-tooltip-delay')) || 0;
+        this.hideDelay = options.hideDelay || parseInt(element.getAttribute('data-tooltip-hide-delay')) || 0;
+        this.trigger = options.trigger || element.getAttribute('data-tooltip-trigger') || 'hover'; // hover | click | focus | manual
+        this.html = options.html || element.hasAttribute('data-tooltip-html');
+        this.theme = options.theme || element.getAttribute('data-tooltip-theme') || 'default'; // default | dark | light
+        this.position = options.position || element.getAttribute('data-tooltip-position') || 'top';
+        this.animation = options.animation !== false;
+        this.mouseFollow = options.mouseFollow || element.hasAttribute('data-tooltip-mouse-follow');
+        
+        this._showTooltip = null;
+        this._hideTooltip = null;
+        this._showTimer = null;
+        this._hideTimer = null;
+        this._clickHandler = null;
+        this._focusHandler = null;
+        this._blurHandler = null;
+        this._mouseMoveHandler = null;
+        
+        this.isVisible = false;
+    }
+
+    init() {
+        if (this.element.__kupolaInitialized) return;
+
+        this._showTooltip = () => {
+            if (this.delay > 0) {
+                this._showTimer = setTimeout(() => this.show(), this.delay);
+            } else {
+                this.show();
+            }
+        };
+
+        this._hideTooltip = () => {
+            if (this._showTimer) {
+                clearTimeout(this._showTimer);
+                this._showTimer = null;
+            }
+            if (this.hideDelay > 0) {
+                this._hideTimer = setTimeout(() => this.hide(), this.hideDelay);
+            } else {
+                this.hide();
+            }
+        };
+
+        this._clickHandler = () => {
+            if (this.isVisible) {
+                this.hide();
+            } else {
+                this.show();
+            }
+        };
+
+        this._mouseMoveHandler = (e) => {
+            if (!this.isVisible || !this.mouseFollow || !this.tooltipEl) return;
+            
+            const tooltipRect = this.tooltipEl.getBoundingClientRect();
+            let left = e.clientX + 10;
+            let top = e.clientY + 10;
+            
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            
+            if (left + tooltipRect.width > viewportWidth) {
+                left = e.clientX - tooltipRect.width - 10;
+            }
+            if (top + tooltipRect.height > viewportHeight) {
+                top = e.clientY - tooltipRect.height - 10;
+            }
+            
+            this.tooltipEl.style.left = `${left}px`;
+            this.tooltipEl.style.top = `${top}px`;
+        };
+
+        if (this.trigger === 'hover' || this.trigger === 'focus') {
+            this.element.addEventListener('mouseenter', this._showTooltip);
+            this.element.addEventListener('mouseleave', this._hideTooltip);
+            
+            if (this.mouseFollow) {
+                this.element.addEventListener('mousemove', this._mouseMoveHandler);
+            }
+        }
+        
+        if (this.trigger === 'click') {
+            this.element.addEventListener('click', this._clickHandler);
+            
+            document.addEventListener('click', (e) => {
+                if (this.isVisible && !this.element.contains(e.target) && !this.tooltipEl?.contains(e.target)) {
+                    this.hide();
+                }
+            });
+        }
+        
+        if (this.trigger === 'focus' || this.trigger === 'hover') {
+            this.element.addEventListener('focus', this._showTooltip);
+            this.element.addEventListener('blur', this._hideTooltip);
+        }
+        
+        this.element.__kupolaInitialized = true;
+    }
+
+    show() {
+        if (this.isVisible) return;
+        
+        const text = this.element.getAttribute('data-tooltip');
+        if (!text) return;
+        
+        this.tooltipEl = document.createElement('div');
+        this.tooltipEl.className = `ds-tooltip ds-tooltip--${this.position} ds-tooltip--${this.theme}`;
+        
+        if (this.html) {
+            this.tooltipEl.innerHTML = text;
+        } else {
+            this.tooltipEl.textContent = text;
+        }
+        
+        document.body.appendChild(this.tooltipEl);
+        
+        requestAnimationFrame(() => {
+            this.tooltipEl.classList.add('is-visible');
+            
+            if (!this.mouseFollow) {
+                this._positionTooltip();
+            }
+            
+            this.isVisible = true;
+            this.element.dispatchEvent(new CustomEvent('kupola:tooltip-show', { 
+                detail: { tooltip: this.tooltipEl },
+                bubbles: true 
+            }));
+        });
+    }
+
+    hide() {
+        if (!this.isVisible || !this.tooltipEl) return;
+        
+        this.tooltipEl.classList.remove('is-visible');
+        
+        const removeEl = this.tooltipEl;
+        setTimeout(() => {
+            if (removeEl === this.tooltipEl) {
+                removeEl.remove();
+                this.tooltipEl = null;
+            }
+        }, this.animation ? 200 : 0);
+        
+        this.isVisible = false;
+        this.element.dispatchEvent(new CustomEvent('kupola:tooltip-hide', { 
+            detail: { tooltip: removeEl },
+            bubbles: true 
+        }));
+    }
+
+    toggle() {
+        if (this.isVisible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    _positionTooltip() {
+        if (!this.tooltipEl) return;
+        
         const rect = this.element.getBoundingClientRect();
         const tooltipRect = this.tooltipEl.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
@@ -29,24 +174,24 @@ class Tooltip {
         
         let left, top;
         
-        switch (position) {
-          case 'bottom':
-            left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-            top = rect.bottom + 8;
-            break;
-          case 'right':
-            left = rect.right + 8;
-            top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-            break;
-          case 'left':
-            left = rect.left - tooltipRect.width - 8;
-            top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-            break;
-          case 'top':
-          default:
-            left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-            top = rect.top - tooltipRect.height - 8;
-            break;
+        switch (this.position) {
+            case 'bottom':
+                left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                top = rect.bottom + 8;
+                break;
+            case 'right':
+                left = rect.right + 8;
+                top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                break;
+            case 'left':
+                left = rect.left - tooltipRect.width - 8;
+                top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                break;
+            case 'top':
+            default:
+                left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                top = rect.top - tooltipRect.height - 8;
+                break;
         }
         
         if (left < 8) left = 8;
@@ -57,66 +202,152 @@ class Tooltip {
         this.tooltipEl.style.left = `${left}px`;
         this.tooltipEl.style.top = `${top}px`;
         this.tooltipEl.style.position = 'fixed';
-      });
-    };
+    }
 
-    this._hideTooltip = () => {
-      if (this.tooltipEl) {
-        this.tooltipEl.remove();
-        this.tooltipEl = null;
-      }
-    };
+    updateContent(content, isHtml = false) {
+        this.element.setAttribute('data-tooltip', content);
+        if (isHtml) {
+            this.element.setAttribute('data-tooltip-html', '');
+        } else {
+            this.element.removeAttribute('data-tooltip-html');
+        }
+        this.html = isHtml;
+        
+        if (this.isVisible && this.tooltipEl) {
+            if (this.html) {
+                this.tooltipEl.innerHTML = content;
+            } else {
+                this.tooltipEl.textContent = content;
+            }
+            this._positionTooltip();
+        }
+    }
 
-    this.element.addEventListener('mouseenter', this._showTooltip);
-    this.element.addEventListener('mouseleave', this._hideTooltip);
-    this.element.addEventListener('focus', this._showTooltip);
-    this.element.addEventListener('blur', this._hideTooltip);
-    
-    this.element.__kupolaInitialized = true;
-  }
+    setPosition(position) {
+        if (['top', 'bottom', 'left', 'right'].includes(position)) {
+            this.position = position;
+            this.element.setAttribute('data-tooltip-position', position);
+            
+            if (this.tooltipEl) {
+                this.tooltipEl.className = `ds-tooltip ds-tooltip--${this.position} ds-tooltip--${this.theme}`;
+                if (this.isVisible) {
+                    this._positionTooltip();
+                }
+            }
+        }
+    }
+
+    setTheme(theme) {
+        this.theme = theme;
+        this.element.setAttribute('data-tooltip-theme', theme);
+        
+        if (this.tooltipEl) {
+            this.tooltipEl.className = `ds-tooltip ds-tooltip--${this.position} ds-tooltip--${this.theme}`;
+        }
+    }
 
-  destroy() {
-    if (!this.element.__kupolaInitialized) return;
+    setDelay(delay) {
+        this.delay = delay;
+        this.element.setAttribute('data-tooltip-delay', delay);
+    }
 
-    if (this._showTooltip) {
-      this.element.removeEventListener('mouseenter', this._showTooltip);
-      this.element.removeEventListener('focus', this._showTooltip);
+    setHideDelay(delay) {
+        this.hideDelay = delay;
+        this.element.setAttribute('data-tooltip-hide-delay', delay);
     }
-    
-    if (this._hideTooltip) {
-      this.element.removeEventListener('mouseleave', this._hideTooltip);
-      this.element.removeEventListener('blur', this._hideTooltip);
+
+    setTrigger(trigger) {
+        if (['hover', 'click', 'focus', 'manual'].includes(trigger)) {
+            this.destroy();
+            this.trigger = trigger;
+            this.element.setAttribute('data-tooltip-trigger', trigger);
+            this.init();
+        }
     }
-    
-    if (this._showTooltip && this._hideTooltip) {
-      this._hideTooltip();
+
+    enableMouseFollow(enable) {
+        this.mouseFollow = enable;
+        if (enable) {
+            this.element.setAttribute('data-tooltip-mouse-follow', '');
+            this.element.addEventListener('mousemove', this._mouseMoveHandler);
+        } else {
+            this.element.removeAttribute('data-tooltip-mouse-follow');
+            this.element.removeEventListener('mousemove', this._mouseMoveHandler);
+        }
+    }
+
+    destroy() {
+        if (!this.element.__kupolaInitialized) return;
+
+        if (this._showTimer) {
+            clearTimeout(this._showTimer);
+            this._showTimer = null;
+        }
+        if (this._hideTimer) {
+            clearTimeout(this._hideTimer);
+            this._hideTimer = null;
+        }
+
+        if (this.trigger === 'hover' || this.trigger === 'focus') {
+            this.element.removeEventListener('mouseenter', this._showTooltip);
+            this.element.removeEventListener('mouseleave', this._hideTooltip);
+        }
+        
+        if (this.trigger === 'click') {
+            this.element.removeEventListener('click', this._clickHandler);
+        }
+        
+        if (this.trigger === 'focus' || this.trigger === 'hover') {
+            this.element.removeEventListener('focus', this._showTooltip);
+            this.element.removeEventListener('blur', this._hideTooltip);
+        }
+        
+        if (this.mouseFollow) {
+            this.element.removeEventListener('mousemove', this._mouseMoveHandler);
+        }
+
+        if (this.tooltipEl) {
+            this.tooltipEl.remove();
+            this.tooltipEl = null;
+        }
+        
+        this.isVisible = false;
+        this._showTooltip = null;
+        this._hideTooltip = null;
+        this._clickHandler = null;
+        this._mouseMoveHandler = null;
+        this.element.__kupolaInitialized = false;
     }
-    
-    this._showTooltip = null;
-    this._hideTooltip = null;
-    this.element.__kupolaInitialized = false;
-  }
 }
 
-function initTooltip(element) {
-  const tooltip = new Tooltip(element);
-  tooltip.init();
-  element._kupolaTooltip = tooltip;
+function initTooltip(element, options) {
+    const tooltip = new Tooltip(element, options);
+    tooltip.init();
+    element._kupolaTooltip = tooltip;
 }
 
 function initTooltips(root = document) {
-  root.querySelectorAll('[data-tooltip]').forEach(element => {
-    initTooltip(element);
-  });
+    root.querySelectorAll('[data-tooltip]').forEach(element => {
+        initTooltip(element);
+    });
 }
 
 function cleanupTooltip(element) {
-  if (element._kupolaTooltip) {
-    element._kupolaTooltip.destroy();
-    element._kupolaTooltip = null;
-  }
+    if (element._kupolaTooltip) {
+        element._kupolaTooltip.destroy();
+        element._kupolaTooltip = null;
+    }
 }
 
-if (window.kupolaInitializer) {
-  window.kupolaInitializer.register('tooltip', initTooltip, cleanupTooltip);
+export { Tooltip, initTooltip, initTooltips, cleanupTooltip };
+
+if (typeof window !== 'undefined') {
+    window.Tooltip = Tooltip;
+    window.initTooltip = initTooltip;
+    window.initTooltips = initTooltips;
+    window.cleanupTooltip = cleanupTooltip;
+    
+    if (window.kupolaInitializer) {
+        window.kupolaInitializer.register('tooltip', initTooltip, cleanupTooltip);
+    }
 }

package/js/utils.js

@@ -1454,5 +1454,9 @@ const KupolaUtils = {
   }
 };
 
-window.KupolaUtils = KupolaUtils;
-window.kupolaUtils = KupolaUtils;
+export { KupolaUtils };
+
+if (typeof window !== 'undefined') {
+  window.KupolaUtils = KupolaUtils;
+  window.kupolaUtils = KupolaUtils;
+}

package/js/validation.js

@@ -549,5 +549,9 @@ if (!window.__kupolaValidationInitialized) {
 });
 }
 
-window.KupolaValidator = KupolaValidator;
-window.kupolaValidator = validator;
+export { KupolaValidator, validator };
+
+if (typeof window !== 'undefined') {
+  window.KupolaValidator = KupolaValidator;
+  window.kupolaValidator = validator;
+}

package/js/virtual-list.js

@@ -581,13 +581,17 @@ function initVirtualLists() {
   });
 }
 
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { VirtualList, initVirtualLists, initVirtualList, cleanupVirtualList, createVirtualList, generateMockVirtualListData };
-} else {
+export { VirtualList, initVirtualLists, initVirtualList, cleanupVirtualList, createVirtualList, generateMockVirtualListData };
+
+if (typeof window !== 'undefined') {
+  window.VirtualList = VirtualList;
   window.initVirtualList = initVirtualList;
   window.cleanupVirtualList = cleanupVirtualList;
-}
-
-if (window.kupolaInitializer) {
-  window.kupolaInitializer.register('virtual-list', initVirtualList, cleanupVirtualList);
+  window.initVirtualLists = initVirtualLists;
+  window.createVirtualList = createVirtualList;
+  window.generateMockVirtualListData = generateMockVirtualListData;
+  
+  if (window.kupolaInitializer) {
+    window.kupolaInitializer.register('virtual-list', initVirtualList, cleanupVirtualList);
+  }
 }