enigmatic 0.9.20 → 0.10.2

package/elements/font-awesome/index.html

@@ -1,7 +0,0 @@
-<script src='https://unpkg.com/enigmatic'></script>
-<script src='font-awesome.js'></script>
-<link rel='stylesheet' href='https://unpkg.com/enigmatic/index.css'>
-
-<font-awesome class='fifty' id='i' icon='fa fa-camera'></font-awesome>
-
-<button onclick='i.set("fa fa-comments")'>Fetch</button>

package/elements/for-list/for-list.js

@@ -1,25 +0,0 @@
-class ForList extends EnigmaticElement {
-    innerTemplate = ''
-    constructor(parent, tag, attrs) {
-        super()
-    }
-    set(array) {
-        if(!this.innerTemplate)
-            this.innerTemplate = this.innerHTML
-        this.innerHTML = ''
-        for (const rec of array) {
-            let addhtml = this.innerTemplate
-            for(const m of addhtml.match(/\{\{(.*?)\}\}/g)) {
-                const dest = m.replace(/{{|}}/g,'').split('.')
-                let k, val = rec
-                while(k = dest.shift()) {
-                    val = val[k]
-                }
-                addhtml = addhtml.replace(m, val)
-            }
-            this.innerHTML += addhtml
-        }
-    }
-}
-
-customElements.define("for-list", ForList)

package/elements/for-list/index.html

@@ -1,11 +0,0 @@
-<script src='https://unpkg.com/enigmatic'></script>
-<script src='for-list.js'></script>
-<script src='../data-source/data-source.js'></script>
-
-<data-source href='https://randomuser.me/api/?results=5' target='users' cache></data-source>
-
-<for-list data='users.results'>
-    <div>{{name.title}} {{name.first}} {{name.last}} {{email}}</div>
-</for-list>
-
-<button onclick=''>Fetch</button>

package/elements/hello-world/hello-world.js

@@ -1,16 +0,0 @@
-class HelloWorld extends EnigmaticElement {
-    connectedCallback() {
-        this.innerHTML = `
-            <style>
-                hello-world > h1 {
-                    padding: 1em;
-                    color: white; 
-                    background: linear-gradient(to left, red, yellow, green, blue, violet) 
-                }
-            </style>
-            <h1>${this.getAttribute('message')||'Hello World!'}</h1>
-        `;
-    }
-}
-
-customElements.define('hello-world', HelloWorld)

package/elements/hello-world/index.html

@@ -1,3 +0,0 @@
-<script src='hello-world.js'></script>
-
-<hello-world message='Hey World!'></hello-world>

package/elements/index.mjs

@@ -1,20 +0,0 @@
-import './block-maker/block-maker.js'
-import './chart-progress-bar/chart-progress-bar.js'
-import './chart-radial-progress/chart-radial-progress.js'
-import './chart-statistic/chart-statistic.js'
-import './data-grid/data-grid.js'
-import './data-source/data-source.js'
-import './data-stream/data-stream.js'
-import './font-awesome/font-awesome.js'
-import './for-list/for-list.js'
-import './hello-world/hello-world.js'
-import './map-embed/map-embed.js'
-//import './monaco-editor.js'
-import './online-indicator/online-indicator.js'
-import './side-menu/side-menu.js'
-import './test-runner/test-runner.js'
-import './toggle-switch/toggle-switch.js'
-import './view-panel/view-panel.js'
-import './you-tube/you-tube.js'
-import './tailwind-css/tailwind-css.js'
-import './alert-box/alert-box.js'

package/elements/map-embed/index.html

@@ -1,4 +0,0 @@
-<script src='//unpkg.com/enigmatic'></script>
-</script><script src='map-embed.js'></script>
-
-<map-embed zoom='12' where='Chicago'></map-embed>

package/elements/map-embed/map-embed.js

@@ -1,9 +0,0 @@
-class MapEmbed extends EnigmaticElement {
-    connectedCallback() {
-        const where = this.getAttribute('where')
-        const zoom = this.getAttribute('zoom')
-        this.innerHTML = `<iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=${where||'Chicago'}&t=&z=${zoom||14}&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><style>.mapouter{position:relative;text-align:right;height:500px;width:600px;}</style>`
-    }
-}
-
-customElements.define("map-embed", MapEmbed)

package/elements/monaco-editor/index.html

@@ -1,11 +0,0 @@
-<script src='//unpkg.com/enigmatic'></script>
-<script type='module' src='monaco-editor.mjs'></script>
-
-<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/monaco-editor/monaco-editor.mjs

@@ -1,33 +0,0 @@
-import * as monaco from 'https://cdn.skypack.dev/monaco-editor@0.23'
-customElements.define('monaco-editor', class extends EnigmaticElement {
-    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'
-        const codewin = $(`code[for=${id}]`)?.innerHTML || ''
-        this.editor = monaco.editor.create(c, {
-            value: codewin,
-            language: 'javascript'
-        })
-    }
-    set(lang = 'javascript', code){
-       this.editor.setModel(monaco.editor.createModel(code, lang))
-    }
-})
-
-/*
-
-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/index.html

@@ -1,15 +0,0 @@
-<script src='https://unpkg.com/enigmatic'></script>
-<script src='online-indicator.js'></script>
-
-1 <online-indicator></online-indicator>
-2 <online-indicator online='On' offline='Off'></online-indicator>
-
-<script>
-    main = async () => {
-        // Promise based offline detection
-        await $('online-indicator').wentOffline()
-        console.log('went offline')
-        await $('online-indicator').wentOnline()
-        console.log('went online')        
-    }
-</script>

package/elements/online-indicator/online-indicator.js

@@ -1,20 +0,0 @@
-class OnlineIndicator extends EnigmaticElement {
-    connectedCallback() {
-        const o = this.getAttribute('online')
-        const f = this.getAttribute('offline')
-        this.innerHTML = window.navigator.onLine ? (o || '🟢') : (f || '🔴')
-        window.addEventListener('online', this.connectedCallback.bind(this))
-        window.addEventListener('offline', this.connectedCallback.bind(this))
-    }
-    async wentOnline() {
-        return new Promise(resolve => {
-            window.addEventListener('online', resolve)
-        })
-    }
-    async wentOffline() {
-        return new Promise(resolve => {
-            window.addEventListener('offline', resolve)
-        })
-    }
-}
-customElements.define('online-indicator', OnlineIndicator)

package/elements/side-menu/index.html

@@ -1,10 +0,0 @@
-<script src='https://unpkg.com/enigmatic'></script>
-<script src='side-menu.js'></script>
-
-<side-menu id='sm' toggle-classes='slide-in slide-out'>
-    <li class=''>
-        one
-    </li>
-</side-menu>
-
-<button onclick='sm.toggle()'>Toggle</button>

package/elements/side-menu/side-menu.js

@@ -1,16 +0,0 @@
-class SideMenu extends EnigmaticElement {
-    connectedCallback() {
-        this.innerHTML = `
-            <e-e id='sm1' style='overflow:hidden; background: radial-gradient(circle, #E5E6E4, #FFF); top: 0; height: 98%; padding: 10px; position: absolute; right: 0; width: 300px'>
-                ${$('side-menu').innerHTML}
-            </e-e>
-        `
-        this.opened = false
-        this.toggleclasses = this.getAttribute('toggle-classes')?.split(' ') || ['show', 'hide']
-        this.classList.add(this.toggleclasses[1])
-    }
-    toggle() {
-        super.toggle(this.toggleclasses)
-    }
-}
-customElements.define('side-menu', SideMenu)

package/elements/tailwind-css/index.html

@@ -1,11 +0,0 @@
-<script src='//unpkg.com/enigmatic'></script>
-<script src='tailwind-css.js'></script>
-<link rel='stylesheet' href='http://localhost:3000/index.css'>
-
-<tailwind-css></tailwind-css>
-
-<div class='underline red'>tailwind</div>
-
-<div class="py-3 px-5 mb-4 bg-blue-100 text-blue-900 text-sm rounded-md border border-blue-200" role="alert">
-    A simple <strong>primary</strong> alert—check it out!
-</div>

package/elements/tailwind-css/tailwind-css.js

@@ -1,11 +0,0 @@
-class TailwindCSS extends HTMLElement {
-
-  url = 'https://cdn.tailwindcss.com'
-
-  connectedCallback() {
-     this.style.display = 'none'
-     loadJS(this.url)
-  }
-
-}
-customElements.define('tailwind-css', TailwindCSS)

package/elements/test-runner/index.html

@@ -1,176 +0,0 @@
-<script src='index.js'></script>
-<script type='module' src='elements/index.mjs'></script>
-<link rel='stylesheet' href='index.css'>
-
-<body style='display: grid; place-items: center;'>
-    <test-runner></test-runner>
-</body>
-
-<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
-            }
-        })
-    }
-</script>

package/elements/test-runner/test-runner.js

@@ -1,59 +0,0 @@
-class TestRunner extends EnigmaticElement {
-
-    tests = {}
-
-    connectedCallback() {
-        window.testrunner = this
-    }
-
-    createTests(tests) {
-        this.tests = tests
-        this.innerHTML = `
-            <div style="display:grid; grid-template: 4fr 1fr / 4fr 1fr">
-                <e-e id='trdisplay'></e-e>
-                <div></div>
-                <div>
-                  <span id='trstatus'>${this.count()} tests loaded</span>
-                  <button style='margin-top: 5px; float: right' onclick='testrunner.run()'>Run</button>
-                </div>
-             </div>
-        `
-    }
-
-    count() {
-        return Object.keys(this.tests).length
-    }
-
-    async run() {
-        console.clear()
-        let pass = true, ret = [], time = +new Date(), func
-        for (const test in this.tests) {
-            let success, message
-            $('#trstatus').innerHTML = `<i>${test}</i>`
-            try {
-                func = this.tests[test]
-                const isAsyncTest = (func.constructor.name === 'AsyncFunction')
-                success = isAsyncTest ? await func() : func()
-            } catch (e) {
-                success = false
-                message = e
-                console.error(e)
-            }
-            if (!success) {
-                this.innerHTML = `Failed on test: ${test} ${message}`
-                pass = false
-            }
-            ret = [...ret, { test, func, success }]
-        }
-        const status = $('#trstatus'), count = this.count()
-        status.innerHTML = `${pass ? '<green>Passed</green>' : '<red>Failed</red>'}`
-        status.innerHTML += `  ${count} tests in ${+new Date() - time}ms`
-        console[!!console.table ? 'table' : 'log'](ret)
-    }
-
-    set(s) {
-        $('#trstatus').innerHTML = s
-    }
-}
-
-customElements.define('test-runner', TestRunner)

package/elements/time-ago/index.html

@@ -1,11 +0,0 @@
-<script src='https://unpkg.com/enigmatic'></script>
-<script src='time-ago.js'></script>
-
-<time-ago data='mytime'></time-ago>
-
-<script> 
-    const main = () => {
-        console.log('main')
-        data.set('mytime', '1997-07-16T19:20+01:00')
-    }
-</script>

package/elements/time-ago/time-ago.js

@@ -1,22 +0,0 @@
-
-class TimeAgo extends EnigmaticElement {
-    set(v) {
-      const d = new Date(v)
-      const now = new Date()
-      const diff = (now - d) / 1000
-      const day_diff = Math.floor(diff / 86400)
-      this.textContent = 
-        diff < 60 && 'just now' ||
-        diff < 120 && '1 minute ago' ||
-        diff < 3600 && Math.floor( diff / 60 ) + ' minutes ago' ||
-        diff < 7200 && '1 hour ago' ||
-        diff < 86400 && Math.floor( diff / 3600 ) + ' hours ago' ||
-        day_diff == 1 && 'Yesterday' ||
-        day_diff < 7 && day_diff + ' days ago' ||
-        day_diff < 31 && Math.ceil( day_diff / 7 ) + ' weeks ago' ||
-        day_diff < 365 && Math.ceil(day_diff / 30) + ' months ago' ||
-        Math.ceil(day_diff / 365) + ' years ago'
-    }
-}
-
-customElements.define('time-ago', TimeAgo)

package/elements/toggle-switch/index.html

@@ -1,8 +0,0 @@
-<script src='https://unpkg.com/enigmatic'></script>
-<script src='toggle-switch.js'></script>
-
-<toggle-switch id='ts'></toggle-switch>
-<button onclick='ts.toggle()'>Toggle</button>
-<button onclick='ts.toggle(true)'>On</button>
-<button onclick='ts.toggle(false)'>Off</button>
-<button onclick='ts.set("")'>Set</button>

package/elements/toggle-switch/toggle-switch.js

@@ -1,86 +0,0 @@
-
-class ToggleSwitch extends EnigmaticElement {
-
-    async connectedCallback() {
-        this.innerHTML = `   
-<style>
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
-}
-
-.switch input { 
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-input:checked + .slider {
-  background-color: #2196F3;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px #2196F3;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-</style>
-
-<label class="switch">
-  <input type="checkbox" checked>
-  <span class="slider round"></span>
-</label>
-`
-    }
-
-    toggle(onoff) {
-      if (onoff !== undefined)
-        return this.querySelector('input').checked = onoff
-      this.querySelector('input').checked = !this.querySelector('input').checked;
-    }
-    set(v) {
-      const tf = !!v
-      this.querySelector('input').checked = tf
-    }
-}
-
-customElements.define('toggle-switch', ToggleSwitch)

package/elements/view-panel/index.html

@@ -1,18 +0,0 @@
-<script src='//unpkg.com/enigmatic'></script>
-<script src='view-panel.js'></script>
-<link rel='stylesheet' href='//unpkg.com/enigmatic/index.css'>
-
-<body>
-    <view-panel id='mypanel' agent='chromex'>
-        Hidden, not a valid agent
-    </view-panel>
-
-    <view-panel id='mypanel2'>
-        <div>One</div>
-        <div id='two'>Two</div>
-        <div>Three</div>
-    </view-panel>
-    <button onclick='mypanel2.hide()'>Hide</button>
-    <button onclick='mypanel2.show()'>Show</button>
-    <button onclick='mypanel2.showOnly("#two")'>Show only Two</button>
-</body> 

package/elements/view-panel/view-panel.js

@@ -1,22 +0,0 @@
-class ViewPanel extends EnigmaticElement {
-  constructor() {
-    super()
-  }
-  connectedCallback() {
-    const browser = navigator.userAgent.toLowerCase()
-    const agent = this.attributes['agent']?.value
-    if (agent && !browser.match(agent))
-      this.remove()
-  }
-  showOnly(qs) {
-    for (const child of this.children) {
-      if (child instanceof EnigmaticElement) {
-        child[child.matches(qs) ? 'show' : 'hide']()
-      } else {
-        child.classList.add(child.matches(qs) ? 'show' : 'hide')
-        child.classList.remove(child.matches(qs) ? 'hide' : 'show')
-      }
-    }
-  }
-}
-customElements.define('view-panel', ViewPanel)

package/elements/you-tube/index.html

@@ -1,7 +0,0 @@
-<script src='//unpkg.com/enigmatic'></script>
-<script src='you-tube.js'></script>
-<link rel='stylesheet' href='//unpkg.com/enigmatic/index.css'>
-
-<body>
-    <you-tube id='myvid' uid='Fku7hi5kI-c'></you-tube>
-</body>