enigmatic 0.9.14 → 0.9.18

package/{index.css → enigmatic.css}

@@ -1,26 +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;
 }
 
-.grid {
-    display: grid;
-    grid-template-columns: var(--cols);
-    grid-template-rows: var(--rows);
+div {
+    grid-column: span var(--span, 1);
+    grid-row: span var(--span-rows, 1);
 }
 
-.single-center {
-    place-items: center;
-    height: 100vh;
+.flex {
+    display: flex;
 }
 
-.grail {
-    grid-template-columns: 1fr 4fr 1fr;
-    grid-template-rows: 1fr 7fr 1fr;
+/** positioning **/
+
+.center {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin-top: -50px;
+    margin-left: -100px;
 }
 
-.span {
-    grid-column: span var(--span);
+.center-h {
+    position: fixed;
+    left: 50%;
+    margin-left: -100px;
 }
 
 .right {
@@ -31,11 +42,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 +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;
@@ -53,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;
@@ -100,23 +127,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 +139,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 +171,12 @@ a {
     background-color: #111
 }
 
-.bg-ltgray {
-    background-color: #f7f4f4
-}
-
-.navy {
-    color: #001f3f
-}
-
 .blue {
     color: #0074d9
 }
 
 .green {
-    color: #2ecc40
+    color: #1a8d1e;
 }
 
 .yellow {
@@ -197,22 +191,10 @@ a {
     color: #ff4136
 }
 
-.purple {
-    color: #b10dc9
-}
-
-.maroon {
-    color: #85144b
-}
-
 .white {
     color: #fff;
 }
 
-.silver {
-    color: #ddd
-}
-
 .gray {
     color: #aaa
 }
@@ -221,93 +203,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 +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;
@@ -353,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;
@@ -371,13 +294,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}

@@ -1,17 +1,16 @@
-// e-e
+// 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')
@@ -21,32 +20,29 @@ window.loadCSS = src => {
         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]
-            }
-            if(e.set){
-              e.set(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 ()
@@ -108,27 +104,17 @@ class EnigmaticElement extends HTMLElement {
         return e
     }
 }
-
 customElements.define ('e-e', EnigmaticElement)
 
-window.addEventListener('DOMContentLoaded', (event) => {
+const start = 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
     }
-    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()
-        }
-    })
-}
+    if (window.main) window.main(document)
+}
+start()

package/index.html

@@ -0,0 +1,16 @@
+<script src='enigmatic.js'></script>
+<link rel='stylesheet' href='enigmatic.css'>
+
+<body style='--rows:1fr 5fr; --cols:1fr 1fr'>
+    <div class='bg-red' data='mykey'></div>
+    <div data='mykey2.k'></div>
+    <div>three</div>
+</body>
+
+<script>
+    window.main = () => {
+        body.child().innerHTML = 'some text'
+        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.14"
+  "version": "0.9.18"
 }

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/sw-nouse.js

@@ -1,22 +0,0 @@
-self.addEventListener('install', event => {
-    console.log('V1 installing…');
-
-    // cache a cat SVG
-    event.waitUntil(
-        caches.open('static-v1').then(cache => cache.add('/index.js'))
-    );
-});
-
-self.addEventListener('activate', event => {
-    console.log('V1 now ready to handle fetches!');
-});
-
-self.addEventListener('fetch', event => {
-    const url = new URL(event.request.url);
-
-    // serve the cat SVG from the cache if the request is
-    // same-origin and the path is '/dog.svg'
-    if (url.origin == location.origin && url.pathname == '/index.js') {
-        event.respondWith(caches.match('/index.js'));
-    }
-});