jasmincss 1.0.0

package/src/js/components/carousel.js

@@ -0,0 +1,226 @@
+/**
+ * JasminCSS Carousel Component
+ * Handles image/content carousels with autoplay and accessibility
+ */
+
+class Carousel {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.options = {
+      autoplay: false,
+      interval: 5000,
+      pause: 'hover',
+      wrap: true,
+      keyboard: true,
+      touch: true,
+      ...options
+    };
+
+    this.inner = element.querySelector('.carousel-inner');
+    this.items = Array.from(element.querySelectorAll('.carousel-item'));
+    this.indicators = Array.from(element.querySelectorAll('.carousel-indicator, [data-carousel-slide-to]'));
+    this.prevBtn = element.querySelector('.carousel-control-prev, [data-carousel-prev]');
+    this.nextBtn = element.querySelector('.carousel-control-next, [data-carousel-next]');
+
+    this.currentIndex = 0;
+    this.isAnimating = false;
+    this.autoplayInterval = null;
+    this.touchStartX = 0;
+    this.touchEndX = 0;
+
+    this.init();
+  }
+
+  init() {
+    // Find initial active item
+    this.items.forEach((item, index) => {
+      if (item.classList.contains('active')) {
+        this.currentIndex = index;
+      }
+      item.setAttribute('role', 'group');
+      item.setAttribute('aria-roledescription', 'slide');
+      item.setAttribute('aria-label', `Slide ${index + 1} of ${this.items.length}`);
+    });
+
+    // Set ARIA
+    this.element.setAttribute('role', 'region');
+    this.element.setAttribute('aria-roledescription', 'carousel');
+
+    // Control buttons
+    if (this.prevBtn) {
+      this.prevBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.prev();
+      });
+    }
+
+    if (this.nextBtn) {
+      this.nextBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.next();
+      });
+    }
+
+    // Indicators
+    this.indicators.forEach((indicator, index) => {
+      indicator.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.goTo(index);
+      });
+    });
+
+    // Keyboard navigation
+    if (this.options.keyboard) {
+      this.element.setAttribute('tabindex', '0');
+      this.element.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          this.prev();
+        } else if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          this.next();
+        }
+      });
+    }
+
+    // Touch support
+    if (this.options.touch) {
+      this.element.addEventListener('touchstart', (e) => {
+        this.touchStartX = e.touches[0].clientX;
+      }, { passive: true });
+
+      this.element.addEventListener('touchend', (e) => {
+        this.touchEndX = e.changedTouches[0].clientX;
+        this.handleSwipe();
+      }, { passive: true });
+    }
+
+    // Pause on hover
+    if (this.options.pause === 'hover') {
+      this.element.addEventListener('mouseenter', () => this.stopAutoplay());
+      this.element.addEventListener('mouseleave', () => {
+        if (this.options.autoplay) this.startAutoplay();
+      });
+    }
+
+    // Start autoplay
+    if (this.options.autoplay) {
+      this.startAutoplay();
+    }
+
+    // Set initial state
+    this.updateSlide();
+  }
+
+  goTo(index) {
+    if (this.isAnimating || index === this.currentIndex) return;
+
+    if (!this.options.wrap) {
+      if (index < 0 || index >= this.items.length) return;
+    }
+
+    // Handle wrapping
+    if (index < 0) {
+      index = this.items.length - 1;
+    } else if (index >= this.items.length) {
+      index = 0;
+    }
+
+    this.isAnimating = true;
+    const direction = index > this.currentIndex ? 'next' : 'prev';
+
+    // Dispatch before event
+    this.element.dispatchEvent(new CustomEvent('carousel:slide', {
+      detail: { from: this.currentIndex, to: index, direction }
+    }));
+
+    this.currentIndex = index;
+    this.updateSlide();
+
+    setTimeout(() => {
+      this.isAnimating = false;
+      this.element.dispatchEvent(new CustomEvent('carousel:slid', {
+        detail: { index: this.currentIndex }
+      }));
+    }, 600);
+  }
+
+  next() {
+    this.goTo(this.currentIndex + 1);
+  }
+
+  prev() {
+    this.goTo(this.currentIndex - 1);
+  }
+
+  updateSlide() {
+    // Update items
+    this.items.forEach((item, index) => {
+      item.classList.toggle('active', index === this.currentIndex);
+      item.setAttribute('aria-hidden', index !== this.currentIndex);
+    });
+
+    // Update indicators
+    this.indicators.forEach((indicator, index) => {
+      indicator.classList.toggle('active', index === this.currentIndex);
+      indicator.setAttribute('aria-selected', index === this.currentIndex);
+    });
+
+    // Update live region
+    this.element.setAttribute('aria-live', 'polite');
+  }
+
+  handleSwipe() {
+    const diff = this.touchStartX - this.touchEndX;
+    const threshold = 50;
+
+    if (Math.abs(diff) > threshold) {
+      if (diff > 0) {
+        this.next();
+      } else {
+        this.prev();
+      }
+    }
+  }
+
+  startAutoplay() {
+    if (this.autoplayInterval) return;
+
+    this.autoplayInterval = setInterval(() => {
+      this.next();
+    }, this.options.interval);
+  }
+
+  stopAutoplay() {
+    if (this.autoplayInterval) {
+      clearInterval(this.autoplayInterval);
+      this.autoplayInterval = null;
+    }
+  }
+
+  destroy() {
+    this.stopAutoplay();
+  }
+
+  // Static methods
+  static initAll(selector = '[data-carousel]') {
+    document.querySelectorAll(selector).forEach(el => {
+      if (!el._jasminCarousel) {
+        el._jasminCarousel = new Carousel(el, {
+          autoplay: el.dataset.carouselAutoplay === 'true',
+          interval: parseInt(el.dataset.carouselInterval) || 5000,
+          pause: el.dataset.carouselPause || 'hover',
+          wrap: el.dataset.carouselWrap !== 'false',
+          keyboard: el.dataset.carouselKeyboard !== 'false',
+          touch: el.dataset.carouselTouch !== 'false'
+        });
+      }
+    });
+  }
+
+  static getInstance(element) {
+    return element._jasminCarousel;
+  }
+}
+
+export default Carousel;

package/src/js/components/dropdown.js

@@ -0,0 +1,166 @@
+/**
+ * JasminCSS Dropdown Component
+ * Handles dropdown menus with keyboard navigation and accessibility
+ */
+
+class Dropdown {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.toggle = element.querySelector('[data-dropdown-toggle]') || element.querySelector('.dropdown-toggle');
+    this.menu = element.querySelector('[data-dropdown-menu]') || element.querySelector('.dropdown-menu');
+    this.isOpen = false;
+    this.options = {
+      closeOnClickOutside: true,
+      closeOnEscape: true,
+      closeOnItemClick: true,
+      ...options
+    };
+
+    if (!this.toggle || !this.menu) return;
+
+    this.init();
+  }
+
+  init() {
+    // Toggle click
+    this.toggle.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.toggle();
+    });
+
+    // Keyboard navigation
+    this.element.addEventListener('keydown', (e) => this.handleKeydown(e));
+
+    // Close on click outside
+    if (this.options.closeOnClickOutside) {
+      document.addEventListener('click', (e) => {
+        if (this.isOpen && !this.element.contains(e.target)) {
+          this.close();
+        }
+      });
+    }
+
+    // Close on escape
+    if (this.options.closeOnEscape) {
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && this.isOpen) {
+          this.close();
+          this.toggle.focus();
+        }
+      });
+    }
+
+    // Close on item click
+    if (this.options.closeOnItemClick) {
+      this.menu.querySelectorAll('.dropdown-item').forEach(item => {
+        item.addEventListener('click', () => this.close());
+      });
+    }
+
+    // Set ARIA attributes
+    this.toggle.setAttribute('aria-haspopup', 'true');
+    this.toggle.setAttribute('aria-expanded', 'false');
+    this.menu.setAttribute('role', 'menu');
+    this.menu.querySelectorAll('.dropdown-item').forEach(item => {
+      item.setAttribute('role', 'menuitem');
+    });
+  }
+
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+
+  open() {
+    this.isOpen = true;
+    this.element.classList.add('open');
+    this.menu.classList.add('show');
+    this.toggle.setAttribute('aria-expanded', 'true');
+
+    // Focus first item
+    const firstItem = this.menu.querySelector('.dropdown-item:not([disabled])');
+    if (firstItem) firstItem.focus();
+
+    // Dispatch event
+    this.element.dispatchEvent(new CustomEvent('dropdown:open', { detail: { dropdown: this } }));
+  }
+
+  close() {
+    this.isOpen = false;
+    this.element.classList.remove('open');
+    this.menu.classList.remove('show');
+    this.toggle.setAttribute('aria-expanded', 'false');
+
+    // Dispatch event
+    this.element.dispatchEvent(new CustomEvent('dropdown:close', { detail: { dropdown: this } }));
+  }
+
+  handleKeydown(e) {
+    const items = Array.from(this.menu.querySelectorAll('.dropdown-item:not([disabled])'));
+    const currentIndex = items.indexOf(document.activeElement);
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        if (!this.isOpen) {
+          this.open();
+        } else {
+          const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+          items[nextIndex]?.focus();
+        }
+        break;
+
+      case 'ArrowUp':
+        e.preventDefault();
+        if (this.isOpen) {
+          const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+          items[prevIndex]?.focus();
+        }
+        break;
+
+      case 'Home':
+        e.preventDefault();
+        items[0]?.focus();
+        break;
+
+      case 'End':
+        e.preventDefault();
+        items[items.length - 1]?.focus();
+        break;
+
+      case 'Enter':
+      case ' ':
+        if (document.activeElement === this.toggle) {
+          e.preventDefault();
+          this.toggle();
+        }
+        break;
+
+      case 'Tab':
+        this.close();
+        break;
+    }
+  }
+
+  destroy() {
+    this.close();
+    this.toggle.removeAttribute('aria-haspopup');
+    this.toggle.removeAttribute('aria-expanded');
+  }
+
+  // Static method to initialize all dropdowns
+  static initAll(selector = '[data-dropdown]') {
+    document.querySelectorAll(selector).forEach(el => {
+      if (!el._jasminDropdown) {
+        el._jasminDropdown = new Dropdown(el);
+      }
+    });
+  }
+
+  // Static method to get instance
+  static getInstance(element) {
+    return element._jasminDropdown;
+  }
+}
+
+export default Dropdown;

package/src/js/components/modal.js

@@ -0,0 +1,169 @@
+/**
+ * JasminCSS Modal Component
+ * Handles modal dialogs with focus trapping and accessibility
+ */
+
+class Modal {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.isOpen = false;
+    this.previousActiveElement = null;
+    this.options = {
+      backdrop: true,
+      keyboard: true,
+      focus: true,
+      ...options
+    };
+
+    this.backdrop = null;
+    this.init();
+  }
+
+  init() {
+    // Set ARIA attributes
+    this.element.setAttribute('role', 'dialog');
+    this.element.setAttribute('aria-modal', 'true');
+    this.element.setAttribute('tabindex', '-1');
+
+    // Close button handlers
+    this.element.querySelectorAll('[data-modal-close], .modal-close').forEach(btn => {
+      btn.addEventListener('click', () => this.close());
+    });
+
+    // Keyboard handling
+    this.element.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && this.options.keyboard) {
+        this.close();
+      }
+      if (e.key === 'Tab') {
+        this.trapFocus(e);
+      }
+    });
+  }
+
+  open() {
+    if (this.isOpen) return;
+
+    this.previousActiveElement = document.activeElement;
+    this.isOpen = true;
+
+    // Create backdrop
+    if (this.options.backdrop) {
+      this.backdrop = document.createElement('div');
+      this.backdrop.className = 'modal-backdrop show';
+      document.body.appendChild(this.backdrop);
+
+      if (this.options.backdrop !== 'static') {
+        this.backdrop.addEventListener('click', () => this.close());
+      }
+    }
+
+    // Show modal
+    this.element.classList.add('show');
+    this.element.style.display = 'block';
+    document.body.classList.add('modal-open');
+    document.body.style.overflow = 'hidden';
+
+    // Focus management
+    if (this.options.focus) {
+      const autoFocus = this.element.querySelector('[autofocus]');
+      const firstFocusable = this.getFocusableElements()[0];
+      (autoFocus || firstFocusable || this.element).focus();
+    }
+
+    // Dispatch event
+    this.element.dispatchEvent(new CustomEvent('modal:open', { detail: { modal: this } }));
+  }
+
+  close() {
+    if (!this.isOpen) return;
+
+    this.isOpen = false;
+
+    // Remove backdrop
+    if (this.backdrop) {
+      this.backdrop.classList.remove('show');
+      setTimeout(() => {
+        this.backdrop?.remove();
+        this.backdrop = null;
+      }, 150);
+    }
+
+    // Hide modal
+    this.element.classList.remove('show');
+    setTimeout(() => {
+      if (!this.isOpen) {
+        this.element.style.display = 'none';
+      }
+    }, 150);
+
+    document.body.classList.remove('modal-open');
+    document.body.style.overflow = '';
+
+    // Restore focus
+    if (this.previousActiveElement) {
+      this.previousActiveElement.focus();
+    }
+
+    // Dispatch event
+    this.element.dispatchEvent(new CustomEvent('modal:close', { detail: { modal: this } }));
+  }
+
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+
+  getFocusableElements() {
+    return Array.from(this.element.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )).filter(el => !el.disabled && el.offsetParent !== null);
+  }
+
+  trapFocus(e) {
+    const focusable = this.getFocusableElements();
+    const firstFocusable = focusable[0];
+    const lastFocusable = focusable[focusable.length - 1];
+
+    if (e.shiftKey) {
+      if (document.activeElement === firstFocusable) {
+        e.preventDefault();
+        lastFocusable.focus();
+      }
+    } else {
+      if (document.activeElement === lastFocusable) {
+        e.preventDefault();
+        firstFocusable.focus();
+      }
+    }
+  }
+
+  destroy() {
+    this.close();
+  }
+
+  // Static methods
+  static initAll(selector = '[data-modal]') {
+    document.querySelectorAll(selector).forEach(el => {
+      if (!el._jasminModal) {
+        el._jasminModal = new Modal(el);
+      }
+    });
+
+    // Init triggers
+    document.querySelectorAll('[data-modal-target]').forEach(trigger => {
+      trigger.addEventListener('click', (e) => {
+        e.preventDefault();
+        const target = document.querySelector(trigger.dataset.modalTarget);
+        if (target?._jasminModal) {
+          target._jasminModal.open();
+        }
+      });
+    });
+  }
+
+  static getInstance(element) {
+    return element._jasminModal;
+  }
+}
+
+export default Modal;