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

Rotationsrichtung in beide Richtungen möglich

Browse Source
This commit is contained in:
silas
2018-09-25 14:48:12 +02:00
parent 35b2f61d00
commit 895cb36fea
10 changed files with 122 additions and 81 deletions
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

56
public/js/app.js
View File

@@ -5022,7 +5022,7 @@ class ParentSegment extends Segment {
});
}
setIsRotatable(rotatable){
setIsRotatable(rotatable) {
this.rotatable = rotatable;
this._updateElement();
}
@@ -5035,18 +5035,18 @@ class ParentSegment extends Segment {
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))) {
self.rotate();
let target = document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains()) {
self.rotate(ParentSegment.mouseDownTarget, target);
e.stopPropagation();
e.preventDefault();
}
};
this.mouseupListener = function (e) {
if (ParentSegment.mouseDownTarget !== null && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(e.target)) {
self.rotate();
self.rotate(ParentSegment.mouseDownTarget, e.target);
e.stopPropagation();
e.preventDefault();
console.log("mouseup", e);
}
};
}
@@ -5055,23 +5055,52 @@ class ParentSegment extends Segment {
return (this.rotatable && !this.getLevel().getHasWon());
}
async rotate() {
async rotate(firstElem, secondElem) {
let timeout = 250;
let rotationDirection = 1;
if (Helper.isNotNull(firstElem) && Helper.isNotNull(secondElem)) {
let firstIndex = -1;
let secondIndex = -1;
let rotationIndexes = [0,1,3,2];
for (let i = 0; i < this.children.length; i++) {
if (this.children[rotationIndexes[i]].element === firstElem || this.children[rotationIndexes[i]].element.contains(firstElem)) {
firstIndex = (i+this.rotation/90)%4;
}
if (this.children[rotationIndexes[i]].element === secondElem || this.children[rotationIndexes[i]].element.contains(secondElem)) {
secondIndex = (i+this.rotation/90)%4;
}
}
if (firstIndex >= 0 && secondIndex >= 0) {
if (firstIndex === 2 && (secondIndex === 0 || secondIndex === 1)
|| firstIndex === 1 && (secondIndex === 0 || secondIndex === 3)
|| (firstIndex === 0 && secondIndex === 3)
|| (firstIndex === 3 && secondIndex === 2)) {
rotationDirection = -1;
}
}
}
if (this.canRotate()) {
this.rotation += 90;
this.rotation += 360 + 90 * rotationDirection;
this.rotation %= 360;
let currentRotation = this.rotation;
this._updateRotationClass();
this.element.classList.add("rotating");
if (rotationDirection === -1){
this.element.classList.add("reverse");
}
let self = this;
let delayPromise = new Promise(function (resolve) {
setTimeout(resolve, timeout);
}).then(() => {
if (self.rotation === currentRotation) {
self.element.classList.remove("rotating");
if (this.rotation === currentRotation) {
this.element.classList.remove("rotating");
this.element.classList.remove("reverse");
}
});
this.getLevel().checkHasWon(delayPromise);
@@ -5094,7 +5123,7 @@ class ParentSegment extends Segment {
applyRotations(rotations) {
this.rotation = rotations[0];
if (isNaN(this.rotation)){
if (isNaN(this.rotation)) {
this.rotation = 0;
}
@@ -5170,7 +5199,7 @@ class ParentSegment extends Segment {
this.element.classList.add("layer-" + layer);
}
if (!this.rotatable){
if (!this.rotatable) {
this.element.classList.add("locked");
}
@@ -6032,7 +6061,7 @@ class MenuSite extends WordRotatorBaseSite {
let randomRotationFunction = () => {
let timeout = Math.random() * 4500 + 1500;
setTimeout(() => {
this.randomRotateTimeout = setTimeout(() => {
let indexBlocked = -1;
let indexesNotRight = [];
for (let i = 0; i < rotationsSegments.length; i++) {
@@ -6117,6 +6146,7 @@ class MenuSite extends WordRotatorBaseSite {
}
onPause(args) {
clearTimeout(this.randomRotateTimeout);
window.removeEventListener("resize", this.listener);
super.onPause(args);
}