summaryrefslogtreecommitdiff
path: root/webcards/scripts/cards
diff options
context:
space:
mode:
Diffstat (limited to 'webcards/scripts/cards')
-rw-r--r--webcards/scripts/cards/card.js123
-rw-r--r--webcards/scripts/cards/deck.js180
-rw-r--r--webcards/scripts/cards/drag.js111
3 files changed, 241 insertions, 173 deletions
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