Skip to content

Commit

Permalink
docs: add intersection example
Browse files Browse the repository at this point in the history
  • Loading branch information
daybrush committed Aug 1, 2023
1 parent fddf263 commit 92b1e41
Show file tree
Hide file tree
Showing 11 changed files with 354 additions and 3 deletions.
27 changes: 27 additions & 0 deletions packages/docs/docs/codes/Intersection/angularComponent.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Component, Input } from '@angular/core';
import { NgxConveyerDirective } from 'ngx-conveyer';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [
"./app.component.css",
],
})
export class AppComponent {
@ViewChild('conveyer', { static: false }) conveyer!: NgxConveyerDirective;
prev() {
this.conveyer.scrollIntoView("start", {
align: "end",
duration: 500,
intersection: true,
});
}
next() {
this.conveyer.scrollIntoView("end", {
align: "start",
duration: 500,
intersection: true,
});
}
}
18 changes: 18 additions & 0 deletions packages/docs/docs/codes/Intersection/angularHTML.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class="examples">
<div class="buttons">
<button class="prev" (click)="prev()">prev</button>
<button class="next" (click)="next()">next</button>
</div>
<div class="items horizontal" ngxConveyer #conveyer="ngxConveyer">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
18 changes: 18 additions & 0 deletions packages/docs/docs/codes/Intersection/html.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class="examples">
<div class="buttons">
<button class="prev">prev</button>
<button class="next">next</button>
</div>
<div class="items horizontal">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
26 changes: 26 additions & 0 deletions packages/docs/docs/codes/Intersection/js.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items", {
horizontal: false,
});

const prev = document.querySelector(".prev");
const next = document.querySelector(".next");

// scrollIntoView
prev.addEventListener("click", () => {
// start to end
conveyer.scrollIntoView("start", {
align: "end",
duration: 500,
intersection: true,
});
});
next.addEventListener("click", () => {
// end to start
conveyer.scrollIntoView("end", {
align: "start",
duration: 500,
intersection: true,
});
});
43 changes: 43 additions & 0 deletions packages/docs/docs/codes/Intersection/svelte.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<script>
import { useConveyer } from "@egjs/svelte-conveyer";

const {
scrollIntoView,
ref,
} = useConveyer({
horizontal: false,
autoInit: false,
});
</script>
<div class="examples">
<div className="buttons">
<button className="prev" disabled={$isReachStart} on:click={() => {
// start to end
scrollIntoView("start", {
align: "end",
duration: 500,
intersection: true,
});
}}>Prev</button>
<button className="next" disabled={$isReachEnd} on:click={() => {
// end to start
scrollIntoView("end", {
align: "start",
duration: 500,
intersection: true,
});
}}>Next</button>
</div>
<div class="items horizontal" use:ref>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
56 changes: 56 additions & 0 deletions packages/docs/docs/codes/Intersection/vue.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<template>
<div class="examples">
<div class="buttons">
<button class="prev" :disabled="isReachStart" @click="prev">prev</button>
<button class="next" :disabled="isReachEnd" @click="next">next</button>
</div>
<div class="items horizontal" ref="ref">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
</template>
<script lang="ts">
import { MasonryInfiniteGrid } from "@egjs/vue3-infinitegrid";
import { useConveyer } from "@egjs/vue-conveyer";

export default {
components: {
MasonryInfiniteGrid,
},
setup() {
const { ref, scrollIntoView } = useConveyer({
horizontal: false,
});

return {
ref,
scrollIntoView,
};
},
methods: {
prev() {
this.scrollIntoView("start", {
align: "end",
duration: 500,
intersection: true,
});
},
next() {
this.scrollIntoView("end", {
align: "start",
duration: 500,
intersection: true,
});
},
},
};
</script>
33 changes: 33 additions & 0 deletions packages/docs/docs/examples/Intersection.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: Use scrollIntoView Method (intersection side)
custom_edit_url: null
---

You can use the conveyer's methods via instance or result.

You can also use scroll-related functions through methods.


### scrollIntoView
[`.scrollIntoView`](/docs/api/Conveyer#scrollIntoView) method scrolls an element or an item in that direction into the view.

Also, if the `intersection` option is enabled, items overlapping on the side can also be included in the target.


import Intersection from "@site/src/examples/Intersection";
import { ScrollIntoViewTargetWithIntersection } from "@site/src/examples/ScrollIntoViewTarget";
import ConveyerCodeTabs from "@site/docs/codes/ConveyerCodeTabs";

<ScrollIntoViewTargetWithIntersection />


### Example

* If you click the `prev` button, you can align the items in the `start`(target) direction to `end`(align).
* If you click the `next` button, you can align the items in the `end`(target) direction to `start`(align).


<Intersection />


<ConveyerCodeTabs folder="Intersection" reactCode={require("!!raw-loader!@site/src/examples/Intersection.tsx").default} />
4 changes: 2 additions & 2 deletions packages/docs/docs/examples/Methods.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Use Methods
title: Use scrollIntoView Method (side to side)
custom_edit_url: null
---

Expand All @@ -9,7 +9,7 @@ You can also use scroll-related functions through methods.


### scrollIntoView
[scrollIntoView](/docs/api/Conveyer#scrollIntoView) method scrolls an element or an item in that direction into the view.
[`.scrollIntoView`](/docs/api/Conveyer#scrollIntoView) method scrolls an element or an item in that direction into the view.

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
Expand Down
1 change: 1 addition & 0 deletions packages/docs/sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ module.exports = {
"examples/VerticalScroll",
"examples/Properties",
"examples/Methods",
"examples/Intersection",
"examples/InfiniteScroll",
"examples/SideWheel",
],
Expand Down
43 changes: 43 additions & 0 deletions packages/docs/src/examples/Intersection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import * as React from "react";
import { useConveyer } from "@egjs/react-conveyer";

export default function HorizontalScroll() {
const ref = React.useRef<HTMLDivElement>(null);
const {
scrollIntoView,
} = useConveyer(ref, {
horizontal: true,
});
return <div className="examples">
<div className="buttons">
<button className="prev" onClick={() => {
// start to end
scrollIntoView("start", {
align: "end",
duration: 500,
intersection: true,
});
}}>Prev</button>
<button className="next" onClick={() => {
// end to start
scrollIntoView("end", {
align: "start",
duration: 500,
intersection: true,
});
}}>Next</button>
</div>
<div className="items horizontal" ref={ref}>
<div className="item">1</div>
<div className="item">2</div>
<div className="item">3</div>
<div className="item">4</div>
<div className="item">5</div>
<div className="item">6</div>
<div className="item">7</div>
<div className="item">8</div>
<div className="item">9</div>
<div className="item">10</div>
</div>
</div>;
}
88 changes: 87 additions & 1 deletion packages/docs/src/examples/ScrollIntoViewTarget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function updateItem(items, container, mark, target, className) {
}

export default function ScrollIntoViewTarget() {
const ref = React.useRef<HTMLDivElement>();
const ref = React.useRef<HTMLDivElement>(null);
const containerRef = React.useRef<HTMLDivElement>();
const { findElement, scrollIntoView } = useConveyer(ref, {
horizontal: true,
Expand Down Expand Up @@ -92,3 +92,89 @@ export default function ScrollIntoViewTarget() {
<p className="bottom">align</p>
</div>;
}

export function ScrollIntoViewTargetWithIntersection() {
const ref = React.useRef<HTMLDivElement>(null);
const containerRef = React.useRef<HTMLDivElement>(null);
const { findElement, scrollIntoView } = useConveyer(ref, {
horizontal: true,
});

const onScroll = React.useCallback(() => {
requestAnimationFrame(() => {
const container = containerRef.current;
// const markPrev = document.querySelector(".mark.prev");
const markStart = document.querySelector(".mark.start");
const markEnd = document.querySelector(".mark.end");
// const markNext = document.querySelector(".mark.next");
const items = document.querySelectorAll(".item");
const backgroundItems = document.querySelectorAll<HTMLElement>(".background-items .item");

backgroundItems.forEach(element => {
element!.style.transform = `translateX(${-ref.current!.scrollLeft}px)`;
});
items.forEach(item => {
item.classList.remove("start", "end");
});

// const prev = findElement("prev");
const start = findElement("start", {
intersection: true,
});
const end = findElement("end", {
intersection: true,
});
// const next = findElement("next");

// prev?.classList.add("prev");
start?.classList.add("start");
end?.classList.add("end");
// next?.classList.add("next");

// updateItem(backgroundItems, container, markPrev, prev, "prev");
updateItem(backgroundItems, container, markStart, start, "start");
updateItem(backgroundItems, container, markEnd, end, "end");
// updateItem(backgroundItems, container, markNext, next, "next");
});
}, []);

React.useEffect(() => {
onScroll();
scrollIntoView("next", {
align: "center",
duration: 500,
});
}, []);
return <div className="scroll-into-view-target" ref={containerRef}>
<p className="top">target with intersection</p>
<div className="background-items">
<div className="item">1</div>
<div className="item">2</div>
<div className="item">3</div>
<div className="item">4</div>
<div className="item">5</div>
<div className="item">6</div>
<div className="item">7</div>
<div className="item">8</div>
<div className="item">9</div>
<div className="item">10</div>
</div>
<div className="items" ref={ref} onScroll={onScroll}>
<div className="item">1</div>
<div className="item">2</div>
<div className="item">3</div>
<div className="item">4</div>
<div className="item">5</div>
<div className="item">6</div>
<div className="item">7</div>
<div className="item">8</div>
<div className="item">9</div>
<div className="item">10</div>
</div>
{/* <div className="mark prev"></div> */}
{/* <div className="mark next"></div> */}
<div className="mark start"></div>
<div className="mark end"></div>
<p className="bottom">align</p>
</div>;
}

0 comments on commit 92b1e41

Please sign in to comment.