Horizontal Scrolling

// Horizontal Scrolling — Svelte implementation with vlist action
// Demonstrates orientation: 'horizontal' with item.width

import { scrollbar } from "vlist";
import { vlist, onVListEvent } from "vlist/svelte";
import {
  items,
  itemTemplate,
  formatStatsHtml,
  ITEM_HEIGHT,
  ITEM_WIDTH,
} from "../shared.js";

// =============================================================================
// DOM references
// =============================================================================

const container = document.getElementById("list-container");
const statsEl = document.getElementById("stats");

// =============================================================================
// Create horizontal list
// =============================================================================

const action = vlist(container, {
  config: {
    orientation: "horizontal",
    scroll: { wheel: true },
    ariaLabel: "Horizontal card carousel",
    item: {
      height: ITEM_HEIGHT,
      width: ITEM_WIDTH,
      template: itemTemplate,
    },
    items,
  },
  plugins: [scrollbar()],
  onInstance: (instance) => {
    // Update stats
    const updateStats = () => {
      const domNodes = document.querySelectorAll(".vlist-item").length;
      statsEl.innerHTML = formatStatsHtml(domNodes, items.length);
    };

    // Bind events
    onVListEvent(instance, "scroll", updateStats);
    onVListEvent(instance, "range:change", updateStats);
    updateStats();

    // Track item clicks
    onVListEvent(instance, "item:click", ({ item, index }) => {
      console.log(`Clicked: ${item.title} at index ${index}`);
    });

    // Control buttons
    document.getElementById("btn-start")?.addEventListener("click", () => {
      instance.scrollToIndex(0);
    });

    document.getElementById("btn-center")?.addEventListener("click", () => {
      instance.scrollToIndex(5000, "center");
    });

    document.getElementById("btn-end")?.addEventListener("click", () => {
      instance.scrollToIndex(items.length - 1, "end");
    });

    document.getElementById("btn-smooth")?.addEventListener("click", () => {
      const current = instance.getScrollPosition();
      const targetIndex = current < 100 ? 500 : 0;
      instance.scrollToIndex(targetIndex, {
        align: "start",
        behavior: "smooth",
        duration: 800,
      });
    });
  },
});

<div class="container">
    <header>
        <h1>Horizontal Scrolling</h1>
        <p class="description">
            Svelte implementation with <code>vlist</code> action. A horizontal
            virtual list rendering 10,000 cards with
            <code>orientation: 'horizontal'</code> and
            <code>scroll.wheel: true</code>. Scroll with mouse wheel, trackpad
            swipe, or the buttons below. Only visible items are in the DOM.
        </p>
    </header>

    <div class="stats" id="stats">Loading...</div>

    <div id="list-container"></div>

    <div class="controls">
        <button id="btn-start">⏮ Start</button>
        <button id="btn-center">⏺ Center (5000)</button>
        <button id="btn-end">⏭ End</button>
        <button id="btn-smooth">🎞 Smooth Scroll</button>
    </div>

    <footer>
        <p>
            Uses <code>orientation: 'horizontal'</code> with
            <code>item.width</code> for the main axis and
            <code>item.height</code> for the cross axis.
            <code>scroll.wheel: true</code> maps vertical mouse wheel to
            horizontal scroll. Custom scrollbar renders at the bottom
            automatically. 🎯
        </p>
    </footer>
</div>

// Shared data and utilities for horizontal example variants
// This file is imported by all framework implementations to avoid duplication

// =============================================================================
// Constants
// =============================================================================

export const ITEM_COUNT = 10_000;
export const ITEM_HEIGHT = 220;
export const ITEM_WIDTH = 180;

// Color palette for cards
export const colors = [
  ["#667eea", "#764ba2"],
  ["#f093fb", "#f5576c"],
  ["#4facfe", "#00f2fe"],
  ["#43e97b", "#38f9d7"],
  ["#fa709a", "#fee140"],
  ["#a18cd1", "#fbc2eb"],
  ["#fccb90", "#d57eeb"],
  ["#e0c3fc", "#8ec5fc"],
  ["#f5576c", "#ff9a9e"],
  ["#667eea", "#00f2fe"],
];

export const emojis = ["🎵", "🎶", "🎸", "🥁", "🎹", "🎺", "🎻", "🎷", "🪗", "🪘"];

// =============================================================================
// Data Generation
// =============================================================================

// Generate card items
export const items = Array.from({ length: ITEM_COUNT }, (_, i) => {
  const color = colors[i % colors.length];
  return {
    id: i + 1,
    title: `Card ${i + 1}`,
    subtitle: `Item #${(i + 1).toLocaleString()}`,
    emoji: emojis[i % emojis.length],
    gradientStart: color[0],
    gradientEnd: color[1],
  };
});

// =============================================================================
// Templates
// =============================================================================

// Card template
export const itemTemplate = (item) => `
  <div class="card" style="background: linear-gradient(135deg, ${item.gradientStart} 0%, ${item.gradientEnd} 100%);">
    <div class="card-emoji">${item.emoji}</div>
    <div class="card-title">${item.title}</div>
    <div class="card-subtitle">${item.subtitle}</div>
  </div>
`;

// =============================================================================
// Utilities
// =============================================================================

// Calculate stats
export function calculateStats(domNodes, total) {
  const saved = Math.round((1 - domNodes / total) * 100);
  return { saved };
}

// Format stats HTML
export function formatStatsHtml(domNodes, total) {
  const { saved } = calculateStats(domNodes, total);
  return `
    <span><strong>Total:</strong> ${total.toLocaleString()}</span>
    <span><strong>DOM nodes:</strong> ${domNodes}</span>
    <span><strong>Memory saved:</strong> ${saved}%</span>
  `;
}

/* Horizontal Scrolling Example — example-specific styles only
   Common styles (.container, h1, .description, .stats, footer)
   are provided by example/example.css using shell.css design tokens. */

/* List container - full width, responsive height */
#list-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 220px;
    overflow: hidden;
}

/* Override vlist defaults for horizontal cards */
#list-container .vlist {
    border: none;
    border-radius: 12px;
    background: transparent;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

#list-container .vlist-viewport {
    max-width: 100%;
    width: 100% !important;
    overflow-x: auto;
}

#list-container .vlist-item {
    padding: 8px;
    border-right: none;
    cursor: pointer;
}

/* Card styles */
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    color: #fff;
    text-align: center;
    padding: 16px 12px;
    transition:
        transform 0.15s ease-out,
        box-shadow 0.15s ease-out;
}

.vlist-item:hover .card {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.card-emoji {
    font-size: 36px;
    line-height: 1;
}

.card-title {
    font-weight: var(--fw-bold);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.card-subtitle {
    font-size: 12px;
    opacity: 0.85;
    white-space: nowrap;
}

/* Bottom controls */
.controls {
    margin-top: 16px;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 900px) {
    #list-container {
        height: 190px;
    }

    #list-container .vlist-item {
        padding: 6px;
    }

    .card {
        padding: 10px 8px;
        border-radius: 10px;
    }

    .card-emoji {
        font-size: 30px;
    }

    .card-title {
        font-size: 14px;
    }
}

@media (max-width: 720px) {
    #list-container {
        height: 160px;
    }

    #list-container .vlist-item {
        padding: 4px;
    }

    .card {
        padding: 8px 6px;
        gap: 4px;
        border-radius: 8px;
    }

    .card-emoji {
        font-size: 24px;
    }

    .card-title {
        font-size: 12px;
    }

    .card-subtitle {
        font-size: 10px;
    }

    .controls {
        flex-direction: column;
        gap: 8px;
    }

    .controls button {
        width: 100%;
        font-size: 13px;
    }
}