From 1fd40d997854e0f23c22ef7d06c0a0a0e5140d89 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Thu, 25 Aug 2022 16:10:17 -0400 Subject: Touch support --- scripts/cards/card.js | 4 ++ scripts/cards/deck.js | 18 +++++- scripts/cards/drag.js | 166 +++++++++++++++++++++++--------------------------- 3 files changed, 95 insertions(+), 93 deletions(-) diff --git a/scripts/cards/card.js b/scripts/cards/card.js index 69312e9..e49aeba 100644 --- a/scripts/cards/card.js +++ b/scripts/cards/card.js @@ -15,6 +15,10 @@ class Card { this.e.style.setProperty("--top", "0px"); this.e.card = this; + this.getData = () => { + return data; + }; + this.id = id; this.deck = deck; } diff --git a/scripts/cards/deck.js b/scripts/cards/deck.js index f42c896..4f7109d 100644 --- a/scripts/cards/deck.js +++ b/scripts/cards/deck.js @@ -25,7 +25,10 @@ class Deck { // vertical // up (strip-vu) // down (strip-vd) - this.inf = options.mode == "infdraw"; + this.inf = options.mode == "inf"; + if (this.inf) { + options.mode = "stack"; + } // Select mode - controls what other cards are selected when one card is selected // above - selectes cards above the selected one @@ -73,8 +76,13 @@ class Deck { appendCard(card) { if(this.inf) { - return false; + if (this.base == null) { + this.base = card.getData(); + } else { + + } } + this.cards.push(card); this.e.appendChild(card.e); card.deck = this.getID(); @@ -166,7 +174,11 @@ class Deck { updateCount () { - this.e.style.setProperty("--ccount", this.cards.length - 1); + if (this.cards.length <= 0) { + this.e.style.setProperty("--ccount", 0); + } else { + this.e.style.setProperty("--ccount", this.cards.length - 1); + } let cb = this.e.getBoundingClientRect(); diff --git a/scripts/cards/drag.js b/scripts/cards/drag.js index 0805556..d826262 100644 --- a/scripts/cards/drag.js +++ b/scripts/cards/drag.js @@ -1,26 +1,27 @@ 'use strict'; class MultiDrag extends EventTarget { - del = false; - drag = []; - mouse = [null, null]; + drag = { + mouse: [] + }; constructor(root, ret = false) { super(); window.addEventListener("mousemove", this.update.bind(this)); - window.addEventListener("mouseup", this.stopDraggingAll.bind(this)); - document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this)); + window.addEventListener("touchmove", this.update.bind(this)); - //window.addEventListener("touchend", this.stopDraggingAll.bind(this)); - //window.addEventListener("touchcancel", this.stopDraggingAll.bind(this)); + window.addEventListener("mouseup", this.stopDragging.bind(this, "mouse")); + document.body.addEventListener("mouseleave", this.stopDragging.bind(this, "mouse")); + window.addEventListener("touchend", ((e) => {this.stopDragging(e.changedTouches[0].identifier)}).bind(this)); + window.addEventListener("touchcancel", ((e) => {this.stopDragging(e.changedTouches[0].identifier)}).bind(this)); this.root = root; this.ret = ret; this.transform = ()=>{return [0.0, 1.0];}; } - addDragEl(el, px, py) { + addDragEl(el, px, py, group = "mouse") { if(this.del) return; @@ -42,7 +43,11 @@ class MultiDrag extends EventTarget { el.style.setProperty("--irot", t[0]); el.style.setProperty("--iscale", t[1]); - this.drag.push(push); + if (typeof this.drag[group] == "undefined") + this.drag[group] = [push]; + else + this.drag[group].push(push); + return push; } @@ -56,112 +61,93 @@ class MultiDrag extends EventTarget { } startDragging(e) { - if(this.del) - return; - - console.log(e); - - if(e.button != 0) - return; - let cap = new Event("dragstart"); - - cap.drag = this.addDragEl(e.target, e.pageX, e.pageY); + + if(e.type == "touchstart") { + let ct = e.changedTouches[0]; + cap.drag = this.addDragEl(e.target, ct.pageX, ct.pageY, ct.identifier); + } else { + if(e.button != 0) + return; + cap.drag = this.addDragEl(e.target, e.pageX, e.pageY); + } this.dispatchEvent(cap); } - stopDragging(i) { - if(this.del) - return; - - this.del = true; - - if (i < 0 || i >= this.drag.length) + stopDragging(group) { + if (typeof this.drag[group] == "undefined" || this.drag[group].length == 0) return; let cap = new Event("dragstop"); - cap.x = this.mouse[0]; - cap.y = this.mouse[1]; + cap.drag = this.drag[group]; + if (group != "mouse") + delete this.drag[group]; + else + this.drag.mouse = []; - this.drag[i].e.className = ""; - - if(this.ret) { - this.drag[i].e.style.setProperty("--left", "0px"); - this.drag[i].e.style.setProperty("--top", "0px"); - this.drag[i].ep.appendChild(this.drag[i].e); + for (let i of cap.drag) { + i.e.className = ""; + if (this.ret) { + i.e.style.setProperty("--left", ""); + i.e.style.setProperty("--right", ""); + i.ep.appendChild(i.e); + } } - - cap.drag = this.drag.splice(i, 1); - - this.del = false; + + let rect = cap.drag[0].e.getBoundingClientRect(); + cap.x = (rect.left - cap.drag[0].ex) + cap.drag[0].px; + cap.y = (rect.top - cap.drag[0].ey) + cap.drag[0].py; this.dispatchEvent(cap); } - stopDraggingEl(el) { - for(let d of this.drag) { - if(d.e === el) - this.stopDragging(this.drag.indexOf(d)); - } - } - stopDraggingAll() { - if(this.del) - return; - - this.del = true; - - let cap = new Event("dragstop"); - - cap.x = this.mouse[0]; - cap.y = this.mouse[1]; - - cap.drag = []; - - while (this.drag.length > 0) { - this.drag[0].e.style.transitionDuration = this.drag[0].ptd; - - if(this.ret) { - this.drag[0].e.style.setProperty("--left", "0px"); - this.drag[0].e.style.setProperty("--top", "0px"); - this.drag[0].ep.appendChild(this.drag[0].e); - } - - cap.drag.push(this.drag.shift()); + for(let i in this.drag) { + this.stopDragging(i); } - - this.del = false; - - this.dispatchEvent(cap); } update(e) { - if(this.drag.length == 0) - return; - - this.mouse[0] = e.pageX; - this.mouse[1] = e.pageY; - let t = this.transform(this.mouse[0], this.mouse[1]); - - for (let i = 0; i < this.drag.length && !this.del; i++) { - let d = this.drag[i]; - d.e.style.setProperty("--left", (e.pageX - d.px) + d.ex + "px"); - d.e.style.setProperty("--top", (e.pageY - d.py) + d.ey + "px"); - d.e.style.setProperty("--irot", t[0]); - d.e.style.setProperty("--iscale", t[1]); + console.log(e); + if(e.type == "touchmove") { + for (let t of e.changedTouches) { + + let id = t.identifier; + + if (typeof this.drag[id] !== "undefined" && this.drag[id].length > 0) { + let tr = this.transform(t.pageX, t.pageY); + + for (let i = 0; i < this.drag[id].length; i++) { + let d = this.drag[id][i]; + d.e.style.setProperty("--left", (t.pageX - d.px) + d.ex + "px"); + d.e.style.setProperty("--top", (t.pageY - d.py) + d.ey + "px"); + d.e.style.setProperty("--irot", tr[0]); + d.e.style.setProperty("--iscale", tr[1]); + } + } + } + } else if (this.drag.mouse.length > 0) { + let t = this.transform(e.pageX, e.pageY); + + for (let i = 0; i < this.drag.mouse.length; i++) { + let d = this.drag.mouse[i]; + d.e.style.setProperty("--left", (e.pageX - d.px) + d.ex + "px"); + d.e.style.setProperty("--top", (e.pageY - d.py) + d.ey + "px"); + d.e.style.setProperty("--irot", t[0]); + d.e.style.setProperty("--iscale", t[1]); + } } } addTarget(e) { - e.d1 = this.startDragging.bind(this); - //e.d2 = this.startTouchDrag.bind(this); - e.addEventListener("mousedown", e.d1); - //e.addEventListener("touchstart", e.d2); + e.d = this.startDragging.bind(this) + e.addEventListener("mousedown", e.d); + e.addEventListener("touchstart", e.d); } removeTarget (e) { - e.removeEventListener("mousedown", e.d1); - e.removeEventListener("touchstart", e.d2); + e.removeEventListener("mousedown", e.d); + e.removeEventListener("touchstart", e.d); } } \ No newline at end of file -- cgit v1.2.3