enigmatic 0.9.13 → 0.9.14

package/index.css

@@ -1,9 +1,28 @@
 body {
-    display: grid;
     font-family: Roboto, Helvetica, sans-serif;
     margin: 0;
 }
 
+.grid {
+    display: grid;
+    grid-template-columns: var(--cols);
+    grid-template-rows: var(--rows);
+}
+
+.single-center {
+    place-items: center;
+    height: 100vh;
+}
+
+.grail {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-rows: 1fr 7fr 1fr;
+}
+
+.span {
+    grid-column: span var(--span);
+}
+
 .right {
     float: right;
 }
@@ -12,9 +31,9 @@ body {
     float: left;
 }
 
-
 .center {
     place-items: center;
+    text-align: center;
 }
 
 @font-face {
@@ -89,71 +108,11 @@ body {
     bottom: 0;
 }
 
-footer {
-    position: fixed;
-    bottom: 0;
-    margin: 10px;
-    display: flex;
-}
-
-header {
-    position: fixed;
-    top: 0;
-    margin: 10px;
-    display: flex;
-}
-
-.grid {
-    display: grid;
-}
-
-.threebythree {
-    grid-template: repeat(3, 1fr) / repeat(3, 1fr)
-}
-
-.threerow {
-    grid-template-rows: 2fr 16fr 1fr;
-}
-
-.grail {
-    grid-template-columns: 1fr 4fr 1fr;
-    grid-template-rows: 1fr 7fr 1fr;
-}
-
-.span-2 {
-    grid-column: span 2;
-}
-
-.span-3 {
-    grid-column: span 3;
-}
-
-.span-4 {
-    grid-column: span 4;
-}
-
-.span-5 {
-    grid-column: span 5;
-}
-
-.span-6 {
-    grid-column: span 6;
-}
-
-.flat {
-    border: 0;
-    outline-width: 0
-}
-
 .fill {
     height: 100vh;
     width: 100wh;
 }
 
-.border {
-    border: 1px solid black
-}
-
 .roboto {
     font-family: 'Roboto', sans-serif;
 }
@@ -166,29 +125,19 @@ a {
     box-shadow: 6px 6px 6px #dbdbdb
 }
 
-.loading {
-    border: 4px solid #dbdbdb;
-    border-radius: 50%;
-    border-top: 6px solid #000000;
-    width: 10px;
-    height: 10px;
-    -webkit-animation: spin 1s linear infinite;
-    animation: spin 1s linear infinite;
-}
-
 .cursor {
-    cursor: default
+    cursor: default;
 }
 
-navy, .bg-navy {
+.bg-navy {
     background-color: #001f3f
 }
 
-blue, .bg-blue {
+.bg-blue {
     background-color: #0074d9
 }
 
-aqua, .bg-aqua {
+.bg-aqua {
     background-color: #7fdbff
 }
 
@@ -196,27 +145,27 @@ aqua, .bg-aqua {
     background-color: #2ecc40
 }
 
-yellow, .bg-yellow {
+.bg-yellow {
     background-color: #ffdc00
 }
 
-orange, .bg-orange {
+.bg-orange {
     background-color: #ff851b
 }
 
-red, .bg-red {
+.bg-red {
     background-color: #ff4136
 }
 
-white, .bg-white {
+.bg-white {
     background-color: #fff
 }
 
-gray, .bg-gray {
+.bg-gray {
     background-color: #aaa
 }
 
-black, .bg-black {
+.bg-black {
     background-color: #111
 }
 
@@ -236,10 +185,6 @@ black, .bg-black {
     color: #2ecc40
 }
 
-.lime {
-    color: #01ff70
-}
-
 .yellow {
     color: #ffdc00
 }
@@ -252,10 +197,6 @@ black, .bg-black {
     color: #ff4136
 }
 
-.fuchsia {
-    color: #f012be
-}
-
 .purple {
     color: #b10dc9
 }
@@ -265,7 +206,7 @@ black, .bg-black {
 }
 
 .white {
-    color: #fff !important
+    color: #fff;
 }
 
 .silver {
@@ -304,14 +245,6 @@ black, .bg-black {
     padding: 15px
 }
 
-.border {
-    border: 6px solid #eee;
-}
-
-.front {
-    z-index: 100
-}
-
 img {
     max-width: 100%;
     height: auto
@@ -438,6 +371,13 @@ li:hover {
     cursor: pointer;
 }
 
-.horizontal {
+.flex {
     display: flex;
+}
+
+.round {
+    vertical-align: middle;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
 }

package/index.js

@@ -1,3 +1,4 @@
+// e-e
 window.$ = document.querySelector.bind(document)
 window.$$ = document.querySelectorAll.bind(document)
 window.body = document.body
@@ -23,18 +24,16 @@ window.loadCSS = src => {
 
 class Data {
     _ = {}
-    set (name, value) { 
+    set (name= new Error('data.set() needs a name'), value) { 
         this._[name] = value
         for(const e of $$(`[data*=${name}]`)) {
             let v = this._
             for(const k of e.getAttribute('data').split('.')) {
                 v = v[k]
             }
-            //e.style.setProperty('--data', value)
-            if(e.set)
+            if(e.set){
               e.set(v)
-            else if(e.tagName == 'IMG')
-              e.src = v
+            }
         }
         for (const e of $$(`[data=ALL]`)) {
             e.set(this._)
@@ -58,6 +57,7 @@ class EnigmaticElement extends HTMLElement {
         for (let attr of this.attributes) {
             this[attr.name] = attr.value
         }
+        this.innerTemplate = this.innerHTML
     } 
     async show () {
         return new Promise(r => {
@@ -119,12 +119,16 @@ window.addEventListener('DOMContentLoaded', (event) => {
         body.appendChild(child)
         return child
     }
-    loadCSS('index.css')
     if(window.main) window.main(document)
 })
 
-window.ce = (type, func) => {
-    const cname = type.replace('-', '')
-    eval(`customElements.define("${type}", class x extends HTMLElement { connectedCallback() { ${func} } })`)
-    return func
+window.ready = async () => {
+    return new Promise(r => {
+        if(document.readyState === 'complete')
+            r(true)
+        document.onreadystatechange = () => {
+            if (document.readyState === 'complete')
+                r()
+        }
+    })
 }

package/package.json

@@ -8,5 +8,5 @@
     "type": "git",
     "url": "git://github.com/digplan/enigmatic.git"
   },
-  "version": "0.9.13"
+  "version": "0.9.14"
 }