peek-carousel 1.0.2

package/examples/example.js

@@ -0,0 +1,404 @@
+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();
+}

package/examples/example.min.css

@@ -0,0 +1 @@
+:root{--color-primary:#667eea;--color-secondary:#764ba2;--color-bg-dark:#1a1a2e;--color-bg-black:#000;--color-white:#fff;--color-overlay:rgba(0,0,0,.7);--color-overlay-hover:rgba(0,0,0,.8);--color-border:hsla(0,0%,100%,.2);--color-border-hover:hsla(0,0%,100%,.35);--color-bg-item:hsla(0,0%,100%,.05);--color-bg-item-hover:hsla(0,0%,100%,.1);--color-bg-item-light:hsla(0,0%,100%,.08);--spacing-xs:8px;--spacing-sm:10px;--spacing-md:12px;--spacing-lg:20px;--border-radius:8px;--border-radius-lg:12px;--button-size:48px;--button-size-mobile:40px;--transition:all 0.3s ease;--transition-fast:all 0.2s ease}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:hidden}body{background:radial-gradient(ellipse at center,var(--color-bg-dark) 0,var(--color-bg-black) 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;min-height:100vh;position:relative;width:100%}body:before{animation:gridMove 20s linear infinite;background-image:linear-gradient(rgba(102,126,234,.03) 1px,transparent 0),linear-gradient(90deg,rgba(102,126,234,.03) 1px,transparent 0),linear-gradient(rgba(102,126,234,.05) 1px,transparent 0),linear-gradient(90deg,rgba(102,126,234,.05) 1px,transparent 0);background-position:0 0,0 0,0 0,0 0;background-size:20px 20px,20px 20px,100px 100px,100px 100px;content:"";inset:0;position:absolute;z-index:-1}@keyframes gridMove{0%{background-position:0 0,0 0,0 0,0 0}to{background-position:20px 20px,20px 20px,100px 100px,100px 100px}}.wrapper{display:grid;height:100vh;place-items:center;position:relative;width:100vw}.circle__button{align-items:center;backdrop-filter:blur(12px);background:var(--color-overlay);border:1px solid var(--color-border);border-radius:50%;color:var(--color-white);display:flex;height:var(--button-size);justify-content:center;transition:var(--transition);width:var(--button-size)}.circle__button:hover{background:var(--color-overlay-hover);border-color:var(--color-border-hover)}.github__link{left:var(--spacing-lg);position:absolute;text-decoration:none;top:var(--spacing-lg);z-index:200}.github__link svg{transition:transform .3s ease}.github__link:hover svg{animation:octocat-wave .6s ease-in-out}.tooltip{backdrop-filter:blur(12px);background:var(--color-overlay-hover);border:1px solid var(--color-border);border-radius:6px;color:var(--color-white);font-size:.875rem;left:100%;margin-left:var(--spacing-md);opacity:0;padding:.5rem .75rem;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--transition-fast);white-space:nowrap}.tooltip:before{border:6px solid transparent;border-right:6px solid var(--color-border)}.tooltip:after,.tooltip:before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%)}.tooltip:after{border:5px solid transparent;border-right:5px solid var(--color-overlay-hover);margin-right:-1px}.github__link:hover .tooltip{opacity:1;transform:translateY(-50%) translateX(4px)}@keyframes octocat-wave{0%,to{transform:rotate(0deg)}20%{transform:rotate(-15deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(5deg)}}.intro__text{color:#fff;left:50%;pointer-events:none;position:absolute;text-align:center;top:10%;transform:translateX(-50%);z-index:10}.intro__text h1{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-secondary) 100%);-webkit-background-clip:text;font-size:2.5rem;font-weight:700;margin-bottom:1rem;-webkit-text-fill-color:transparent;background-clip:text}.intro__text p{font-size:1.2rem;opacity:.8}.top__controls{display:flex;gap:var(--spacing-sm);position:absolute;right:var(--spacing-lg);top:var(--spacing-lg);z-index:250}.controls__toggle,.keyboard__toggle,.mouse__toggle{cursor:pointer}.controls__toggle:hover,.keyboard__toggle:hover,.mouse__toggle:hover{background:var(--color-overlay-hover);border-color:var(--color-border-hover)}.controls__toggle:hover .tooltip,.keyboard__toggle:hover .tooltip,.mouse__toggle:hover .tooltip{opacity:1;transform:translateY(-50%) translateX(-4px)}.controls__toggle[aria-expanded=true],.keyboard__toggle[aria-expanded=true],.mouse__toggle[aria-expanded=true]{background:var(--color-overlay-hover);border-color:var(--color-primary)}.controls__toggle svg{transition:transform .3s ease}.controls__toggle[aria-expanded=true] svg{transform:rotate(90deg)}.controls__toggle .tooltip,.keyboard__toggle .tooltip,.mouse__toggle .tooltip{left:auto;margin-left:0;margin-right:var(--spacing-md);right:100%;transform:translateY(-50%)}.controls__toggle .tooltip:before,.keyboard__toggle .tooltip:before,.mouse__toggle .tooltip:before{border-left-color:var(--color-border);border-right-color:transparent;left:100%;right:auto}.controls__toggle .tooltip:after,.keyboard__toggle .tooltip:after,.mouse__toggle .tooltip:after{border-left-color:var(--color-overlay-hover);border-right-color:transparent;left:100%;margin-left:-1px;margin-right:0;right:auto}.controls__panel,.keyboard__panel,.mouse__panel{backdrop-filter:blur(16px);background:var(--color-overlay);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);max-height:calc(100vh - var(--spacing-lg) - var(--button-size) - var(--spacing-sm) - var(--spacing-lg));opacity:0;overflow-y:auto;padding:1.25rem;pointer-events:none;position:absolute;right:var(--spacing-lg);top:calc(var(--spacing-lg) + var(--button-size) + var(--spacing-sm));transform:translateY(-10px);transition:transform .25s ease,opacity .25s ease,visibility .25s;visibility:hidden;width:300px;z-index:200}.keyboard__panel{right:calc(var(--spacing-lg) + (var(--button-size) + var(--spacing-sm))*2)}.mouse__panel{right:calc(var(--spacing-lg) + var(--button-size) + var(--spacing-sm))}.controls__panel:before,.keyboard__panel:before,.mouse__panel:before{border-bottom:8px solid var(--color-border);border-left:8px solid transparent;border-right:8px solid transparent;content:"";height:0;position:absolute;right:14px;top:-8px;width:0}.controls__panel:after,.keyboard__panel:after,.mouse__panel:after{border-bottom:7px solid var(--color-overlay);border-left:7px solid transparent;border-right:7px solid transparent;content:"";height:0;position:absolute;right:15px;top:-6px;width:0}.controls__panel--active,.keyboard__panel--active,.mouse__panel--active{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.controls__header,.keyboard__header,.mouse__header{border-bottom:1px solid hsla(0,0%,100%,.1);margin-bottom:1.25rem;padding-bottom:1rem}.controls__header h3,.keyboard__header h3,.mouse__header h3{color:var(--color-white);font-size:1.125rem;font-weight:600;margin:0}.control__section{margin-bottom:1.25rem}.control__section:last-child{margin-bottom:0}.section__label{color:var(--color-white);display:block;font-size:.8125rem;font-weight:600;letter-spacing:.05em;margin-bottom:.75rem;opacity:.7;text-transform:uppercase}.button__group{display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr)}.button__group-item{align-items:center;background:var(--color-bg-item);border:1px solid var(--color-border);border-radius:var(--border-radius);color:var(--color-white);cursor:pointer;display:flex;flex-direction:column;font-size:.75rem;font-weight:500;gap:.375rem;padding:.75rem .5rem;transition:var(--transition)}.button__group-item:hover{background:var(--color-bg-item-hover);border-color:var(--color-border-hover)}.button__group-item--active{background:var(--color-primary);border-color:var(--color-primary)}.button__group-item svg{opacity:.8}.button__group-item--active svg{opacity:1}.switch__group{display:flex;flex-direction:column;gap:.75rem}.switch__item{align-items:center;background:var(--color-bg-item);border:1px solid var(--color-border);border-radius:var(--border-radius);cursor:pointer;display:flex;justify-content:space-between;padding:.75rem;position:relative;transition:var(--transition)}.switch__item:hover{background:var(--color-bg-item-light);border-color:var(--color-border-hover)}.switch__label{align-items:center;color:var(--color-white);display:flex;font-size:.875rem;font-weight:500;gap:.5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.switch__label svg{opacity:.8}.switch__item input[type=checkbox]{height:0;opacity:0;position:absolute;width:0}.switch__slider{background:hsla(0,0%,100%,.2);border-radius:12px;height:24px;position:relative;transition:var(--transition);width:44px}.switch__slider:before{background:var(--color-white);border-radius:50%;content:"";height:20px;left:2px;position:absolute;top:2px;transition:var(--transition);width:20px}.switch__item input[type=checkbox]:checked~.switch__slider{background:var(--color-primary)}.switch__item input[type=checkbox]:checked~.switch__slider:before{transform:translateX(20px)}.keyboard__shortcuts{display:flex;flex-direction:column;gap:.75rem}.shortcut__item{align-items:center;background:var(--color-bg-item);border:1px solid var(--color-border);border-radius:var(--border-radius);display:flex;justify-content:space-between;padding:.75rem;transition:var(--transition)}.shortcut__item:hover{border-color:var(--color-border-hover)}.shortcut__item:hover,.shortcut__key{background:var(--color-bg-item-light)}.shortcut__key{align-items:center;border:1px solid var(--color-border);border-radius:4px;box-shadow:0 2px 0 rgba(0,0,0,.2);color:var(--color-white);display:inline-flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,monospace;font-size:.8125rem;font-weight:600;justify-content:center;min-width:2.5rem;padding:.375rem .625rem}.shortcut__key--range{letter-spacing:.05em;min-width:3.5rem}.shortcut__description{color:var(--color-white);font-size:.875rem;font-weight:500}.mouse__controls{display:flex;flex-direction:column;gap:.75rem}.control__item{align-items:flex-start;background:var(--color-bg-item);border:1px solid var(--color-border);border-radius:var(--border-radius);display:flex;gap:.875rem;padding:.875rem;transition:var(--transition)}.control__item:hover{border-color:var(--color-border-hover)}.control__icon,.control__item:hover{background:var(--color-bg-item-light)}.control__icon{align-items:center;border:1px solid var(--color-border);border-radius:6px;color:var(--color-primary);display:flex;flex-shrink:0;height:2.5rem;justify-content:center;width:2.5rem}.control__content{display:flex;flex:1;flex-direction:column;gap:.25rem;min-width:0}.control__title{color:var(--color-white);font-size:.875rem;font-weight:600;line-height:1.3}.control__description{color:hsla(0,0%,100%,.65);font-size:.75rem;font-weight:400;line-height:1.4}.peek-carousel__caption-title{display:block;font-size:1.8rem;font-weight:700;margin-bottom:.5rem}.peek-carousel__caption-subtitle{color:hsla(0,0%,100%,.8);font-size:1.1rem}.peek-carousel__nav{align-items:center;bottom:7rem;display:flex;gap:1rem;left:50%;position:absolute;transform:translateX(-50%)}.peek-carousel__counter{margin:0;position:static!important;transform:none!important}.peek-carousel>.peek-carousel__counter{align-items:center;backdrop-filter:blur(12px);background:var(--color-overlay);border:1px solid var(--color-border);border-radius:var(--border-radius);bottom:7rem;color:var(--color-white);display:flex;font-size:.875rem;font-weight:500;height:-moz-max-content;height:max-content;justify-content:center;left:50%;line-height:1;padding:.5rem 1rem;position:absolute!important;transform:translateX(-50%)!important}.peek-carousel__controls{bottom:3rem}.share__panel{backdrop-filter:blur(16px);background:var(--color-overlay);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);max-height:calc(100vh - var(--spacing-lg) - var(--button-size) - var(--spacing-sm) - var(--spacing-lg));opacity:0;overflow-y:auto;padding:1.25rem;pointer-events:none;position:absolute;right:var(--spacing-lg);top:calc(var(--spacing-lg) + var(--button-size) + var(--spacing-sm));transform:translateY(-10px);transition:transform .25s ease,opacity .25s ease,visibility .25s;visibility:hidden;width:300px;z-index:200}.share__panel:before{border-bottom:8px solid var(--color-border);border-left:8px solid transparent;border-right:8px solid transparent;right:calc(14px + (var(--button-size) + var(--spacing-sm))*0);top:-8px}.share__panel:after,.share__panel:before{content:"";height:0;position:absolute;width:0}.share__panel:after{border-bottom:7px solid var(--color-overlay);border-left:7px solid transparent;border-right:7px solid transparent;right:calc(15px + (var(--button-size) + var(--spacing-sm))*0);top:-6px}.share__panel--active{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.share__header{border-bottom:1px solid hsla(0,0%,100%,.1);margin-bottom:1.25rem;padding-bottom:1rem}.share__header h3{color:var(--color-white);font-size:1.125rem;font-weight:600;margin:0}.share__buttons{display:flex;flex-direction:column;gap:.75rem}.share__item{align-items:flex-start;background:var(--color-bg-item);border:1px solid var(--color-border);border-radius:var(--border-radius);display:flex;gap:.875rem;padding:.875rem;text-decoration:none;transition:var(--transition)}.share__item:hover{border-color:var(--color-border-hover)}.share__icon,.share__item:hover{background:var(--color-bg-item-light)}.share__icon{align-items:center;border:1px solid var(--color-border);border-radius:6px;color:var(--color-primary);display:flex;flex-shrink:0;height:2.5rem;justify-content:center;transition:var(--transition);width:2.5rem}.share__item--twitter:hover .share__icon{background:#000;border-color:#000;color:var(--color-white)}.share__item--facebook:hover .share__icon{background:#1877f2;border-color:#1877f2;color:var(--color-white)}.share__item--linkedin:hover .share__icon{background:#0a66c2;border-color:#0a66c2;color:var(--color-white)}.share__item--reddit:hover .share__icon{background:#ff4500;border-color:#ff4500;color:var(--color-white)}.share__content{display:flex;flex:1;flex-direction:column;gap:.25rem;min-width:0}.share__title{color:var(--color-white);font-size:.875rem;font-weight:600;line-height:1.3}.share__description{color:hsla(0,0%,100%,.65);font-size:.75rem;font-weight:400;line-height:1.4}.share__toggle{cursor:pointer}.share__toggle:hover{background:var(--color-overlay-hover);border-color:var(--color-border-hover)}.share__toggle:hover .tooltip{opacity:1;transform:translateY(-50%) translateX(-4px)}.share__toggle[aria-expanded=true]{background:var(--color-overlay-hover);border-color:var(--color-primary)}.share__toggle .tooltip{left:auto;margin-left:0;margin-right:var(--spacing-md);right:100%;transform:translateY(-50%)}.share__toggle .tooltip:before{border-left-color:var(--color-border);border-right-color:transparent;left:100%;right:auto}.share__toggle .tooltip:after{border-left-color:var(--color-overlay-hover);border-right-color:transparent;left:100%;margin-left:-1px;margin-right:0;right:auto}@media (max-width:768px){.circle__button{height:var(--button-size-mobile);width:var(--button-size-mobile)}.github__link{left:var(--spacing-sm);top:var(--spacing-sm)}.github__link svg{height:24px;width:24px}.tooltip{display:none}.intro__text{max-width:calc(100vw - 2rem);padding:0 1rem;top:18%}.intro__text h1{font-size:1.8rem;margin-bottom:.5rem}.intro__text p{font-size:.8rem}.controls__toggle,.top__controls{right:var(--spacing-sm);top:var(--spacing-sm)}.controls__toggle svg,.keyboard__toggle svg,.mouse__toggle svg{height:20px;width:20px}.controls__panel,.keyboard__panel,.mouse__panel{left:var(--spacing-sm);max-height:calc(100vh - var(--spacing-sm) - var(--button-size-mobile) - var(--spacing-xs) - var(--spacing-sm) - 2rem);max-width:none;padding:1rem;right:var(--spacing-sm);top:calc(var(--spacing-sm) + var(--button-size-mobile) + var(--spacing-xs));width:auto}.keyboard__panel,.mouse__panel{left:var(--spacing-sm);right:var(--spacing-sm)}.controls__panel:after,.controls__panel:before,.keyboard__panel:after,.keyboard__panel:before,.mouse__panel:after,.mouse__panel:before{left:50%;right:auto;transform:translateX(-50%)}.controls__header,.keyboard__header,.mouse__header{margin-bottom:1rem;padding-bottom:.75rem}.controls__header h3,.keyboard__header h3,.mouse__header h3{font-size:1rem}.control__section{margin-bottom:1rem}.section__label{font-size:.8125rem}.button__group-item{font-size:.6875rem;padding:.625rem .375rem}.button__group-item svg{height:14px;width:14px}.switch__item{padding:.625rem}.switch__label{font-size:.8125rem}.switch__label svg{height:14px;width:14px}.switch__slider{height:22px;width:40px}.switch__slider:before{height:18px;width:18px}.switch__item input[type=checkbox]:checked~.switch__slider:before{transform:translateX(18px)}.peek-carousel__caption-title{font-size:1.5rem}.peek-carousel__caption-subtitle{font-size:.95rem}.peek-carousel__nav{bottom:10rem}.peek-carousel>.peek-carousel__counter{bottom:10rem;font-size:.8125rem;padding:.375rem .75rem}.peek-carousel__controls{bottom:7rem}.share__panel{left:var(--spacing-sm);max-height:calc(100vh - var(--spacing-sm) - var(--button-size-mobile) - var(--spacing-xs) - var(--spacing-sm) - 2rem);max-width:none;padding:1rem;right:var(--spacing-sm);top:calc(var(--spacing-sm) + var(--button-size-mobile) + var(--spacing-xs));width:auto}.share__panel:after,.share__panel:before{left:50%;right:auto;transform:translateX(-50%)}.share__header{margin-bottom:1rem;padding-bottom:.75rem}.share__header h3{font-size:1rem}.share__item{padding:.75rem}.share__icon{height:2.25rem;width:2.25rem}.share__icon svg{height:18px;width:18px}}

package/examples/example.min.js

@@ -0,0 +1 @@
+const DEFAULT_LAYOUT_MODE="stack",DEFAULT_OPTIONS={startIndex:0,layoutMode:"stack",autoRotate:!1,autoRotateInterval:3e3,swipeThreshold:50,dragThreshold:80,preloadRange:2,enableKeyboard:!0,enableWheel:!0,enableTouch:!0,enableMouse:!0},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"},AUTO_GENERATED_SELECTORS=[SELECTORS.nav,SELECTORS.controls,SELECTORS.counter],TOGGLEABLE_UI_IDS=["showNavigation","showCounter","showIndicators","showAutoRotateButton"],PANELS=[{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={},panelElements={},carousel=null;const buildCarouselOptions=(e=DEFAULT_OPTIONS.startIndex)=>{const t=document.querySelector(SELECTORS.layoutButtonActive)?.dataset.layout||"stack";return{...DEFAULT_OPTIONS,startIndex:e,layoutMode:t,showNavigation:elements.showNavigation?.checked??!0,showCounter:elements.showCounter?.checked??!0,showIndicators:elements.showIndicators?.checked??!0,showAutoRotateButton:elements.showAutoRotateButton?.checked??!0}},removeAutoGeneratedElements=e=>{for(const t of AUTO_GENERATED_SELECTORS){const o=e.querySelector(t);o&&o.remove()}},reinitializeCarousel=()=>{const e=carousel.state.currentIndex;carousel.destroy(),removeAutoGeneratedElements(carousel.container),carousel=new PeekCarousel(SELECTORS.carousel,buildCarouselOptions(e)),moveCounterToNavigation()},closeAllPanels=(e=null)=>{for(const t in panelElements){if(t===e)continue;const{panel:o,toggle:a,activeClass:l}=panelElements[t];o?.classList.remove(l),a?.setAttribute("aria-expanded","false")}},createTogglePanel=e=>()=>{const t=panelElements[e];if(!t)return;const{panel:o,toggle:a,activeClass:l}=t,n=o.classList.toggle(l);a?.setAttribute("aria-expanded",n),n&&closeAllPanels(e)},toggleControlsPanel=createTogglePanel("controls"),toggleKeyboardPanel=createTogglePanel("keyboard"),toggleMousePanel=createTogglePanel("mouse"),toggleSharePanel=createTogglePanel("share"),handleLayoutModeChange=(e,t)=>{const o=e.querySelectorAll(SELECTORS.layoutButton);for(const e of o)e.classList.remove("button__group-item--active"),e.setAttribute("aria-pressed","false");t.classList.add("button__group-item--active"),t.setAttribute("aria-pressed","true");const a=t.dataset.layout;carousel.options.layoutMode=a,carousel.updateLayoutClass(),"stack"===a&&(carousel.elements.carousel.style.transform="none"),carousel.animator.updateCarousel()},attachEventListeners=()=>{const e=document.querySelector(SELECTORS.controlsToggle),t=document.querySelector(SELECTORS.keyboardToggle),o=document.querySelector(SELECTORS.mouseToggle),a=document.querySelector(".share__toggle"),l=document.querySelector(SELECTORS.controlsClose),n=document.querySelector(SELECTORS.layoutModeGroup);e?.addEventListener("click",toggleControlsPanel),t?.addEventListener("click",toggleKeyboardPanel),o?.addEventListener("click",toggleMousePanel),a?.addEventListener("click",toggleSharePanel),l?.addEventListener("click",toggleControlsPanel),n?.addEventListener("click",e=>{const t=e.target.closest(SELECTORS.layoutButton);t&&handleLayoutModeChange(n,t)});for(const e of TOGGLEABLE_UI_IDS)elements[e]?.addEventListener("change",reinitializeCarousel)},cacheElements=()=>{elements=TOGGLEABLE_UI_IDS.reduce((e,t)=>(e[t]=document.getElementById(t),e),{}),panelElements=PANELS.reduce((e,t)=>(e[t.name]={panel:document.querySelector(`.${t.panelClass}`),toggle:document.querySelector(`.${t.toggleClass}`),activeClass:`${t.panelClass}--active`},e),{})},moveCounterToNavigation=()=>{const e=carousel.container.querySelector(SELECTORS.nav);if(!e)return;const t=carousel.container.querySelector(SELECTORS.counter);if(!t)return;const o=e.querySelector(SELECTORS.prevBtn);o&&e.insertBefore(t,o.nextSibling)},init=()=>{cacheElements(),carousel=new PeekCarousel(SELECTORS.carousel,buildCarouselOptions()),moveCounterToNavigation(),attachEventListeners()};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",init):init();

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "peek-carousel",
+  "version": "1.0.2",
+  "description": "A modular carousel library with three layout modes (Stack/Card, Radial, Classic) featuring peek effect, touch/drag support, and full accessibility - inspired by iPhone 17 Pro",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/peek-carousel.js",
+  "module": "dist/peek-carousel.esm.js",
+  "types": "types/index.d.ts",
+  "style": "dist/peek-carousel.css",
+  "exports": {
+    ".": {
+      "import": "./dist/peek-carousel.esm.js",
+      "require": "./dist/peek-carousel.js",
+      "types": "./types/index.d.ts"
+    },
+    "./dist/peek-carousel.css": "./dist/peek-carousel.css",
+    "./dist/peek-carousel.min.css": "./dist/peek-carousel.min.css"
+  },
+  "files": [
+    "src/",
+    "dist/",
+    "types/",
+    "examples/",
+    "README.md",
+    "README.en.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build:js": "rollup -c",
+    "build:css": "sass src/styles/peek-carousel.scss dist/peek-carousel.css --no-source-map",
+    "build:css:min": "sass src/styles/peek-carousel.scss dist/peek-carousel.min.css --style=compressed --no-source-map",
+    "build:example:css": "postcss examples/example.css -o examples/example.min.css",
+    "build:example:js": "terser examples/example.js -o examples/example.min.js -c -m",
+    "postbuild:css": "postcss dist/peek-carousel.css -o dist/peek-carousel.css",
+    "postbuild:css:min": "postcss dist/peek-carousel.min.css -o dist/peek-carousel.min.css",
+    "build": "npm run clean && npm-run-all --parallel build:js build:css build:css:min",
+    "build:examples": "npm-run-all --parallel build:example:css build:example:js",
+    "watch:js": "rollup -c -w",
+    "watch:css": "sass --watch src/styles/peek-carousel.scss dist/peek-carousel.css",
+    "watch": "npm-run-all --parallel watch:js watch:css",
+    "dev": "npm run watch",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lledellebell/peek-carousel.git"
+  },
+  "keywords": [
+    "carousel",
+    "slider",
+    "peek",
+    "stack",
+    "card",
+    "swipe",
+    "gallery",
+    "apple",
+    "responsive",
+    "touch",
+    "drag",
+    "mobile"
+  ],
+  "author": "B <deep.diver.9.tsuki@gmail.com> (https://github.com/lledellebell)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/lledellebell/peek-carousel/issues"
+  },
+  "homepage": "https://github.com/lledellebell/peek-carousel#readme",
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "autoprefixer": "^10.4.16",
+    "cssnano": "^6.0.1",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.31",
+    "postcss-cli": "^11.0.0",
+    "rollup": "^4.1.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.69.5",
+    "terser": "^5.44.1"
+  }
+}