import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as s}from"./index-CO-0pc0F.js";import{M as t}from"./index-Z-6k0Xrj.js";import{S as i}from"./ScrollerBase.stories-I7EeLvR7.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./ScrollerBase-DJMKplMV.js";import"./index-client-BAw8T8-V.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./this-CrUBQEQ_.js";import"./window-DXjFTZv5.js";import"./actions-BHcvdwVC.js";import"./BodyText-CXnxLnBi.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./Block-D3Ui8rd-.js";function r(o){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...s(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(t,{of:i}),`
`,e.jsx(n.h1,{id:"scrollerbase",children:"ScrollerBase"}),`
`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"ScrollerBase"})," component powers the ",e.jsxs(n.a,{href:"?path=/story/components-graphics-scroller--docs",children:[e.jsx(n.code,{children:"Scroller"})," component"]}),", which creates a basic storytelling graphic with preset layout options. ",e.jsx(n.code,{children:"ScrollerBase"})," contains the bare minimum code necessary for a scrollytelling section, and allows for customisation beyond what the ",e.jsxs(n.a,{href:"?path=/story/components-graphics-scroller--docs",children:[e.jsx(n.code,{children:"Scroller"})," component"]})," allows."]}),`
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"ScrollerBase"})," is a Svelte 5 version of the ",e.jsx(n.a,{href:"https://github.com/sveltejs/svelte-scroller",rel:"nofollow",children:"svelte-scroller"}),"."]}),`
`,e.jsxs(n.blockquote,{children:[`
`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important❗:"})," Make sure the HTML element containing each foreground is a div with the class ",e.jsx(n.code,{children:"step-foreground-container"}),". If you're modifying this to something else, pass the appropriate selector to the ",e.jsx(n.code,{children:"query"})," prop."]}),`
`]}),`
`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-scrollerbase--demo",children:"Demo"})}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script lang="ts">
  import { ScrollerBase } from '@reuters-graphics/graphics-components';

  // Optional: Bind your own variables to use them in your code.
  let count = $state(1);
  let index = $state(0);
  let offset = $state(0);
  let progress = $state(0);
  let top = $state(0.1);
  let threshold = $state(0.5);
  let bottom = $state(0.9);
<\/script>

<ScrollerBase
  {top}
  {threshold}
  {bottom}
  bind:count
  bind:index
  bind:offset
  bind:progress
  query="div.step-foreground-container"
>
  {#snippet backgroundSnippet()}
    <!-- Add custom background HTML or component -->
    <p class="mb-0">
      Current step: <strong>{index + 1}/{count}</strong>
    </p>
    <progress class="mb-4" value={(index + 1) / count}></progress>

    <p class="mb-0">Offset in current step</p>
    <progress class="mb-4" value={offset}></progress>

    <p class="mb-0">Total progress</p>
    <progress class="mb-4" value={progress}></progress>
  {/snippet}
  {#snippet foregroundSnippet()}
    <!-- Add custom foreground HTML or component -->
    <div class="step-foreground-container">Step 1</div>
    <div class="step-foreground-container">Step 2</div>
    <div class="step-foreground-container">Step 3</div>
    <div class="step-foreground-container">Step 4</div>
    <div class="step-foreground-container">Step 5</div>
  {/snippet}
</ScrollerBase>

<style lang="scss">
  @use '@reuters-graphics/graphics-components/dist/scss/mixins' as mixins;

  .step-foreground-container {
    height: 100vh;
    width: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 1em;
    margin: 0 0 2em 0;
    position: relative;
    left: 50%;
  }
</style>
`})})]})}function H(o={}){const{wrapper:n}={...s(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(r,{...o})}):r(o)}export{H as default};