From 1697da112a9b9f529fad2f54c62aecd7bbb614e6 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Fri, 3 Apr 2020 16:44:23 -0400 Subject: [WEBCARDS] Update some webcards stuff --- webcards/scripts/cards/card.js | 97 +++++++++++++++++++++++++++++++++++++ webcards/scripts/cards/deck.js | 106 +++++++++++++++++++++++++++++++++++++++++ webcards/scripts/cards/drag.js | 83 ++++++++++++++++++++++++++++++++ 3 files changed, 286 insertions(+) create mode 100644 webcards/scripts/cards/card.js create mode 100644 webcards/scripts/cards/deck.js create mode 100644 webcards/scripts/cards/drag.js (limited to 'webcards/scripts/cards') diff --git a/webcards/scripts/cards/card.js b/webcards/scripts/cards/card.js new file mode 100644 index 0000000..015995d --- /dev/null +++ b/webcards/scripts/cards/card.js @@ -0,0 +1,97 @@ +var 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 = this.generateElements(data); + this.e.style.left = "0px"; + this.e.style.top = "0px"; +} + +// Internal +Card.prototype = { + // Main generation func + generateElements: function (data) { + switch (typeof data) { + case "object": + return this.generateObjectCard(data); + case "string": + return this.generateBasicCard(data); + } + let e = document.createElement("card"); + let t = document.createElement("carea"); + t.className = "mid"; + t.innerText = "Card Error: data"; + e.append(t); + return e; + }, + + // Generate a card with basic text only + generateBasicCard: function (data) { + let e = document.createElement("card"); + let t = document.createElement("carea"); + t.className = "mid"; + t.innerText = data; + e.appendChild(t); + return e; + }, + + // Generate a card with rich visuals + generateObjectCard: function (data) { + let e = document.createElement("card"); + + // Check for an asset URL + if (typeof data.assetURL != "string") { + data.assetURL = ""; + } + + // Set card styles + for (let i in data.style) { + e.style[i] = data.style[i]; + } + + // Generate card areas. + for (let i in CardPos) { + if (typeof data[CardPos[i]] == "object") + e.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL)); + } + + return e; + }, + + generateCArea: function (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) { + if (i == "style") + for (j in data.style) + area.style[j] = data.style[j]; + + if (data[i].type == "text") { + let e = document.createElement("ctext"); + + e.innerText = data[i].text; + + for (let j in data[i].style) { + e.style[j] = data[i].style[j]; + } + + area.appendChild(e); + + } else if (data[i].type == "image") { + let e = document.createElement("cimage"); + + e.style.backgroundImage = "url(\"" + assetURL + data[i].image + "\")"; + + area.appendChild(e); + } + } + + return area; + } + +}; \ No newline at end of file diff --git a/webcards/scripts/cards/deck.js b/webcards/scripts/cards/deck.js new file mode 100644 index 0000000..544a9ef --- /dev/null +++ b/webcards/scripts/cards/deck.js @@ -0,0 +1,106 @@ +// Deck class represents multiple cards. +// Can be arranged in multiple ways. +function Deck (options = {}){ + 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 + // top (strip-vt) + // bottom (strip-vb) + this.mode = options.mode; + + // Select mode + // above + // below + // around + // one + // all + this.smode = options.smode; + + // Select count (-1 = all available) + // 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; + + // Position + // array of where the deck is centered + this.x = options.pos[0]; + this.y = options.pos[1]; + + this.e = document.createElement("deck"); +} + +Deck.prototype = { + // Add a card to the front of the deck + appendCard: function(card) { + this.cards.push(card); + this.e.appendChild(card.e); + }, + + // Add a card to the back of the deck + prependCard: function(card) { + this.cards.unshift(card); + this.e.prepend(card.e); + }, + + // Add a card at the index specified + addCardAt: function(card, index) { + if(index < 0 || index > this.cards.length) + return + + if(index == 0) { + this.prependCard(card); + } else if (index == this.cards.length) { + this.appendCard(card); + } else { + let temp = this.cards.slice(0, index); + temp[temp.length - 1].e.after(card.e); + temp.push(card); + this.cards.unshift(...temp); + } + }, + + // Swap the cards at the specified indexes + swapCard: function(index1, index2) { + if(index1 < 0 || index1 >= this.cards.length || index2 < 0 || index2 >= this.cards.length) + return + + var temp = this.cards[index1] + this.cards[index1] = this.cards[index2]; + this.cards[index2] = temp; + + 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) { + + if(index < 0 || index >= this.cards.length) + return + + this.e.removeChild(this.cards[index].e); + return this.cards.splice(index, 1)[0]; + } +}; \ No newline at end of file diff --git a/webcards/scripts/cards/drag.js b/webcards/scripts/cards/drag.js new file mode 100644 index 0000000..cce1e72 --- /dev/null +++ b/webcards/scripts/cards/drag.js @@ -0,0 +1,83 @@ +function MultiDrag() { + this.del = false; + this.drag = []; + window.addEventListener("mousemove", this.update.bind(this)); + document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this)); +} + +MultiDrag.prototype = { + addDragEl: function(el, ox, oy, px, py, pt) { + if(this.del) + return; + + el.style.transitionDuration = "0.04s"; + + this.drag.push({ + e: el, + osx: ox, + osy: oy, + prx: px, + pry: py, + ptd: pt + }); + + return this.drag.length - 1; + }, + + startDragging: function(mevent) { + if(this.del) + return; + + console.log(mevent); + + if(mevent.button != 0) + return; + + let pos = mevent.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 + ); + }, + + stopDragging: function(i) { + this.del = true; + + if (i < 0 || i >= this.drag.length) + return; + + this.drag[i].e.style.transitionDuration = this.drag[i].ptd; + this.drag[i].e.style.left = this.drag[i].prx; + this.drag[i].e.style.top = this.drag[i].pry; + + this.drag.splice(i, 1); + + this.del = false; + }, + + stopDraggingAll: function() { + 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) { + 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"; + } + } +}; \ No newline at end of file -- cgit v1.2.3