From 20201f77b5cf5cbb1c70b1cc51c4108d620a3202 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Sun, 17 May 2020 20:31:10 -0400 Subject: [Webcards] styles and some fixes + Fixed draging transformed cards + Fixed mobile styles + Theme template complete --- webcards/scripts/cards/card.js | 5 +++++ webcards/scripts/cards/deck.js | 9 +++++++++ webcards/scripts/cards/drag.js | 36 ++++++++++++++++++++++++------------ 3 files changed, 38 insertions(+), 12 deletions(-) (limited to 'webcards/scripts/cards') diff --git a/webcards/scripts/cards/card.js b/webcards/scripts/cards/card.js index 0f045fe..932a22c 100644 --- a/webcards/scripts/cards/card.js +++ b/webcards/scripts/cards/card.js @@ -94,5 +94,10 @@ Card.prototype = { generateErrorCard: function(el) { this.generateBasicCard("Card Error: data", el); + }, + + setPos: function(p) + { + this.e.style.setProperty("--cpos", p); } }; \ No newline at end of file diff --git a/webcards/scripts/cards/deck.js b/webcards/scripts/cards/deck.js index 620a038..a02142d 100644 --- a/webcards/scripts/cards/deck.js +++ b/webcards/scripts/cards/deck.js @@ -44,17 +44,20 @@ function Deck (options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]}){ this.e.setAttribute("mode", options.mode); } +//Decks work as FIFO Deck.prototype = { // Add a card to the front of the deck appendCard: function(card) { this.cards.push(card); this.e.appendChild(card.e); + this.updatePos(); }, // Add a card to the back of the deck prependCard: function(card) { this.cards.unshift(card); this.e.prepend(card.e); + card.setPos(this.cards.length - 1); }, // Add a card at the index specified @@ -105,5 +108,11 @@ Deck.prototype = { this.e.removeChild(this.cards[index].e); return this.cards.splice(index, 1)[0]; + }, + + updatePos: function() { + let len = this.cards.length - 1; + for(let i in this.cards) + this.cards[i].setPos(len-i); } }; \ No newline at end of file diff --git a/webcards/scripts/cards/drag.js b/webcards/scripts/cards/drag.js index cce1e72..54fb797 100644 --- a/webcards/scripts/cards/drag.js +++ b/webcards/scripts/cards/drag.js @@ -24,24 +24,36 @@ MultiDrag.prototype = { return this.drag.length - 1; }, - startDragging: function(mevent) { + dragging: function(e) { + for(let i in this.drag) { + if(this.drag[i].e == e) + return true; + } + return false; + }, + + startDragging: function(e) { if(this.del) return; - console.log(mevent); + console.log(e); - if(mevent.button != 0) + if(e.button != 0) return; - let pos = mevent.target.getBoundingClientRect(); + let pos + if(e.target.parentElement != null) + pos = e.target.parentElement.getBoundingClientRect(); + else + pos = e.target.getBoundingClientRect(); return this.addDragEl( - mevent.currentTarget, - mevent.clientX - pos.left, - mevent.clientY - pos.top, - mevent.currentTarget.style.left, - mevent.currentTarget.style.top, - mevent.currentTarget.style.transitionDuration + e.target, + e.pageX, + e.pageY, + e.target.style.left, + e.target.style.top, + e.target.style.transitionDuration ); }, @@ -76,8 +88,8 @@ MultiDrag.prototype = { update: function(e) { for (let i = 0; i < this.drag.length && !this.del; i++) { - this.drag[i].e.style.left = e.clientX - this.drag[i].osx + "px"; - this.drag[i].e.style.top = e.clientY - this.drag[i].osy + "px"; + this.drag[i].e.style.left = e.pageX - this.drag[i].osx + "px"; + this.drag[i].e.style.top = e.pageY - this.drag[i].osy + "px"; } } }; \ No newline at end of file -- cgit v1.2.3