enigmatic 0.9.15 → 0.9.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{test.html → elements/test-runner/index.html} +0 -0
- package/enigmatic.css +6 -6
- package/enigmatic.js +27 -39
- package/index.html +10 -0
- package/package.json +1 -1
|
File without changes
|
package/enigmatic.css
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
/* layout */
|
|
2
2
|
|
|
3
|
-
body {
|
|
3
|
+
body, section {
|
|
4
4
|
display: grid;
|
|
5
5
|
font-family: Roboto, Helvetica, sans-serif;
|
|
6
6
|
margin: 0;
|
|
7
7
|
grid-template-columns: var(--cols, 1fr 4fr 1fr);
|
|
8
8
|
grid-template-rows: var(--rows, 1fr 9fr 1fr);
|
|
9
|
-
height: 100vh;
|
|
10
9
|
}
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
body {
|
|
12
|
+
height: 100vh;
|
|
14
13
|
}
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
grid-
|
|
15
|
+
section, div {
|
|
16
|
+
grid-column: span var(--span, 1);
|
|
17
|
+
grid-row: span var(--span-rows, 1);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.flex {
|
package/enigmatic.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
// e
|
|
1
|
+
// e 0.9.16
|
|
2
2
|
window.$ = document.querySelector.bind(document)
|
|
3
3
|
window.$$ = document.querySelectorAll.bind(document)
|
|
4
|
-
window.body = document.body
|
|
5
|
-
|
|
6
4
|
window.loadJS = src => {
|
|
7
5
|
return new Promise((r, j) => {
|
|
8
6
|
if ($(`script[src="${src}"]`))
|
|
@@ -13,7 +11,6 @@ window.loadJS = src => {
|
|
|
13
11
|
document.head.appendChild(s)
|
|
14
12
|
})
|
|
15
13
|
}
|
|
16
|
-
|
|
17
14
|
window.loadCSS = src => {
|
|
18
15
|
return new Promise((r, j) => {
|
|
19
16
|
const s = document.createElement('link')
|
|
@@ -23,27 +20,29 @@ window.loadCSS = src => {
|
|
|
23
20
|
document.head.appendChild(s)
|
|
24
21
|
})
|
|
25
22
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
v = v[k]
|
|
35
|
-
}
|
|
36
|
-
e.set ? e.set(v) : e.textContent = v
|
|
23
|
+
window.wait = ms => new Promise(r => setTimeout(r, ms))
|
|
24
|
+
window.data = new Proxy({}, {
|
|
25
|
+
set: (obj, prop, value) => {
|
|
26
|
+
for (const e of $$(`[data*=${prop}]`)) {
|
|
27
|
+
const arr = e.getAttribute('data').split('.')
|
|
28
|
+
arr.shift()
|
|
29
|
+
for (const p of arr) value = value[p]
|
|
30
|
+
e.set ? e.set(value) : e.textContent = value
|
|
37
31
|
}
|
|
38
|
-
|
|
39
|
-
ret[name] = value
|
|
40
|
-
return ret
|
|
32
|
+
return prop
|
|
41
33
|
}
|
|
34
|
+
})
|
|
35
|
+
window.ready = async () => {
|
|
36
|
+
return new Promise(r => {
|
|
37
|
+
if (document.readyState === 'complete')
|
|
38
|
+
r(true)
|
|
39
|
+
document.onreadystatechange = () => {
|
|
40
|
+
if (document.readyState === 'complete')
|
|
41
|
+
r()
|
|
42
|
+
}
|
|
43
|
+
})
|
|
42
44
|
}
|
|
43
45
|
|
|
44
|
-
window.data = new Data ()
|
|
45
|
-
window.wait = ms => new Promise(r => setTimeout(r, ms))
|
|
46
|
-
|
|
47
46
|
class EnigmaticElement extends HTMLElement {
|
|
48
47
|
constructor () {
|
|
49
48
|
super ()
|
|
@@ -105,28 +104,17 @@ class EnigmaticElement extends HTMLElement {
|
|
|
105
104
|
return e
|
|
106
105
|
}
|
|
107
106
|
}
|
|
108
|
-
|
|
109
107
|
customElements.define ('e-e', EnigmaticElement)
|
|
110
108
|
|
|
111
|
-
|
|
109
|
+
const start = async () => {
|
|
110
|
+
await window.ready()
|
|
112
111
|
window.body = document.body
|
|
113
|
-
body.child = (type, id) => {
|
|
112
|
+
body.child = (type = 'div', id = Math.random()) => {
|
|
114
113
|
const child = document.createElement(type)
|
|
115
|
-
if(id) child.id = id
|
|
114
|
+
if (id) child.id = id
|
|
116
115
|
body.appendChild(child)
|
|
117
116
|
return child
|
|
118
117
|
}
|
|
119
|
-
if(main) main(document)
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
window.ready = async () => {
|
|
124
|
-
return new Promise(r => {
|
|
125
|
-
if(document.readyState === 'complete')
|
|
126
|
-
r(true)
|
|
127
|
-
document.onreadystatechange = () => {
|
|
128
|
-
if (document.readyState === 'complete')
|
|
129
|
-
r()
|
|
130
|
-
}
|
|
131
|
-
})
|
|
132
|
-
}
|
|
118
|
+
if (window.main) window.main(document)
|
|
119
|
+
}
|
|
120
|
+
start()
|
package/index.html
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<script src='enigmatic.js'></script>
|
|
2
|
+
<link rel='stylesheet' href='enigmatic.css'>
|
|
3
|
+
|
|
4
|
+
<body style='--rows:1fr 1fr; --cols:1fr 1fr'>
|
|
5
|
+
<section style='--rows:1fr 1fr; --cols:1fr 1fr'>
|
|
6
|
+
<div style='--span:2'>1</div>
|
|
7
|
+
<div>2</div>
|
|
8
|
+
<div>3</div>
|
|
9
|
+
</section>
|
|
10
|
+
</body>
|
package/package.json
CHANGED