enigmatic 0.9.20 → 0.10.2

package/enigmatic.js

@@ -1,120 +1,143 @@
-// e 0.9.16
-window.$ = document.querySelector.bind(document)
-window.$$ = document.querySelectorAll.bind(document)
-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)
-    })
-}
-window.wait = ms => new Promise(r => setTimeout(r, ms))
-window.data = new Proxy({}, {
-    set: (obj, prop, value) => {
-        for (const e of $$(`[data*=${prop}]`)) {
-            const arr = e.getAttribute('data').split('.')
-            arr.shift()
-            for (const p of arr) value = value[p]
-            e.set ? e.set(value) : e.textContent = value
-        }
-        return prop
-    }
-})
-window.ready = async () => {
-    return new Promise(r => {
-        if (document.readyState === 'complete')
-            r(true)
-        document.onreadystatechange = () => {
-            if (document.readyState === 'complete')
-                r()
-        }
-    })
-}
-
-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)
-
-const start = async () => {
-    await window.ready()
-    window.body = document.body
-    body.child = (type = 'div', id = Math.random()) => {
-        const child = document.createElement(type)
-        if (id) child.id = id
-        body.appendChild(child)
-        return child
-    }
-    if (window.main) window.main(document)
-}
-start()
+const w = {}, d = document;
+
+// helpers
+
+w.$ = d.querySelector.bind(d);
+w.$$ = d.querySelectorAll.bind(d);
+w.loadJS = (src) => {
+  return new Promise((r, j) => {
+    if ($(`script[src="${src}"]`)) return r(true);
+    const s = d.createElement('script');
+    s.src = src;
+    s.addEventListener('load', r);
+    d.head.appendChild(s);
+  });
+};
+w.loadCSS = (src) => {
+  return new Promise((r, j) => {
+    const s = document.createElement('link');
+    s.rel = 'stylesheet';
+    s.href = src;
+    s.addEventListener('load', r);
+    d.head.appendChild(s);
+  });
+};
+w.wait = (ms) => new Promise((r) => setTimeout(r, ms));
+w.ready = async () => {
+  return new Promise((r) => {
+    if (document.readyState === 'complete') r(true);
+    document.onreadystatechange = () => {
+      if (document.readyState === 'complete') r();
+    };
+  });
+};
+w.child = (type = 'div', html = '') => {
+  const e = d.createElement(type);
+  e.innerHTML = html;
+  d.body.appendChild(e);
+  return e;
+};
+
+// Custom element
+
+if(window.components) {
+  for(let name in window.components)
+    w.element(name, window.components[name])
+}
+w.element = (name, {onMount = x=>x, beforeData = x=>x, style, template = ''}) => {
+  customElements.define(name, class extends HTMLElement {
+    connectedCallback(props) {
+        onMount()
+        if (style) this.innerHTML += `<style>${name} { ${style} }</style>`;
+        this.template = template;
+    }
+    set(o)  {
+      this.innerHTML = ''
+      o = beforeData(o)
+      if(!Array.isArray(o)) o = [o];
+      const m = new Function('o', 'return `' + this.template + '`');
+      o.map((i) => (this.innerHTML += m(o)));
+    }
+  })
+}
+
+// Data
+
+w.state = new Proxy(
+  {}, {
+    set: (obj, prop, value) => {
+      let ret = []
+      for (const e of $$(`[data*=${prop}]`)) {
+        console.log(['setting e', e.tagName, e.id, value])
+        e.set(value);
+      }
+      obj[prop] = value;
+    },
+    get: (obj, prop, receiver) => {
+      if (prop == '_state') return obj;
+      return obj[prop];
+    },
+  }
+)
+
+w.dataEvent = (x) => console.log(`dataevent: ${x}`);
+
+w.fetchJSON = async (url, key) => {
+  const j = await (await fetch(url)).json();
+  if (key) state[key] = j;
+  dataEvent(j);
+  return j;
+};
+
+w.streamJSON = async (url, key) => {
+  const ev = new EventSource(url);
+  ev.onmessage = (ev) => {
+    const j = JSON.parse(ev.data);
+    if (key) state[key] = j;
+    dataEvent(j);
+    return j;
+  };
+};
+
+// State changes
+
+w.trackStateChanges = () =>
+(w.dataEvent = (o) =>
+  localStorage.set(new Date().toISOString(), JSON.stringify(o)));
+w.untrackStateChanges = () =>
+  (w.dataEvent = (o) => console.log('dataevent:', o));
+
+// Startup
+
+w.start = async () => {
+  await w.ready();
+  [...$$('div')].map((e) => {
+    if (!e.id)
+      e.id = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 3)
+    e.pr = {};
+    [...e.attributes].map((a) => (e.pr[a.name] = a.value));
+    if (e.pr.fetch) e.fetch = fetchJSON.bind(null, e.pr.fetch, e.id);
+    if ('immediate' in e.pr) e.fetch();
+    if (e.pr.stream) e.stream = streamJSON.bind(null, e.pr.stream, e.id);
+    if (e.pr.data) {
+      if (e.innerHTML && e.innerHTML.includes('{')) {
+        e.template = e.innerHTML.replaceAll('{', '${');
+        e.innerHTML = '';
+      }
+      e.set = (o) => {
+        e.innerHTML = ''
+        if (!Array.isArray(o)) o = [o];
+        const m = new Function('o', 'return `' + e.template + '`');
+        o.map((i) => (e.innerHTML += m(i)));
+      };
+    }
+  })
+}
+
+w.enigmatic = { version: '2022-03-05 0.10.2' };
+Object.assign(window, w);
+
+(async() => {
+  await w.start()
+  if(window.main) window.main()
+})();

package/index.html

@@ -1,10 +1,3 @@
 <script src='enigmatic.js'></script>
-<link rel='stylesheet' href='enigmatic.css'>
 
-<body style='--rows:1fr 1fr; --cols:1fr 1fr'>
-    <section style='--rows:1fr 1fr; --cols:1fr 1fr'>
-        <div style='--span:2'>1</div>
-        <div>2</div>
-        <div>3</div>
-    </section>
-</body>
+<div data='key'>This is data: {o.a}</div>

package/package.json

@@ -1,12 +1,5 @@
 {
-  "name": "enigmatic",
-  "description": "Simple web controls",
-  "url": "http://github.com/digplan/enigmatic",
-  "author": "",
-  "main": "enigmatic.js",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/digplan/enigmatic.git"
-  },
-  "version": "0.9.20"
-}
+    "name": "enigmatic",
+    "main": "enigmatic.js",
+    "version": "0.10.2"
+}

package/.vscode/launch.json

@@ -1,15 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "pwa-chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8080",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}

package/elements/alert-box/alert-box.js

@@ -1,19 +0,0 @@
-class AlertBox extends EnigmaticElement {
-
-  url = 'https://cdn.tailwindcss.com'
-
-  async connectedCallback() {
-    loadJS(this.url)
-    this.innerHTML = `<div style='width: 60%' class="fixed margins
-    ${this.getAttribute('position')} py-3 px-5 mb-4 ${this.getAttribute('tw-color')} text-blue-900 text-sm rounded-md border">
-    ${this.getAttribute('text')}</div>`
-    this.hide()
-  }
-
-  show() {
-    super.show()
-    setTimeout(this.hide.bind(this), this.getAttribute('timeout')||3000)
-  }
-
-}
-customElements.define('alert-box', AlertBox)

package/elements/alert-box/index.html

@@ -1,6 +0,0 @@
-<script src='//unpkg.com/enigmatic'></script>
-<script src='alert-box.js'></script>
-<link rel='stylesheet' href='http://localhost:3000/index.css'>
-
-<div></div>
-<alert-box timeout='5000' tw-color='bg-blue-200' position='top' text='something something alert box'></alert-box>

package/elements/block-maker/block-maker.js

@@ -1,15 +0,0 @@
-class BlockMaker extends EnigmaticElement {
-
-    async connectedCallback() {
-        let numblocks = this.getAttribute('num')
-        while(numblocks--) {
-            let ch = document.createElement('e-e')
-            document.body.appendChild(ch)
-            ch.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16)
-        }
-        this.style.display = 'none'
-    }
-
-}
-
-customElements.define('block-maker', BlockMaker)

package/elements/block-maker/index.html

@@ -1,7 +0,0 @@
-<script src='//unpkg.com/enigmatic'></script>
-<script src='block-maker.js'></script>
-<link rel='stylesheet' href='//unpkg.com/enigmatic/index.css'>
-
-<body class='grid' style='--rows: repeat(3, 1fr); --cols: repeat(3, 1fr)'>
-    <block-maker num='9'></block-maker>
-</body> 

package/elements/chart-progress-bar/chart-progress-bar.js

@@ -1,9 +0,0 @@
-class ProgressBar extends EnigmaticElement {
-    connectedCallback() {
-        this.innerHTML = `<progress id="file" value="${this.getAttribute('value')}" max="${this.getAttribute('max')}"></progress>`
-    }
-    set(v) {
-        this.children[0].value = v
-    }
-}
-customElements.define('progress-bar', ProgressBar)

package/elements/chart-progress-bar/index.html

@@ -1,5 +0,0 @@
-<script src='https://unpkg.com/enigmatic'></script>
-<script src='chart-progress-bar.js'></script>
-
-<progress-bar id='pro1' data='mypro' value='0' max='100'></progress-bar>
-<button onclick='pro1.set(80)'>Fifty</button>

package/elements/chart-radial-progress/chart-radial-progress.css

@@ -1,39 +0,0 @@
-@keyframes growProgressBar {
-    0%, 33% {
-        --pgPercentage: 0
-    }
-
-    100% {
-        --pgPercentage: var(--data)
-    }
-}
-
-@property --pgPercentage {
-    syntax: '<number>';
-    inherits: false;
-    initial-value: 0;
-}
-
-chart-radial-progress {
-    --size: 12rem;
-    --fg: #369;
-    --bg: #def;
-    --pgPercentage: var(--data);
-    animation: growProgressBar 1s 1 forwards;
-    width: var(--size);
-    height: var(--size);
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    background:
-        radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
-        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
-    font-family: Helvetica, Arial, sans-serif;
-    font-size: calc(var(--size) / 5);
-    color: var(--fg);
-}
-
-chart-radial-progress {
-    counter-reset: percentage var(--data);
-    content: counter(percentage) '%';
-}

package/elements/chart-radial-progress/chart-radial-progress.js

@@ -1,13 +0,0 @@
-class ChartRadialProgress extends EnigmaticElement {
-    constructor() {
-        super()
-        loadCSS('chart-radial-progress.css')
-    }
-    set(v) {
-        console.log(v)
-        this.innerHTML = v + this.getAttribute('symbol')
-        this.style = `--data:${v}`
-    }
-}
-
-customElements.define('chart-radial-progress', ChartRadialProgress)

package/elements/chart-radial-progress/index.html

@@ -1,13 +0,0 @@
-<script src='//unpkg.com/enigmatic'></script>
-<script src='chart-radial-progress.js'></script>
-<link rel='stylesheet' href='//unpkg.com/enigmatic/index.css'>
-
-<body class='grid' style='--rows: repeat(3, 1fr); --cols: repeat(3, 1fr)'>
-    <chart-radial-progress symbol='%' data='rp' style='--data:10'></chart-radial-progress>
-</body>
-
-<script>
-    main = () => {
-        data.set('rp', 20)
-    }
-</script>

package/elements/chart-statistic/chart-statistic.js

@@ -1,34 +0,0 @@
-class ChartStatistic extends EnigmaticElement {
-
-    async connectedCallback() {
-        const units = this.getAttribute('units')
-        this.innerHTML = `
-            <style>
-                chart-statistic {
-                    text-transform: uppercase;
-                    align-items: center;
-                    display: inline-flex;
-                    flex-direction: column;
-                }
-                .chart-statistic-value {
-                    font-size: 2.5em;
-                    font-weight: bold;
-                }
-                .chart-statistic-units {
-                    font-size: 1.5em;
-                    font-weight: normal;
-                }
-            </style>
-
-            <div class="chart-statistic-value">${this.getAttribute('default')||'0'}</div>
-            <div class="chart-statistic-units">${this.getAttribute('units')}</div>
-        `
-    }
-
-    set(newdata) {
-        this.children[1].innerText = newdata
-    }
-
-}
-
-customElements.define('chart-statistic', ChartStatistic)

package/elements/chart-statistic/index.html

@@ -1,13 +0,0 @@
-<script src='//unpkg.com/enigmatic'></script>
-<script src='chart-statistic.js'></script>
-<link rel='stylesheet' href='//unpkg.com/enigmatic/index.css'>
-
-<body class='grid' style='--rows: repeat(3, 1fr); --cols: repeat(3, 1fr)'>
-    <chart-statistic data='dp' default='10' units='Dollars'></chart-statistic>
-</body>
-
-<script>
-    main = () => {
-        data.set('dp', 60)
-    }
-</script>

package/elements/data-grid/data-grid.js

@@ -1,39 +0,0 @@
-class DataGrid extends EnigmaticElement {
-
-    async connectedCallback() {
-        const key = this.getAttribute('data')
-        const rows = this.getAttribute('rows')
-        const cols = this.getAttribute('cols')
-        const pid = this.getAttribute('id')
-        this.style.display = 'grid'
-        this.style.gridTemplateColumns = `repeat(${cols}, 1fr)`
-        this.style.gridTemplateRows = `repeat(${rows}, 1fr)`
-        this.innerHTML += `
-          <style>
-            cell {
-                width: 10rem;
-                padding: 0.5rem;
-            }
-          </style>`
-        let html = ''
-        for (let rn=0; rn<rows; rn++) {
-            for(let cn=0; cn<cols; cn++) {
-                html += `<cell id='${pid}-c${cn}r${rn}'>${cn}, ${rn}</cell>`
-            }
-        }
-        this.innerHTML = html
-    }
-
-    set(newdata) {
-        /*
-        for(const header, const cn of Object.keys(newdata[0])){
-            const id = `${this.id}-c${cn}r0`
-            $(`#${id}`).innerHTML = header
-            console.log(`#${id}`)
-        }
-        */
-    }
-
- }
-
-customElements.define('data-grid', DataGrid)

package/elements/data-grid/index.html

@@ -1,13 +0,0 @@
-<script src='//unpkg.com/enigmatic'></script>
-<script src='data-grid.js'></script>
-<link rel='stylesheet' href='//unpkg.com/enigmatic/index.css'>
-
-<body class='grid' style='--rows: repeat(3, 1fr); --cols: repeat(3, 1fr)'>
-    <data-grid data='dp' rows='4' cols='12'></data-grid>
-</body>
-
-<script>
-    main = () => {
-        data.set('dp', 60)
-    }
-</script>

package/elements/data-source/data-source.js

@@ -1,36 +0,0 @@
-class DataSource extends EnigmaticElement {
-    constructor() {
-        super()
-    }
-    async connectedCallback() {
-        const isWait = this.hasAttribute('wait')
-        if (!isWait)
-            await this.main()
-    }
-    async main() {
-        await window.ready()
-        this.fetch()
-    }
-    async fetch() {
-        const url = this.getAttribute('href')
-        if(!url) return
-        const target = this.getAttribute('target')
-        let json
-        if (this.hasAttribute('cache'))
-            json = await this.cache(url)
-        else
-            json = await (await fetch(url)).json()
-        if (target)
-            window.data.set(this.getAttribute('target'), json)
-    }
-    async cache(url) {
-        const cached = localStorage.getItem(url)
-        if (cached)
-            return JSON.parse(cached)
-        const json = await (await fetch(url)).json()
-        localStorage.setItem(url, JSON.stringify(json))
-        return json
-    }
-}
-
-customElements.define('data-source', DataSource)

package/elements/data-source/index.html

@@ -1,10 +0,0 @@
-<script src='https://unpkg.com/enigmatic'></script>
-<script src='data-source.js'></script>
-
-<data-source href='https://randomuser.me/api' target='users' cache></data-source>
-<data-source id='d2' href='https://randomuser.me/api' target='users2' cache wait></data-source>
-
-<e-e data='users.results'>one</e-e>
-<e-e data='users2.results'>Do not load with page</e-e>
-
-<button onclick='d2.fetch()'>Fetch</button>

package/elements/data-stream/data-stream.js

@@ -1,28 +0,0 @@
-class DataStream extends EnigmaticElement {
-    eventSource = null
-    constructor() {
-        super()
-    }
-    async connectedCallback() {
-        const isWait = this.hasAttribute('wait')
-        if (!isWait)
-            await this.main()
-    }
-    async main() {
-        await window.ready()
-        this.fetch()
-    }
-    async fetch() {
-        const url = this.getAttribute('href') || Error('Data stream needs a href')
-        const target = this.getAttribute('target') || Error('Data stream needs a target')
-        this.eventSource = new EventSource(url)
-        this.eventSource.onmessage = (e) => {
-            let d = e.data
-            try { d = JSON.parse(d) } catch(c) {}
-            console.log(d)
-            data.set(target, d)
-        }
-    }
-}
-
-customElements.define('data-stream', DataStream)

package/elements/data-stream/index.html

@@ -1,7 +0,0 @@
-<script src='https://unpkg.com/enigmatic'></script>
-<script src='data-stream.js'></script>
-
-<data-stream id='my' href='https://events-test-16hsk7tpgefv.runkit.sh/' target='tgt' wait></data-source>
-
-<e-e data='tgt.time'>ready</e-e>
-<button onclick='my.fetch()'>Fetch</button>

package/elements/font-awesome/font-awesome.js

@@ -1,11 +0,0 @@
-class FontAwesome extends HTMLElement {
-    async connectedCallback() {
-        await loadCSS('//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css')
-        this.innerHTML = `<i class="${this.getAttribute('icon')}"></i>`
-        this.currentIcon = this.getAttribute('icon')
-    }
-    set (icon) {
-        this.children[0].setAttribute('class', icon)
-    }
-}
-customElements.define('font-awesome', FontAwesome)