From 2ce432034eb35f763182de03fb7b42d2a07afc4b Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Tue, 15 Sep 2020 20:03:52 -0400 Subject: Webcards update from local git server --- webcards/scripts/cards/card.js | 123 +++++++++++++++------------- webcards/scripts/cards/deck.js | 180 ++++++++++++++++++++++++----------------- webcards/scripts/cards/drag.js | 111 ++++++++++++++++--------- 3 files changed, 241 insertions(+), 173 deletions(-) (limited to 'webcards/scripts/cards') diff --git a/webcards/scripts/cards/card.js b/webcards/scripts/cards/card.js index 932a22c..750d124 100644 --- a/webcards/scripts/cards/card.js +++ b/webcards/scripts/cards/card.js @@ -1,103 +1,110 @@ +'use strict'; + +// Possible positions of content in a card const CardPos = ["top", "topl", "topr", "mid", "midt", "midb", "bot", "botl", "botr", "all"]; // Card class represents one card. // Every card should have a deck. // Use deck.appendCard or deck.prependCard to make a card visible -function Card (data) { - this.e = document.createElement("card"); - this.generateElements(data); - this.e.style.left = "0px"; - this.e.style.top = "0px"; -} - -// Internal -Card.prototype = { - // Main generation func, only for use in contructor - generateElements: function (data) { - while(this.e.firstElementChild != null) - this.e.firstElementChild.remove(); - - switch (typeof data) { - case "object": - this.generateObjectCard(data, this.e); - break; - case "string": - this.generateBasicCard(data, this.e); - break; - default: - this.generateErrorCard(this.e); - } - }, +class Card { + constructor (data) + { + this.e = document.createElement("card"); + this.generateElements(data); + this.e.style.left = "0px"; + this.e.style.top = "0px"; + } // Generate a card with basic text only - generateBasicCard: function (data, el) { + static generateBasicCard (data, el) + { let t = document.createElement("carea"); t.className = "mid"; t.innerText = data; el.appendChild(t); - }, - - // Generate a card with rich visuals - generateObjectCard: function (data, el) { - - // Check for an asset URL - if (typeof data.assetURL != "string") { - data.assetURL = ""; - } - - // Set card styles - for (let i in data.style) { - el.style[i] = data.style[i]; - } + } - // Generate card areas. - for (let i in CardPos) { - if (typeof data[CardPos[i]] == "object") - el.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL)); - } - }, + // Generate a card with a simple error message. + static generateErrorCard (el) + { + Card.generateBasicCard("Card Error: data", el); + } - generateCArea: function (data, carea, assetURL) { + // Generate an area of a card + static generateCArea (data, carea, assetURL) + { // Create and set area let area = document.createElement("carea"); area.className = carea; // Create inner area text and images - for (let i in data) { + for (let i in data) + { if (i == "style") + { for (j in data.style) area.style[j] = data.style[j]; + } - if (data[i].type == "text") { + if (data[i].type == "text") + { let e = document.createElement("ctext"); e.innerText = data[i].text; - for (let j in data[i].style) { + for (let j in data[i].style) e.style[j] = data[i].style[j]; - } area.appendChild(e); - } else if (data[i].type == "image") { + } + else if (data[i].type == "image") + { let e = document.createElement("cimage"); e.style.backgroundImage = "url(\"" + assetURL + data[i].image + "\")"; + for (let j in data[i].style) + e.style[j] = data[i].style[j]; + area.appendChild(e); } } return area; - }, + } + + // Generate a card with rich visuals + static generateObjectCard (data, el) + { + // Generate card areas. + for (let i in CardPos) + { + if (typeof data[CardPos[i]] == "object") + el.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL)); + } + } - generateErrorCard: function(el) + generateElements (data) { - this.generateBasicCard("Card Error: data", el); - }, + while(this.e.firstElementChild != null) + this.e.firstElementChild.remove(); - setPos: function(p) + switch (typeof data) + { + case "object": + Card.generateObjectCard(data, this.e); + break; + case "string": + Card.generateBasicCard(data, this.e); + break; + default: + Card.generateErrorCard(this.e); + } + } + + setPos (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 a02142d..6da24b0 100644 --- a/webcards/scripts/cards/deck.js +++ b/webcards/scripts/cards/deck.js @@ -1,67 +1,87 @@ +'use strict'; + // Deck class represents multiple cards. // Can be arranged in multiple ways. -function Deck (options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]}){ - this.cards = []; - - // View mode - // infdraw - infinite draw. always appears as if there are multiple cards - // stack - stack mode - // strip - // horizontal - // left (strip-hl) - // right (strip-hr) - // vertical - // up (strip-vu) - // down (strip-vd) - this.inf = options.mode == "infdraw"; - - // Select mode - controls what other cards are selected when one card is selected - // above - selectes cards above the selected one - // below - selects cards below the selected one - // around - selects cards above and below - // one - selects only card chosen - // all - selects all cards when card selected - this.smode = options.smode; - - // Select count (negative defaults to 0) - // above - controls number of cards above clicked are selected - // below - controls number of cards below clicked are selected - // around - // number - number above and below selected - // array - [first number: number above selected] [second number: number below selected] - // one - no effect - // all - no effect - this.sct = options.sct > 0 ? options.sct : 0; +// Decks work as FIFO +class Deck { - // Position - // array of where the deck is centered - this.x = options.pos[0]; - this.y = options.pos[1]; - - this.e = document.createElement("deck"); - this.e.style.left = this.x + "px"; - this.e.style.top = this.y + "px"; - this.e.setAttribute("mode", options.mode); -} + cards = []; + inf = false; + smode = ""; + sct = 0; + x = 0; + y = 0; + e = null; + + constructor(options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]}) + { + // View mode + // infdraw - infinite draw. always appears as if there are multiple cards + // stack - stack mode + // strip + // horizontal + // left (strip-hl) + // right (strip-hr) + // vertical + // up (strip-vu) + // down (strip-vd) + this.inf = options.mode == "infdraw"; + + // Select mode - controls what other cards are selected when one card is selected + // above - selectes cards above the selected one + // below - selects cards below the selected one + // around - selects cards above and below + // one - selects only card chosen + // all - selects all cards when card selected + this.smode = options.smode; + + // Select count (negative defaults to 0) + // above - controls number of cards above clicked are selected + // below - controls number of cards below clicked are selected + // around + // number - number above and below selected + // array - [first number: number above selected] [second number: number below selected] + // one - no effect + // all - no effect + this.sct = options.sct > 0 ? options.sct : 0; + + // Position + // array of where the deck is centered + this.x = options.pos[0]; + this.y = options.pos[1]; + + this.e = document.createElement("deck"); + this.e.style.left = this.x + "px"; + this.e.style.top = this.y + "px"; + this.e.setAttribute("mode", options.mode); + } -//Decks work as FIFO -Deck.prototype = { - // Add a card to the front of the deck - appendCard: function(card) { + updatePos() + { + let len = this.cards.length - 1; + for(let i in this.cards) + this.cards[i].setPos(len-i); + this.updateCount(); + } + + appendCard(card) + { this.cards.push(card); this.e.appendChild(card.e); this.updatePos(); - }, + + } - // Add a card to the back of the deck - prependCard: function(card) { + prependCard(card) + { this.cards.unshift(card); this.e.prepend(card.e); card.setPos(this.cards.length - 1); - }, + this.updateCount(); + } - // Add a card at the index specified - addCardAt: function(card, index) { + addCardAt(card, index) + { if(index < 0 || index > this.cards.length) return @@ -74,11 +94,12 @@ Deck.prototype = { temp[temp.length - 1].e.after(card.e); temp.push(card); this.cards.unshift(...temp); + this.updatePos(); } - }, + } - // Swap the cards at the specified indexes - swapCard: function(index1, index2) { + swapCards(index1, index2) + { if(index1 < 0 || index1 >= this.cards.length || index2 < 0 || index2 >= this.cards.length) return @@ -88,31 +109,38 @@ Deck.prototype = { this.cards[index1 - 1].e.after(this.cards[index1]); this.cards[index2 - 1].e.after(this.cards[index2]); - }, - - // Remove the card at the front of the deck (index length - 1), returns the card removed (if any) - removeFront: function() { - return this.removeCard(this.cards.length - 1); - }, - - // Remove the card at the back of the deck (index 0), returns the card removed (if any) - removeBack: function() { - return this.removeCard(0); - }, - - // Remove a card from the deck, returning the card element - removeCard: function(index) { + } + removeCard(index) + { if(index < 0 || index >= this.cards.length) return this.e.removeChild(this.cards[index].e); - return this.cards.splice(index, 1)[0]; - }, + let c = 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); + this.updatePos(); + return c; + } + + removeFront() + { + return this.removeCard(this.cards.length - 1); + } + + removeBack() + { + return this.removeCard(0); } -}; \ No newline at end of file + + updateCount () + { + this.e.style.setProperty("--ccount", this.cards.length - 1); + } + + isInside(x, y) + { + var rect = this.e.getBoundingClientRect(); + return (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom) + } +} diff --git a/webcards/scripts/cards/drag.js b/webcards/scripts/cards/drag.js index 54fb797..3b02eff 100644 --- a/webcards/scripts/cards/drag.js +++ b/webcards/scripts/cards/drag.js @@ -1,17 +1,23 @@ -function MultiDrag() { - this.del = false; - this.drag = []; - window.addEventListener("mousemove", this.update.bind(this)); - document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this)); -} +'use strict'; -MultiDrag.prototype = { - addDragEl: function(el, ox, oy, px, py, pt) { +class MultiDrag extends EventTarget { + del = false; + drag = []; + cbs = []; + + constructor() { + super(); + + window.addEventListener("mousemove", this.update.bind(this)); + document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this)); + } + + addDragEl(el, ox, oy, px, py, pt) { if(this.del) return; - + el.style.transitionDuration = "0.04s"; - + this.drag.push({ e: el, osx: ox, @@ -20,76 +26,103 @@ MultiDrag.prototype = { pry: py, ptd: pt }); - + return this.drag.length - 1; - }, + } - dragging: function(e) { + dragging(e) { for(let i in this.drag) { if(this.drag[i].e == e) return true; } return false; - }, + } - startDragging: function(e) { + startDragging(e) { if(this.del) return; - + console.log(e); - + if(e.button != 0) return; - - let pos - if(e.target.parentElement != null) - pos = e.target.parentElement.getBoundingClientRect(); - else - pos = e.target.getBoundingClientRect(); + + this.dispatchEvent(new Event("dragstart", {target: e.target})); return this.addDragEl( e.target, - e.pageX, - e.pageY, + e.pageX - parseInt(e.target.style.left), + e.pageY - parseInt(e.target.style.top), e.target.style.left, e.target.style.top, e.target.style.transitionDuration ); - }, - - stopDragging: function(i) { + } + + stopDragging(i) { + if(this.del) + return; + this.del = true; - + if (i < 0 || i >= this.drag.length) return; + var cap = {target: null, x: 0, y: 0}; + this.drag[i].e.style.transitionDuration = this.drag[i].ptd; + + cap.x = parseInt(this.drag[i].e.style.left); this.drag[i].e.style.left = this.drag[i].prx; + + cap.y = parseInt(this.drag[i].e.style.top); this.drag[i].e.style.top = this.drag[i].pry; + + cap.target = this.drag.splice(i, 1).e; + + this.del = false; - this.drag.splice(i, 1); + this.dispatchEvent(new Event("dragstop", cap)); + } - this.del = false; - }, + stopDraggingEl(el) { + for(let d of this.drag) { + if(d.e === el) + this.stopDragging(this.drag.indexOf(d)); + } + } - stopDraggingAll: function() { + stopDraggingAll() { + if(this.del) + return; + this.del = true; - + while (this.drag.length > 0) { this.drag[0].e.style.transitionDuration = this.drag[0].ptd; this.drag[0].e.style.left = this.drag[0].prx; this.drag[0].e.style.top = this.drag[0].pry; - + this.drag.shift(); } - + this.del = false; - }, - update: function(e) { + this.dispatchEvent(new Event("dragstopall")); + } + + update(e) { for (let i = 0; i < this.drag.length && !this.del; i++) { 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 + + addTarget(e) { + e.addEventListener("mousedown", this.startDragging.bind(this)); + e.addEventListener("mouseup", this.stopDraggingEl.apply(this, [e])) + } + + removeTarget (e) { + } +} \ No newline at end of file -- cgit v1.2.3