npm - enigmatic - Versions diffs - 0.9.14 → 0.9.18 - Mend

enigmatic 0.9.14 → 0.9.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/.vscode/launch.json +15 -0
package/elements/alert-box/alert-box.js +19 -0
package/elements/alert-box/index.html +6 -0
package/elements/block-maker/block-maker.js +15 -0
package/elements/block-maker/index.html +7 -0
package/elements/chart-progress-bar/chart-progress-bar.js +9 -0
package/elements/chart-progress-bar/index.html +5 -0
package/elements/chart-radial-progress/chart-radial-progress.css +39 -0
package/elements/chart-radial-progress/chart-radial-progress.js +13 -0
package/elements/chart-radial-progress/index.html +13 -0
package/elements/chart-statistic/chart-statistic.js +34 -0
package/elements/chart-statistic/index.html +13 -0
package/elements/data-grid/data-grid.js +39 -0
package/elements/data-grid/index.html +13 -0
package/elements/data-source/data-source.js +36 -0
package/elements/data-source/index.html +10 -0
package/elements/data-stream/data-stream.js +28 -0
package/elements/data-stream/index.html +7 -0
package/elements/font-awesome/font-awesome.js +11 -0
package/elements/font-awesome/index.html +7 -0
package/elements/for-list/for-list.js +25 -0
package/elements/for-list/index.html +11 -0
package/elements/hello-world/hello-world.js +16 -0
package/elements/hello-world/index.html +3 -0
package/elements/index.mjs +20 -0
package/elements/map-embed/index.html +4 -0
package/elements/map-embed/map-embed.js +9 -0
package/elements/monaco-editor/index.html +11 -0
package/elements/monaco-editor/monaco-editor.mjs +33 -0
package/elements/online-indicator/index.html +15 -0
package/elements/online-indicator/online-indicator.js +20 -0
package/elements/side-menu/index.html +10 -0
package/elements/side-menu/side-menu.js +16 -0
package/elements/tailwind-css/index.html +11 -0
package/elements/tailwind-css/tailwind-css.js +11 -0
package/elements/test-runner/index.html +176 -0
package/elements/test-runner/test-runner.js +59 -0
package/elements/time-ago/index.html +11 -0
package/elements/time-ago/time-ago.js +22 -0
package/elements/toggle-switch/index.html +8 -0
package/elements/toggle-switch/toggle-switch.js +86 -0
package/elements/view-panel/index.html +18 -0
package/elements/view-panel/view-panel.js +22 -0
package/elements/you-tube/index.html +7 -0
package/elements/you-tube/you-tube.js +9 -0
package/{index.css → enigmatic.css} +94 -165
package/{index.js → enigmatic.js} +29 -43
package/index.html +16 -0
package/package.json +3 -3
package/readme.md +99 -0
package/sw-nouse.js +0 -22

package/elements/test-runner/index.html ADDED Viewed

@@ -0,0 +1,176 @@
+<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 ADDED Viewed

@@ -0,0 +1,59 @@
+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 ADDED Viewed

@@ -0,0 +1,11 @@
+<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 ADDED Viewed

@@ -0,0 +1,22 @@
+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 ADDED Viewed

@@ -0,0 +1,8 @@
+<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 ADDED Viewed

@@ -0,0 +1,86 @@
+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 ADDED Viewed

@@ -0,0 +1,18 @@
+<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 ADDED Viewed

@@ -0,0 +1,22 @@
+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 ADDED Viewed

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

package/elements/you-tube/you-tube.js ADDED Viewed

@@ -0,0 +1,9 @@
+class YouTube extends EnigmaticElement {
+    connectedCallback() {
+        this.uid = this.getAttribute('uid') || 'Fku7hi5kI-c'
+        this.innerHTML = `<iframe width="560" height="315" 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)