enigmatic 0.9.6 → 0.9.10

package/elements/monaco-editor.mjs

@@ -0,0 +1,32 @@
+class MonacoEditor extends HTMLElement {
+    async connectedCallback() {
+        await loadJS('//unpkg.com/monaco-editor@0.30.1/min/vs/loader.js')
+        this.innerHTML = `<div id="m-container" style="${this.getAttribute('estyle')}"></div>`
+        require.config({ paths: { vs: 'min/vs' } })
+        const id = this.getAttribute('id'), that = this
+        require(['vs/editor/editor.main'], function () {
+            const editor = monaco.editor.create(document.getElementById('m-container'), {
+                value: $(`code[for=${id}]`).innerHTML,
+                language: 'javascript'
+            })
+            that.editor = editor
+        })
+    }
+}
+customElements.define('monaco-editor', MonacoEditor)
+
+/*
+
+example..
+
+<monaco-editor id='me1' estyle="width: 600px; height: 400px; border: 1px solid gray"></monaco-editor>
+<code for='me1' hidden>
+    class HelloWorld extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = '<div>Hello World!</div>'
+      }
+    }
+    customElements.define('hello-world', HelloWorld)
+</code>
+
+*/

package/main.css

@@ -0,0 +1,372 @@
+body {
+    margin: 0
+}
+
+@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');
+}
+
+.flat {
+    border: 0;
+    outline-width: 0
+}
+
+.fill {
+    height: 100%;
+    width: 100%
+}
+
+.border {
+    border: 1px solid black
+}
+
+.fadein {
+    font-size: 21px;
+    text-align: center;
+    -webkit-animation: fadein 3s;
+    /* Safari, Chrome and Opera > 12.1 */
+    -moz-animation: fadein 3s;
+    /* Firefox < 16 */
+    -ms-animation: fadein 3s;
+    /* Internet Explorer */
+    -o-animation: fadein 3s;
+    /* Opera < 12.1 */
+    animation: fadein 3s;
+}
+
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.roboto {
+    font-family: 'Roboto', sans-serif;
+}
+
+a {
+    text-decoration: none !important
+}
+
+.shadow {
+    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;
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+.cursor {
+    cursor: default
+}
+
+navy, .bg-navy {
+    background-color: #001f3f
+}
+
+blue, .bg-blue {
+    background-color: #0074d9
+}
+
+aqua, .bg-aqua {
+    background-color: #7fdbff
+}
+
+green, .bg-green {
+    background-color: #2ecc40
+}
+
+yellow, .bg-yellow {
+    background-color: #ffdc00
+}
+
+orange, .bg-orange {
+    background-color: #ff851b
+}
+
+red, .bg-red {
+    background-color: #ff4136
+}
+
+fuchsia, .bg-fuchsia {
+    background-color: #f012be
+}
+
+purple, .bg-purple {
+    background-color: #b10dc9
+}
+
+maroon, .bg-maroon {
+    background-color: #85144b
+}
+
+white, .bg-white {
+    background-color: #fff
+}
+
+gray, .bg-gray {
+    background-color: #aaa
+}
+
+silver, .bg-silver {
+    background-color: #ddd
+}
+
+black, .bg-black {
+    background-color: #111
+}
+
+ltgray, .bg-ltgray {
+    background-color: #fcfcfc
+}
+
+.navy {
+    color: #001f3f
+}
+
+.blue {
+    color: #0074d9
+}
+
+.aqua {
+    color: #7fdbff
+}
+
+.teal {
+    color: #39cccc
+}
+
+.olive {
+    color: #3d9970
+}
+
+.green {
+    color: #2ecc40
+}
+
+.lime {
+    color: #01ff70
+}
+
+.yellow {
+    color: #ffdc00
+}
+
+.orange {
+    color: #ff851b
+}
+
+.red {
+    color: #ff4136
+}
+
+.fuchsia {
+    color: #f012be
+}
+
+.purple {
+    color: #b10dc9
+}
+
+.maroon {
+    color: #85144b
+}
+
+.white {
+    color: #fff !important
+}
+
+.silver {
+    color: #ddd
+}
+
+.gray {
+    color: #aaa
+}
+
+.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;
+}
+
+.center {
+    margin: 0 auto;
+    text-align: center
+}
+
+.margins {
+    margin: 15px
+}
+
+.padding {
+    padding: 15px
+}
+
+.border {
+    border: 10px 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;
+}
+
+.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
+}
+
+.hide {
+    visibility: hidden
+}
+
+.show {
+    visibility: ''
+}
+
+.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
+}
+
+.full-page {
+    min-height: 100%;
+    min-width: 1024px;
+    width: 100%;
+    height: auto;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
+@media screen and (max-width: 1024px) {
+    /* Specific to this particular image */
+    img.full-page {
+        left: 50%;
+        margin-left: -512px;
+        /* 50% */
+    }
+}
+
+.rounded {
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    -khtml-border-radius: 10px;
+}

package/main.js

@@ -2,7 +2,7 @@ window.$ = document.querySelector.bind(document)
 window.$$ = document.querySelectorAll.bind(document)
 window.body = document.body
 
-window.load = src => {
+window.loadJS = src => {
     return new Promise((r, j) => {
         const s = document.createElement('script')
         s.src = src
@@ -11,6 +11,16 @@ window.load = src => {
     })
 }
 
+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)
+    })
+}
+
 class Data {
     _ = {}
     set (name, value) { 
@@ -61,4 +71,8 @@ class EnigmaticElement extends HTMLElement {
     }
 }
 
-customElements.define ('e-e', EnigmaticElement)
+customElements.define ('e-e', EnigmaticElement)
+
+window.addEventListener('DOMContentLoaded', (event) => {
+    if(window.main) window.main(document)
+})

package/package.json

@@ -4,12 +4,9 @@
   "url": "http://github.com/digplan/enigmatic",
   "author": "<digplan@outlook.com>",
   "main": "main.js",
-  "dependencies": {
-    "testchrome": "*"
-  },
   "repository": {
     "type": "git",
     "url": "git://github.com/digplan/enigmatic.git"
   },
-  "version": "0.9.6"
+  "version": "0.9.10"
 }

package/test.html

@@ -1,30 +1,40 @@
 <script src='main.js'></script>
+<link rel='stylesheet' href='main.css'>
 
-<e-e data='ALL'>all data</e-e>
-<e-e data='message'>key of data</e-e>
-<button onclick='data.set("message", "hello world")'>Set data</button>
-
-<br>
-
-<e-e id='x'>Something</e-e>
-<button onclick='x.show()'>Show</button>
-<button onclick='x.hide()'>Hide</button>
-<button onclick='x.child().set(" im a child ")'>Child</button>
+<style>
+    body {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr 1fr;
+        grid-gap: 1px;
+    }
+</style>
 
-<br>
+<body>
+    <div class='bg-white'>
+       All data: <e-e data='ALL'>data</e-e>
+       <br>
+       Element data: <e-e id='ds' data='targetkey.method' class='bg-aqua'></e-e>
+       <br>
+       <button onclick='data.set("targetkey", {method: "a value"})''>set</button>   
+    </div> 
+    <div class='bg-green'></div>
+    <div class='bg-red'></div>
+    <div class='bg-yellow'></div>
+    <e-e id='b' class='bg-black'></e-e>
+    <div class='bg-gray'></div>
+    <div class='bg-orange'></div>
+    <div class='bg-maroon'></div>
 
-<script>
-    class mySubclass extends EnigmaticElement {
-        constructor() {
-            super()
+    <script>
+        class mySubclass extends EnigmaticElement {
+            connectedCallback() {
+                this.set('<h1>This is a subclass!</h1>')
+            }
         }
-        connectedCallback() {
-            this.set('Hello world')
-        }
-    }
-    customElements.define('my-subclass', mySubclass);
-</script>
-
-<my-subclass></my-subclass>
+        customElements.define('my-subclass', mySubclass);
+    </script>
+    <my-subclass class='bg-yellow'>&lt;my-subclass class='bg-yellow'></my-subclass>
 
-<hello-world></hello-world>
+    <button onclick='b.hide()'>Hide</button>
+</body>