vanduo-framework 1.1.8

package/js/components/pagination.js

@@ -0,0 +1,286 @@
+/**
+ * Vanduo Framework - Pagination Component
+ * JavaScript functionality for dynamic pagination
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Pagination Component
+   */
+  const Pagination = {
+    // Store initialized paginations and their cleanup functions
+    instances: new Map(),
+
+    /**
+     * Initialize pagination components
+     */
+    init: function() {
+      const paginations = document.querySelectorAll('.vd-pagination[data-pagination]');
+
+      paginations.forEach(pagination => {
+        if (this.instances.has(pagination)) {
+          return;
+        }
+        this.initPagination(pagination);
+      });
+    },
+
+    /**
+     * Initialize a pagination
+     * @param {HTMLElement} pagination - Pagination container
+     */
+    initPagination: function(pagination) {
+      const totalPages = parseInt(pagination.dataset.totalPages) || 1;
+      const currentPage = parseInt(pagination.dataset.currentPage) || 1;
+      const maxVisible = parseInt(pagination.dataset.maxVisible) || 7;
+
+      this.render(pagination, {
+        totalPages: totalPages,
+        currentPage: currentPage,
+        maxVisible: maxVisible
+      });
+
+      // Handle clicks (event delegation)
+      const clickHandler = (e) => {
+        const link = e.target.closest('.vd-pagination-link');
+        if (!link || link.closest('.vd-pagination-item.disabled') || link.closest('.vd-pagination-item.active')) {
+          return;
+        }
+
+        e.preventDefault();
+
+        const item = link.closest('.vd-pagination-item');
+        const page = item.dataset.page;
+
+        if (page) {
+          this.goToPage(pagination, parseInt(page));
+        } else if (item.classList.contains('pagination-prev')) {
+          this.prevPage(pagination);
+        } else if (item.classList.contains('pagination-next')) {
+          this.nextPage(pagination);
+        }
+      };
+      pagination.addEventListener('click', clickHandler);
+
+      this.instances.set(pagination, {
+        cleanup: [() => pagination.removeEventListener('click', clickHandler)]
+      });
+    },
+    
+    /**
+     * Render pagination
+     * @param {HTMLElement} pagination - Pagination container
+     * @param {Object} options - Pagination options
+     */
+    render: function(pagination, options) {
+      const { totalPages, currentPage, maxVisible } = options;
+      
+      if (totalPages <= 1) {
+        pagination.innerHTML = '';
+        return;
+      }
+      
+      let html = '';
+      
+      // Previous button
+      html += `<li class="vd-pagination-item vd-pagination-prev pagination-item pagination-prev ${currentPage === 1 ? 'disabled' : ''}">`;
+      html += `<a class="vd-pagination-link pagination-link" href="#" aria-label="Previous">Previous</a>`;
+      html += `</li>`;
+      
+      // Calculate page range
+      const pages = this.calculatePages(currentPage, totalPages, maxVisible);
+      
+      // Page numbers
+      let lastPage = 0;
+      pages.forEach(page => {
+        if (page === 'ellipsis') {
+          html += `<li class="vd-pagination-item pagination-item"><span class="vd-pagination-ellipsis pagination-ellipsis">…</span></li>`;
+        } else {
+          if (page !== lastPage + 1 && lastPage > 0) {
+            html += `<li class="vd-pagination-item pagination-item"><span class="vd-pagination-ellipsis pagination-ellipsis">…</span></li>`;
+          }
+          const safePage = Number(page);
+          html += `<li class="vd-pagination-item pagination-item ${safePage === currentPage ? 'active' : ''}" data-page="${safePage}">`;
+          html += `<a class="vd-pagination-link pagination-link" href="#" aria-label="Page ${safePage}">${safePage}</a>`;
+          html += `</li>`;
+          lastPage = page;
+        }
+      });
+      
+      // Next button
+      html += `<li class="vd-pagination-item vd-pagination-next pagination-item pagination-next ${currentPage === totalPages ? 'disabled' : ''}">`;
+      html += `<a class="vd-pagination-link pagination-link" href="#" aria-label="Next">Next</a>`;
+      html += `</li>`;
+      
+      pagination.innerHTML = html;
+      
+      // Update data attributes
+      pagination.dataset.currentPage = currentPage;
+    },
+    
+    /**
+     * Calculate which pages to show
+     * @param {number} currentPage - Current page
+     * @param {number} totalPages - Total pages
+     * @param {number} maxVisible - Maximum visible pages
+     * @returns {Array} Array of page numbers or 'ellipsis'
+     */
+    calculatePages: function(currentPage, totalPages, maxVisible) {
+      const pages = [];
+      const half = Math.floor(maxVisible / 2);
+      
+      if (totalPages <= maxVisible) {
+        // Show all pages
+        for (let i = 1; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        // Always show first page
+        pages.push(1);
+        
+        let start = Math.max(2, currentPage - half);
+        let end = Math.min(totalPages - 1, currentPage + half);
+        
+        // Adjust if we're near the start
+        if (currentPage <= half + 1) {
+          end = Math.min(totalPages - 1, maxVisible - 1);
+        }
+        
+        // Adjust if we're near the end
+        if (currentPage >= totalPages - half) {
+          start = Math.max(2, totalPages - maxVisible + 2);
+        }
+        
+        // Add ellipsis before if needed
+        if (start > 2) {
+          pages.push('ellipsis');
+        }
+        
+        // Add middle pages
+        for (let i = start; i <= end; i++) {
+          pages.push(i);
+        }
+        
+        // Add ellipsis after if needed
+        if (end < totalPages - 1) {
+          pages.push('ellipsis');
+        }
+        
+        // Always show last page
+        if (totalPages > 1) {
+          pages.push(totalPages);
+        }
+      }
+      
+      return pages;
+    },
+    
+    /**
+     * Go to specific page
+     * @param {HTMLElement} pagination - Pagination container
+     * @param {number} page - Page number
+     */
+    goToPage: function(pagination, page) {
+      const totalPages = parseInt(pagination.dataset.totalPages) || 1;
+      const maxVisible = parseInt(pagination.dataset.maxVisible) || 7;
+      
+      if (page < 1 || page > totalPages) {
+        return;
+      }
+      
+      this.render(pagination, {
+        totalPages: totalPages,
+        currentPage: page,
+        maxVisible: maxVisible
+      });
+      
+      // Dispatch event
+      pagination.dispatchEvent(new CustomEvent('pagination:change', {
+        bubbles: true,
+        detail: { page, totalPages }
+      }));
+    },
+    
+    /**
+     * Go to previous page
+     * @param {HTMLElement} pagination - Pagination container
+     */
+    prevPage: function(pagination) {
+      const currentPage = parseInt(pagination.dataset.currentPage) || 1;
+      if (currentPage > 1) {
+        this.goToPage(pagination, currentPage - 1);
+      }
+    },
+    
+    /**
+     * Go to next page
+     * @param {HTMLElement} pagination - Pagination container
+     */
+    nextPage: function(pagination) {
+      const currentPage = parseInt(pagination.dataset.currentPage) || 1;
+      const totalPages = parseInt(pagination.dataset.totalPages) || 1;
+      if (currentPage < totalPages) {
+        this.goToPage(pagination, currentPage + 1);
+      }
+    },
+    
+    /**
+     * Update pagination
+     * @param {HTMLElement|string} pagination - Pagination container or selector
+     * @param {Object} options - Pagination options
+     */
+    update: function(pagination, options) {
+      const el = typeof pagination === 'string' ? document.querySelector(pagination) : pagination;
+      if (el) {
+        if (options.totalPages !== undefined) {
+          el.dataset.totalPages = options.totalPages;
+        }
+        if (options.currentPage !== undefined) {
+          el.dataset.currentPage = options.currentPage;
+        }
+        if (options.maxVisible !== undefined) {
+          el.dataset.maxVisible = options.maxVisible;
+        }
+        
+        this.render(el, {
+          totalPages: parseInt(el.dataset.totalPages) || 1,
+          currentPage: parseInt(el.dataset.currentPage) || 1,
+          maxVisible: parseInt(el.dataset.maxVisible) || 7
+        });
+      }
+    },
+
+    /**
+     * Destroy a pagination instance and clean up event listeners
+     * @param {HTMLElement} pagination - Pagination container
+     */
+    destroy: function(pagination) {
+      const instance = this.instances.get(pagination);
+      if (!instance) return;
+
+      instance.cleanup.forEach(fn => fn());
+      this.instances.delete(pagination);
+    },
+
+    /**
+     * Destroy all pagination instances
+     */
+    destroyAll: function() {
+      this.instances.forEach((instance, pagination) => {
+        this.destroy(pagination);
+      });
+    }
+  };
+  
+  // Register with Vanduo framework if available
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('pagination', Pagination);
+  }
+  
+  // Expose globally
+  window.VanduoPagination = Pagination;
+  
+})();
+

package/js/components/parallax.js

@@ -0,0 +1,216 @@
+/**
+ * Vanduo Framework - Parallax Component
+ * JavaScript functionality for parallax scroll effects
+ */
+
+(function () {
+  'use strict';
+
+  /**
+   * Parallax Component
+   */
+  const Parallax = {
+    parallaxElements: new Map(),
+    ticking: false,
+    isMobile: window.innerWidth < 768,
+    reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    isInitialized: false,
+    _onScroll: null,
+    _onResize: null,
+
+    /**
+     * Initialize parallax components
+     */
+    init: function () {
+      if (this.isInitialized) {
+        this.refresh();
+        return;
+      }
+
+      this.isInitialized = true;
+
+      // Check for reduced motion preference
+      if (this.reducedMotion) {
+        return; // Don't initialize if user prefers reduced motion
+      }
+
+      const parallaxElements = document.querySelectorAll('.vd-parallax');
+
+      parallaxElements.forEach(element => {
+        if (!element.dataset.parallaxInitialized) {
+          this.initParallax(element);
+        }
+      });
+
+      // Handle scroll
+      this.handleScroll();
+      this._onScroll = () => {
+        this.handleScroll();
+      };
+      window.addEventListener('scroll', this._onScroll, { passive: true });
+
+      // Handle resize
+      this._onResize = () => {
+        this.isMobile = window.innerWidth < 768;
+        this.updateAll();
+      };
+      window.addEventListener('resize', this._onResize);
+    },
+
+    /**
+     * Initialize a parallax element
+     * @param {HTMLElement} element - Parallax container
+     */
+    initParallax: function (element) {
+      element.dataset.parallaxInitialized = 'true';
+
+      // Check if disabled on mobile
+      const disableMobile = element.classList.contains('parallax-disable-mobile');
+      if (disableMobile && this.isMobile) {
+        return;
+      }
+
+      const layers = element.querySelectorAll('.vd-parallax-layer, .vd-parallax-bg');
+      const speed = this.getSpeed(element);
+      const direction = element.classList.contains('parallax-horizontal') ? 'horizontal' : 'vertical';
+
+      this.parallaxElements.set(element, {
+        layers: Array.from(layers),
+        speed: speed,
+        direction: direction,
+        disableMobile: disableMobile
+      });
+
+      // Initial update
+      this.updateParallax(element);
+    },
+
+    /**
+     * Get parallax speed from element
+     * @param {HTMLElement} element - Parallax element
+     * @returns {number} Speed multiplier
+     */
+    getSpeed: function (element) {
+      if (element.classList.contains('parallax-slow')) {
+        return 0.5;
+      } else if (element.classList.contains('parallax-fast')) {
+        return 1.5;
+      }
+      return 1; // Default medium speed
+    },
+
+    /**
+     * Handle scroll event
+     */
+    handleScroll: function () {
+      if (!this.ticking) {
+        window.requestAnimationFrame(() => {
+          this.updateAll();
+          this.ticking = false;
+        });
+        this.ticking = true;
+      }
+    },
+
+    /**
+     * Update all parallax elements
+     */
+    updateAll: function () {
+      this.parallaxElements.forEach((config, element) => {
+        // Skip if disabled on mobile
+        if (config.disableMobile && this.isMobile) {
+          return;
+        }
+
+        this.updateParallax(element);
+      });
+    },
+
+    /**
+     * Update parallax for a single element
+     * @param {HTMLElement} element - Parallax element
+     */
+    updateParallax: function (element) {
+      const config = this.parallaxElements.get(element);
+      if (!config) {
+        return;
+      }
+
+      const rect = element.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const elementTop = rect.top;
+      const elementHeight = rect.height;
+
+      // Calculate scroll progress (0 to 1)
+      const scrollProgress = Math.max(0, Math.min(1,
+        (windowHeight - elementTop) / (windowHeight + elementHeight)
+      ));
+
+      // Calculate offset based on speed and direction
+      const offset = (scrollProgress - 0.5) * config.speed * 100;
+
+      config.layers.forEach((layer, _index) => {
+        // Different layers can have different speeds
+        const layerSpeed = layer.dataset.parallaxSpeed ? parseFloat(layer.dataset.parallaxSpeed) : 1;
+        const layerOffset = offset * layerSpeed;
+
+        if (config.direction === 'horizontal') {
+          layer.style.transform = `translateX(${layerOffset}px)`;
+        } else {
+          layer.style.transform = `translateY(${layerOffset}px)`;
+        }
+      });
+    },
+
+    /**
+     * Destroy parallax element
+     * @param {HTMLElement|string} element - Parallax element or selector
+     */
+    destroy: function (element) {
+      const el = typeof element === 'string' ? document.querySelector(element) : element;
+      if (el && this.parallaxElements.has(el)) {
+        const config = this.parallaxElements.get(el);
+        config.layers.forEach(layer => {
+          layer.style.transform = '';
+        });
+        this.parallaxElements.delete(el);
+      }
+    },
+
+    /**
+     * Refresh parallax (recalculate positions)
+     */
+    refresh: function () {
+      this.updateAll();
+    },
+
+    destroyAll: function () {
+      this.parallaxElements.forEach((_config, element) => {
+        this.destroy(element);
+      });
+      this.parallaxElements.clear();
+
+      if (this._onScroll) {
+        window.removeEventListener('scroll', this._onScroll);
+        this._onScroll = null;
+      }
+
+      if (this._onResize) {
+        window.removeEventListener('resize', this._onResize);
+        this._onResize = null;
+      }
+
+      this.isInitialized = false;
+    }
+  };
+
+  // Register with Vanduo framework if available
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('parallax', Parallax);
+  }
+
+  // Expose globally
+  window.VanduoParallax = Parallax;
+
+})();
+

package/js/components/preloader.js

@@ -0,0 +1,183 @@
+/**
+ * Vanduo Framework - Preloader Component
+ * JavaScript functionality for progress bars and loaders
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Preloader Component
+   */
+  const Preloader = {
+    /**
+     * Initialize preloader components
+     */
+    init: function() {
+      const progressBars = document.querySelectorAll('.progress-bar[data-progress]');
+      
+      progressBars.forEach(bar => {
+        if (!bar.dataset.progressInitialized) {
+          this.initProgressBar(bar);
+        }
+      });
+    },
+    
+    /**
+     * Initialize a progress bar
+     * @param {HTMLElement} bar - Progress bar element
+     */
+    initProgressBar: function(bar) {
+      bar.dataset.progressInitialized = 'true';
+      
+      const initialValue = parseInt(bar.dataset.progress) || 0;
+      this.setProgress(bar, initialValue, false);
+    },
+    
+    /**
+     * Set progress value
+     * @param {HTMLElement|string} bar - Progress bar element or selector
+     * @param {number} value - Progress value (0-100)
+     * @param {boolean} animate - Whether to animate
+     */
+    setProgress: function(bar, value, animate = true) {
+      const el = typeof bar === 'string' ? document.querySelector(bar) : bar;
+      
+      if (!el) {
+        return;
+      }
+      
+      // Clamp value between 0 and 100
+      value = Math.max(0, Math.min(100, value));
+      
+      // Update width
+      if (animate) {
+        el.style.transition = 'width var(--transition-duration-slow) var(--transition-ease)';
+      } else {
+        el.style.transition = 'none';
+        setTimeout(() => {
+          el.style.transition = '';
+        }, 0);
+      }
+      
+      el.style.width = value + '%';
+      el.setAttribute('aria-valuenow', value);
+      el.setAttribute('aria-valuemin', 0);
+      el.setAttribute('aria-valuemax', 100);
+      
+      // Update text if exists
+      const text = el.querySelector('.progress-text');
+      if (text) {
+        text.textContent = value + '%';
+      }
+      
+      // Dispatch event
+      el.dispatchEvent(new CustomEvent('progress:update', {
+        bubbles: true,
+        detail: { value, max: 100 }
+      }));
+      
+      // Complete event
+      if (value >= 100) {
+        el.dispatchEvent(new CustomEvent('progress:complete', {
+          bubbles: true,
+          detail: { value, max: 100 }
+        }));
+      }
+    },
+    
+    /**
+     * Animate progress from current to target
+     * @param {HTMLElement|string} bar - Progress bar element or selector
+     * @param {number} targetValue - Target progress value (0-100)
+     * @param {number} duration - Animation duration in ms
+     */
+    animateProgress: function(bar, targetValue, duration = 1000) {
+      const el = typeof bar === 'string' ? document.querySelector(bar) : bar;
+      
+      if (!el) {
+        return;
+      }
+      
+      const startValue = parseInt(el.style.width) || 0;
+      const difference = targetValue - startValue;
+      const startTime = performance.now();
+      
+      const animate = (currentTime) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        
+        // Easing function (ease-out)
+        const easeOut = 1 - Math.pow(1 - progress, 3);
+        const currentValue = startValue + (difference * easeOut);
+        
+        this.setProgress(el, currentValue, false);
+        
+        if (progress < 1) {
+          requestAnimationFrame(animate);
+        }
+      };
+      
+      requestAnimationFrame(animate);
+    },
+    
+    /**
+     * Show preloader
+     * @param {HTMLElement|string} preloader - Preloader element or selector
+     */
+    show: function(preloader) {
+      const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;
+      if (el) {
+        el.style.display = 'inline-block';
+        el.setAttribute('aria-hidden', 'false');
+      }
+    },
+    
+    /**
+     * Hide preloader
+     * @param {HTMLElement|string} preloader - Preloader element or selector
+     */
+    hide: function(preloader) {
+      const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;
+      if (el) {
+        el.style.display = 'none';
+        el.setAttribute('aria-hidden', 'true');
+      }
+    },
+    
+    /**
+     * Toggle preloader
+     * @param {HTMLElement|string} preloader - Preloader element or selector
+     */
+    toggle: function(preloader) {
+      const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;
+      if (el) {
+        if (el.style.display === 'none' || el.getAttribute('aria-hidden') === 'true') {
+          this.show(el);
+        } else {
+          this.hide(el);
+        }
+      }
+    },
+
+    /**
+     * Destroy all progress bar instances
+     */
+    destroyAll: function() {
+      const progressBars = document.querySelectorAll('.progress-bar[data-progress-initialized="true"]');
+      progressBars.forEach(bar => {
+        delete bar.dataset.progressInitialized;
+      });
+    }
+  };
+  
+  // Register with Vanduo framework if available
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('preloader', Preloader);
+  }
+  
+  // Expose globally
+  window.VanduoPreloader = Preloader;
+  
+})();
+