From 92b1e41243a261a50f509a07a24f231693f808cf Mon Sep 17 00:00:00 2001 From: Daybrush Date: Tue, 1 Aug 2023 12:15:40 +0900 Subject: [PATCH] docs: add intersection example --- .../codes/Intersection/angularComponent.txt | 27 ++++++ .../docs/codes/Intersection/angularHTML.txt | 18 ++++ .../docs/docs/codes/Intersection/html.txt | 18 ++++ packages/docs/docs/codes/Intersection/js.txt | 26 ++++++ .../docs/docs/codes/Intersection/svelte.txt | 43 +++++++++ packages/docs/docs/codes/Intersection/vue.txt | 56 ++++++++++++ packages/docs/docs/examples/Intersection.mdx | 33 +++++++ packages/docs/docs/examples/Methods.mdx | 4 +- packages/docs/sidebars.js | 1 + packages/docs/src/examples/Intersection.tsx | 43 +++++++++ .../src/examples/ScrollIntoViewTarget.tsx | 88 ++++++++++++++++++- 11 files changed, 354 insertions(+), 3 deletions(-) create mode 100644 packages/docs/docs/codes/Intersection/angularComponent.txt create mode 100644 packages/docs/docs/codes/Intersection/angularHTML.txt create mode 100644 packages/docs/docs/codes/Intersection/html.txt create mode 100644 packages/docs/docs/codes/Intersection/js.txt create mode 100644 packages/docs/docs/codes/Intersection/svelte.txt create mode 100644 packages/docs/docs/codes/Intersection/vue.txt create mode 100644 packages/docs/docs/examples/Intersection.mdx create mode 100644 packages/docs/src/examples/Intersection.tsx diff --git a/packages/docs/docs/codes/Intersection/angularComponent.txt b/packages/docs/docs/codes/Intersection/angularComponent.txt new file mode 100644 index 00000000..80bfc2d1 --- /dev/null +++ b/packages/docs/docs/codes/Intersection/angularComponent.txt @@ -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, + }); + } +} diff --git a/packages/docs/docs/codes/Intersection/angularHTML.txt b/packages/docs/docs/codes/Intersection/angularHTML.txt new file mode 100644 index 00000000..fe0cb0d0 --- /dev/null +++ b/packages/docs/docs/codes/Intersection/angularHTML.txt @@ -0,0 +1,18 @@ +
+
+ + +
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
diff --git a/packages/docs/docs/codes/Intersection/html.txt b/packages/docs/docs/codes/Intersection/html.txt new file mode 100644 index 00000000..c50ee74f --- /dev/null +++ b/packages/docs/docs/codes/Intersection/html.txt @@ -0,0 +1,18 @@ +
+
+ + +
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
diff --git a/packages/docs/docs/codes/Intersection/js.txt b/packages/docs/docs/codes/Intersection/js.txt new file mode 100644 index 00000000..06cb1d55 --- /dev/null +++ b/packages/docs/docs/codes/Intersection/js.txt @@ -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, + }); +}); diff --git a/packages/docs/docs/codes/Intersection/svelte.txt b/packages/docs/docs/codes/Intersection/svelte.txt new file mode 100644 index 00000000..abf5df02 --- /dev/null +++ b/packages/docs/docs/codes/Intersection/svelte.txt @@ -0,0 +1,43 @@ + +
+
+ + +
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
diff --git a/packages/docs/docs/codes/Intersection/vue.txt b/packages/docs/docs/codes/Intersection/vue.txt new file mode 100644 index 00000000..924880bf --- /dev/null +++ b/packages/docs/docs/codes/Intersection/vue.txt @@ -0,0 +1,56 @@ + + diff --git a/packages/docs/docs/examples/Intersection.mdx b/packages/docs/docs/examples/Intersection.mdx new file mode 100644 index 00000000..30b7932f --- /dev/null +++ b/packages/docs/docs/examples/Intersection.mdx @@ -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"; + + + + +### 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). + + + + + + diff --git a/packages/docs/docs/examples/Methods.mdx b/packages/docs/docs/examples/Methods.mdx index c3984376..53335cd8 100644 --- a/packages/docs/docs/examples/Methods.mdx +++ b/packages/docs/docs/examples/Methods.mdx @@ -1,5 +1,5 @@ --- -title: Use Methods +title: Use scrollIntoView Method (side to side) custom_edit_url: null --- @@ -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| |:---:|:---:|:---:|:---:|:---:| diff --git a/packages/docs/sidebars.js b/packages/docs/sidebars.js index fee0b354..76099216 100644 --- a/packages/docs/sidebars.js +++ b/packages/docs/sidebars.js @@ -11,6 +11,7 @@ module.exports = { "examples/VerticalScroll", "examples/Properties", "examples/Methods", + "examples/Intersection", "examples/InfiniteScroll", "examples/SideWheel", ], diff --git a/packages/docs/src/examples/Intersection.tsx b/packages/docs/src/examples/Intersection.tsx new file mode 100644 index 00000000..ff887426 --- /dev/null +++ b/packages/docs/src/examples/Intersection.tsx @@ -0,0 +1,43 @@ +import * as React from "react"; +import { useConveyer } from "@egjs/react-conveyer"; + +export default function HorizontalScroll() { + const ref = React.useRef(null); + const { + scrollIntoView, + } = useConveyer(ref, { + horizontal: true, + }); + return
+
+ + +
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
; +} diff --git a/packages/docs/src/examples/ScrollIntoViewTarget.tsx b/packages/docs/src/examples/ScrollIntoViewTarget.tsx index d032195b..1b99d786 100644 --- a/packages/docs/src/examples/ScrollIntoViewTarget.tsx +++ b/packages/docs/src/examples/ScrollIntoViewTarget.tsx @@ -12,7 +12,7 @@ function updateItem(items, container, mark, target, className) { } export default function ScrollIntoViewTarget() { - const ref = React.useRef(); + const ref = React.useRef(null); const containerRef = React.useRef(); const { findElement, scrollIntoView } = useConveyer(ref, { horizontal: true, @@ -92,3 +92,89 @@ export default function ScrollIntoViewTarget() {

align

; } + +export function ScrollIntoViewTargetWithIntersection() { + const ref = React.useRef(null); + const containerRef = React.useRef(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(".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
+

target with intersection

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ {/*
*/} + {/*
*/} +
+
+

align

+
; +}