Modify the touch events in the components to pointer events

any-tdf · Jul 19, 2023 · 7b91167 · 7b91167
1 parent b3e511c
commit 7b91167
Show file tree

Hide file tree

Showing 17 changed files with 285 additions and 247 deletions.
diff --git a/components/package.json b/components/package.json
@@ -1,7 +1,7 @@
 {
     "name": "stdf",
-    "version": "0.1.4",
-    "description": "Mobile Web component library based on Svelte and Tailwind",
+    "version": "0.1.5",
+    "description": "Mobile web component library based on Svelte and Tailwind",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/components/src/bottomSheet/BottomSheet.svelte b/components/src/bottomSheet/BottomSheet.svelte
@@ -1,6 +1,7 @@
 <script>
     import { onMount, createEventDispatcher, getContext } from 'svelte';
     import { fly } from 'svelte/transition';
+    import { debounce } from '../utils';
     import zh_CN from '../../lang/zh_CN';
 
     import Mask from '../mask/Mask.svelte';
@@ -174,14 +175,16 @@
     const touchstartFun = e => {
         moveDistance = 0;
         startTop = currentTop;
-        startY = e.touches[0].clientY;
+        startY = e.clientY;
         isTouch = true;
     };
 
     // 滑动中
     // sliding
     const touchmoveFun = e => {
-        currentY = e.touches[0].clientY;
+        if (!isTouch) return;
+        scrollTopDom.setPointerCapture(e.pointerId);
+        currentY = e.clientY;
         //移动百分比，moveDistance为正时，向下移动
         //Move percentage, moveDistance is positive when moving down
         moveDistance = ((currentY - startY) / window.innerHeight) * 100;
@@ -293,7 +296,13 @@
             in:fly={{ y: (stayHeightList[stayHeightList.length - 1] / 100) * window.innerHeight, opacity: 1, duration }}
             out:fly={{ y: (stayHeightList[stayHeightList.length - 1] / 100) * window.innerHeight, opacity: 1, duration: outDuration }}
         >
-            <div class="py-1" bind:this={scrollTopDom} on:touchstart={touchstartFun} on:touchmove={touchmoveFun} on:touchend={touchendFun}>
+            <div
+                on:pointerdown={touchstartFun}
+                on:pointermove={debounce(touchmoveFun, 5)}
+                on:pointerup={touchendFun}
+                bind:this={scrollTopDom}
+                class="py-1 touch-none cursor-move select-none"
+            >
                 <div class={`w-8 h-1 bg-black/20 dark:bg-white/30 mx-auto${radius === 'none' ? ' rounded-none' : ' rounded-full'}`} />
                 <div class="px-3 py-1 flex justify-between items-center gap-2">
                     {#if showBackIcon}
@@ -334,7 +343,7 @@
                         </div>
                     {:else}
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <div class="text-primary dark:text-dark font-bold" on:click={closeFunc}>{closeContent}</div>
+                        <div class="text-primary dark:text-dark font-bold cursor-pointer" on:click={closeFunc}>{closeContent}</div>
                     {/if}
                 </div>
             </div>

diff --git a/components/src/indexBar/IndexBar.svelte b/components/src/indexBar/IndexBar.svelte
@@ -59,6 +59,12 @@
     // Bar outside the distance from the top
     let barToTop = 0;
 
+    // bar元素
+    // bar element
+    let barDom = null;
+
+    let isDown = false; //是否按下 is down
+
     // 每一个的高度
     // Height of each
     $: itemHeight = barHeight / data.length;
@@ -90,8 +96,10 @@
     //bar区域滑动开始
     //Bar area sliding start
     const touchBoxStart = e => {
-        currentTouch = Math.floor((e.targetTouches[0].clientY - barToTop) / itemHeight);
-        current = Math.floor((e.targetTouches[0].clientY - barToTop) / itemHeight);
+        isDown = true;
+        const clientY = e.clientY;
+        currentTouch = Math.floor((clientY - barToTop) / itemHeight);
+        current = Math.floor((clientY - barToTop) / itemHeight);
         bodyDom.scrollTop = data.slice(0, current).reduce((sum, current) => {
             return sum + current.height;
         }, 0);
@@ -100,13 +108,18 @@
     // bar区域滑动中
     // bar area sliding in the middle
     const touchBoxMove = e => {
-        currentTouch = Math.floor((e.targetTouches[0].clientY - barToTop) / itemHeight);
-        current = Math.floor((e.targetTouches[0].clientY - barToTop) / itemHeight);
-        if (e.targetTouches[0].clientY < barToTop) {
+        if (!isDown) {
+            return;
+        }
+        barDom.setPointerCapture(e.pointerId);
+        const clientY = e.clientY;
+        currentTouch = Math.floor((clientY - barToTop) / itemHeight);
+        current = Math.floor((clientY - barToTop) / itemHeight);
+        if (clientY < barToTop) {
             currentTouch = 0;
             current = 0;
         }
-        if (e.targetTouches[0].clientY > barHeight + barToTop) {
+        if (clientY > barHeight + barToTop) {
             currentTouch = data.length - 1;
             current = data.length - 1;
         }
@@ -119,6 +132,7 @@
     // bar area sliding end
     const touchBoxEnd = () => {
         currentTouch = -1;
+        isDown = false;
     };
 
     //监听主体内容滚动
@@ -139,34 +153,6 @@
         // Dispatch click events to pass four parameters out. 1. index: the parent group index value of the clicked item; 2. group: the parent group content of the clicked item; 3. childIndex: the index value of the clicked item; 4. child: the content of the clicked item.
         dispatch('clickchild', { index, group, childIndex, child });
     };
-    //防抖
-    // function debounce(fn, delay) {
-    //     let timer = null;
-    //     return function () {
-    //         if (timer) {
-    //             clearTimeout(timer);
-    //         }
-    //         timer = setTimeout(() => {
-    //             //模拟触发change事件
-    //             fn.apply(this, arguments);
-    //             // 清空计时器
-    //             timer = null;
-    //         }, delay);
-    //     };
-    // }
-    // 节流
-    // const throttle = (fn, delay = 50) => {
-    //     let timer = null;
-    //     return function () {
-    //         if (timer) {
-    //             return;
-    //         }
-    //         timer = setTimeout(() => {
-    //             fn.apply(this, arguments);
-    //             timer = null;
-    //         }, delay);
-    //     };
-    // };
 </script>
 
 <div bind:this={bodyDom} class={`overflow-y-auto ${scrollAlign && 'snap-y'}`} on:scroll={scrollBody} style="height:{height}px;">
@@ -184,11 +170,14 @@
     {/each}
 </div>
 <div
-    on:touchstart={touchBoxStart}
-    on:touchmove|preventDefault={debounce(touchBoxMove)}
-    on:touchend={debounce(touchBoxEnd, 15)}
+    on:pointerdown={touchBoxStart}
+    on:pointermove={debounce(touchBoxMove, 5)}
+    on:pointerup={debounce(touchBoxEnd, 15)}
     bind:clientHeight={barHeight}
-    class={`fixed right-5 bg-black/5 dark:bg-white/5 w-7 p-1 flex flex-col justify-around ${radiusObj[radius] || radiusObj.base}`}
+    bind:this={barDom}
+    class={`fixed right-5 bg-black/5 dark:bg-white/5 w-7 p-1 flex flex-col justify-around touch-none cursor-move select-none ${
+        radiusObj[radius] || radiusObj.base
+    }`}
     style="top:{top + (height - barHeight) / 2}px;min-height:{height / 4}px;"
 >
     {#each data as group, i}

diff --git a/components/src/scrollRadio/ScrollRadio.svelte b/components/src/scrollRadio/ScrollRadio.svelte
@@ -110,9 +110,10 @@
         class={`overflow-auto snap-y picker-contents ${useAnimation ? 'scroll-smooth' : 'scroll-auto'}`}
         style="height:{itemHeight * showRowsInner}rem;"
         bind:this={scrollElement}
-        on:touchstart={() => {
+        on:scroll={() => {
             isTouch = true;
         }}
+
     >
         {#each newData as item}
             <div