peek-carousel 1.0.2 → 1.0.4

package/examples/example.js

@@ -1,404 +0,0 @@
-const DEFAULT_LAYOUT_MODE = 'stack';
-
-const DEFAULT_OPTIONS = {
-  startIndex: 0,
-  layoutMode: DEFAULT_LAYOUT_MODE,
-  autoRotate: false,
-  autoRotateInterval: 3000,
-  swipeThreshold: 50,
-  dragThreshold: 80,
-  preloadRange: 2,
-  enableKeyboard: true,
-  enableWheel: true,
-  enableTouch: true,
-  enableMouse: true
-};
-
-const SELECTORS = {
-  carousel: '#myCarousel',
-  nav: '.peek-carousel__nav',
-  controls: '.peek-carousel__controls',
-  counter: '.peek-carousel__counter',
-  prevBtn: '.prev-btn',
-  layoutButton: '.button__group-item',
-  layoutButtonActive: '.button__group-item--active[data-layout]',
-  layoutModeGroup: '[aria-label="Layout mode selection"]',
-  controlsToggle: '.controls__toggle',
-  controlsClose: '.controls__close',
-  controlsPanel: '.controls__panel',
-  keyboardToggle: '.keyboard__toggle',
-  keyboardPanel: '.keyboard__panel',
-  mouseToggle: '.mouse__toggle',
-  mousePanel: '.mouse__panel',
-};
-
-const AUTO_GENERATED_SELECTORS = [
-  SELECTORS.nav,
-  SELECTORS.controls,
-  SELECTORS.counter,
-];
-
-const TOGGLEABLE_UI_IDS = [
-  'showNavigation',
-  'showCounter',
-  'showIndicators',
-  'showAutoRotateButton'
-];
-
-const PANELS = [
-  { name: 'api', panelClass: 'api__panel', toggleClass: 'api__toggle' },
-  { name: 'controls', panelClass: 'controls__panel', toggleClass: 'controls__toggle' },
-  { name: 'keyboard', panelClass: 'keyboard__panel', toggleClass: 'keyboard__toggle' },
-  { name: 'mouse', panelClass: 'mouse__panel', toggleClass: 'mouse__toggle' },
-  { name: 'share', panelClass: 'share__panel', toggleClass: 'share__toggle' }
-];
-
-let elements = {};
-let panelElements = {};
-let carousel = null;
-
-const buildCarouselOptions = (currentIndex = DEFAULT_OPTIONS.startIndex) => {
-  const layoutMode = document.querySelector(SELECTORS.layoutButtonActive)?.dataset.layout || DEFAULT_LAYOUT_MODE;
-
-  return {
-    ...DEFAULT_OPTIONS,
-    startIndex: currentIndex,
-    layoutMode,
-    showNavigation: elements.showNavigation?.checked ?? true,
-    showCounter: elements.showCounter?.checked ?? true,
-    showIndicators: elements.showIndicators?.checked ?? true,
-    showAutoRotateButton: elements.showAutoRotateButton?.checked ?? true,
-  };
-};
-
-const removeAutoGeneratedElements = (container) => {
-  for (const selector of AUTO_GENERATED_SELECTORS) {
-    const element = container.querySelector(selector);
-    if (element) element.remove();
-  }
-};
-
-const reinitializeCarousel = () => {
-  const currentIndex = carousel.state.currentIndex;
-  carousel.destroy();
-  removeAutoGeneratedElements(carousel.container);
-  carousel = new PeekCarousel(SELECTORS.carousel, buildCarouselOptions(currentIndex));
-  moveCounterToNavigation();
-};
-
-const closeAllPanels = (exceptPanelName = null) => {
-  for (const name in panelElements) {
-    if (name === exceptPanelName) continue;
-
-    const { panel, toggle, activeClass } = panelElements[name];
-    panel?.classList.remove(activeClass);
-    toggle?.setAttribute('aria-expanded', 'false');
-  }
-};
-
-const createTogglePanel = (panelName) => {
-  return () => {
-    const cachedPanel = panelElements[panelName];
-    if (!cachedPanel) return;
-
-    const { panel, toggle, activeClass } = cachedPanel;
-    const isActive = panel.classList.toggle(activeClass);
-
-    toggle?.setAttribute('aria-expanded', isActive);
-
-    if (isActive) {
-      closeAllPanels(panelName);
-    }
-  };
-};
-
-const toggleAPIPanel = createTogglePanel('api');
-const toggleControlsPanel = createTogglePanel('controls');
-const toggleKeyboardPanel = createTogglePanel('keyboard');
-const toggleMousePanel = createTogglePanel('mouse');
-const toggleSharePanel = createTogglePanel('share');
-
-const handleLayoutModeChange = (buttonGroup, clickedButton) => {
-  const buttons = buttonGroup.querySelectorAll(SELECTORS.layoutButton);
-  for (const btn of buttons) {
-    btn.classList.remove('button__group-item--active');
-    btn.setAttribute('aria-pressed', 'false');
-  }
-
-  clickedButton.classList.add('button__group-item--active');
-  clickedButton.setAttribute('aria-pressed', 'true');
-
-  const layoutMode = clickedButton.dataset.layout;
-  carousel.options.layoutMode = layoutMode;
-  carousel.updateLayoutClass();
-
-  // [데모용] stack 모드에서 transform 초기화
-  if (layoutMode === DEFAULT_LAYOUT_MODE) {
-    carousel.elements.carousel.style.transform = 'none';
-  }
-
-  carousel.animator.updateCarousel();
-};
-
-const attachEventListeners = () => {
-  const apiToggleBtn = document.querySelector('.api__toggle');
-  const toggleBtn = document.querySelector(SELECTORS.controlsToggle);
-  const keyboardToggleBtn = document.querySelector(SELECTORS.keyboardToggle);
-  const mouseToggleBtn = document.querySelector(SELECTORS.mouseToggle);
-  const shareToggleBtn = document.querySelector('.share__toggle');
-  const closeBtn = document.querySelector(SELECTORS.controlsClose);
-  const layoutModeGroup = document.querySelector(SELECTORS.layoutModeGroup);
-
-  apiToggleBtn?.addEventListener('click', toggleAPIPanel);
-  toggleBtn?.addEventListener('click', toggleControlsPanel);
-  keyboardToggleBtn?.addEventListener('click', toggleKeyboardPanel);
-  mouseToggleBtn?.addEventListener('click', toggleMousePanel);
-  shareToggleBtn?.addEventListener('click', toggleSharePanel);
-  closeBtn?.addEventListener('click', toggleControlsPanel);
-
-  layoutModeGroup?.addEventListener('click', (event) => {
-    const clickedButton = event.target.closest(SELECTORS.layoutButton);
-    if (clickedButton) {
-      handleLayoutModeChange(layoutModeGroup, clickedButton);
-    }
-  });
-
-  for (const id of TOGGLEABLE_UI_IDS) {
-    elements[id]?.addEventListener('change', reinitializeCarousel);
-  }
-};
-
-const cacheElements = () => {
-  elements = TOGGLEABLE_UI_IDS.reduce((acc, id) => {
-    acc[id] = document.getElementById(id);
-    return acc;
-  }, {});
-
-  panelElements = PANELS.reduce((acc, config) => {
-    acc[config.name] = {
-      panel: document.querySelector(`.${config.panelClass}`),
-      toggle: document.querySelector(`.${config.toggleClass}`),
-      activeClass: `${config.panelClass}--active`,
-    };
-    return acc;
-  }, {});
-};
-
-// [데모용] 카운터를 네비게이션 내부로 이동 (이전 버튼 옆에 배치)
-const moveCounterToNavigation = () => {
-  const nav = carousel.container.querySelector(SELECTORS.nav);
-  if (!nav) return;
-
-  const counter = carousel.container.querySelector(SELECTORS.counter);
-  if (!counter) return;
-
-  const prevBtn = nav.querySelector(SELECTORS.prevBtn);
-  if (!prevBtn) return;
-
-  nav.insertBefore(counter, prevBtn.nextSibling);
-};
-
-// API Demo functionality
-const initAPIDemo = () => {
-  const apiButtons = document.querySelectorAll('.api-btn');
-  const apiOutput = document.getElementById('apiOutput');
-
-  if (!apiButtons.length || !apiOutput) return;
-
-  const handleAPIButtonClick = (event) => {
-    const button = event.target.closest('.api-btn');
-    if (!button) return;
-
-    const action = button.dataset.api;
-    let result;
-
-    try {
-      switch (action) {
-        case 'next':
-          carousel.next();
-          result = '✓ Moved to next slide';
-          break;
-        case 'prev':
-          carousel.prev();
-          result = '✓ Moved to previous slide';
-          break;
-        case 'goTo':
-          carousel.goTo(2);
-          result = '✓ Moved to slide index 2';
-          break;
-        case 'startAutoRotate':
-          carousel.startAutoRotate();
-          result = '✓ Auto-rotation started';
-          break;
-        case 'stopAutoRotate':
-          carousel.stopAutoRotate();
-          result = '✓ Auto-rotation stopped';
-          break;
-        case 'toggleAutoRotate':
-          carousel.toggleAutoRotate();
-          result = `✓ Auto-rotation toggled (now: ${carousel.isAutoRotating ? 'ON' : 'OFF'})`;
-          break;
-        case 'getCurrentIndex':
-          result = `currentIndex: ${carousel.currentIndex}`;
-          break;
-        case 'getTotalItems':
-          result = `totalItems: ${carousel.totalItems}`;
-          break;
-        case 'getIsAutoRotating':
-          result = `isAutoRotating: ${carousel.isAutoRotating}`;
-          break;
-        default:
-          result = 'Unknown API method';
-      }
-
-      apiOutput.textContent = result;
-      apiOutput.style.color = '#10b981';
-    } catch (error) {
-      apiOutput.textContent = `Error: ${error.message}`;
-      apiOutput.style.color = '#ef4444';
-    }
-  };
-
-  for (let i = 0; i < apiButtons.length; i++) {
-    apiButtons[i].addEventListener('click', handleAPIButtonClick);
-  }
-};
-
-// API Search & Filter functionality
-const initAPISearchFilter = () => {
-  const searchInput = document.getElementById('apiSearch');
-  const filterButtons = document.querySelectorAll('.api-filter__btn');
-  const apiItems = document.querySelectorAll('.api-method, .api-property');
-
-  if (!searchInput || !filterButtons.length || !apiItems.length) {
-    console.warn('API Search/Filter elements not found');
-    return;
-  }
-
-  console.log('API Search/Filter initialized with', apiItems.length, 'items');
-
-  let currentFilter = 'all';
-  let currentSearch = '';
-
-  const filterItems = () => {
-    let visibleCount = 0;
-
-    apiItems.forEach(item => {
-      const category = item.dataset.category || '';
-      const searchText = (item.dataset.search || '').toLowerCase();
-      const matchesFilter = currentFilter === 'all' || category === currentFilter;
-      const matchesSearch = currentSearch === '' || searchText.includes(currentSearch.toLowerCase());
-
-      if (matchesFilter && matchesSearch) {
-        item.style.display = '';
-        visibleCount++;
-        // Add fade-in animation
-        item.style.animation = 'fadeIn 0.3s ease-in';
-      } else {
-        item.style.display = 'none';
-      }
-    });
-
-    console.log('Filtered:', visibleCount, 'visible items (filter:', currentFilter, 'search:', currentSearch, ')');
-
-    // Show "no results" message if needed
-    const methodsGrid = document.querySelector('#api-methods .api-docs__grid');
-    const propertiesGrid = document.querySelector('#api-properties .api-docs__grid');
-
-    const showNoResults = (grid, hasVisible) => {
-      if (!grid) return;
-
-      let noResultsMsg = grid.querySelector('.no-results');
-      if (!hasVisible) {
-        if (!noResultsMsg) {
-          noResultsMsg = document.createElement('div');
-          noResultsMsg.className = 'no-results';
-          noResultsMsg.textContent = 'No matching items found';
-          noResultsMsg.style.cssText = 'grid-column: 1/-1; text-align: center; padding: 2rem; color: rgba(255,255,255,0.6);';
-          grid.appendChild(noResultsMsg);
-        }
-      } else if (noResultsMsg) {
-        noResultsMsg.remove();
-      }
-    };
-
-    const methodsVisible = Array.from(methodsGrid?.querySelectorAll('.api-method') || []).some(el => el.style.display !== 'none');
-    const propertiesVisible = Array.from(propertiesGrid?.querySelectorAll('.api-property') || []).some(el => el.style.display !== 'none');
-
-    showNoResults(methodsGrid, methodsVisible);
-    showNoResults(propertiesGrid, propertiesVisible);
-  };
-
-  // Handle search input
-  searchInput.addEventListener('input', (e) => {
-    currentSearch = e.target.value;
-    console.log('Search input:', currentSearch);
-    filterItems();
-  });
-
-  // Handle filter buttons
-  filterButtons.forEach(button => {
-    button.addEventListener('click', () => {
-      // Update active state
-      filterButtons.forEach(btn => btn.classList.remove('active'));
-      button.classList.add('active');
-
-      // Update filter
-      currentFilter = button.dataset.filter;
-      console.log('Filter clicked:', currentFilter);
-      filterItems();
-    });
-  });
-};
-
-// Smooth scroll for anchor links
-const initSmoothScroll = () => {
-  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-    anchor.addEventListener('click', function (e) {
-      const href = this.getAttribute('href');
-      if (href === '#') return;
-
-      e.preventDefault();
-      const target = document.querySelector(href);
-      if (target) {
-        const offsetTop = target.offsetTop - 20;
-        window.scrollTo({
-          top: offsetTop,
-          behavior: 'smooth'
-        });
-      }
-    });
-  });
-};
-
-// Add fade-in animation keyframes
-const addAnimationStyles = () => {
-  if (!document.getElementById('api-animations')) {
-    const style = document.createElement('style');
-    style.id = 'api-animations';
-    style.textContent = `
-      @keyframes fadeIn {
-        from { opacity: 0; transform: translateY(10px); }
-        to { opacity: 1; transform: translateY(0); }
-      }
-    `;
-    document.head.appendChild(style);
-  }
-};
-
-const init = () => {
-  cacheElements();
-  carousel = new PeekCarousel(SELECTORS.carousel, buildCarouselOptions());
-  moveCounterToNavigation();
-  attachEventListeners();
-  initAPIDemo();
-  initAPISearchFilter();
-  initSmoothScroll();
-  addAnimationStyles();
-};
-
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', init);
-} else {
-  init();
-}