enigmatic 0.9.13 → 0.9.17

package/{index.css → enigmatic.css}

@@ -1,7 +1,37 @@
+/* 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 {
@@ -12,11 +42,29 @@ body {
     float: left;
 }
 
+.fixed {
+    position: fixed;
+}
 
-.center {
-    place-items: center;
+.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;
@@ -24,6 +72,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;
@@ -34,10 +84,6 @@ body {
     transition: opacity .25s linear;
 }
 
-.fixed {
-    position: fixed;
-}
-
 .slide-in {
     animation: slide-in 0.1s forwards;
     -webkit-animation: slide-in 0.1s forwards;
@@ -81,83 +127,6 @@ body {
 }
 
 
-.top {
-    top: 0;
-}
-
-.bottom {
-    bottom: 0;
-}
-
-footer {
-    position: fixed;
-    bottom: 0;
-    margin: 10px;
-    display: flex;
-}
-
-header {
-    position: fixed;
-    top: 0;
-    margin: 10px;
-    display: flex;
-}
-
-.grid {
-    display: grid;
-}
-
-.threebythree {
-    grid-template: repeat(3, 1fr) / repeat(3, 1fr)
-}
-
-.threerow {
-    grid-template-rows: 2fr 16fr 1fr;
-}
-
-.grail {
-    grid-template-columns: 1fr 4fr 1fr;
-    grid-template-rows: 1fr 7fr 1fr;
-}
-
-.span-2 {
-    grid-column: span 2;
-}
-
-.span-3 {
-    grid-column: span 3;
-}
-
-.span-4 {
-    grid-column: span 4;
-}
-
-.span-5 {
-    grid-column: span 5;
-}
-
-.span-6 {
-    grid-column: span 6;
-}
-
-.flat {
-    border: 0;
-    outline-width: 0
-}
-
-.fill {
-    height: 100vh;
-    width: 100wh;
-}
-
-.border {
-    border: 1px solid black
-}
-
-.roboto {
-    font-family: 'Roboto', sans-serif;
-}
-
 a {
     text-decoration: none;
 }
@@ -166,78 +135,48 @@ a {
     box-shadow: 6px 6px 6px #dbdbdb
 }
 
-.loading {
-    border: 4px solid #dbdbdb;
-    border-radius: 50%;
-    border-top: 6px solid #000000;
-    width: 10px;
-    height: 10px;
-    -webkit-animation: spin 1s linear infinite;
-    animation: spin 1s linear infinite;
-}
-
 .cursor {
-    cursor: default
-}
-
-navy, .bg-navy {
-    background-color: #001f3f
+    cursor: default;
 }
 
-blue, .bg-blue {
+.bg-blue, .hover\:bg-blue:hover {
     background-color: #0074d9
 }
 
-aqua, .bg-aqua {
-    background-color: #7fdbff
-}
-
 .bg-green {
-    background-color: #2ecc40
+    background-color: #1a8d1e;
 }
 
-yellow, .bg-yellow {
+.bg-yellow {
     background-color: #ffdc00
 }
 
-orange, .bg-orange {
+.bg-orange {
     background-color: #ff851b
 }
 
-red, .bg-red {
+.bg-red {
     background-color: #ff4136
 }
 
-white, .bg-white {
+.bg-white {
     background-color: #fff
 }
 
-gray, .bg-gray {
+.bg-gray {
     background-color: #aaa
 }
 
-black, .bg-black {
+.bg-black {
     background-color: #111
 }
 
-.bg-ltgray {
-    background-color: #f7f4f4
-}
-
-.navy {
-    color: #001f3f
-}
-
 .blue {
     color: #0074d9
 }
 
 .green {
-    color: #2ecc40
-}
-
-.lime {
-    color: #01ff70
+    color: #1a8d1e;
 }
 
 .yellow {
@@ -252,24 +191,8 @@ black, .bg-black {
     color: #ff4136
 }
 
-.fuchsia {
-    color: #f012be
-}
-
-.purple {
-    color: #b10dc9
-}
-
-.maroon {
-    color: #85144b
-}
-
 .white {
-    color: #fff !important
-}
-
-.silver {
-    color: #ddd
+    color: #fff;
 }
 
 .gray {
@@ -280,101 +203,16 @@ black, .bg-black {
     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
-}
-
-.border {
-    border: 6px solid #eee;
-}
-
-.front {
-    z-index: 100
-}
-
-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;
+    padding: var(--padding, 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;
-}
-
-.fixed {
-    position: fixed;
+.rem {
+    font-size: var(--rem, 2rem);
 }
 
 .faded {
@@ -403,16 +241,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;
@@ -420,6 +248,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;
@@ -438,6 +294,19 @@ li:hover {
     cursor: pointer;
 }
 
-.horizontal {
-    display: flex;
+/** Opacity **/
+.opacity-100 {
+    opacity: 1;
+}
+
+.opacity-25 {
+    opacity: .25;
+}
+
+.opacity-50 {
+    opacity: .5;
+}
+
+.opacity-75 {
+    opacity: .75;
 }

package/{index.js → enigmatic.js}

@@ -1,16 +1,16 @@
+// e 0.9.16
 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')
@@ -20,34 +20,29 @@ window.loadCSS = src => {
         document.head.appendChild(s)
     })
 }
-
-class Data {
-    _ = {}
-    set (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.style.setProperty('--data', value)
-            if(e.set)
-              e.set(v)
-            else if(e.tagName == 'IMG')
-              e.src = v
-        }
-        for (const e of $$(`[data=ALL]`)) {
-            e.set(this._)
+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
         }
-        const ret = {}
-        ret[name] = value
-        return ret
+        return prop
     }
+})
+window.ready = async () => {
+    return new Promise(r => {
+        if (document.readyState === 'complete')
+            r(true)
+        document.onreadystatechange = () => {
+            if (document.readyState === 'complete')
+                r()
+        }
+    })
 }
 
-window.data = new Data ()
-window.wait = ms => new Promise(r => setTimeout(r, ms))
-
 class EnigmaticElement extends HTMLElement {
     constructor () {
         super ()
@@ -58,6 +53,7 @@ class EnigmaticElement extends HTMLElement {
         for (let attr of this.attributes) {
             this[attr.name] = attr.value
         }
+        this.innerTemplate = this.innerHTML
     } 
     async show () {
         return new Promise(r => {
@@ -108,23 +104,16 @@ class EnigmaticElement extends HTMLElement {
         return e
     }
 }
-
 customElements.define ('e-e', EnigmaticElement)
 
-window.addEventListener('DOMContentLoaded', (event) => {
+(async () => {
+    await window.ready()
     window.body = document.body
-    body.child = (type, id) => {
+    body.child = (type = 'div', id = Math.random()) => {
         const child = document.createElement(type)
-        if(id) child.id = id
+        if (id) child.id = id
         body.appendChild(child)
         return child
     }
-    loadCSS('index.css')
-    if(window.main) window.main(document)
-})
-
-window.ce = (type, func) => {
-    const cname = type.replace('-', '')
-    eval(`customElements.define("${type}", class x extends HTMLElement { connectedCallback() { ${func} } })`)
-    return func
-}
+    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,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.13"
+  "version": "0.9.17"
 }

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