243 lines
12 KiB
JavaScript
243 lines
12 KiB
JavaScript
import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as t}from"./index-CO-0pc0F.js";import{M as s}from"./index-Z-6k0Xrj.js";import{S as c}from"./Scroller.stories-Dkiataa7.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"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./ScrollerBase-DJMKplMV.js";import"./index-client-BAw8T8-V.js";import"./this-CrUBQEQ_.js";import"./window-DXjFTZv5.js";import"./each-CVpBMMjG.js";import"./Markdown-DUxFwijc.js";import"./Block-D3Ui8rd-.js";import"./size-DMdj3-I9.js";function r(o){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...t(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:c}),`
|
|
`,e.jsx(n.h1,{id:"scroller",children:"Scroller"}),`
|
|
`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"Scroller"})," component creates a basic scrollytelling graphic with layout options."]}),`
|
|
`,e.jsxs(n.p,{children:["This component is designed to handle most common layouts for scrollytelling. To make something more complex, customise ",e.jsx(n.a,{href:"?path=/story/components-graphics-scrollerbase--docs",children:"ScrollerBase"}),", which is a Svelte 5 version of the ",e.jsx(n.a,{href:"https://github.com/sveltejs/svelte-scroller",rel:"nofollow",children:"svelte-scroller"}),"."]}),`
|
|
`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-scroller--demo",children:"Demo"})}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
|
|
import { Scroller } from '@reuters-graphics/graphics-components';
|
|
|
|
import MyBackground from './MyBackground.svelte'; // Your own background component
|
|
|
|
// Array of step objects that define the steps in your scroller.
|
|
const steps = [
|
|
{
|
|
background: MyBackground,
|
|
backgroundProps: { colour: 'red' }, // Optional props for your background component
|
|
foreground: '#### Step 1\\n\\nLorem ipsum red',
|
|
altText: 'Red background',
|
|
},
|
|
{
|
|
background: MyBackground,
|
|
backgroundProps: { colour: 'blue' },
|
|
foreground: '#### Step 2\\n\\nLorem ipsum blue',
|
|
altText: 'Blue background',
|
|
},
|
|
{
|
|
background: MyBackground,
|
|
backgroundProps: { colour: 'green' },
|
|
foreground: '#### Step 3\\n\\nLorem ipsum green',
|
|
altText: 'Green background',
|
|
},
|
|
];
|
|
<\/script>
|
|
|
|
<Scroller {steps} foregroundPosition="middle" backgroundWidth="fluid" />
|
|
`})}),`
|
|
`,e.jsx(n.h2,{id:"using-with-archieml-and-ai2svelte",children:"Using with ArchieML and ai2svelte"}),`
|
|
`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-scroller--archie-ml",children:"Demo"})}),`
|
|
`,e.jsxs(n.p,{children:["In your graphics kit project, import your ai2svelte graphics in ",e.jsx(n.code,{children:"App.svelte"})," and add them to the ",e.jsx(n.code,{children:"aiCharts"})," object:"]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
|
|
<script>
|
|
import AiMap1 from './ai2svelte/my-map-1.svelte';
|
|
import AiMap2 from './ai2svelte/my-map-2.svelte';
|
|
import AiMap3 from './ai2svelte/my-map-3.svelte';
|
|
|
|
import content from '$locales/en/content.json';
|
|
|
|
// Graphics kit only
|
|
import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
|
|
import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
|
|
|
|
const aiCharts = {
|
|
AiMap1,
|
|
AiMap2,
|
|
AiMap3,
|
|
// Other charts...
|
|
};
|
|
<\/script>
|
|
`})}),`
|
|
`,e.jsxs(n.p,{children:["Then add the following structure to your ArchieML doc, making sure that the names of your charts in the ",e.jsx(n.code,{children:"aiCharts"})," object match the names of each step's ",e.jsx(n.code,{children:"background"})," in the ArchieML doc:"]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-yaml",children:`# ArchieML doc
|
|
[blocks]
|
|
type: ai-scroller
|
|
id: my-map-scroller
|
|
width: fluid
|
|
foregroundPosition: right
|
|
stackBackground: true
|
|
|
|
# Array of step objects
|
|
[.steps]
|
|
background: AiMap1
|
|
foreground: #### Step 1
|
|
|
|
Here's where something happend.
|
|
:end
|
|
altText: A map showing the Upper West side in New York City.
|
|
|
|
Can add paragraphs of alt text if you want to break up sentences.
|
|
:end
|
|
|
|
background: AiMap2
|
|
foreground: #### Step 2
|
|
|
|
Something happened on some street...
|
|
:end
|
|
altText: The same map now highlights 98th Street.
|
|
:end
|
|
|
|
background: AiMap3
|
|
foreground: #### Step 3
|
|
|
|
... and now there are multiple protests.
|
|
:end
|
|
altText: The same map now highlights three locations near 98th Street where something particulary important happened.
|
|
:end
|
|
[]
|
|
[]
|
|
`})}),`
|
|
`,e.jsxs(n.p,{children:["Then parse the relevant ArchieML block object before passing to the ",e.jsx(n.code,{children:"Scroller"})," component."]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
|
|
{#each content.blocks as block}
|
|
{#if block.type === 'ai-scroller'}
|
|
<Scroller
|
|
id={block.id}
|
|
backgroundWidth={block.backgroundWidth}
|
|
foregroundPosition={block.foregroundPosition}
|
|
stackBackground={truthy(block.stackBackground)}
|
|
steps={block.steps.map((step) => ({
|
|
background: aiCharts[step.background],
|
|
backgroundProps: { assetsPath: assets || '/' },
|
|
foreground: step.foreground,
|
|
altText: step.altText,
|
|
}))}
|
|
/>
|
|
{/if}
|
|
{/each}
|
|
`})}),`
|
|
`,e.jsxs(n.blockquote,{children:[`
|
|
`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," Some props, like ",e.jsx(n.code,{children:"stackBackground"}),", expect boolean values. If you're using the graphics kit, use the ",e.jsx(n.code,{children:"truthy()"})," util function to convert a string value to a boolean."]}),`
|
|
`]}),`
|
|
`,e.jsxs(n.blockquote,{children:[`
|
|
`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," In the graphics kit, the image source paths in ai2svelte components have to be fixed by passing ",e.jsx(n.code,{children:"assets"})," to each step object, like in the example above."]}),`
|
|
`]}),`
|
|
`,e.jsx(n.h2,{id:"custom-foreground",children:"Custom foreground"}),`
|
|
`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-scroller--custom-foreground",children:"Demo"})}),`
|
|
`,e.jsx(n.p,{children:"Instead of just text, you can use components as foregrounds, and optionally pass props to it."}),`
|
|
`,e.jsx(n.p,{children:"If you're customising your own foreground component, remember to add alt text that describes the background graphic."}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
|
|
import MyBackground from './MyBackground.svelte'; // Your own background component
|
|
import MyInteractiveForeground from './MyInteractiveForeground.svelte'; // Your custom foreground component
|
|
|
|
const steps = [
|
|
{
|
|
background: MyBackground,
|
|
backgroundProps: { colour: 'red' }, // Props for your background component, if needed
|
|
foreground: MyInteractiveForeground, // Custom foreground component
|
|
},
|
|
{
|
|
background: MyBackground,
|
|
backgroundProps: { colour: 'blue' },
|
|
foreground: '#### Step 2\\n\\nLorem ipsum blue', // You can still add a markdown string as foreground; you can mix and match
|
|
},
|
|
{
|
|
background: MyBackground,
|
|
backgroundProps: { colour: 'green' },
|
|
foreground: MyInteractiveForeground,
|
|
foregroundProps: { count: 100 }, // Props for your custom foreground component, if needed
|
|
},
|
|
];
|
|
<\/script>
|
|
|
|
<Scroller {steps} />
|
|
`})}),`
|
|
`,e.jsx(n.h2,{id:"custom-foreground-with-archieml",children:"Custom foreground with ArchieML"}),`
|
|
`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-scroller--customforeground-archie-ml",children:"Demo"})}),`
|
|
`,e.jsx(n.p,{children:"You can use custom foreground components with ArchieML with a few additional steps."}),`
|
|
`,e.jsxs(n.p,{children:["In your graphics kit project's ",e.jsx(n.code,{children:"App.svelte"}),", import your custom foregroud components and add them to a ",e.jsx(n.code,{children:"foregroundComponents"})," object, just as you import ai2svelte background graphics and add them to the ",e.jsx(n.code,{children:"aiCharts"})," object:"]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
|
|
<script>
|
|
import content from '$locales/en/content.json';
|
|
|
|
// Background ai2svelte graphics
|
|
import AiMap1 from './ai2svelte/my-map-1.svelte';
|
|
import AiMap2 from './ai2svelte/my-map-2.svelte';
|
|
import AiMap3 from './ai2svelte/my-map-3.svelte';
|
|
|
|
// Foreground components, which can be ai2svelte or not.
|
|
import Foreground1 from './ai2svelte/my-foreground-1.svelte';
|
|
|
|
// Graphics kit only
|
|
import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
|
|
import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
|
|
|
|
// Background ai2svelte graphics components
|
|
const aiCharts = {
|
|
AiMap1,
|
|
AiMap2,
|
|
AiMap3,
|
|
// Other charts...
|
|
};
|
|
|
|
// Foreground components
|
|
const foregroundComponents = {
|
|
Foreground1,
|
|
// Other components...
|
|
};
|
|
<\/script>
|
|
`})}),`
|
|
`,e.jsxs(n.p,{children:["Then add the following structure to your ArchieML doc, making sure that the names of your charts in the ",e.jsx(n.code,{children:"aiCharts"})," and ",e.jsx(n.code,{children:"foregroundComponents"})," objects match the names of each step's ",e.jsx(n.code,{children:"background"})," and ",e.jsx(n.code,{children:"foreground"})," in the ArchieML doc:"]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-yaml",children:`# ArchieML doc
|
|
[blocks]
|
|
type: ai-scroller
|
|
id: my-map-scroller
|
|
foregroundPosition: left
|
|
stackBackground: true
|
|
|
|
# Array of step objects
|
|
[.steps]
|
|
background: AiMap1
|
|
# You can still use a markdown string even if other step/s use a custom foreground component
|
|
foreground: #### Step 1
|
|
|
|
Here's where something happend.
|
|
:end
|
|
altText: A map showing the Upper West side in New York City.
|
|
:end
|
|
|
|
background: AiMap2
|
|
foreground: Foreground1 # The name of your custom foreground component
|
|
altText: The same map now highlights 98th Street.
|
|
:end
|
|
background: AiMap3
|
|
foreground: #### Step 3
|
|
|
|
... and now there are multiple protests.
|
|
:end
|
|
altText: The same map now highlights three locations near 98th Street where something particulary important happened.
|
|
:end
|
|
[]
|
|
[]
|
|
`})}),`
|
|
`,e.jsxs(n.p,{children:["Then parse the relevant ArchieML block object before passing to the ",e.jsx(n.code,{children:"Scroller"})," component."]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
|
|
{#each content.blocks as block}
|
|
{#if block.type === 'ai-scroller'}
|
|
<Scroller
|
|
id={block.id}
|
|
backgroundWidth={block.width}
|
|
foregroundPosition={block.foregroundPosition}
|
|
stackBackground={truthy(block.stackBackground)}
|
|
steps={block.steps.map((step) => ({
|
|
background: aiCharts[step.background],
|
|
backgroundProps: { assetsPath: assets || '/' },
|
|
foreground: foregroundComponents[step.foreground] || step.foreground,
|
|
foregroundProps: { assetsPath: assets || '/' },
|
|
altText: step.altText,
|
|
}))}
|
|
/>
|
|
{/if}
|
|
{/each}
|
|
`})}),`
|
|
`,e.jsxs(n.blockquote,{children:[`
|
|
`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," You only need to pass ",e.jsx(n.code,{children:"foregroundProps: { assetsPath: assets || '/' }"})," in the graphics kit if your foreground components are ai2svelte graphicss."]}),`
|
|
`]})]})}function I(o={}){const{wrapper:n}={...t(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(r,{...o})}):r(o)}export{I as default};
|