enigmatic 0.9.11 → 0.9.15

package/readme.md

@@ -0,0 +1,99 @@
+<<<<<<< HEAD
+# enigmatic
+![version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&type=6&v=0.8.5&x2=0)
+![size](http://img.badgesize.io/digplan/enigmatic/master/main.js)
+
+Enigmatic is a JavaScript micro-library for creating web applications using lightweight web components.
+It aspires to enable faster web app peformance, better reliabilty, and faster development process. 
+
+Enigmatic uses HTML attributes (directives) with a simple component model and data binding - all on existing HTML, JS, and CSS functionality.
+- No special tooling, compilation or preprocessing, or new languages to learn
+- Minimal JS and CSS core, includes basic components and two way data binding
+
+## Quick Start
+Just create an HTML page
+````
+<script src='//unpkg.com/enigmatic'></script>
+<link href='//unpkg.com/enigmatic.css' rel='stylesheet'>
+````
+
+## Enigmatic also includes some helpers
+````
+ window.$ -- $([body])[0] // Query Selector All
+ window.load -- ('mycontrol.js') // Load JS or CSS
+ Element.css -- e.css('color:red') // Add css to an element
+ Element.child -- body.child('span') // Add a child element
+ 
+````
+
+## window.data
+window.data is a single data object, that holds all the data for the app.  It's a JS object, with each key being an identifier, or *channel* to use with controls that have the data attribute.
+
+Controls interact with the data object to send and receive data, using a data attribute and .set() method.
+````
+<!-- Just use the *data* attribute
+<hellodata data='mykey'></hellodata>
+  
+window.data.set('mykey', 'Hello world!')
+````
+
+One may also create a simple counter, interacting with plain ole (non-control) HTML elements.
+In this example, the window.data object and control's data attribute take care of the binding.
+````
+<button onclick='data.count++'>Click me</button>
+<counter data='count'></counter>
+
+data.count = 0
+const counter = e =>
+  e.innerHTML = 'Ready'
+````
+=======
+# enigmatic
+[![npm version](https://badge.fury.io/js/enigmatic.svg)](https://badge.fury.io/js/enigmatic)
+
+
+Enigmatic is a JavaScript micro-library for creating web applications using lightweight web components.
+It aspires to enable faster web app peformance, better reliabilty, and faster development process. 
+
+Enigmatic uses HTML attributes (directives) with a simple component model and data binding - all on existing HTML, JS, and CSS functionality.
+- No special tooling, compilation or preprocessing, or new languages to learn
+- Minimal JS and CSS core, includes basic components and two way data binding
+
+## Quick Start
+Just create an HTML page
+````
+<script src='//unpkg.com/enigmatic'></script>
+<link href='//unpkg.com/enigmatic.css' rel='stylesheet'>
+````
+
+## Enigmatic also includes some helpers
+````
+ window.$ -- $([body])[0] // Query Selector All
+ window.load -- ('mycontrol.js') // Load JS or CSS
+ Element.css -- e.css('color:red') // Add css to an element
+ Element.child -- body.child('span') // Add a child element
+ 
+````
+
+## window.data
+window.data is a single data object, that holds all the data for the app.  It's a JS object, with each key being an identifier, or *channel* to use with controls that have the data attribute.
+
+Controls interact with the data object to send and receive data, using a data attribute and .set() method.
+````
+<!-- Just use the *data* attribute
+<hellodata data='mykey'></hellodata>
+  
+window.data.set('mykey', 'Hello world!')
+````
+
+One may also create a simple counter, interacting with plain ole (non-control) HTML elements.
+In this example, the window.data object and control's data attribute take care of the binding.
+````
+<button onclick='data.count++'>Click me</button>
+<counter data='count'></counter>
+
+data.count = 0
+const counter = e =>
+  e.innerHTML = 'Ready'
+````
+>>>>>>> 4f836882c656008703aad8afc30997772829f574

package/test.html

@@ -1,40 +1,176 @@
-<script src='main.js'></script>
-<link rel='stylesheet' href='main.css'>
+<script src='index.js'></script>
+<script type='module' src='elements/index.mjs'></script>
+<link rel='stylesheet' href='index.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>
+<body style='display: grid; place-items: center;'>
+    <test-runner></test-runner>
+</body>
 
-    <script>
-        class mySubclass extends EnigmaticElement {
-            connectedCallback() {
-                this.set('<h1>This is a subclass!</h1>')
+<script>
+    main = async () => {
+        const runner = $('test-runner')
+        const display = $('tr-display')
+        runner.createTests({
+            // dom
+            'Window exists': () => typeof window !== 'undefined',
+            'Document exists': () => typeof document !== 'undefined',
+            'Body exists': () => typeof document.body !== 'undefined',
+            // core js
+            'fetch exists': () => { return fetch },
+            'localStorage exists': () => { return localStorage },
+            // enigmatic core
+            '$ selector': () => { return $.name == 'bound querySelector' },
+            '$$ selector': () => { return $$.name == 'bound querySelectorAll' },
+            'window.loadJS': () => { return window.loadJS },
+            'window.loadCSS': () => { return window.loadCSS },
+            'window.data': () => { return window.data },
+            'window.data object': () => { return window.data._ },
+            'window.data set': () => { return window.data.set },
+            'window.wait': async () => {
+                return new Promise(async (r, j) => {
+                    const time = +new Date()
+                    await wait(100)
+                    const timetaken = +new Date() - time
+                    timetaken > 99 ? r(timetaken) : j(`Wait took ${timetaken}ms`)
+                })
+            },
+            'window.ready': () => { return window.ready },
+            // EE
+            'EnigmaticElement': () => { return EnigmaticElement },
+            'EnigmaticElement create': async () => {
+                return new Promise(async (r, j) => {
+                    const e = $('#trdisplay').child('e-e')
+                    e.id = 'testelement'
+                    e.innerHTML = '<h1>Hello e-e element</h1>'
+                    e.hide()
+                    e.show()
+                    e.setAttribute('data', 'mykey')
+                    r(e)
+                })
+            },
+            'EE-childHTML': () => {
+                const e = $('#trdisplay').childHTML('<span>Im a test</span>')
+                const ret = (e.innerHTML === '<span>Im a test</span>')
+                e.remove()
+                return ret
+            },
+            // Data
+            'window.data set': () => { return window.data.set },
+            'window.data.set(val)': () => { return window.data.set('mykey', 'myval') },
+            'Element data subscribe': () => { return $('#testelement').innerHTML === 'myval' },
+            // Custom elements
+            'Hello World element': async () => {
+                $('#testelement').remove()
+                return new Promise(async (r, j) => {
+                    const hw = $('#trdisplay').child('hello-world')
+                    await wait(500)
+                    $('hello-world').hide()
+                    await wait(500)
+                    $('hello-world').show()
+                    await wait(500)
+                    $('hello-world').hide()
+                    $('hello-world').remove()
+                    r(true)
+                })
+            },
+            'you-tube': async () => {
+                const r = $('#trdisplay').child('you-tube')
+                await wait(1500)
+                r.hide()
+                r.remove()
+                return r
+            },
+            'monaco-editor': async () => {
+                const r = $('#trdisplay').child('monaco-editor')
+                r.set('javascript', 'console.log(1)')
+                await wait(500)
+                await r.hide()
+                r.remove()
+                return r
+            },
+            'online-indicator': async () => {
+                const r = $('#trdisplay').child('online-indicator')
+                await wait(500)
+                if (navigator.onLine && r.innerHTML !== '🟢')
+                    throw Error('online-indicator not online')
+                runner.set('Disconnect your network connection to continue')
+                //await r.wentOffline()
+                if (!navigator.onLine && r.innerHTML !== '🔴')
+                    throw Error('online-indicator not offline')
+                runner.set('Connect your network connection to continue')
+                //await r.wentOnline()               
+                await r.hide()
+                r.remove()
+                return true
+            },
+            'font-awesome': async () => {
+                const r = $('#trdisplay').child('font-awesome')
+                r.set('fas fa-heart')
+                await wait(500)
+                r.set('fas fa-check')
+                await wait(1000)
+                const ret = getComputedStyle($('font-awesome')).fontFamily.match(/Font/i)
+                r.remove()
+                return ret
+            },
+            'view-panel': async () => {
+                const display = $('#trdisplay')
+                const vp = display.child('view-panel')
+                vp.classList.add('show')
+                vp.style.display = 'grid'
+                vp.style.gridTemplate = '1fr / 1fr'
+                const x = vp.child('e-e', 'one')
+                x.style.backgroundColor = 'red'
+                x.innerHTML = '!'
+                const xx = vp.child('div', 'two')
+                xx.style.backgroundColor = 'green'
+                xx.innerHTML = '!'
+                const xxx = vp.child('div', 'three')
+                xxx.style.backgroundColor = 'blue'
+                xxx.innerHTML = '!'
+                const b = display.child('button', 'four')
+                b.textContent = 'Show only one'
+                b.onclick = () => {
+                    vp.showOnly('#one')
+                }
+                const c = display.child('button', 'five')
+                c.textContent = 'Show all'
+                c.onclick = () => {
+                    vp.showAll()
+                    $('#one').hide()
+                }
+                await wait(500)
+                b.click()
+                await wait(500)
+                c.click()
+                await wait(500)
+                b.remove()
+                c.remove()
+                vp.remove()
+                return true
+            },
+            'side-menu': async () => {
+                $('#trdisplay').childHTML(`
+                    <button id='opener' onclick="$('#me').toggle()" style='position: absolute; left: 400px'>Open</button>
+                    <side-menu id='me' toggle-classes='slide-in slide-out'>
+                        <li class=''>
+                            <font-awesome class='fa fa-check'></font-awesome> one
+                        </li>
+                        <li class=''>
+                            <font-awesome class='fa fa-check'></font-awesome> one
+                        </li>
+                        <li class=''>
+                            <font-awesome class='fa fa-check'></font-awesome> one
+                        </li>
+                        <li class=''>
+                            <font-awesome class='fa fa-check'></font-awesome> one
+                        </li>
+                        <li class=''>
+                            <font-awesome class='fa fa-check'></font-awesome> one
+                        </li>
+                    </side-menu>`)
+                return true
             }
-        }
-        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>
+        })
+    }
+</script>

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 loadJS('https://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>
-
-*/