wip

generator/components/card-boxes.html

@@ -0,0 +1,131 @@
+<template id="card-box">
+    <style>
+        :host {
+            display: inline-block;
+            vertical-align: top;
+        }
+        .box {
+            width: 100%;
+            height: 100%;
+            border: 2px solid;
+            box-sizing: border-box;
+            vertical-align: middle;
+            text-align: center;
+            display: flex;
+            justify-content: center;
+            align-content: center;
+            flex-direction: column;
+        }
+        #box2 {
+            display: flex;
+            justify-content: center;
+            align-content: center;
+            flex-direction: row;
+        }
+        
+    </style>
+    <div class="box">
+        <div id="box2">
+            <content></content>
+        </div>
+    </div>
+</template>
+
+<template id="card-boxes">
+    <style>
+        :host {
+            width: 100%;
+            vertical-align: top;
+        }
+        ::content card-box + card-box {
+            padding-left: 2px;
+        }
+    </style>
+
+    <style id="box-size">
+        ::content card-box {
+            width:2.5em;
+            height:2.5em;
+        }
+    </style>
+
+    <content></content>
+
+</template>
+
+<script>
+    (function (window, document) {
+        var elemName = 'card-box';
+        var mainDoc = document;
+        var importDoc = document.currentScript.ownerDocument;
+
+        var proto = Object.create(HTMLElement.prototype);
+        proto.createdCallback = function () {
+            var template = importDoc.getElementById(elemName);
+            var clone = mainDoc.importNode(template.content, true);
+            var root = this.createShadowRoot();
+            root.appendChild(clone);
+        }
+
+        mainDoc.registerElement(elemName, { prototype: proto });
+
+    })(window, document);
+
+    (function(window, document) {
+        var elemName = 'card-boxes';
+        var mainDoc = document;
+        var importDoc = document.currentScript.ownerDocument;
+
+        function createBoxes(element, count) {
+            while (element.firstChild) {
+                element.removeChild(element.firstChild);
+            }
+            for (var i = 0; i < count; ++i) {
+                element.appendChild(document.createElement("card-box"));
+            }
+        }
+
+        var proto = Object.create(HTMLElement.prototype);
+        Object.defineProperty(proto, "size", {
+            get: function () {
+                return "";
+            },
+            set: function (value) {
+                var root = this.shadowRoot;
+                var style = root.getElementById("box-size");
+                style.innerHTML = "\
+                ::content card-box {\
+                    width:" + value + "em;\
+                    height:" + value + "em;\
+                }\
+                ";
+            }
+        });
+        Object.defineProperty(proto, "count", {
+            get: function () {
+                return "";
+            },
+            set: function (value) {
+                createBoxes(this, value);
+            }
+        });
+        proto.createdCallback = function () {
+            var template = importDoc.getElementById(elemName);
+            var clone = mainDoc.importNode(template.content, true);
+            var root = this.createShadowRoot();
+            root.appendChild(clone);
+
+            this.size = this.getAttribute('size') || "1";
+            this.count = this.getAttribute('count') || "1";
+        }
+        proto.attributeChangedCallback = function (name, oldValue, newValue) {
+            switch (name) {
+                case "size": this.size = newValue; break;
+                case "count": this.count = newValue; break;
+            }
+        }
+
+        mainDoc.registerElement(elemName, { prototype: proto });
+
+    })(window, document);
+</script>

generator/components/card-fill.html

@@ -34,7 +34,7 @@
         }
         proto.attributeChangedCallback = function (name, oldValue, newValue) {
             switch (name) {
-                case "size": this.size = newValue;
+                case "size": this.size = newValue; break;
             }
         }
 

generator/components/card-front.html

@@ -70,6 +70,9 @@
                 ::content card-rule /deep/ svg {\
                     fill: " + value + ";\
                 }\
+                ::content card-boxes /deep/ svg rect {\
+                    stroke: " + value + ";\
+                }\
                 ";
             }
         });
@@ -83,7 +86,7 @@
         }
         proto.attributeChangedCallback = function (name, oldValue, newValue) {
             switch (name) {
-                case "color": this.color = newValue;
+                case "color": this.color = newValue; break;
             }
         }
 

generator/components/card-icon.html

@@ -82,7 +82,7 @@
         }
         proto.attributeChangedCallback = function (name, oldValue, newValue) {
             switch (name) {
-                case "src": this.src = newValue;
+                case "src": this.src = newValue; break;
             }
         }
 

generator/components/card-title.html

@@ -71,7 +71,7 @@
         }
         proto.attributeChangedCallback = function (name, oldValue, newValue) {
             switch (name) {
-                case "size": this.size = newValue;
+                case "size": this.size = newValue; break;
             }
         }