web: add DoricNestedSliderNode

doric-web/dist/index.js

@@ -1436,6 +1436,7 @@ var doric = (function (exports) {
             for (let i = 2; i < arguments.length; i++) {
                 argumentsList.push(arguments[i]);
             }
+            hookBeforeNativeCall(context);
             return Reflect.apply(Reflect.get(context.entity, methodName), context.entity, argumentsList);
         }
         else {
@@ -8280,6 +8281,103 @@ var doric_web = (function (exports, axios, sandbox) {
 	    }
 	}
 
+	class DoricNestedSliderNode extends DoricGroupViewNode {
+	    constructor() {
+	        super(...arguments);
+	        this.onPageSelectedFuncId = "";
+	        this.scrollable = true;
+	    }
+	    blendProps(v, propName, prop) {
+	        if (propName === "scrollable") {
+	            this.scrollable = prop;
+	        }
+	        else if (propName === "onPageSlided") {
+	            this.onPageSelectedFuncId = prop;
+	        }
+	        else if (propName === "slidePosition") {
+	            setTimeout(() => {
+	                this.slidePage({ page: prop, smooth: false });
+	            });
+	        }
+	        else {
+	            super.blendProps(v, propName, prop);
+	        }
+	    }
+	    build() {
+	        const ret = document.createElement("div");
+	        ret.style.overflow = "hidden";
+	        ret.style.display = "inline";
+	        ret.style.whiteSpace = "nowrap";
+	        let touchStartX = 0;
+	        let currentIndex = 0;
+	        let isDragging = false;
+	        const handleTouchStart = (x) => {
+	            if (!this.scrollable)
+	                return;
+	            currentIndex = Math.round(ret.scrollLeft / ret.offsetWidth);
+	            touchStartX = x;
+	            isDragging = true;
+	        };
+	        ret.onmousedown = (ev) => handleTouchStart(ev.pageX);
+	        ret.ontouchstart = (ev) => handleTouchStart(ev.touches[0].pageX);
+	        const handleTouchMove = (x) => {
+	            if (!this.scrollable || !isDragging)
+	                return;
+	            const offsetX = (touchStartX - x) * 3;
+	            ret.scrollTo({
+	                left: currentIndex * ret.offsetWidth + offsetX,
+	            });
+	        };
+	        ret.onmousemove = (ev) => handleTouchMove(ev.pageX);
+	        ret.ontouchmove = (ev) => handleTouchMove(ev.touches[0].pageX);
+	        const handleTouchCancel = () => {
+	            if (!this.scrollable)
+	                return;
+	            isDragging = false;
+	            let originInndex = currentIndex;
+	            currentIndex = Math.round(ret.scrollLeft / ret.offsetWidth);
+	            ret.scrollTo({
+	                left: currentIndex * ret.offsetWidth,
+	                behavior: "smooth",
+	            });
+	            if (originInndex !== currentIndex) {
+	                if (this.onPageSelectedFuncId.length > 0) {
+	                    this.callJSResponse(this.onPageSelectedFuncId, currentIndex);
+	                }
+	            }
+	        };
+	        ret.onmouseup = ret.ontouchcancel = ret.ontouchend = handleTouchCancel;
+	        return ret;
+	    }
+	    layout() {
+	        super.layout();
+	        this.childNodes.forEach((e, idx) => {
+	            e.view.style.display = "inline-block";
+	            e.view.style.width = "100%";
+	            e.view.style.height = "100%";
+	        });
+	    }
+	    getSlidedPage() {
+	        return Math.round(this.view.scrollLeft / this.view.offsetWidth);
+	    }
+	    slidePage(params) {
+	        if (params.smooth) {
+	            this.view.scrollTo({
+	                left: this.view.offsetWidth * params.page,
+	                behavior: "smooth",
+	            });
+	        }
+	        else {
+	            this.view.scrollTo({
+	                left: this.view.offsetWidth * params.page,
+	            });
+	        }
+	        if (this.onPageSelectedFuncId.length > 0) {
+	            this.callJSResponse(this.onPageSelectedFuncId, params.page);
+	        }
+	    }
+	}
+
 	const bundles = new Map;
 	const plugins = new Map;
 	const nodes = new Map;
@@ -8322,6 +8420,7 @@ var doric_web = (function (exports, axios, sandbox) {
 	registerViewNode('Switch', DoricSwitchNode);
 	registerViewNode('Slider', DoricSliderNode);
 	registerViewNode('SlideItem', DoricSlideItemNode);
+	registerViewNode('NestedSlider', DoricNestedSliderNode);
 
 	function getScriptId(contextId) {
 	    return `__doric_script_${contextId}`;

doric-web/src/DoricRegistry.ts

@@ -21,6 +21,7 @@ import { DoricSliderNode } from "./shader/DoricSliderNode"
 import { DoricSlideItemNode } from "./shader/DoricSlideItemNode"
 import { NotificationPlugin } from "./plugins/NotificationPlugin"
 import { NetworkPlugin } from "./plugins/NetworkPlugin"
+import { DoricNestedSliderNode } from "./shader/DoricNestedSliderNode"
 
 const bundles: Map<string, string> = new Map
 
@@ -77,3 +78,4 @@ registerViewNode('Refreshable', DoricRefreshableNode)
 registerViewNode('Switch', DoricSwitchNode)
 registerViewNode('Slider', DoricSliderNode)
 registerViewNode('SlideItem', DoricSlideItemNode)
+registerViewNode('NestedSlider', DoricNestedSliderNode)

doric-web/src/shader/DoricNestedSliderNode.ts

@@ -0,0 +1,93 @@
+import { DoricGroupViewNode } from "./DoricViewNode";
+
+export class DoricNestedSliderNode extends DoricGroupViewNode {
+  onPageSelectedFuncId = "";
+  scrollable = true;
+
+  blendProps(v: HTMLElement, propName: string, prop: any) {
+    if (propName === "scrollable") {
+      this.scrollable = prop;
+    } else if (propName === "onPageSlided") {
+      this.onPageSelectedFuncId = prop;
+    } else if (propName === "slidePosition") {
+      setTimeout(() => {
+        this.slidePage({ page: prop, smooth: false });
+      });
+    } else {
+      super.blendProps(v, propName, prop);
+    }
+  }
+
+  build() {
+    const ret = document.createElement("div");
+    ret.style.overflow = "hidden";
+    ret.style.display = "inline";
+    ret.style.whiteSpace = "nowrap";
+    let touchStartX = 0;
+    let currentIndex = 0;
+    let isDragging = false;
+    const handleTouchStart = (x: number) => {
+      if (!this.scrollable) return;
+      currentIndex = Math.round(ret.scrollLeft / ret.offsetWidth);
+      touchStartX = x;
+      isDragging = true;
+    };
+    ret.onmousedown = (ev) => handleTouchStart(ev.pageX);
+    ret.ontouchstart = (ev) => handleTouchStart(ev.touches[0].pageX);
+    const handleTouchMove = (x: number) => {
+      if (!this.scrollable || !isDragging) return;
+      const offsetX = (touchStartX - x) * 3;
+      ret.scrollTo({
+        left: currentIndex * ret.offsetWidth + offsetX,
+      });
+    };
+    ret.onmousemove = (ev) => handleTouchMove(ev.pageX);
+    ret.ontouchmove = (ev) => handleTouchMove(ev.touches[0].pageX);
+    const handleTouchCancel = () => {
+      if (!this.scrollable) return;
+      isDragging = false;
+      let originInndex = currentIndex;
+      currentIndex = Math.round(ret.scrollLeft / ret.offsetWidth);
+      ret.scrollTo({
+        left: currentIndex * ret.offsetWidth,
+        behavior: "smooth",
+      });
+      if (originInndex !== currentIndex) {
+        if (this.onPageSelectedFuncId.length > 0) {
+          this.callJSResponse(this.onPageSelectedFuncId, currentIndex);
+        }
+      }
+    };
+    ret.onmouseup = ret.ontouchcancel = ret.ontouchend = handleTouchCancel;
+    return ret;
+  }
+
+  layout(): void {
+    super.layout();
+    this.childNodes.forEach((e, idx) => {
+      e.view.style.display = "inline-block";
+      e.view.style.width = "100%";
+      e.view.style.height = "100%";
+    });
+  }
+
+  getSlidedPage() {
+    return Math.round(this.view.scrollLeft / this.view.offsetWidth);
+  }
+
+  slidePage(params: { page: number; smooth: boolean }) {
+    if (params.smooth) {
+      this.view.scrollTo({
+        left: this.view.offsetWidth * params.page,
+        behavior: "smooth",
+      });
+    } else {
+      this.view.scrollTo({
+        left: this.view.offsetWidth * params.page,
+      });
+    }
+    if (this.onPageSelectedFuncId.length > 0) {
+      this.callJSResponse(this.onPageSelectedFuncId, params.page);
+    }
+  }
+}