enigmatic 0.9.11 → 0.9.15

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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)

package/enigmatic.css

@@ -0,0 +1,315 @@
+/* layout */
+
+body {
+    display: grid;
+    font-family: Roboto, Helvetica, sans-serif;
+    margin: 0;
+    grid-template-columns: var(--cols, 1fr 4fr 1fr);
+    grid-template-rows: var(--rows, 1fr 9fr 1fr);
+    height: 100vh;
+}
+
+.span {
+    grid-column: span var(--span, 3);
+}
+
+.span-rows {
+    grid-row: span var(--span-rows, 3);
+}
+
+.flex {
+    display: flex;
+}
+
+/** positioning **/
+
+.center {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin-top: -50px;
+    margin-left: -100px;
+}
+
+.center-h {
+    position: fixed;
+    left: 50%;
+    margin-left: -100px;
+}
+
+.right {
+    float: right;
+}
+
+.left {
+    float: left;
+}
+
+.fixed {
+    position: fixed;
+}
+
+.top {
+    top: 0;
+}
+
+.bottom {
+    bottom: 0;
+}
+
+.fill {
+    height: 100vh;
+    width: 100wh;
+}
+
+.roboto {
+    font-family: 'Roboto', sans-serif;
+}
+
+/** font **/
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto Regular'), local('Roboto-Regular'), url(//themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
+}
+
+/** elements **/
+
+.hide {
+    opacity: 0;
+    transition: opacity .25s linear;
+}
+
+.show {
+    opacity: 1;
+    transition: opacity .25s linear;
+}
+
+.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%);
+    }
+}
+
+@keyframes slide-out {
+    0% {
+        transform: translateX(0%);
+    }
+
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+@-webkit-keyframes slide-out {
+    0% {
+        -webkit-transform: translateX(0%);
+    }
+
+    100% {
+        -webkit-transform: translateX(-100%);
+    }
+}
+
+
+a {
+    text-decoration: none;
+}
+
+.shadow {
+    box-shadow: 6px 6px 6px #dbdbdb
+}
+
+.cursor {
+    cursor: default;
+}
+
+.bg-blue, .hover\:bg-blue:hover {
+    background-color: #0074d9
+}
+
+.bg-green {
+    background-color: #1a8d1e;
+}
+
+.bg-yellow {
+    background-color: #ffdc00
+}
+
+.bg-orange {
+    background-color: #ff851b
+}
+
+.bg-red {
+    background-color: #ff4136
+}
+
+.bg-white {
+    background-color: #fff
+}
+
+.bg-gray {
+    background-color: #aaa
+}
+
+.bg-black {
+    background-color: #111
+}
+
+.blue {
+    color: #0074d9
+}
+
+.green {
+    color: #1a8d1e;
+}
+
+.yellow {
+    color: #ffdc00
+}
+
+.orange {
+    color: #ff851b
+}
+
+.red {
+    color: #ff4136
+}
+
+.white {
+    color: #fff;
+}
+
+.gray {
+    color: #aaa
+}
+
+.black {
+    color: #111
+}
+
+.margins {
+    margin: var(--margins, 15px)
+}
+
+.padding {
+    padding: var(--padding, 15px)
+}
+
+.rem {
+    font-size: var(--rem, 2rem);
+}
+
+.faded {
+    opacity: 0.5;
+}
+
+.fade {
+    opacity: 1;
+    transition: opacity .25s ease-in-out;
+    -moz-transition: opacity .25s ease-in-out;
+    -webkit-transition: opacity .25s ease-in-out;
+}
+
+.fade:hover {
+    opacity: 0.5
+}
+
+.unfade {
+    opacity: 0.5;
+    transition: opacity .25s ease-in-out;
+    -moz-transition: opacity .25s ease-in-out;
+    -webkit-transition: opacity .25s ease-in-out;
+}
+
+.unfade:hover {
+    opacity: 1
+}
+
+.rounded {
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    -khtml-border-radius: 10px;
+}
+
+.round {
+    vertical-align: middle;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+}
+
+/** html elements **/
+
+button {
+    border-radius: 0.5rem;
+    background-color: #787978;
+    /* Green */
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    opacity: .85;
+    transition: opacity .25s ease-in-out;
+}
+
+button:hover {
+    opacity: 1;
+    transition: opacity .25s ease-in-out;
+}
+
+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;
+}
+
+/** Opacity **/
+.opacity-100 {
+    opacity: 1;
+}
+
+.opacity-25 {
+    opacity: .25;
+}
+
+.opacity-50 {
+    opacity: .5;
+}
+
+.opacity-75 {
+    opacity: .75;
+}

package/enigmatic.js

@@ -0,0 +1,132 @@
+// e-e
+window.$ = document.querySelector.bind(document)
+window.$$ = document.querySelectorAll.bind(document)
+window.body = document.body
+
+window.loadJS = src => {
+    return new Promise((r, j) => {
+        if ($(`script[src="${src}"]`))
+            return r(true)
+        const s = document.createElement('script')
+        s.src = src
+        s.addEventListener('load', r)
+        document.head.appendChild(s)
+    })
+}
+
+window.loadCSS = src => {
+    return new Promise((r, j) => {
+        const s = document.createElement('link')
+        s.rel = 'stylesheet'
+        s.href = src
+        s.addEventListener('load', r)
+        document.head.appendChild(s)
+    })
+}
+
+class Data {
+    _ = {}
+    set (name= new Error('data.set() needs a name'), value) { 
+        this._[name] = value
+        for(const e of $$(`[data*=${name}]`)) {
+            let v = this._
+            for(const k of e.getAttribute('data').split('.')) {
+                v = v[k]
+            }
+            e.set ? e.set(v) : e.textContent = v
+        }
+        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 = Math.floor(Math.random() * 5000)
+        for (let attr of this.attributes) {
+            this[attr.name] = attr.value
+        }
+        this.innerTemplate = this.innerHTML
+    } 
+    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)
+        })
+    }
+    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)
+        })
+    }
+    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') {
+            s = JSON.stringify(s)
+        }
+        this.innerHTML = s
+    }
+    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
+    }
+    if(main) main(document)
+    if(window.main) window.main(document)
+})
+
+window.ready = async () => {
+    return new Promise(r => {
+        if(document.readyState === 'complete')
+            r(true)
+        document.onreadystatechange = () => {
+            if (document.readyState === 'complete')
+                r()
+        }
+    })
+}

package/package.json

@@ -2,11 +2,11 @@
   "name": "enigmatic",
   "description": "Simple web controls",
   "url": "http://github.com/digplan/enigmatic",
-  "author": "<digplan@outlook.com>",
-  "main": "main.js",
+  "author": "",
+  "main": "enigmatic.js",
   "repository": {
     "type": "git",
     "url": "git://github.com/digplan/enigmatic.git"
   },
-  "version": "0.9.11"
+  "version": "0.9.15"
 }