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 ++++++++++++++++++++++------------------- 1 file changed, 65 insertions(+), 58 deletions(-) (limited to 'webcards/scripts/cards/card.js') 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 +} -- cgit v1.2.3