enigmatic 0.9.8 → 0.9.12

package/ce.mjs

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,6 @@
+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/monaco-editor.mjs

@@ -1,19 +1,16 @@
-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
+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'
         })
     }
-}
-customElements.define('monaco-editor', MonacoEditor)
+})
 
 /*
 

package/elements/online-indicator.mjs

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,9 @@
+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/{main.css → index.css}

@@ -41,6 +41,7 @@ body {
     from {
         opacity: 0;
     }
+
     to {
         opacity: 1;
     }
@@ -68,15 +69,6 @@ a {
     animation: spin 1s linear infinite;
 }
 
-@-webkit-keyframes spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-    }
-}
-
 .cursor {
     cursor: default
 }
@@ -356,6 +348,7 @@ img {
 }
 
 @media screen and (max-width: 1024px) {
+
     /* Specific to this particular image */
     img.full-page {
         left: 50%;
@@ -369,4 +362,22 @@ img {
     -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/{main.js → index.js}

@@ -74,5 +74,5 @@ class EnigmaticElement extends HTMLElement {
 customElements.define ('e-e', EnigmaticElement)
 
 window.addEventListener('DOMContentLoaded', (event) => {
-    if(main) main(document)
+    if(window.main) window.main(document)
 })

package/package.json

@@ -3,10 +3,13 @@
   "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.8"
+  "version": "0.9.12",
+  "dependencies": {
+    "token": "^0.1.0"
+  }
 }

package/test.html

@@ -1,4 +1,5 @@
 <script src='main.js'></script>
+<script src='ce.mjs'></script>
 <link rel='stylesheet' href='main.css'>
 
 <style>
@@ -11,30 +12,11 @@
 </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>
+    <h-w></h-w>
+    <h-w2></h-w2>
 
     <script>
-        class mySubclass extends EnigmaticElement {
-            connectedCallback() {
-                this.set('<h1>This is a subclass!</h1>')
-            }
-        }
-        customElements.define('my-subclass', mySubclass);
+        ce('h-w', 'this.innerHTML = "okay"' )
+        ce('h-w2', 'this.innerHTML = "click me"; this.addEventListener("click", function() { document.write(1) })')
     </script>
-    <my-subclass class='bg-yellow'>&lt;my-subclass class='bg-yellow'></my-subclass>
-
-    <button onclick='b.hide()'>Hide</button>
 </body>

package/test2.html

@@ -0,0 +1,29 @@
+<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>

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>