web: finish develop Slider

doric-web/index.html

@@ -42,5 +42,10 @@
         width: 100%;
     }
 </style>
-
+<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js"></script>
+<script>
+    // 初始化
+    var vConsole = new VConsole();
+    console.log('Hello world');
+</script>
 </html>

doric-web/index.ts

@@ -1,9 +1,8 @@
 import axios from 'axios';
+import smoothscroll from 'smoothscroll-polyfill';
 import { registerDoricJSLoader } from './src/DoricBundleLoader';
 import { DoricElement } from './src/DoricElement'
 import { NavigationElement } from './src/navigate/NavigationElement'
-window.customElements.define('doric-div', DoricElement);
-window.customElements.define('doric-navigation', NavigationElement);
 export * from './src/DoricElement'
 export * from './src/navigate/NavigationElement'
 export * from './src/DoricPlugin'
@@ -11,6 +10,11 @@ export * from './src/DoricRegistry'
 export * from './src/DoricDriver'
 export * from './src/shader/DoricViewNode'
 
+window.customElements.define('doric-div', DoricElement);
+window.customElements.define('doric-navigation', NavigationElement);
+
+smoothscroll.polyfill();
+
 registerDoricJSLoader({
     filter: (source) => source.startsWith("assets://"),
     request: async (source) => {

doric-web/package.json

@@ -25,9 +25,13 @@
     "axios": ">=0.21.1",
     "doric": "file:../doric-js",
     "rollup": "^2.24.0",
+    "smoothscroll-polyfill": "^0.4.4",
     "typescript": "^4.2.2"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
+  },
+  "devDependencies": {
+    "@types/smoothscroll-polyfill": "^0.3.1"
   }
 }

doric-web/src/DoricRegistry.ts

@@ -17,6 +17,8 @@ import { DoricDraggableNode } from "./shader/DoricDraggableNode"
 import { DoricRefreshableNode } from "./shader/DoricRefreshableNode"
 import { AnimatePlugin } from "./plugins/AnimatePlugin"
 import { DoricSwitchNode } from "./shader/DoricSwitchNode"
+import { DoricSliderNode } from "./shader/DoricSliderNode"
+import { DoricSlideItemNode } from "./shader/DoricSlideItemNode"
 
 const bundles: Map<string, string> = new Map
 
@@ -68,4 +70,6 @@ registerViewNode('ListItem', DoricListItemNode)
 registerViewNode('List', DoricListNode)
 registerViewNode('Draggable', DoricDraggableNode)
 registerViewNode('Refreshable', DoricRefreshableNode)
-registerViewNode('Switch', DoricSwitchNode)
+registerViewNode('Switch', DoricSwitchNode)
+registerViewNode('Slider', DoricSliderNode)
+registerViewNode('SlideItem', DoricSlideItemNode)

doric-web/src/shader/DoricListItemNode.ts

@@ -1,5 +1,9 @@
+import { DoricContext } from "../DoricContext";
 import { DoricStackNode } from "./DoricStackNode";
 
 export class DoricListItemNode extends DoricStackNode {
-
+    constructor(context: DoricContext) {
+        super(context)
+        this.reusable = true
+    }
 }

doric-web/src/shader/DoricListNode.ts

@@ -85,7 +85,7 @@ export class DoricListNode extends DoricSuperNode {
         if (viewId === this.loadMoreViewId) {
             return this.loadMoreViewNode
         }
-        return this.childNodes.filter(e => e.viewId === viewId)[0]
+        return this.childNodes.filter(e => e.viewId === viewId)?.[0]
     }
 
     onScrollToEnd() {

doric-web/src/shader/DoricSlideItemNode.ts

@@ -0,0 +1,16 @@
+import { DoricContext } from "../DoricContext";
+import { DoricStackNode } from "./DoricStackNode";
+
+export class DoricSlideItemNode extends DoricStackNode {
+    constructor(context: DoricContext) {
+        super(context)
+        this.reusable = true
+    }
+    build() {
+        const ret = super.build()
+        ret.style.display = "inline-block"
+        ret.style.width = "100%"
+        ret.style.height = "100%"
+        return ret
+    }
+}

doric-web/src/shader/DoricSliderNode.ts

@@ -0,0 +1,100 @@
+import { DoricSlideItemNode } from "./DoricSlideItemNode";
+import { DoricStackNode } from "./DoricStackNode";
+import { DoricSuperNode, DoricViewNode, DVModel } from "./DoricViewNode";
+
+export class DoricSliderNode extends DoricSuperNode {
+    itemCount = 0
+    renderPageFuncId = ""
+    batchCount = 15
+    onPageSelectedFuncId = ""
+    loop = false
+    childNodes: DoricSlideItemNode[] = []
+
+    blendProps(v: HTMLElement, propName: string, prop: any) {
+        if (propName === 'itemCount') {
+            this.itemCount = prop
+        } else if (propName === 'renderPage') {
+            if (prop !== this.renderPageFuncId) {
+                this.childNodes = []
+                this.renderPageFuncId = prop
+            }
+        } else if (propName === 'batchCount') {
+            this.batchCount = prop
+        } else if (propName === 'onPageSlided') {
+            this.onPageSelectedFuncId = prop
+        } else if (propName === 'loop') {
+            this.loop = prop
+        } else {
+            super.blendProps(v, propName, prop)
+        }
+    }
+
+    blendSubNode(model: DVModel) {
+        this.getSubNodeById(model.id)?.blend(model.props)
+    }
+
+    getSubNodeById(viewId: string) {
+        return this.childNodes.filter(e => e.viewId === viewId)?.[0]
+    }
+
+    onBlending() {
+        super.onBlending()
+        if (this.childNodes.length !== this.itemCount) {
+            const ret = this.pureCallJSResponse("renderBunchedItems", this.childNodes.length, this.itemCount) as DVModel[]
+            this.childNodes = this.childNodes.concat(ret.map(e => {
+                const viewNode = DoricViewNode.create(this.context, e.type) as DoricStackNode
+                viewNode.viewId = e.id
+                viewNode.init(this)
+                viewNode.blend(e.props)
+                this.view.appendChild(viewNode.view)
+                return viewNode
+            }))
+        }
+    }
+    build() {
+        const ret = document.createElement('div')
+        ret.style.overflow = "hidden"
+        ret.style.display = "inline"
+        ret.style.whiteSpace = "nowrap"
+        let touchStartX = 0
+        let currentIndex = 0
+        ret.ontouchstart = (ev) => {
+            currentIndex = Math.round(ret.scrollLeft / ret.offsetWidth)
+            touchStartX = ev.touches[0].pageX
+        }
+        ret.ontouchmove = (ev) => {
+            const offsetX = (touchStartX - ev.touches[0].pageX) * 3
+            ret.scrollTo({
+                left: currentIndex * ret.offsetWidth + offsetX
+            })
+        }
+        ret.ontouchcancel = ret.ontouchend = () => {
+            currentIndex = Math.round(ret.scrollLeft / ret.offsetWidth)
+            ret.scrollTo({
+                left: currentIndex * ret.offsetWidth,
+                behavior: "smooth"
+            })
+        }
+        return ret
+    }
+
+    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)
+        }
+    }
+}