enigmatic 0.9.12 → 0.9.16

package/index.css

@@ -1,383 +0,0 @@
-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;
-}
-
-.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;
-}
-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;
-}
-.horizontal {
-    display: flex;
-}

package/index.js

@@ -1,78 +0,0 @@
-window.$ = document.querySelector.bind(document)
-window.$$ = document.querySelectorAll.bind(document)
-window.body = document.body
-
-window.loadJS = src => {
-    return new Promise((r, j) => {
-        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)
-    })
-}
-
-class Data {
-    _ = {}
-    set (name, value) { 
-        this._[name] = value
-        for(const e of $$(`[data*=${name}]`)) {
-            let v = this._
-            for(const k of e.data.split('.')) {
-                v = v[k]
-            }
-            e.set(v)
-        }
-        for (const e of $$(`[data=ALL]`)) {
-            e.set(this._)
-        }
-    }
-}
-
-window.data = new Data ()
-
-class EnigmaticElement extends HTMLElement {
-    constructor () {
-        super ()
-    }
-    connectedCallback () {
-        if (!this.id) this.id = +new Date() + Math.random()
-        for (let attr of this.attributes) {
-            this[attr.name] = attr.value
-        }
-    }
-    show () {
-        this.style.transition = 'opacity 0.2s ease-in-out'
-        this.style.opacity = 1
-    }
-    hide () {
-        this.style.transition = 'opacity 0.2s ease-in-out'
-        this.style.opacity = 0
-    }
-    set (s) {
-        if(typeof s === 'object') {
-            s = JSON.stringify(s)
-        }
-        this.innerHTML = s
-    }
-    child (type = 'e-e') {
-        const child = document.createElement(type)
-        this.appendChild(child)
-        return child
-    }
-}
-
-customElements.define ('e-e', EnigmaticElement)
-
-window.addEventListener('DOMContentLoaded', (event) => {
-    if(window.main) window.main(document)
-})

package/test.html

@@ -1,22 +0,0 @@
-<script src='main.js'></script>
-<script src='ce.mjs'></script>
-<link rel='stylesheet' href='main.css'>
-
-<style>
-    body {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        grid-template-rows: 1fr 1fr 1fr 1fr;
-        grid-gap: 1px;
-    }
-</style>
-
-<body>
-    <h-w></h-w>
-    <h-w2></h-w2>
-
-    <script>
-        ce('h-w', 'this.innerHTML = "okay"' )
-        ce('h-w2', 'this.innerHTML = "click me"; this.addEventListener("click", function() { document.write(1) })')
-    </script>
-</body>

package/test2.html

@@ -1,29 +0,0 @@
-<script src='https://unpkg.com/enigmatic'></script>
-<link rel='stylesheet' href='../enigmatic/index.css'>
-<script type='module' src='../enigmatic/elements/monaco-editor.mjs'></script>
-<script type='module' src='../enigmatic/ce.mjs'></script>
-
-<monaco-editor id='me1' estyle="width: 600px; height: 400px; border: 1px solid gray"></monaco-editor>
-<code for='me1' hidden>const f = () ={
-  console.log('Hello World');
-}</code>
-
-<script>
-    main = () => {
-        const s = $('#me1').editor.getValue()
-        ce('he-wo', s)
-    }
-</script>
-<he-wo></he-wo>
-
-<ul class='horizontal'>
-    <li>
-        <a href='#' onclick='main()'>click me</a>
-    </li>
-    <li>
-        <a href='#' onclick='main()'>click me</a>
-    </li>
-    <li>
-        <a href='#' onclick='main()'>click me</a>
-    </li>
-</ul>