68 lines
4.2 KiB
JavaScript
68 lines
4.2 KiB
JavaScript
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};
|