enigmatic 0.9.12 → 0.9.16

package/enigmatic.css

@@ -0,0 +1,312 @@
+/* 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;
+}
+
+div {
+    grid-column: span var(--span, 1);
+    grid-row: span var(--span-rows, 1);
+}
+
+.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,119 @@
+// 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)
+
+(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)
+})()

package/index.html

@@ -0,0 +1,17 @@
+<script src='enigmatic.js'></script>
+<script type='module' src='elements/index.mjs'></script>
+<link rel='stylesheet' href='enigmatic.css'>
+
+<body style='--rows:1fr 1fr; --cols:1fr 1fr'>
+    <div data='mykey'></div>
+    <div data='mykey2.k'></div>
+    <div>three</div>
+</body>
+
+<script>
+    window.main = () => {
+        body.child().innerHTML = 'main'
+        data.mykey = 'somevalue'
+        data.mykey2 = {k: 'v'}
+    }
+</script>

package/package.json

@@ -2,14 +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.12",
-  "dependencies": {
-    "token": "^0.1.0"
-  }
+  "version": "0.9.16"
 }

package/readme.md

@@ -0,0 +1,99 @@
+<<<<<<< HEAD
+# enigmatic
+![version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&type=6&v=0.8.5&x2=0)
+![size](http://img.badgesize.io/digplan/enigmatic/master/main.js)
+
+Enigmatic is a JavaScript micro-library for creating web applications using lightweight web components.
+It aspires to enable faster web app peformance, better reliabilty, and faster development process. 
+
+Enigmatic uses HTML attributes (directives) with a simple component model and data binding - all on existing HTML, JS, and CSS functionality.
+- No special tooling, compilation or preprocessing, or new languages to learn
+- Minimal JS and CSS core, includes basic components and two way data binding
+
+## Quick Start
+Just create an HTML page
+````
+<script src='//unpkg.com/enigmatic'></script>
+<link href='//unpkg.com/enigmatic.css' rel='stylesheet'>
+````
+
+## Enigmatic also includes some helpers
+````
+ window.$ -- $([body])[0] // Query Selector All
+ window.load -- ('mycontrol.js') // Load JS or CSS
+ Element.css -- e.css('color:red') // Add css to an element
+ Element.child -- body.child('span') // Add a child element
+ 
+````
+
+## window.data
+window.data is a single data object, that holds all the data for the app.  It's a JS object, with each key being an identifier, or *channel* to use with controls that have the data attribute.
+
+Controls interact with the data object to send and receive data, using a data attribute and .set() method.
+````
+<!-- Just use the *data* attribute
+<hellodata data='mykey'></hellodata>
+  
+window.data.set('mykey', 'Hello world!')
+````
+
+One may also create a simple counter, interacting with plain ole (non-control) HTML elements.
+In this example, the window.data object and control's data attribute take care of the binding.
+````
+<button onclick='data.count++'>Click me</button>
+<counter data='count'></counter>
+
+data.count = 0
+const counter = e =>
+  e.innerHTML = 'Ready'
+````
+=======
+# enigmatic
+[![npm version](https://badge.fury.io/js/enigmatic.svg)](https://badge.fury.io/js/enigmatic)
+
+
+Enigmatic is a JavaScript micro-library for creating web applications using lightweight web components.
+It aspires to enable faster web app peformance, better reliabilty, and faster development process. 
+
+Enigmatic uses HTML attributes (directives) with a simple component model and data binding - all on existing HTML, JS, and CSS functionality.
+- No special tooling, compilation or preprocessing, or new languages to learn
+- Minimal JS and CSS core, includes basic components and two way data binding
+
+## Quick Start
+Just create an HTML page
+````
+<script src='//unpkg.com/enigmatic'></script>
+<link href='//unpkg.com/enigmatic.css' rel='stylesheet'>
+````
+
+## Enigmatic also includes some helpers
+````
+ window.$ -- $([body])[0] // Query Selector All
+ window.load -- ('mycontrol.js') // Load JS or CSS
+ Element.css -- e.css('color:red') // Add css to an element
+ Element.child -- body.child('span') // Add a child element
+ 
+````
+
+## window.data
+window.data is a single data object, that holds all the data for the app.  It's a JS object, with each key being an identifier, or *channel* to use with controls that have the data attribute.
+
+Controls interact with the data object to send and receive data, using a data attribute and .set() method.
+````
+<!-- Just use the *data* attribute
+<hellodata data='mykey'></hellodata>
+  
+window.data.set('mykey', 'Hello world!')
+````
+
+One may also create a simple counter, interacting with plain ole (non-control) HTML elements.
+In this example, the window.data object and control's data attribute take care of the binding.
+````
+<button onclick='data.count++'>Click me</button>
+<counter data='count'></counter>
+
+data.count = 0
+const counter = e =>
+  e.innerHTML = 'Ready'
+````
+>>>>>>> 4f836882c656008703aad8afc30997772829f574

package/ce.mjs

@@ -1,5 +0,0 @@
-window.ce = (type, func) => {
-    const cname = type.replace('-', '')
-    eval(`customElements.define("${type}", class x extends HTMLElement { connectedCallback() { ${func} } })`)
-    return func
-}

package/elements/hello-world.mjs

@@ -1,6 +0,0 @@
-class HelloWorld extends EnigmaticElement {
-    connectedCallback() {
-        this.innerHTML = `<h1>Hello World!</h1>`;
-    }
-}
-customElements.define('hello-world', HelloWorld);

package/elements/online-indicator.mjs

@@ -1,19 +0,0 @@
-class OnlineIndicator extends EnigmaticElement {
-    constructor() {
-        super()
-        this.addEventListener('online', () => {
-            this.render()
-        })
-        this.addEventListener('offline', () => {
-            this.render()
-        })
-    }
-    connectedCallback() {
-        this.render()
-    }
-    render() {
-        super.connectedCallback()
-        this.innerHTML = window.navigator.onLine ? (this.online||'🟢') : (this.offline||'🔴')
-    }
-}
-customElements.define('online-indicator', OnlineIndicator)

package/elements/you-tube.mjs

@@ -1,9 +0,0 @@
-class YouTube extends EnigmaticElement {
-    connectedCallback() {
-        this.uid = this.attributes.uid.value
-        this.innerHTML = `<iframe width="100%" height="100%" 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)