finished demos, docs updates
This commit is contained in:
MinamiFunakoshiTR
parent
346827ef65
commit
48679a970c
6 changed files with 71 additions and 257 deletions
|
|
@ -64,11 +64,6 @@ The `ScrollerBase` component powers the [`Scroller` component](?path=/story/comp
|
|||
<style lang="scss">
|
||||
@use '@reuters-graphics/graphics-components/dist/scss/mixins' as mixins;
|
||||
|
||||
.scroller-demo-container {
|
||||
width: mixins.$column-width-normal;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.step-foreground-container {
|
||||
height: 100vh;
|
||||
width: 50%;
|
||||
|
|
|
|||
|
|
@ -343,176 +343,62 @@ endTime: 0.3 # When to stop showing the headline
|
|||
|
||||
## Using with `ScrollerBase`
|
||||
|
||||
The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/components-graphics-scrollerbase--docs) component to add foreground content. This allows for more complex interactions and layouts, such as adding ai2svelte components in the foreground.
|
||||
The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/components-graphics-scrollerbase--docs) component to add foreground content. This allows for foreground that scrolls up and down over the video, instead of fading in and out at specific times.
|
||||
|
||||
> **Note**: To use `ScrollyVideo` with `ScrollerBase`, set `trackScroll` to `false` and pass the bindable prop `progress` from `ScrollerBase` as `videoPercentage` to `ScrollyVideo`.
|
||||
|
||||
[Demo](?path=/story/components-graphics-scrollyvideo--scroller-base)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import {
|
||||
Headline,
|
||||
GraphicBlock,
|
||||
ScrollyVideo,
|
||||
ScrollerBase,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import AiMap from './ai2svelte/ai-chart.svelte';
|
||||
|
||||
// ScrollerBase props
|
||||
let count = $state(1);
|
||||
let index = $state(0);
|
||||
let offset = $state(0);
|
||||
let progress = $state(0);
|
||||
let top = $state(0);
|
||||
let threshold = $state(0);
|
||||
let bottom = $state(1);
|
||||
// Pass `progress` as `videoPercentage` to ScrollyVideo
|
||||
let progress = $state(0);
|
||||
</script>
|
||||
|
||||
<div class="scroller-demo-container">
|
||||
<ScrollerBase
|
||||
{top}
|
||||
{threshold}
|
||||
{bottom}
|
||||
bind:count
|
||||
bind:index
|
||||
bind:offset
|
||||
bind:progress
|
||||
query="div.step-foreground-container"
|
||||
visible
|
||||
>
|
||||
{#snippet backgroundSnippet()}
|
||||
<!-- Add custom background HTML or component -->
|
||||
<div id="progress-bar">
|
||||
<p>
|
||||
Current step: <strong>{index + 1}/{count}</strong>
|
||||
</p>
|
||||
<progress value={(index + 1) / count}></progress>
|
||||
|
||||
<p>Offset in current step</p>
|
||||
<progress value={offset}></progress>
|
||||
|
||||
<p>Total progress</p>
|
||||
<progress value={progress}></progress>
|
||||
</div>
|
||||
|
||||
<!-- Pass bindable prop `progress` as `videoPercentage` and set `trackScroll` to `false` -->
|
||||
<ScrollyVideo
|
||||
src={`src/components/ScrollyVideo/videos/goldengate.mp4`}
|
||||
height="100svh"
|
||||
trackScroll={false}
|
||||
src='my-video.mp4'
|
||||
videoPercentage={progress}
|
||||
objectFit="cover"
|
||||
showDebugInfo
|
||||
{embedded}
|
||||
trackScroll={false}
|
||||
/>
|
||||
{/snippet}
|
||||
{#snippet foregroundSnippet()}
|
||||
<!-- Add custom foreground HTML or component -->
|
||||
<div class="step-foreground-container">
|
||||
<div class="fg-child-container">
|
||||
<Headline
|
||||
class="custom-headline"
|
||||
hed="ScrollyVideo inside ScrollerBase"
|
||||
dek="This is a demo of ScrollyVideo inside ScrollerBase component."
|
||||
section={'Reuters Graphics'}
|
||||
authors={['Jane Doe']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-foreground-container"><p>Step 2</p></div>
|
||||
<div class="step-foreground-container">
|
||||
<div class="fg-child-container">
|
||||
<GraphicBlock
|
||||
title="Earthquake in Haiti"
|
||||
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
||||
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
||||
>
|
||||
<AiMap />
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-foreground-container"><p>Step 4</p></div>
|
||||
<div class="step-foreground-container"><p>Step 5</p></div>
|
||||
<!-- Add custom foreground HTML or component -->
|
||||
<div class="step-foreground-container">
|
||||
<h3 class="text-center">Step 1</h3>
|
||||
</div>
|
||||
<div class="step-foreground-container">
|
||||
<h3 class="text-center">Step 2</h3>
|
||||
</div>
|
||||
<div class="step-foreground-container">
|
||||
<h3 class="text-center">Step 3</h3>
|
||||
</div>
|
||||
{/snippet}
|
||||
</ScrollerBase>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '../../../scss/mixins' as mixins;
|
||||
|
||||
#progress-bar {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 0;
|
||||
padding: 1rem;
|
||||
|
||||
progress {
|
||||
height: 6px;
|
||||
background-color: #ff000044; /* Background color of the entire bar */
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
background-color: #444444;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--theme-font-family-sans-serif);
|
||||
color: white;
|
||||
font-size: var(--theme-font-size-xs);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#debugger {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: hotpink;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</ScrollerBase>
|
||||
|
||||
<style lang="scss">
|
||||
.step-foreground-container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
border: 1px solid red;
|
||||
margin: auto;
|
||||
|
||||
.fg-child-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 0;
|
||||
font-size: 2em;
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: white;
|
||||
font-family: var(--theme-font-family-sans-serif);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -522,6 +408,8 @@ The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/
|
|||
|
||||
For advanced use cases such as looping a particular section of the video, or jumping to a specific time in the video, you can bind `scrollyVideo` prop and take benefits of methods such as `setVideoPercentage` or bindable methods such as `onReady` and `onChange`. This allows for fine-grained control over the video playback and interaction with the scroll position.
|
||||
|
||||
[Demo](?path=/story/components-graphics-scrollyvideo--advanced)
|
||||
|
||||
```js
|
||||
scrollyVideo.setVideoPercentage(0.5, {
|
||||
jump: false,
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@
|
|||
import Video_MD from './videos/waves_md.mp4';
|
||||
import Video_LG from './videos/waves_lg.mp4';
|
||||
import Goldengate from './videos/goldengate.mp4';
|
||||
import AdvancedUsecases from './demo/AdvancedUsecases.svelte';
|
||||
|
||||
const videoSrc = {
|
||||
Video_SM,
|
||||
|
|
@ -204,3 +205,7 @@
|
|||
<Story name="Using with ScrollerBase" exportName="ScrollerBase" {args}>
|
||||
<WithScrollerBase />
|
||||
</Story>
|
||||
|
||||
<Story name="Advanced usecases" exportName="Advanced" {args}>
|
||||
<AdvancedUsecases />
|
||||
</Story>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@
|
|||
// If we need to update the target time percent
|
||||
if (
|
||||
scrollyVideo &&
|
||||
typeof videoPercentage === 'number' &&
|
||||
videoPercentage &&
|
||||
videoPercentage >= 0 &&
|
||||
videoPercentage <= 1
|
||||
) {
|
||||
|
|
@ -193,12 +193,6 @@
|
|||
{#if showDebugInfo && dev}
|
||||
<div class="debug-info">
|
||||
<Debug componentState={scrollyVideo.componentState} />
|
||||
<!-- <p class="text-xxs font-sans"> -->
|
||||
<!-- {@html JSON.stringify(flattenObject(scrollyVideo.componentState))
|
||||
.replace(/[{}"]/g, '')
|
||||
.split(',')
|
||||
.join('<br>')} -->
|
||||
<!-- </p> -->
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
5
src/components/ScrollyVideo/demo/AdvancedUsecases.svelte
Normal file
5
src/components/ScrollyVideo/demo/AdvancedUsecases.svelte
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script lang="ts">
|
||||
/** Sudev -- Can you add a demo for the advanced use cases? I'm not sure what the use case would be and seeing an example would help*/
|
||||
</script>
|
||||
|
||||
TKTK
|
||||
|
|
@ -1,88 +1,35 @@
|
|||
<script lang="ts">
|
||||
import ScrollyVideo from '../ScrollyVideo.svelte';
|
||||
import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
|
||||
import Headline from '../../Headline/Headline.svelte';
|
||||
import GraphicBlock from '../../GraphicBlock/GraphicBlock.svelte';
|
||||
import AiMap from './graphic/ai2svelte/ai-chart.svelte';
|
||||
import Goldengate from '../videos/goldengate.mp4';
|
||||
|
||||
// ScrollerBase props
|
||||
let count = $state(1);
|
||||
let index = $state(0);
|
||||
let offset = $state(0);
|
||||
let progress = $state(0);
|
||||
let top = $state(0);
|
||||
let threshold = $state(0);
|
||||
let bottom = $state(1);
|
||||
</script>
|
||||
|
||||
<div class="scroller-demo-container">
|
||||
<ScrollerBase
|
||||
{top}
|
||||
{threshold}
|
||||
{bottom}
|
||||
bind:count
|
||||
bind:index
|
||||
bind:offset
|
||||
bind:progress
|
||||
query="div.step-foreground-container"
|
||||
visible
|
||||
>
|
||||
{#snippet backgroundSnippet()}
|
||||
<!-- Add custom background HTML or component -->
|
||||
<div id="progress-bar">
|
||||
<p>
|
||||
Current step: <strong>{index + 1}/{count}</strong>
|
||||
</p>
|
||||
<progress value={(index + 1) / count}></progress>
|
||||
|
||||
<p>Offset in current step</p>
|
||||
<progress value={offset}></progress>
|
||||
|
||||
<p>Total progress</p>
|
||||
<progress value={progress}></progress>
|
||||
</div>
|
||||
|
||||
<ScrollyVideo
|
||||
src={Goldengate}
|
||||
height="100svh"
|
||||
trackScroll={false}
|
||||
videoPercentage={progress}
|
||||
objectFit="cover"
|
||||
showDebugInfo
|
||||
/>
|
||||
{/snippet}
|
||||
{#snippet foregroundSnippet()}
|
||||
<!-- Add custom foreground HTML or component -->
|
||||
<div class="step-foreground-container">
|
||||
<div class="fg-child-container">
|
||||
<Headline
|
||||
class="custom-headline"
|
||||
hed="ScrollyVideo inside ScrollerBase"
|
||||
dek="This is a demo of ScrollyVideo inside ScrollerBase component."
|
||||
section={'Reuters Graphics'}
|
||||
authors={['Jane Doe']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-foreground-container"><p>Step 2</p></div>
|
||||
<div class="step-foreground-container">
|
||||
<div class="fg-child-container">
|
||||
<GraphicBlock
|
||||
title="Earthquake in Haiti"
|
||||
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
||||
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
||||
>
|
||||
<AiMap />
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-foreground-container"><p>Step 4</p></div>
|
||||
<div class="step-foreground-container"><p>Step 5</p></div>
|
||||
{/snippet}
|
||||
</ScrollerBase>
|
||||
</div>
|
||||
<ScrollerBase bind:progress query="div.step-foreground-container" visible>
|
||||
{#snippet backgroundSnippet()}
|
||||
<ScrollyVideo
|
||||
src={Goldengate}
|
||||
height="100svh"
|
||||
trackScroll={false}
|
||||
videoPercentage={progress}
|
||||
showDebugInfo
|
||||
/>
|
||||
{/snippet}
|
||||
{#snippet foregroundSnippet()}
|
||||
<!-- Add custom foreground HTML or component -->
|
||||
<div class="step-foreground-container">
|
||||
<h3 class="text-center">Step 1</h3>
|
||||
</div>
|
||||
<div class="step-foreground-container">
|
||||
<h3 class="text-center">Step 2</h3>
|
||||
</div>
|
||||
<div class="step-foreground-container">
|
||||
<h3 class="text-center">Step 3</h3>
|
||||
</div>
|
||||
{/snippet}
|
||||
</ScrollerBase>
|
||||
|
||||
<style lang="scss">
|
||||
@use '../../../scss/mixins' as mixins;
|
||||
|
|
@ -120,37 +67,17 @@
|
|||
|
||||
.step-foreground-container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
border: 1px solid red;
|
||||
margin: auto;
|
||||
|
||||
.fg-child-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 0;
|
||||
font-size: 2em;
|
||||
h3 {
|
||||
// align center
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: white;
|
||||
font-family: var(--theme-font-family-sans-serif);
|
||||
}
|
||||
|
||||
:global(.custom-headline *) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
:global(.fg-child-container:last-child *) {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue