summaryrefslogtreecommitdiff
path: root/webcards/scripts/cards/card.js
diff options
context:
space:
mode:
Diffstat (limited to 'webcards/scripts/cards/card.js')
-rw-r--r--webcards/scripts/cards/card.js123
1 files changed, 65 insertions, 58 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
+}