enigmatic 0.9.9 → 0.9.13

package/{main.css → index.css}

@@ -1,5 +1,20 @@
 body {
-    margin: 0
+    display: grid;
+    font-family: Roboto, Helvetica, sans-serif;
+    margin: 0;
+}
+
+.right {
+    float: right;
+}
+
+.left {
+    float: left;
+}
+
+
+.center {
+    place-items: center;
 }
 
 @font-face {
@@ -9,41 +24,134 @@ body {
     src: local('Roboto Regular'), local('Roboto-Regular'), url(//themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
 }
 
-.flat {
-    border: 0;
-    outline-width: 0
+.hide {
+    opacity: 0;
+    transition: opacity .25s linear;
 }
 
-.fill {
-    height: 100%;
-    width: 100%
+.show {
+    opacity: 1;
+    transition: opacity .25s linear;
 }
 
-.border {
-    border: 1px solid black
+.fixed {
+    position: fixed;
+}
+
+.slide-in {
+    animation: slide-in 0.1s forwards;
+    -webkit-animation: slide-in 0.1s forwards;
+}
+
+.slide-out {
+    animation: slide-out 0.1s forwards;
+    -webkit-animation: slide-out 0.1s forwards;
 }
 
-.fadein {
-    font-size: 21px;
-    text-align: center;
-    -webkit-animation: fadein 3s;
-    /* Safari, Chrome and Opera > 12.1 */
-    -moz-animation: fadein 3s;
-    /* Firefox < 16 */
-    -ms-animation: fadein 3s;
-    /* Internet Explorer */
-    -o-animation: fadein 3s;
-    /* Opera < 12.1 */
-    animation: fadein 3s;
+@keyframes slide-in {
+    100% {
+        transform: translateX(0%);
+    }
 }
 
-@keyframes fadein {
-    from {
-        opacity: 0;
+@-webkit-keyframes slide-in {
+    100% {
+        -webkit-transform: translateX(0%);
     }
-    to {
-        opacity: 1;
+}
+
+@keyframes slide-out {
+    0% {
+        transform: translateX(0%);
     }
+
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+@-webkit-keyframes slide-out {
+    0% {
+        -webkit-transform: translateX(0%);
+    }
+
+    100% {
+        -webkit-transform: translateX(-100%);
+    }
+}
+
+
+.top {
+    top: 0;
+}
+
+.bottom {
+    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 {
@@ -51,7 +159,7 @@ body {
 }
 
 a {
-    text-decoration: none !important
+    text-decoration: none;
 }
 
 .shadow {
@@ -68,15 +176,6 @@ a {
     animation: spin 1s linear infinite;
 }
 
-@-webkit-keyframes spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-    }
-}
-
 .cursor {
     cursor: default
 }
@@ -93,7 +192,7 @@ aqua, .bg-aqua {
     background-color: #7fdbff
 }
 
-green, .bg-green {
+.bg-green {
     background-color: #2ecc40
 }
 
@@ -109,18 +208,6 @@ red, .bg-red {
     background-color: #ff4136
 }
 
-fuchsia, .bg-fuchsia {
-    background-color: #f012be
-}
-
-purple, .bg-purple {
-    background-color: #b10dc9
-}
-
-maroon, .bg-maroon {
-    background-color: #85144b
-}
-
 white, .bg-white {
     background-color: #fff
 }
@@ -129,16 +216,12 @@ gray, .bg-gray {
     background-color: #aaa
 }
 
-silver, .bg-silver {
-    background-color: #ddd
-}
-
 black, .bg-black {
     background-color: #111
 }
 
-ltgray, .bg-ltgray {
-    background-color: #fcfcfc
+.bg-ltgray {
+    background-color: #f7f4f4
 }
 
 .navy {
@@ -149,18 +232,6 @@ ltgray, .bg-ltgray {
     color: #0074d9
 }
 
-.aqua {
-    color: #7fdbff
-}
-
-.teal {
-    color: #39cccc
-}
-
-.olive {
-    color: #3d9970
-}
-
 .green {
     color: #2ecc40
 }
@@ -225,11 +296,6 @@ ltgray, .bg-ltgray {
     z-index: 1000;
 }
 
-.center {
-    margin: 0 auto;
-    text-align: center
-}
-
 .margins {
     margin: 15px
 }
@@ -239,7 +305,7 @@ ltgray, .bg-ltgray {
 }
 
 .border {
-    border: 10px solid #eee
+    border: 6px solid #eee;
 }
 
 .front {
@@ -308,19 +374,11 @@ img {
 }
 
 .fixed {
-    position: fixed
-}
-
-.hide {
-    visibility: hidden
-}
-
-.show {
-    visibility: ''
+    position: fixed;
 }
 
 .faded {
-    opacity: 0.5
+    opacity: 0.5;
 }
 
 .fade {
@@ -355,18 +413,31 @@ img {
     left: 0;
 }
 
-@media screen and (max-width: 1024px) {
-    /* Specific to this particular image */
-    img.full-page {
-        left: 50%;
-        margin-left: -512px;
-        /* 50% */
-    }
-}
-
 .rounded {
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
     -khtml-border-radius: 10px;
+}
+
+ul {
+    list-style-type: none;
+    border: 20px;
+    padding: 20px;
+    width: 50%;
+}
+
+li {
+    list-style-type: none;
+    border: 10px;
+    padding: 10px;
+}
+
+li:hover {
+    background-color: rgb(243, 241, 241);
+    cursor: pointer;
+}
+
+.horizontal {
+    display: flex;
 }

package/index.js

@@ -0,0 +1,130 @@
+window.$ = document.querySelector.bind(document)
+window.$$ = document.querySelectorAll.bind(document)
+window.body = document.body
+
+window.loadJS = src => {
+    return new Promise((r, j) => {
+        const s = document.createElement('script')
+        s.src = src
+        s.addEventListener('load', r)
+        document.head.appendChild(s)
+    })
+}
+
+window.loadCSS = src => {
+    return new Promise((r, j) => {
+        const s = document.createElement('link')
+        s.rel = 'stylesheet'
+        s.href = src
+        s.addEventListener('load', r)
+        document.head.appendChild(s)
+    })
+}
+
+class Data {
+    _ = {}
+    set (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)
+              e.set(v)
+            else if(e.tagName == 'IMG')
+              e.src = v
+        }
+        for (const e of $$(`[data=ALL]`)) {
+            e.set(this._)
+        }
+        const ret = {}
+        ret[name] = value
+        return ret
+    }
+}
+
+window.data = new Data ()
+window.wait = ms => new Promise(r => setTimeout(r, ms))
+
+class EnigmaticElement extends HTMLElement {
+    constructor () {
+        super ()
+    }
+    connectedCallback () {
+        if (!this.id) 
+            this.id = Math.floor(Math.random() * 5000)
+        for (let attr of this.attributes) {
+            this[attr.name] = attr.value
+        }
+    } 
+    async show () {
+        return new Promise(r => {
+            this.hidden = false
+            this.classList.remove('hide')
+            this.classList.add('show')
+            for (const child of this.children) {
+                child.classList.remove('hide')
+                child.classList.add('show')
+            }
+            r(true)
+        })
+    }
+    async hide () {
+        return new Promise(r => {
+            this.classList.remove('show')
+            this.classList.add('hide')
+            for(const child of this.children) {
+              child.classList.remove('show')
+              child.classList.add('hide')
+            }
+            r(true)
+        })
+    }
+    async toggle (classes = ['show', 'hide']) {
+        const c = this.classList
+        if(!c.contains(classes[0]) && !c.contains(classes[1]))
+            c.add(classes[0])
+        for(const cls of classes) {
+            this.classList.toggle(cls)
+        }
+    }
+    set (s) {
+        if(typeof s === 'object') {
+            s = JSON.stringify(s)
+        }
+        this.innerHTML = s
+    }
+    child (type = 'e-e', id = Math.random()) {
+        const child = document.createElement(type)
+        child.id = id
+        this.appendChild(child)
+        return child
+    }
+    childHTML (html, type = 'e-e', id = Math.random()) {
+        const e = this.child(type, id)
+        e.innerHTML = html
+        return e
+    }
+}
+
+customElements.define ('e-e', EnigmaticElement)
+
+window.addEventListener('DOMContentLoaded', (event) => {
+    window.body = document.body
+    body.child = (type, id) => {
+        const child = document.createElement(type)
+        if(id) child.id = id
+        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
+}

package/package.json

@@ -3,10 +3,10 @@
   "description": "Simple web controls",
   "url": "http://github.com/digplan/enigmatic",
   "author": "<digplan@outlook.com>",
-  "main": "main.js",
+  "main": "index.js",
   "repository": {
     "type": "git",
     "url": "git://github.com/digplan/enigmatic.git"
   },
-  "version": "0.9.9"
+  "version": "0.9.13"
 }

package/sw.js

@@ -0,0 +1,22 @@
+self.addEventListener('install', event => {
+    console.log('V1 installing…');
+
+    // cache a cat SVG
+    event.waitUntil(
+        caches.open('static-v1').then(cache => cache.add('/index.js'))
+    );
+});
+
+self.addEventListener('activate', event => {
+    console.log('V1 now ready to handle fetches!');
+});
+
+self.addEventListener('fetch', event => {
+    const url = new URL(event.request.url);
+
+    // serve the cat SVG from the cache if the request is
+    // same-origin and the path is '/dog.svg'
+    if (url.origin == location.origin && url.pathname == '/index.js') {
+        event.respondWith(caches.match('/index.js'));
+    }
+});

package/elements/hello-world.mjs

@@ -1,6 +0,0 @@
-class HelloWorld extends EnigmaticElement {
-    connectedCallback() {
-        this.innerHTML = `<h1>Hello World!</h1>`;
-    }
-}
-customElements.define('hello-world', HelloWorld);

package/elements/monaco-editor.mjs

@@ -1,32 +0,0 @@
-class MonacoEditor extends HTMLElement {
-    async connectedCallback() {
-        await load('//unpkg.com/monaco-editor@0.30.1/min/vs/loader.js')
-        this.innerHTML = `<div id="m-container" style="${this.getAttribute('estyle')}"></div>`
-        require.config({ paths: { vs: 'min/vs' } })
-        const id = this.getAttribute('id'), that = this
-        require(['vs/editor/editor.main'], function () {
-            const editor = monaco.editor.create(document.getElementById('m-container'), {
-                value: $(`code[for=${id}]`).innerHTML,
-                language: 'javascript'
-            })
-            that.editor = editor
-        })
-    }
-}
-customElements.define('monaco-editor', MonacoEditor)
-
-/*
-
-example..
-
-<monaco-editor id='me1' estyle="width: 600px; height: 400px; border: 1px solid gray"></monaco-editor>
-<code for='me1' hidden>
-    class HelloWorld extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = '<div>Hello World!</div>'
-      }
-    }
-    customElements.define('hello-world', HelloWorld)
-</code>
-
-*/

package/main.js

@@ -1,78 +0,0 @@
-window.$ = document.querySelector.bind(document)
-window.$$ = document.querySelectorAll.bind(document)
-window.body = document.body
-
-window.loadJS = src => {
-    return new Promise((r, j) => {
-        const s = document.createElement('script')
-        s.src = src
-        s.addEventListener('load', r)
-        document.head.appendChild(s)
-    })
-}
-
-window.loadCSS = src => {
-    return new Promise((r, j) => {
-        const s = document.createElement('link')
-        s.rel = 'stylesheet'
-        s.href = src
-        s.addEventListener('load', r)
-        document.head.appendChild(s)
-    })
-}
-
-class Data {
-    _ = {}
-    set (name, value) { 
-        this._[name] = value
-        for(const e of $$(`[data*=${name}]`)) {
-            let v = this._
-            for(const k of e.data.split('.')) {
-                v = v[k]
-            }
-            e.set(v)
-        }
-        for (const e of $$(`[data=ALL]`)) {
-            e.set(this._)
-        }
-    }
-}
-
-window.data = new Data ()
-
-class EnigmaticElement extends HTMLElement {
-    constructor () {
-        super ()
-    }
-    connectedCallback () {
-        if (!this.id) this.id = +new Date() + Math.random()
-        for (let attr of this.attributes) {
-            this[attr.name] = attr.value
-        }
-    }
-    show () {
-        this.style.transition = 'opacity 0.2s ease-in-out'
-        this.style.opacity = 1
-    }
-    hide () {
-        this.style.transition = 'opacity 0.2s ease-in-out'
-        this.style.opacity = 0
-    }
-    set (s) {
-        if(typeof s === 'object') {
-            s = JSON.stringify(s)
-        }
-        this.innerHTML = s
-    }
-    child (type = 'e-e') {
-        const child = document.createElement(type)
-        this.appendChild(child)
-        return child
-    }
-}
-
-customElements.define ('e-e', EnigmaticElement)
-
-window.addEventListener('DOMContentLoaded', (event) => {
-    if(window.main) window.main(document)
-})

package/maker.html

@@ -1,16 +0,0 @@
-<script src='index.js'></script>
-
-<script>
-  class myElement extends EnigmaticElement {
-    constructor() {
-      super()
-    }
-    doSomething() {
-      this.innerHTML = `<h1>${this.key}</h1>`
-    }
-  }
-  customElements.define('my-element', myElement)
-</script>
-
-<my-element id='me' key='did something'></my-element>
-<button onclick='me.doSomething()'>enumerate</button>

package/test.html

@@ -1,40 +0,0 @@
-<script src='main.js'></script>
-<link rel='stylesheet' href='main.css'>
-
-<style>
-    body {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        grid-template-rows: 1fr 1fr 1fr 1fr;
-        grid-gap: 1px;
-    }
-</style>
-
-<body>
-    <div class='bg-white'>
-       All data: <e-e data='ALL'>data</e-e>
-       <br>
-       Element data: <e-e id='ds' data='targetkey.method' class='bg-aqua'></e-e>
-       <br>
-       <button onclick='data.set("targetkey", {method: "a value"})''>set</button>   
-    </div> 
-    <div class='bg-green'></div>
-    <div class='bg-red'></div>
-    <div class='bg-yellow'></div>
-    <e-e id='b' class='bg-black'></e-e>
-    <div class='bg-gray'></div>
-    <div class='bg-orange'></div>
-    <div class='bg-maroon'></div>
-
-    <script>
-        class mySubclass extends EnigmaticElement {
-            connectedCallback() {
-                this.set('<h1>This is a subclass!</h1>')
-            }
-        }
-        customElements.define('my-subclass', mySubclass);
-    </script>
-    <my-subclass class='bg-yellow'>&lt;my-subclass class='bg-yellow'></my-subclass>
-
-    <button onclick='b.hide()'>Hide</button>
-</body>