Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Touchgesten implementiert

Browse Source
This commit is contained in:
silas 2018-07-07 00:14:22 +02:00
parent 9862131e77
commit 50783c6ff2
4 changed files with 101 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/wordRotator.css
View File

File diff suppressed because one or more lines are too long

53
public/js/app.js
View File

@ -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.onclick = function (e) {
self.rotate();
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();
@ -3213,6 +3255,7 @@ class ParentSegment extends Segment {
}
}
}
ParentSegment.initListener();
class LeafSegment extends Segment {

55
src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
View File

@ -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) {
self.rotate();
e.stopPropagation();
};
// this.element.onclick = function (e) {
// self.rotate();
// 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();

2
src/scss/wordRotator.scss
View File

@ -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%;
* {