enigmatic 0.9.14 → 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/{index.css → enigmatic.css}

@@ -1,26 +1,40 @@
+/* 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;
 }
 
-.grid {
-    display: grid;
-    grid-template-columns: var(--cols);
-    grid-template-rows: var(--rows);
+.span {
+    grid-column: span var(--span, 3);
 }
 
-.single-center {
-    place-items: center;
-    height: 100vh;
+.span-rows {
+    grid-row: span var(--span-rows, 3);
 }
 
-.grail {
-    grid-template-columns: 1fr 4fr 1fr;
-    grid-template-rows: 1fr 7fr 1fr;
+.flex {
+    display: flex;
 }
 
-.span {
-    grid-column: span var(--span);
+/** positioning **/
+
+.center {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin-top: -50px;
+    margin-left: -100px;
+}
+
+.center-h {
+    position: fixed;
+    left: 50%;
+    margin-left: -100px;
 }
 
 .right {
@@ -31,11 +45,29 @@ body {
     float: left;
 }
 
-.center {
-    place-items: center;
-    text-align: center;
+.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;
@@ -43,6 +75,8 @@ body {
     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;
@@ -53,10 +87,6 @@ body {
     transition: opacity .25s linear;
 }
 
-.fixed {
-    position: fixed;
-}
-
 .slide-in {
     animation: slide-in 0.1s forwards;
     -webkit-animation: slide-in 0.1s forwards;
@@ -100,23 +130,6 @@ body {
 }
 
 
-.top {
-    top: 0;
-}
-
-.bottom {
-    bottom: 0;
-}
-
-.fill {
-    height: 100vh;
-    width: 100wh;
-}
-
-.roboto {
-    font-family: 'Roboto', sans-serif;
-}
-
 a {
     text-decoration: none;
 }
@@ -129,20 +142,12 @@ a {
     cursor: default;
 }
 
-.bg-navy {
-    background-color: #001f3f
-}
-
-.bg-blue {
+.bg-blue, .hover\:bg-blue:hover {
     background-color: #0074d9
 }
 
-.bg-aqua {
-    background-color: #7fdbff
-}
-
 .bg-green {
-    background-color: #2ecc40
+    background-color: #1a8d1e;
 }
 
 .bg-yellow {
@@ -169,20 +174,12 @@ a {
     background-color: #111
 }
 
-.bg-ltgray {
-    background-color: #f7f4f4
-}
-
-.navy {
-    color: #001f3f
-}
-
 .blue {
     color: #0074d9
 }
 
 .green {
-    color: #2ecc40
+    color: #1a8d1e;
 }
 
 .yellow {
@@ -197,22 +194,10 @@ a {
     color: #ff4136
 }
 
-.purple {
-    color: #b10dc9
-}
-
-.maroon {
-    color: #85144b
-}
-
 .white {
     color: #fff;
 }
 
-.silver {
-    color: #ddd
-}
-
 .gray {
     color: #aaa
 }
@@ -221,93 +206,16 @@ a {
     color: #111
 }
 
-.ltgray {
-    color: #fcfcfc
-}
-
-.modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #fcfcfc;
-    opacity: 0.8;
-    filter: alpha(opacity=80);
-    z-index: 1000;
-}
-
 .margins {
-    margin: 15px
+    margin: var(--margins, 15px)
 }
 
 .padding {
-    padding: 15px
-}
-
-img {
-    max-width: 100%;
-    height: auto
-}
-
-.ten {
-    font-size: 10px;
-}
-
-.twelve {
-    font-size: 12px;
-}
-
-.thirteen {
-    font-size: 13px;
-}
-
-.fourteen {
-    font-size: 14px;
-}
-
-.fifteen {
-    font-size: 15px;
-}
-
-.twenty {
-    font-size: 20px;
-}
-
-.thirty {
-    font-size: 30px;
-}
-
-.forty {
-    font-size: 40px;
-}
-
-.fifty {
-    font-size: 50px;
-}
-
-.sixty {
-    font-size: 60px;
-}
-
-.seventy {
-    font-size: 70px;
-}
-
-.eighty {
-    font-size: 80px;
-}
-
-.ninety {
-    font-size: 90px;
-}
-
-.hundred {
-    font-size: 100px;
+    padding: var(--padding, 15px)
 }
 
-.fixed {
-    position: fixed;
+.rem {
+    font-size: var(--rem, 2rem);
 }
 
 .faded {
@@ -336,16 +244,6 @@ img {
     opacity: 1
 }
 
-.full-page {
-    min-height: 100%;
-    min-width: 1024px;
-    width: 100%;
-    height: auto;
-    position: fixed;
-    top: 0;
-    left: 0;
-}
-
 .rounded {
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
@@ -353,6 +251,34 @@ img {
     -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;
@@ -371,13 +297,19 @@ li:hover {
     cursor: pointer;
 }
 
-.flex {
-    display: flex;
+/** Opacity **/
+.opacity-100 {
+    opacity: 1;
 }
 
-.round {
-    vertical-align: middle;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
+.opacity-25 {
+    opacity: .25;
+}
+
+.opacity-50 {
+    opacity: .5;
+}
+
+.opacity-75 {
+    opacity: .75;
 }

package/{index.js → enigmatic.js}

@@ -5,6 +5,8 @@ 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)
@@ -31,12 +33,7 @@ class Data {
             for(const k of e.getAttribute('data').split('.')) {
                 v = v[k]
             }
-            if(e.set){
-              e.set(v)
-            }
-        }
-        for (const e of $$(`[data=ALL]`)) {
-            e.set(this._)
+            e.set ? e.set(v) : e.textContent = v
         }
         const ret = {}
         ret[name] = value
@@ -119,6 +116,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
         body.appendChild(child)
         return child
     }
+    if(main) main(document)
     if(window.main) window.main(document)
 })
 

package/package.json

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