enigmatic 0.9.12 → 0.9.13

package/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,50 +24,142 @@ 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;
+}
+
+@keyframes slide-in {
+    100% {
+        transform: translateX(0%);
+    }
+}
+
+@-webkit-keyframes slide-in {
+    100% {
+        -webkit-transform: translateX(0%);
+    }
 }
 
-.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-out {
+    0% {
+        transform: translateX(0%);
+    }
+
+    100% {
+        transform: translateX(-100%);
+    }
 }
 
-@keyframes fadein {
-    from {
-        opacity: 0;
+@-webkit-keyframes slide-out {
+    0% {
+        -webkit-transform: translateX(0%);
     }
 
-    to {
-        opacity: 1;
+    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 {
     font-family: 'Roboto', sans-serif;
 }
 
 a {
-    text-decoration: none !important
+    text-decoration: none;
 }
 
 .shadow {
@@ -85,7 +192,7 @@ aqua, .bg-aqua {
     background-color: #7fdbff
 }
 
-green, .bg-green {
+.bg-green {
     background-color: #2ecc40
 }
 
@@ -101,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
 }
@@ -121,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 {
@@ -141,18 +232,6 @@ ltgray, .bg-ltgray {
     color: #0074d9
 }
 
-.aqua {
-    color: #7fdbff
-}
-
-.teal {
-    color: #39cccc
-}
-
-.olive {
-    color: #3d9970
-}
-
 .green {
     color: #2ecc40
 }
@@ -217,11 +296,6 @@ ltgray, .bg-ltgray {
     z-index: 1000;
 }
 
-.center {
-    margin: 0 auto;
-    text-align: center
-}
-
 .margins {
     margin: 15px
 }
@@ -231,7 +305,7 @@ ltgray, .bg-ltgray {
 }
 
 .border {
-    border: 10px solid #eee
+    border: 6px solid #eee;
 }
 
 .front {
@@ -300,19 +374,11 @@ img {
 }
 
 .fixed {
-    position: fixed
-}
-
-.hide {
-    visibility: hidden
-}
-
-.show {
-    visibility: ''
+    position: fixed;
 }
 
 .faded {
-    opacity: 0.5
+    opacity: 0.5;
 }
 
 .fade {
@@ -347,37 +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

@@ -27,36 +27,68 @@ class Data {
         this._[name] = value
         for(const e of $$(`[data*=${name}]`)) {
             let v = this._
-            for(const k of e.data.split('.')) {
+            for(const k of e.getAttribute('data').split('.')) {
                 v = v[k]
             }
-            e.set(v)
+            //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 = +new Date() + Math.random()
+        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)
+        })
     }
-    show () {
-        this.style.transition = 'opacity 0.2s ease-in-out'
-        this.style.opacity = 1
+    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)
+        })
     }
-    hide () {
-        this.style.transition = 'opacity 0.2s ease-in-out'
-        this.style.opacity = 0
+    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') {
@@ -64,15 +96,35 @@ class EnigmaticElement extends HTMLElement {
         }
         this.innerHTML = s
     }
-    child (type = 'e-e') {
+    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

@@ -8,8 +8,5 @@
     "type": "git",
     "url": "git://github.com/digplan/enigmatic.git"
   },
-  "version": "0.9.12",
-  "dependencies": {
-    "token": "^0.1.0"
-  }
+  "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/ce.mjs

@@ -1,5 +0,0 @@
-window.ce = (type, func) => {
-    const cname = type.replace('-', '')
-    eval(`customElements.define("${type}", class x extends HTMLElement { connectedCallback() { ${func} } })`)
-    return func
-}

package/elements/font-awesome.mjs

@@ -1,6 +0,0 @@
-class FontAwesome extends HTMLElement {
-    async connectedCallback() {
-        await loadCSS('//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css')
-    }
-}
-customElements.define('font-awesome', FontAwesome)

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,29 +0,0 @@
-import * as monaco from 'https://cdn.skypack.dev/monaco-editor@0.23'
-customElements.define('monaco-editor', class extends HTMLElement {
-    connectedCallback() {
-        const c = document.createElement('div')
-        c.style = this.getAttribute('estyle') || "width: 600px; height: 400px; border: 1px solid gray"
-        this.appendChild(c)
-        const id = 'me1'
-        this.editor = monaco.editor.create(c, {
-            value: $(`code[for=${id}]`).innerHTML,
-            language: 'javascript'
-        })
-    }
-})
-
-/*
-
-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/elements/online-indicator.mjs

@@ -1,19 +0,0 @@
-class OnlineIndicator extends EnigmaticElement {
-    constructor() {
-        super()
-        this.addEventListener('online', () => {
-            this.render()
-        })
-        this.addEventListener('offline', () => {
-            this.render()
-        })
-    }
-    connectedCallback() {
-        this.render()
-    }
-    render() {
-        super.connectedCallback()
-        this.innerHTML = window.navigator.onLine ? (this.online||'🟢') : (this.offline||'🔴')
-    }
-}
-customElements.define('online-indicator', OnlineIndicator)

package/elements/you-tube.mjs

@@ -1,9 +0,0 @@
-class YouTube extends EnigmaticElement {
-    connectedCallback() {
-        this.uid = this.attributes.uid.value
-        this.innerHTML = `<iframe width="100%" height="100%" src="https://www.youtube.com/embed/${this.uid}" title="YouTube video player"
-        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen></iframe>`
-    }
-}
-customElements.define('you-tube', YouTube)

package/test.html

@@ -1,22 +0,0 @@
-<script src='main.js'></script>
-<script src='ce.mjs'></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>
-    <h-w></h-w>
-    <h-w2></h-w2>
-
-    <script>
-        ce('h-w', 'this.innerHTML = "okay"' )
-        ce('h-w2', 'this.innerHTML = "click me"; this.addEventListener("click", function() { document.write(1) })')
-    </script>
-</body>

package/test2.html

@@ -1,29 +0,0 @@
-<script src='https://unpkg.com/enigmatic'></script>
-<link rel='stylesheet' href='../enigmatic/index.css'>
-<script type='module' src='../enigmatic/elements/monaco-editor.mjs'></script>
-<script type='module' src='../enigmatic/ce.mjs'></script>
-
-<monaco-editor id='me1' estyle="width: 600px; height: 400px; border: 1px solid gray"></monaco-editor>
-<code for='me1' hidden>const f = () ={
-  console.log('Hello World');
-}</code>
-
-<script>
-    main = () => {
-        const s = $('#me1').editor.getValue()
-        ce('he-wo', s)
-    }
-</script>
-<he-wo></he-wo>
-
-<ul class='horizontal'>
-    <li>
-        <a href='#' onclick='main()'>click me</a>
-    </li>
-    <li>
-        <a href='#' onclick='main()'>click me</a>
-    </li>
-    <li>
-        <a href='#' onclick='main()'>click me</a>
-    </li>
-</ul>