90 lines
5.3 KiB
JavaScript
90 lines
5.3 KiB
JavaScript
import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as a}from"./index-CO-0pc0F.js";import{M as i,C as n}from"./index-Z-6k0Xrj.js";import{B as l,D as o,W as c}from"./BeforeAfter.stories-Cfh_2tOI.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"./size-DMdj3-I9.js";import"./this-CrUBQEQ_.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./index-CX1x869l.js";import"./throttle-CHB1Npaq.js";function s(r){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...a(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{of:l}),`
|
|
`,e.jsx(t.h1,{id:"beforeafter",children:"BeforeAfter"}),`
|
|
`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"BeforeAfter"})," component shows a before-and-after comparison of an image."]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script>
|
|
import { BeforeAfter } from '@reuters-graphics/graphics-components';
|
|
import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
|
|
<\/script>
|
|
|
|
<BeforeAfter
|
|
beforeSrc={\`\${assets}/images/before-after/myrne-before.jpg\`}
|
|
beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
|
|
afterSrc={\`\${assets}/images/before-after/myrne-after.jpg\`}
|
|
afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
|
|
/>
|
|
`})}),`
|
|
`,e.jsx(n,{of:o}),`
|
|
`,e.jsx(t.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
|
|
`,e.jsx(t.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-yaml",children:`# ArchieML doc
|
|
[blocks]
|
|
|
|
type: before-after
|
|
beforeSrc: images/before-after/myrne-before.jpg
|
|
beforeAlt: Satellite image of Russian base at Myrne taken on July 7, 2020.
|
|
afterSrc: images/before-after/myrne-after.jpg
|
|
afterAlt: Satellite image of Russian base at Myrne taken on Oct. 20, 2020.
|
|
|
|
[]
|
|
`})}),`
|
|
`,e.jsxs(t.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",e.jsx(t.code,{children:"BeforeAfter"})," component."]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<!-- App.svelte -->
|
|
{#each content.blocks as block}
|
|
{#if block.type === 'before-after'}
|
|
<BeforeAfter
|
|
beforeSrc={\`\${assets}/\${block.beforeSrc}\`}
|
|
beforeAlt={block.beforeAlt}
|
|
afterSrc={\`\${assets}/\${block.afterSrc}\`}
|
|
afterAlt={block.afterAlt}
|
|
/>
|
|
{/if}
|
|
{/each}
|
|
`})}),`
|
|
`,e.jsx(n,{of:o}),`
|
|
`,e.jsx(t.h2,{id:"adding-text",children:"Adding text"}),`
|
|
`,e.jsxs(t.p,{children:["To add text overlays and captions, use ",e.jsx(t.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippets"})," for ",e.jsx(t.code,{children:"beforeOverlay"}),", ",e.jsx(t.code,{children:"afterOverlay"})," and ",e.jsx(t.code,{children:"caption"}),". You can style the snippets to match your page design, like in ",e.jsx(t.a,{href:"./?path=/story/components-multimedia-beforeafter--with-overlays",children:"this demo"}),"."]}),`
|
|
`,e.jsxs(t.blockquote,{children:[`
|
|
`,e.jsxs(t.p,{children:["💡",e.jsx(t.strong,{children:"NOTE:"})," The text in the overlays are used as ",e.jsx(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby",rel:"nofollow",children:"ARIA descriptions"})," for your before and after images. You must always use the ",e.jsx(t.code,{children:"beforeAlt"})," / ",e.jsx(t.code,{children:"afterAlt"})," props to label your image for visually impaired readers, but these ARIA descriptions provide additional information or context that the reader might need."]}),`
|
|
`]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<BeforeAfter
|
|
beforeSrc={beforeImg}
|
|
beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
|
|
afterSrc={afterImg}
|
|
afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
|
|
>
|
|
<!-- Optional custom text overlay for the before image -->
|
|
{#snippet beforeOverlay()}
|
|
<div class="overlay p-3 before text-left">
|
|
<p class="h4 font-bold">July 7, 2020</p>
|
|
<p class="body-note">Initially, this site was far smaller.</p>
|
|
</div>
|
|
{/snippet}
|
|
|
|
<!-- Optional custom text overlay for the after image -->
|
|
{#snippet afterOverlay()}
|
|
<div class="overlay p-3 after text-right">
|
|
<p class="h4 font-bold">Oct. 20, 2020</p>
|
|
<p class="body-note">But then forces built up.</p>
|
|
</div>
|
|
{/snippet}
|
|
|
|
<!-- Optional custom caption for both images -->
|
|
{#snippet caption()}
|
|
<p class="body-note">Photos by MAXAR Technologies, 2021.</p>
|
|
{/snippet}
|
|
</BeforeAfter>
|
|
|
|
<style lang="scss">
|
|
.overlay {
|
|
background: rgba(0, 0, 0, 0.45);
|
|
max-width: 350px;
|
|
&.after {
|
|
text-align: right;
|
|
}
|
|
p {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|
|
`})}),`
|
|
`,e.jsx(n,{of:c})]})}function C(r={}){const{wrapper:t}={...a(),...r.components};return t?e.jsx(t,{...r,children:e.jsx(s,{...r})}):s(r)}export{C as default};
|