@nil-/doc 0.2.21 → 0.2.22

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nil-/doc
 
+## 0.2.22
+
+### Patch Changes
+
+-   3ce0a62: [doc] support for touch event via pointerevent (draggable container)
+
 ## 0.2.21
 
 ### Patch Changes

package/components/etc/Container.svelte

@@ -18,7 +18,6 @@
         width: 100%;
         height: 100%;
         overflow: hidden;
-        outline: rgb(100, 96, 96) solid 1px;
     }
 
     /* need higher specificity than above */
@@ -29,6 +28,11 @@
         overflow: visible;
         user-select: none;
         grid-area: divider;
+        outline: rgb(100, 96, 96) solid 1px;
+    }
+
+    .container > .divider.moving {
+        outline: rgb(255, 255, 255) solid 1px;
     }
 
     .container > .divider.vertical {
@@ -38,20 +42,22 @@
 
     .container > .divider > .overlay {
         width: 100%;
-        height: 10px;
+        height: 20px;
         cursor: row-resize;
-        translate: translateX(-50%);
+        transform: translateY(-50%);
+        touch-action: none;
     }
 
     .container > .divider.vertical > .overlay {
-        width: 10px;
+        width: 20px;
         height: 100%;
         cursor: col-resize;
-        translate: translateY(-50%);
+        transform: translateX(-50%);
     }
 </style>
 
-<script>import { createDraggable } from "./action";
+<script>import { writable } from "svelte/store";
+import { createDraggable } from "./action";
 // orientation of the layout
 export let vertical = false;
 // initial value where the divider is located
@@ -75,6 +81,7 @@ function update(w, h, limit, value) {
 $: update(width, height, padding, $position);
 $: offsetpx = collapse ? "10px" : `${offset}px`;
 $: style = !secondary ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
+const moving = writable(false);
 </script>
 <div
     class="container"
@@ -90,11 +97,16 @@ $: style = !secondary ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
                 <slot name="primary" />
             {/if}
         </div>
-        <div class="divider" class:vertical>
+        <div class="divider" class:vertical class:moving={$moving}>
             <div
                 class="overlay"
-                use:draggable={{ reset: () => offset, reversed: !secondary, vertical }}
-                on:dblclick={() => (collapse = !collapse)}
+                use:draggable={{
+                    reset: () => offset,
+                    reversed: !secondary,
+                    vertical,
+                    dbltap: () => (collapse = !collapse),
+                    moving
+                }}
             />
         </div>
         <div style:grid-area="secondary">

package/components/etc/action.d.ts

@@ -4,6 +4,8 @@ type Parameter = {
     reset: () => number;
     vertical: boolean;
     reversed: boolean;
+    dbltap?: () => void;
+    moving: Writable<boolean>;
 };
 type Return = {
     position: Writable<number>;

package/components/etc/action.js

@@ -1,43 +1,50 @@
-import { writable } from "svelte/store";
+import { get, writable } from "svelte/store";
 export const createDraggable = (offset) => {
     const position = writable(offset);
     function draggable(div, parameter) {
+        let tm = new Date().getTime();
         let param = parameter ?? { reset: () => 0, vertical: true, reversed: false };
-        let moving = false;
         position.set(param.reset());
         let current_page = 0;
+        function disengage() {
+            param.moving.set(false);
+        }
+        function checkDoubleTap() {
+            const tm2 = new Date().getTime();
+            const diff = tm2 - tm;
+            tm = tm2;
+            return diff < 200;
+        }
         function engage(e) {
-            moving = true;
+            if (checkDoubleTap()) {
+                param?.dbltap?.();
+                disengage();
+                return;
+            }
+            param.moving.set(true);
             position.set(param.reset());
             current_page = param.vertical ? e.pageX : e.pageY;
         }
-        function disengage() {
-            moving = false;
-        }
         function move(e) {
-            if (moving) {
+            if (get(param.moving)) {
                 const page = param.vertical ? e.pageX : e.pageY;
                 position.update((v) => v + (page - current_page) * (param.reversed ? -1 : 1));
                 current_page = page;
             }
         }
-        div.addEventListener("mousedown", engage);
-        document.addEventListener("mouseup", disengage);
-        document.addEventListener("mousemove", move);
-        document.addEventListener("dblclick", disengage);
+        div.addEventListener("pointerdown", engage);
+        window.addEventListener("pointerup", disengage);
+        window.addEventListener("pointercancel", disengage);
+        window.addEventListener("pointermove", move);
         return {
             update: (parameter) => {
-                if (param.reversed !== parameter.reversed ||
-                    param.vertical !== parameter.vertical) {
-                    moving = false;
-                }
                 param = parameter;
             },
             destroy: () => {
-                div.removeEventListener("mousedown", engage);
-                document.removeEventListener("mouseup", disengage);
-                document.removeEventListener("mousemove", move);
-                document.removeEventListener("dblclick", disengage);
+                div.removeEventListener("pointerdown", engage);
+                window.removeEventListener("pointerup", disengage);
+                window.removeEventListener("pointercancel", disengage);
+                window.removeEventListener("pointermove", move);
             }
         };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"