-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from dysfunc/integration-tests
✅ add rule and obstructions tests
- Loading branch information
Showing
11 changed files
with
283 additions
and
91 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +1,86 @@ | ||
| <script> | ||
| import Viewable from "@svelte-plugins/viewable"; | ||
| export let enableObstructionDetection = false; | ||
| let events = []; | ||
| let element; | ||
| let duration; | ||
| let percent; | ||
| let percentX; | ||
| let percentY; | ||
| let activeRule = null; | ||
| let debug = true; | ||
| // you can use a single callback or separate callbacks for each rule | ||
| const fn = ({ percentage, duration, rule }) => { | ||
| console.log(`${percentage}% of the element was visible for at least ${duration} consecutive seconds.`); | ||
| events = [...events, `${percentage}% of the element was visible for at least ${duration} consecutive seconds. #${rule}`]; | ||
| // update active rule | ||
| activeRule = rule; | ||
| } | ||
| const rules = { | ||
| // do something when this crosses the viewport | ||
| whenVisible: { duration: 2, percentage: 40, fn }, | ||
| whenFourtyForTwo: { duration: 2, percentage: 40, fn }, | ||
| // do something when this is 50% in view for 4 seconds | ||
| whenFiftyForOne: { duration: 4, percentage: 50, fn }, | ||
| whenFiftyForFour: { duration: 4, percentage: 50, fn }, | ||
| // do something when this is 100% in view for 6 seconds | ||
| whenHundredForFour: { duration: 6, percentage: 100, fn } | ||
| whenHundredForSix: { duration: 6, percentage: 100, fn } | ||
| }; | ||
| export let enableObstructionDetection = false; | ||
| let element; | ||
| let duration; | ||
| let percent; | ||
| let percentX; | ||
| let percentY; | ||
| let activeRule = null; | ||
| let debug = true; | ||
| </script> | ||
|
|
||
| <Viewable bind:duration bind:percent bind:percentY bind:percentX {rules} {element} {enableObstructionDetection} {debug}> | ||
| <div bind:this={element} class={`${activeRule}`}> | ||
| <slot></slot> | ||
|
|
||
| <p>Duration: {duration}s</p> | ||
| <p>Viewable area: {percent}% x: {percentX}% y: {percentY}%</p> | ||
|
|
||
| {#if events.length} | ||
| {#each events as event} | ||
| <p>{event}</p> | ||
| {/each} | ||
| {/if} | ||
| </div> | ||
| </Viewable> | ||
|
|
||
| <style> | ||
| div { | ||
| background-color: #ccc; | ||
| background-color: #ddd; | ||
| border-radius: 2px; | ||
| height: 100%; | ||
| padding: 20px; | ||
| height: 25vh; | ||
| } | ||
| div.whenVisible { | ||
| div.whenFourtyForTwo { | ||
| background-color: #50e3c2; | ||
| color: #fff; | ||
| } | ||
| div.whenFiftyForOne { | ||
| div.whenFiftyForFour { | ||
| background-color: #4a90e2; | ||
| color: #fff; | ||
| } | ||
| div.whenHundredForFour { | ||
| div.whenHundredForSix { | ||
| background-color: #fd8e82; | ||
| color: #fff; | ||
| position: relative; | ||
| } | ||
| div.whenHundredForSix:before { | ||
| background: rgba(255,255,255, .75); | ||
| border-radius: 100%; | ||
| bottom: 20px; | ||
| content: "🎉"; | ||
| height: 100px; | ||
| font-size: 3em; | ||
| left: calc(50% - 50px); | ||
| line-height: 100px; | ||
| position: absolute; | ||
| right: 0; | ||
| text-align: center; | ||
| top: calc(50% - 50px); | ||
| width: 100px; | ||
| } | ||
| </style> |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.