Webcards update from local git server

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