Touchgesten implementiert

public/js/app.js

@@ -3099,10 +3099,48 @@ class ScaleHelper {
 }
 
 class ParentSegment extends Segment {
+    static initListener(){
+        window.addEventListener("mousedown", (e) => {
+            ParentSegment.mouseDownTarget = e.originalTarget;
+        });
+        window.addEventListener("mouseup", (e) => {
+            ParentSegment.mouseDownTarget = null;
+        });
+
+        window.addEventListener("touchstart", (e) => {
+            console.log("start", e);
+            if (e.targetTouches.length === 1)
+            {
+                ParentSegment.mouseDownTarget = e.targetTouches[0].target;
+            }
+        });
+        window.addEventListener("touchend", (e) => {
+            console.log("end", e);
+            ParentSegment.mouseDownTarget = null;
+        });
+    }
+
     constructor(element) {
         super(element);
         this.children = [];
         this.class = "rotate-0";
+
+        let self = this;
+        this.touchendListener = function(e){
+            if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY)))
+            {
+                console.log(e);
+                self.rotate();
+                e.stopPropagation();
+            }
+        };
+        this.mouseupListener = function(e){
+            if (ParentSegment.mouseDownTarget !== null && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(e.originalTarget))
+            {
+                self.rotate();
+                e.stopPropagation();
+            }
+        };
     }
 
     async rotate() {
@@ -3197,12 +3235,16 @@ class ParentSegment extends Segment {
         childContainer.removeAllChildren();
 
         this._updateRotationClass();
+        // this.element.onclick = function (e) {
+            // self.rotate();
+            // e.stopPropagation();
+        // };
 
-        const self = this;
+        this.element.removeEventListener("mouseup",this.mouseupListener);
-        this.element.onclick = function (e) {
+        this.element.removeEventListener("touchend",this.touchendListener);
-            self.rotate();
+
-            e.stopPropagation();
+        this.element.addEventListener("mouseup", this.mouseupListener);
-        };
+        this.element.addEventListener("touchend", this.touchendListener);
 
         for (let i = 0, n = this.children.length; i < n; i++) {
             this.children[i]._updateElement();
@@ -3213,6 +3255,7 @@ class ParentSegment extends Segment {
         }
     }
 }
+ParentSegment.initListener();
 
 class LeafSegment extends Segment {
 

src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js

@@ -2,10 +2,48 @@ import {Segment} from "./Segment";
 import {DelayPromise} from "../../../../../../js/lib/pwa-assets";
 
 export class ParentSegment extends Segment {
+    static initListener(){
+        window.addEventListener("mousedown", (e) => {
+            ParentSegment.mouseDownTarget = e.originalTarget;
+        });
+        window.addEventListener("mouseup", (e) => {
+            ParentSegment.mouseDownTarget = null;
+        });
+
+        window.addEventListener("touchstart", (e) => {
+            console.log("start", e);
+            if (e.targetTouches.length === 1)
+            {
+                ParentSegment.mouseDownTarget = e.targetTouches[0].target;
+            }
+        });
+        window.addEventListener("touchend", (e) => {
+            console.log("end", e);
+            ParentSegment.mouseDownTarget = null;
+        });
+    }
+
     constructor(element) {
         super(element);
         this.children = [];
         this.class = "rotate-0";
+
+        let self = this;
+        this.touchendListener = function(e){
+            if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY)))
+            {
+                console.log(e);
+                self.rotate();
+                e.stopPropagation();
+            }
+        };
+        this.mouseupListener = function(e){
+            if (ParentSegment.mouseDownTarget !== null && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(e.originalTarget))
+            {
+                self.rotate();
+                e.stopPropagation();
+            }
+        };
     }
 
     async rotate() {
@@ -102,10 +140,16 @@ export class ParentSegment extends Segment {
         this._updateRotationClass();
 
         const self = this;
-        this.element.onclick = function (e) {
+        // this.element.onclick = function (e) {
-            self.rotate();
+            // self.rotate();
-            e.stopPropagation();
+            // e.stopPropagation();
-        };
+        // };
+
+        this.element.removeEventListener("mouseup",this.mouseupListener);
+        this.element.removeEventListener("touchend",this.touchendListener);
+
+        this.element.addEventListener("mouseup", this.mouseupListener);
+        this.element.addEventListener("touchend", this.touchendListener);
 
         for (let i = 0, n = this.children.length; i < n; i++) {
             this.children[i]._updateElement();
@@ -115,4 +159,5 @@ export class ParentSegment extends Segment {
             }
         }
     }
-}
+}
+ParentSegment.initListener();

src/scss/wordRotator.scss

@@ -93,9 +93,11 @@ $animationDuration: 0.25s;
 }
 
 #level {
+  user-select: none;
   white-space: nowrap;
   transition: none;
   max-width: 100%;
+  -webkit-tap-highlight-color: rgba(255,255,255,0);
   //width: 100%;
 
   * {