docs: update CrossFlicking demo features

Author: malangfox

docs/src/css/demo/crossflicking.css

@@ -38,9 +38,10 @@
 }
 
 .label {
-  display: block;
+  display: flex;
+  justify-content: center;
   cursor: pointer;
-  padding: 0 12px;
+  width: 80px;
   line-height: 36px;
   font-size: 16px;
   color: rgba(255, 255, 255, 0.6);
@@ -63,11 +64,13 @@
 
 .info {
   position: absolute;
+  z-index: 3;
   bottom: 36px;
   left: 0;
   right: 0;
   max-height: 72px;
   margin: auto 20px;
+  transition: all .25s ease-in-out;
 }
 
 .name {
@@ -98,8 +101,40 @@
 
 .area {
   position: absolute;
-  width: 85px;
+  left: 0px;
   height: 40px;
   -webkit-border-radius: 100px;
   border-radius: 100px;
+  transition: width .5s;
+}
+
+.page {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-right: 12px;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
 }
+
+.dot {
+  overflow: hidden;
+  width: 5px;
+  height: 5px;
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.4);
+}
+
+.dot.on {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.dot + .dot {
+  margin-top: 5px;
+}

docs/src/demo/presets/CrossFlicking.tsx

@@ -1,12 +1,17 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import React, { useEffect, useRef, useState } from "react";
-import { CrossFlicking, CrossGroup } from "@egjs/react-flicking";
+import { CrossFlicking, CrossGroup, DIRECTION } from "@egjs/react-flicking";
 import "../../css/demo/crossflicking.css";
 
 export default () => {
   const flicking = useRef<CrossFlicking>();
+  const tabRef = useRef<null[] | HTMLDivElement[]>([]);
+  const [opacity, setOpacity] = useState(1);
+  const [page, setPage] = useState([0, 0, 0, 0]);
+  const [panelCount, setPanelCount] = useState(4);
   const [transform, setTransform] = useState(0);
+  const [selectedWidth, setSelectedWidth] = useState("");
   const groups = [
     {
       name: "Spring",
@@ -132,11 +137,59 @@ export default () => {
 
   const onChanged = (e) => {
     setIndex(e.index);
+    setSelectedWidth(`${tabRef.current[e.index]?.getBoundingClientRect().width}px`);
+    console.log(tabRef.current[e.index]?.getBoundingClientRect());
+    setPanelCount(groups[e.index].panels.length);
+  };
+
+  const onSideChanged = (e) => {
+    setPage(page.map((prev, index) => {
+      if (index < e.mainIndex) {
+        e.index = e.index - groups[index].panels.length;
+      } else if (index === e.mainIndex) {
+        return e.index;
+      }
+      return prev;
+    }));
   };
 
   const onMove = (e) => {
-    const pos = e.currentTarget.camera._position;
-    setTransform(pos / 4.9 - 46);
+    const start = tabRef.current[e.currentTarget.index]!.getBoundingClientRect().x - tabRef.current[0]!.getBoundingClientRect().x;
+    const next = e.currentTarget.index + (e.currentTarget.visiblePanels[0].index === e.currentTarget.index ? 1 : -1);
+    if (next >= 0 && next <= groups.length - 1) {
+      const cameraPos = e.currentTarget.camera.position;
+      const visibleLists = e.currentTarget.visiblePanels.map(p => {
+        return {
+          panelIndex: p.index,
+          diff: p.position - cameraPos,
+        };
+      });
+      const size = e.currentTarget.currentPanel.size;
+      const half = size / 2;
+      const end = (tabRef.current[next]!.getBoundingClientRect().x - tabRef.current[e.currentTarget.index]!.getBoundingClientRect().x);
+
+      const { diff = 0 } = visibleLists.find(item => item.panelIndex === index) ?? {};
+      const ratio = Math.max(-1, Math.min(1, Math.abs(diff / size))) || 1;
+
+      setOpacity(Math.max(0, Math.min(1, 1 - Math.abs(diff / half))));
+      setTransform(cameraPos / 4);
+    }
+  };
+
+  const onSideMove = (e) => {
+    const cameraPos = e.currentTarget.camera.position;
+    const visibleLists = e.currentTarget.visiblePanels.map(p => {
+      return {
+        panelIndex: p.index,
+        diff: p.position - cameraPos,
+      };
+    });
+    const size = e.currentTarget.currentPanel.size;
+    const half = size / 2;
+    
+    const { diff = 0 } = visibleLists.find(item => item.panelIndex === index) ?? {};;
+
+    setOpacity(Math.max(0, Math.min(1, 1 - Math.abs(diff / half))));
   };
 
   const onTabClick = (i: number) => {
@@ -148,18 +201,19 @@ export default () => {
 
   useEffect(() => {
     flicking.current?.moveTo(0, 0);
+    setSelectedWidth(`${tabRef.current[0]?.getBoundingClientRect().width}px`);
   }, []);
 
   return (
     <div className="demo">
       <div className="labels">
-        <a
+        {selectedWidth && <a
           className="area selected"
-          style={{transform: `translate(${transform}px)`}}
+          style={{ width: selectedWidth, transform: `translate(${transform}px)` }}
         >
-        </a>
+        </a>}
         {groups.map((item, i) => (
-          <div className="tab" key={i}>
+          <div className="tab" ref={el => tabRef.current[i] = el} key={i}>
             <a
               className={"label " + (index === i ? "" : "")}
               onClick={() => onTabClick(i)}
@@ -172,14 +226,16 @@ export default () => {
       <CrossFlicking
         className="main"
         ref={flicking}
-        bounce={1}
+        bounce={0.1}
         preventDefaultOnDrag={true}
         moveType={"strict"}
         sideOptions={{
           moveType: "strict",
         }}
         onMove={onMove}
+        onSideMove={onSideMove}
         onChanged={onChanged}
+        onSideChanged={onSideChanged}
       >
         {groups.map((item, i) => {
           return (
@@ -188,21 +244,26 @@ export default () => {
                 return (
                   <div className="item" key={j}>
                     <img className="img scaleup" src={panel.image} />
-                    <div className="info">
-                      <div className="name">
-                        <span className="source">
-                          {item.name} Wallpaper ({j + 1}/{item.panels.length})
-                        </span>
-                      </div>
-                      <strong className="headline">{panel.title}</strong>
-                    </div>
                   </div>
                 );
               })}
             </CrossGroup>
           );
         })}
       </CrossFlicking>
+      <div className="info" style={{ opacity: opacity }}>
+        <div className="name">
+          <span className="source">
+            {groups[index].name} Wallpaper ({page[index] + 1}/{groups[index].panels.length})
+          </span>
+        </div>
+        <strong className="headline">{groups[index].panels[page[index]].title}</strong>
+      </div>
+      <div className="page">
+        {Array.from({ length: panelCount }).map((_, i) => {
+          return <span key={i} className={`dot ${i === page[index] ? "on" : ""}`}>{i + 1}</span>;
+        })}
+      </div>
     </div>
   );
 };