@kupola/kupola 1.2.0 → 1.4.0

package/js/carousel.js

@@ -1,5 +1,5 @@
 class Carousel {
-  constructor(element) {
+  constructor(element, options = {}) {
     this.element = element;
     this.track = element.querySelector('.ds-carousel__track');
     this.items = element.querySelectorAll('.ds-carousel__item');
@@ -8,13 +8,34 @@ class Carousel {
     this.indicators = element.querySelectorAll('.ds-carousel__indicator');
     this.autoBtn = element.querySelector('.ds-carousel__auto');
     
+    // Options
+    this.mode = options.mode || element.getAttribute('data-carousel-mode') || 'slide'; // slide | fade
+    this.vertical = options.vertical || element.hasAttribute('data-carousel-vertical');
+    this.autoPlay = options.autoPlay !== false;
+    this.interval = options.interval || parseInt(element.getAttribute('data-carousel-interval')) || 3000;
+    this.transitionDuration = options.transitionDuration || parseInt(element.getAttribute('data-carousel-duration')) || 500;
+    this.loop = options.loop !== false;
+    this.pauseOnHover = options.pauseOnHover !== false;
+    this.swipe = options.swipe !== false;
+    this.swipeThreshold = options.swipeThreshold || 50;
+    this.keyboardNav = options.keyboardNav || element.hasAttribute('data-carousel-keyboard');
+    this.onChange = options.onChange || null;
+    
     this.currentIndex = 0;
     this.totalItems = this.items.length;
     this.autoPlayTimer = null;
     this.isAutoPlaying = false;
+    this.isTransitioning = false;
+    
+    // Touch state
+    this.touchStartX = 0;
+    this.touchStartY = 0;
+    this.touchDeltaX = 0;
+    this.touchDeltaY = 0;
+    this.isSwiping = false;
     
-    this._mouseEnterHandler = () => this.stopAutoPlay();
-    this._mouseLeaveHandler = () => { if (this.isAutoPlaying) this.startAutoPlay(); };
+    this._mouseEnterHandler = () => { if (this.pauseOnHover) this.stopAutoPlay(); };
+    this._mouseLeaveHandler = () => { if (this.pauseOnHover && this.autoPlay) this.startAutoPlay(); };
     
     this.init();
   }
@@ -25,12 +46,8 @@ class Carousel {
     this._autoClickHandler = () => this.toggleAutoPlay();
     this._indicatorClickHandlers = [];
     
-    if (this.prevBtn) {
-      this.prevBtn.addEventListener('click', this._prevClickHandler);
-    }
-    if (this.nextBtn) {
-      this.nextBtn.addEventListener('click', this._nextClickHandler);
-    }
+    if (this.prevBtn) this.prevBtn.addEventListener('click', this._prevClickHandler);
+    if (this.nextBtn) this.nextBtn.addEventListener('click', this._nextClickHandler);
     
     this.indicators.forEach((indicator, index) => {
       const handler = () => this.goTo(index);
@@ -38,54 +55,125 @@ class Carousel {
       indicator.addEventListener('click', handler);
     });
     
-    if (this.autoBtn) {
-      this.autoBtn.addEventListener('click', this._autoClickHandler);
+    if (this.autoBtn) this.autoBtn.addEventListener('click', this._autoClickHandler);
+    
+    // Touch/swipe support
+    if (this.swipe) {
+      this._touchStartHandler = (e) => this._handleTouchStart(e);
+      this._touchMoveHandler = (e) => this._handleTouchMove(e);
+      this._touchEndHandler = () => this._handleTouchEnd();
+      
+      this.element.addEventListener('touchstart', this._touchStartHandler, { passive: true });
+      this.element.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
+      this.element.addEventListener('touchend', this._touchEndHandler);
+    }
+    
+    // Keyboard navigation
+    if (this.keyboardNav) {
+      this._keydownHandler = (e) => {
+        if (!this.element.contains(document.activeElement)) return;
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+          e.preventDefault();
+          this.prev();
+        } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+          e.preventDefault();
+          this.next();
+        }
+      };
+      this.element.addEventListener('keydown', this._keydownHandler);
+    }
+    
+    // Apply mode class
+    if (this.mode === 'fade') {
+      this.element.classList.add('ds-carousel--fade');
+    }
+    if (this.vertical) {
+      this.element.classList.add('ds-carousel--vertical');
+    }
+    
+    // Set transition duration
+    if (this.track) {
+      this.track.style.transitionDuration = this.transitionDuration + 'ms';
     }
     
     this.updateIndicators();
-    this.startAutoPlay();
+    if (this.autoPlay) this.startAutoPlay();
     
     this.element.addEventListener('mouseenter', this._mouseEnterHandler);
     this.element.addEventListener('mouseleave', this._mouseLeaveHandler);
   }
   
   goTo(index) {
+    if (this.isTransitioning) return;
     if (index < 0 || index >= this.totalItems) return;
     
+    this.isTransitioning = true;
+    const prevIndex = this.currentIndex;
     this.currentIndex = index;
-    const offset = -index * 100;
-    this.track.style.transform = `translateX(${offset}%)`;
+    
+    if (this.mode === 'fade') {
+      this.items.forEach((item, i) => {
+        item.style.opacity = i === index ? '1' : '0';
+        item.style.zIndex = i === index ? '1' : '0';
+      });
+    } else if (this.vertical) {
+      const offset = -index * 100;
+      this.track.style.transform = `translateY(${offset}%)`;
+    } else {
+      const offset = -index * 100;
+      this.track.style.transform = `translateX(${offset}%)`;
+    }
+    
     this.updateIndicators();
+    
+    setTimeout(() => {
+      this.isTransitioning = false;
+    }, this.transitionDuration);
+    
+    if (this.onChange) {
+      this.onChange({ index, prevIndex, total: this.totalItems });
+    }
+    
+    this.element.dispatchEvent(new CustomEvent('kupola:carousel-change', {
+      detail: { index, prevIndex, total: this.totalItems },
+      bubbles: true
+    }));
   }
   
   prev() {
-    const newIndex = this.currentIndex > 0 ? this.currentIndex - 1 : this.totalItems - 1;
-    this.goTo(newIndex);
+    if (this.currentIndex > 0) {
+      this.goTo(this.currentIndex - 1);
+    } else if (this.loop) {
+      this.goTo(this.totalItems - 1);
+    }
   }
   
   next() {
-    const newIndex = this.currentIndex < this.totalItems - 1 ? this.currentIndex + 1 : 0;
-    this.goTo(newIndex);
+    if (this.currentIndex < this.totalItems - 1) {
+      this.goTo(this.currentIndex + 1);
+    } else if (this.loop) {
+      this.goTo(0);
+    }
   }
   
   updateIndicators() {
     this.indicators.forEach((indicator, index) => {
-      if (index === this.currentIndex) {
-        indicator.classList.add('is-active');
-      } else {
-        indicator.classList.remove('is-active');
-      }
+      indicator.classList.toggle('is-active', index === this.currentIndex);
     });
+    
+    // Update prev/next button states for non-loop mode
+    if (!this.loop) {
+      if (this.prevBtn) this.prevBtn.disabled = this.currentIndex === 0;
+      if (this.nextBtn) this.nextBtn.disabled = this.currentIndex === this.totalItems - 1;
+    }
   }
   
   startAutoPlay() {
     if (this.totalItems <= 1) return;
     this.stopAutoPlay();
     this.isAutoPlaying = true;
-    if (this.autoBtn) {
-      this.autoBtn.classList.add('is-active');
-    }
-    this.autoPlayTimer = setInterval(() => this.next(), 3000);
+    if (this.autoBtn) this.autoBtn.classList.add('is-active');
+    this.autoPlayTimer = setInterval(() => this.next(), this.interval);
   }
   
   stopAutoPlay() {
@@ -93,42 +181,87 @@ class Carousel {
       clearInterval(this.autoPlayTimer);
       this.autoPlayTimer = null;
     }
-    if (this.autoBtn) {
-      this.autoBtn.classList.remove('is-active');
-    }
+    this.isAutoPlaying = false;
+    if (this.autoBtn) this.autoBtn.classList.remove('is-active');
   }
   
   toggleAutoPlay() {
     if (this.isAutoPlaying) {
-      this.isAutoPlaying = false;
       this.stopAutoPlay();
     } else {
       this.startAutoPlay();
     }
   }
   
+  // Touch handlers
+  _handleTouchStart(e) {
+    this.touchStartX = e.touches[0].clientX;
+    this.touchStartY = e.touches[0].clientY;
+    this.touchDeltaX = 0;
+    this.touchDeltaY = 0;
+    this.isSwiping = true;
+    
+    if (this.isAutoPlaying) {
+      this.stopAutoPlay();
+      this._wasAutoPlaying = true;
+    }
+  }
+  
+  _handleTouchMove(e) {
+    if (!this.isSwiping) return;
+    
+    this.touchDeltaX = e.touches[0].clientX - this.touchStartX;
+    this.touchDeltaY = e.touches[0].clientY - this.touchStartY;
+    
+    // Prevent page scroll if swiping horizontally
+    const absDx = Math.abs(this.touchDeltaX);
+    const absDy = Math.abs(this.touchDeltaY);
+    
+    if (absDx > absDy && absDx > 10) {
+      e.preventDefault();
+    }
+  }
+  
+  _handleTouchEnd() {
+    if (!this.isSwiping) return;
+    this.isSwiping = false;
+    
+    const absDeltaX = Math.abs(this.touchDeltaX);
+    const absDeltaY = Math.abs(this.touchDeltaY);
+    
+    if (absDeltaX > this.swipeThreshold && absDeltaX > absDeltaY) {
+      if (this.touchDeltaX > 0) {
+        this.prev();
+      } else {
+        this.next();
+      }
+    }
+    
+    if (this._wasAutoPlaying) {
+      this.startAutoPlay();
+      this._wasAutoPlaying = false;
+    }
+  }
+  
   destroy() {
     this.stopAutoPlay();
     this.element.removeEventListener('mouseenter', this._mouseEnterHandler);
     this.element.removeEventListener('mouseleave', this._mouseLeaveHandler);
     
-    if (this.prevBtn && this._prevClickHandler) {
-      this.prevBtn.removeEventListener('click', this._prevClickHandler);
-    }
-    if (this.nextBtn && this._nextClickHandler) {
-      this.nextBtn.removeEventListener('click', this._nextClickHandler);
-    }
-    if (this.autoBtn && this._autoClickHandler) {
-      this.autoBtn.removeEventListener('click', this._autoClickHandler);
-    }
+    if (this.prevBtn && this._prevClickHandler) this.prevBtn.removeEventListener('click', this._prevClickHandler);
+    if (this.nextBtn && this._nextClickHandler) this.nextBtn.removeEventListener('click', this._nextClickHandler);
+    if (this.autoBtn && this._autoClickHandler) this.autoBtn.removeEventListener('click', this._autoClickHandler);
     
     this.indicators.forEach((indicator, index) => {
       const handler = this._indicatorClickHandlers[index];
-      if (handler) {
-        indicator.removeEventListener('click', handler);
-      }
+      if (handler) indicator.removeEventListener('click', handler);
     });
     
+    if (this._touchStartHandler) this.element.removeEventListener('touchstart', this._touchStartHandler);
+    if (this._touchMoveHandler) this.element.removeEventListener('touchmove', this._touchMoveHandler);
+    if (this._touchEndHandler) this.element.removeEventListener('touchend', this._touchEndHandler);
+    if (this._keydownHandler) this.element.removeEventListener('keydown', this._keydownHandler);
+    
     this._prevClickHandler = null;
     this._nextClickHandler = null;
     this._autoClickHandler = null;
@@ -136,10 +269,10 @@ class Carousel {
   }
 }
 
-function initCarousel(element) {
+function initCarousel(element, options) {
   if (element.__kupolaInitialized) return;
   
-  const carousel = new Carousel(element);
+  const carousel = new Carousel(element, options);
   element.__kupolaInstance = carousel;
   element.__kupolaInitialized = true;
 }
@@ -160,9 +293,9 @@ function cleanupCarousel(element) {
   element.__kupolaInitialized = false;
 }
 
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { Carousel, initCarousel, initCarousels, cleanupCarousel };
-} else {
+export { Carousel, initCarousel, initCarousels, cleanupCarousel };
+
+if (typeof window !== 'undefined') {
   window.Carousel = Carousel;
   window.initCarousel = initCarousel;
   window.initCarousels = initCarousels;
@@ -171,3 +304,4 @@ if (typeof module !== 'undefined' && module.exports) {
     window.kupolaInitializer.register('carousel', initCarousel, cleanupCarousel);
   }
 }
+

package/js/collapse.js

@@ -1,48 +1,133 @@
 class Collapse {
-    constructor(element) {
+    constructor(element, options = {}) {
         this.element = element;
         this.headers = [];
         this._listeners = [];
+        
+        // Options
+        this.accordion = options.accordion || element.hasAttribute('data-collapse-accordion');
+        this.animationDuration = options.animationDuration || parseInt(element.getAttribute('data-collapse-duration')) || 300;
+        this.disabledItems = options.disabledItems || [];
+        this.defaultExpanded = options.defaultExpanded || []; // indices or 'all'
+        
         this._init();
     }
 
     _init() {
         const headers = this.element.querySelectorAll('.ds-collapse__header');
         
-        headers.forEach(header => {
+        headers.forEach((header, index) => {
             const item = header.closest('.ds-collapse__item');
             const content = header.nextElementSibling;
             
             if (!item || !content || !content.classList.contains('ds-collapse__content')) return;
             
-            const isActive = item.classList.contains('is-active');
-            content.style.height = isActive ? content.scrollHeight + 'px' : '0';
+            const isDisabled = item.hasAttribute('data-collapse-disabled') || this.disabledItems.includes(index);
+            if (isDisabled) {
+                item.classList.add('is-disabled');
+            }
+            
+            // Handle default expanded
+            let isActive = item.classList.contains('is-active');
+            if (this.defaultExpanded === 'all') {
+                isActive = true;
+            } else if (Array.isArray(this.defaultExpanded) && this.defaultExpanded.includes(index)) {
+                isActive = true;
+            }
+            
+            if (isActive) {
+                item.classList.add('is-active');
+                content.style.height = content.scrollHeight + 'px';
+                content.style.overflow = 'hidden';
+                // After animation, allow overflow
+                setTimeout(() => {
+                    if (item.classList.contains('is-active')) {
+                        content.style.height = 'auto';
+                        content.style.overflow = 'visible';
+                    }
+                }, this.animationDuration);
+            } else {
+                item.classList.remove('is-active');
+                content.style.height = '0';
+                content.style.overflow = 'hidden';
+            }
             
             const clickHandler = () => {
-                const isExpanded = content.style.height !== '0px';
+                if (isDisabled) return;
+                const isExpanded = item.classList.contains('is-active');
+                
+                if (this.accordion && !isExpanded) {
+                    // Close all other items first
+                    this.headers.forEach((h, i) => {
+                        if (i !== index && h.item.classList.contains('is-active')) {
+                            this._collapseItem(h);
+                        }
+                    });
+                }
                 
                 if (isExpanded) {
-                    content.style.height = '0';
-                    item.classList.remove('is-active');
+                    this._collapseItem({ item, content });
                 } else {
-                    content.style.height = content.scrollHeight + 'px';
-                    item.classList.add('is-active');
-                    
-                    const transitionHandler = function onTransitionEnd() {
-                        content.removeEventListener('transitionend', transitionHandler);
-                        content.style.height = '';
-                    };
-                    content.addEventListener('transitionend', transitionHandler);
-                    this._listeners.push({ el: content, event: 'transitionend', handler: transitionHandler });
+                    this._expandItem({ item, content });
                 }
+                
+                // Dispatch event
+                this.element.dispatchEvent(new CustomEvent('kupola:collapse-toggle', {
+                    detail: { index, expanded: !isExpanded, item },
+                    bubbles: true
+                }));
             };
             
             header.addEventListener('click', clickHandler);
-            this.headers.push({ header, item, content, clickHandler });
+            this.headers.push({ header, item, content, clickHandler, isDisabled });
             this._listeners.push({ el: header, event: 'click', handler: clickHandler });
         });
     }
 
+    _expandItem(headerInfo) {
+        const { item, content } = headerInfo;
+        content.style.overflow = 'hidden';
+        content.style.height = '0';
+        
+        // Force reflow
+        content.offsetHeight;
+        
+        content.style.transition = `height ${this.animationDuration}ms ease`;
+        content.style.height = content.scrollHeight + 'px';
+        item.classList.add('is-active');
+        
+        const transitionHandler = () => {
+            content.removeEventListener('transitionend', transitionHandler);
+            if (item.classList.contains('is-active')) {
+                content.style.height = 'auto';
+                content.style.overflow = 'visible';
+            }
+            content.style.transition = '';
+        };
+        content.addEventListener('transitionend', transitionHandler);
+        this._listeners.push({ el: content, event: 'transitionend', handler: transitionHandler });
+    }
+
+    _collapseItem(headerInfo) {
+        const { item, content } = headerInfo;
+        content.style.overflow = 'hidden';
+        content.style.height = content.scrollHeight + 'px';
+        
+        // Force reflow
+        content.offsetHeight;
+        
+        content.style.transition = `height ${this.animationDuration}ms ease`;
+        content.style.height = '0';
+        item.classList.remove('is-active');
+        
+        const transitionHandler = () => {
+            content.removeEventListener('transitionend', transitionHandler);
+            content.style.transition = '';
+        };
+        content.addEventListener('transitionend', transitionHandler);
+        this._listeners.push({ el: content, event: 'transitionend', handler: transitionHandler });
+    }
+
     destroy() {
         this._listeners.forEach(({ el, event, handler }) => {
             el.removeEventListener(event, handler);
@@ -54,46 +139,74 @@ class Collapse {
 
     toggle(index) {
         const headerInfo = this.headers[index];
-        if (headerInfo) {
+        if (headerInfo && !headerInfo.isDisabled) {
             headerInfo.clickHandler();
         }
     }
 
     expand(index) {
         const headerInfo = this.headers[index];
-        if (headerInfo && !headerInfo.item.classList.contains('is-active')) {
-            headerInfo.clickHandler();
+        if (headerInfo && !headerInfo.item.classList.contains('is-active') && !headerInfo.isDisabled) {
+            if (this.accordion) {
+                this.headers.forEach((h, i) => {
+                    if (i !== index && h.item.classList.contains('is-active')) {
+                        this._collapseItem(h);
+                    }
+                });
+            }
+            this._expandItem(headerInfo);
         }
     }
 
     collapse(index) {
         const headerInfo = this.headers[index];
         if (headerInfo && headerInfo.item.classList.contains('is-active')) {
-            headerInfo.clickHandler();
+            this._collapseItem(headerInfo);
         }
     }
 
     expandAll() {
+        if (this.accordion) return; // Can't expand all in accordion mode
         this.headers.forEach((headerInfo, index) => {
-            if (!headerInfo.item.classList.contains('is-active')) {
-                this.toggle(index);
+            if (!headerInfo.item.classList.contains('is-active') && !headerInfo.isDisabled) {
+                this._expandItem(headerInfo);
             }
         });
     }
 
     collapseAll() {
-        this.headers.forEach((headerInfo, index) => {
+        this.headers.forEach((headerInfo) => {
             if (headerInfo.item.classList.contains('is-active')) {
-                this.toggle(index);
+                this._collapseItem(headerInfo);
             }
         });
     }
+
+    getExpandedIndices() {
+        return this.headers
+            .map((h, i) => h.item.classList.contains('is-active') ? i : -1)
+            .filter(i => i >= 0);
+    }
+
+    disable(index) {
+        if (this.headers[index]) {
+            this.headers[index].isDisabled = true;
+            this.headers[index].item.classList.add('is-disabled');
+        }
+    }
+
+    enable(index) {
+        if (this.headers[index]) {
+            this.headers[index].isDisabled = false;
+            this.headers[index].item.classList.remove('is-disabled');
+        }
+    }
 }
 
-function initCollapse(element) {
+function initCollapse(element, options) {
     if (element.__kupolaInitialized) return;
 
-    const collapse = new Collapse(element);
+    const collapse = new Collapse(element, options);
     element.__kupolaInstance = collapse;
     element.__kupolaInitialized = true;
 }
@@ -114,14 +227,15 @@ function initCollapses() {
     });
 }
 
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { Collapse, initCollapses, initCollapse, cleanupCollapse };
-} else {
+export { Collapse, initCollapses, initCollapse, cleanupCollapse };
+
+if (typeof window !== 'undefined') {
     window.Collapse = Collapse;
     window.initCollapse = initCollapse;
     window.cleanupCollapse = cleanupCollapse;
+    window.initCollapses = initCollapses;
+    
+    if (window.kupolaInitializer) {
+        window.kupolaInitializer.register('collapse', initCollapse, cleanupCollapse);
+    }
 }
-
-if (window.kupolaInitializer) {
-    window.kupolaInitializer.register('collapse', initCollapse, cleanupCollapse);
-}