enigmatic 0.9.13 → 0.9.17
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/.vscode/launch.json +15 -0
- package/elements/alert-box/alert-box.js +19 -0
- package/elements/alert-box/index.html +6 -0
- package/elements/block-maker/block-maker.js +15 -0
- package/elements/block-maker/index.html +7 -0
- package/elements/chart-progress-bar/chart-progress-bar.js +9 -0
- package/elements/chart-progress-bar/index.html +5 -0
- package/elements/chart-radial-progress/chart-radial-progress.css +39 -0
- package/elements/chart-radial-progress/chart-radial-progress.js +13 -0
- package/elements/chart-radial-progress/index.html +13 -0
- package/elements/chart-statistic/chart-statistic.js +34 -0
- package/elements/chart-statistic/index.html +13 -0
- package/elements/data-grid/data-grid.js +39 -0
- package/elements/data-grid/index.html +13 -0
- package/elements/data-source/data-source.js +36 -0
- package/elements/data-source/index.html +10 -0
- package/elements/data-stream/data-stream.js +28 -0
- package/elements/data-stream/index.html +7 -0
- package/elements/font-awesome/font-awesome.js +11 -0
- package/elements/font-awesome/index.html +7 -0
- package/elements/for-list/for-list.js +25 -0
- package/elements/for-list/index.html +11 -0
- package/elements/hello-world/hello-world.js +16 -0
- package/elements/hello-world/index.html +3 -0
- package/elements/index.mjs +20 -0
- package/elements/map-embed/index.html +4 -0
- package/elements/map-embed/map-embed.js +9 -0
- package/elements/monaco-editor/index.html +11 -0
- package/elements/monaco-editor/monaco-editor.mjs +33 -0
- package/elements/online-indicator/index.html +15 -0
- package/elements/online-indicator/online-indicator.js +20 -0
- package/elements/side-menu/index.html +10 -0
- package/elements/side-menu/side-menu.js +16 -0
- package/elements/tailwind-css/index.html +11 -0
- package/elements/tailwind-css/tailwind-css.js +11 -0
- package/elements/test-runner/index.html +176 -0
- package/elements/test-runner/test-runner.js +59 -0
- package/elements/time-ago/index.html +11 -0
- package/elements/time-ago/time-ago.js +22 -0
- package/elements/toggle-switch/index.html +8 -0
- package/elements/toggle-switch/toggle-switch.js +86 -0
- package/elements/view-panel/index.html +18 -0
- package/elements/view-panel/view-panel.js +22 -0
- package/elements/you-tube/index.html +7 -0
- package/elements/you-tube/you-tube.js +9 -0
- package/{index.css → enigmatic.css} +110 -241
- package/{index.js → enigmatic.js} +29 -40
- package/index.html +17 -0
- package/package.json +3 -3
- package/readme.md +99 -0
- package/sw.js +0 -22
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
// Use IntelliSense to learn about possible attributes.
|
|
3
|
+
// Hover to view descriptions of existing attributes.
|
|
4
|
+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
|
5
|
+
"version": "0.2.0",
|
|
6
|
+
"configurations": [
|
|
7
|
+
{
|
|
8
|
+
"type": "pwa-chrome",
|
|
9
|
+
"request": "launch",
|
|
10
|
+
"name": "Launch Chrome against localhost",
|
|
11
|
+
"url": "http://localhost:8080",
|
|
12
|
+
"webRoot": "${workspaceFolder}"
|
|
13
|
+
}
|
|
14
|
+
]
|
|
15
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
class AlertBox extends EnigmaticElement {
|
|
2
|
+
|
|
3
|
+
url = 'https://cdn.tailwindcss.com'
|
|
4
|
+
|
|
5
|
+
async connectedCallback() {
|
|
6
|
+
loadJS(this.url)
|
|
7
|
+
this.innerHTML = `<div style='width: 60%' class="fixed margins
|
|
8
|
+
${this.getAttribute('position')} py-3 px-5 mb-4 ${this.getAttribute('tw-color')} text-blue-900 text-sm rounded-md border">
|
|
9
|
+
${this.getAttribute('text')}</div>`
|
|
10
|
+
this.hide()
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
show() {
|
|
14
|
+
super.show()
|
|
15
|
+
setTimeout(this.hide.bind(this), this.getAttribute('timeout')||3000)
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
}
|
|
19
|
+
customElements.define('alert-box', AlertBox)
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<script src='//unpkg.com/enigmatic'></script>
|
|
2
|
+
<script src='alert-box.js'></script>
|
|
3
|
+
<link rel='stylesheet' href='http://localhost:3000/index.css'>
|
|
4
|
+
|
|
5
|
+
<div></div>
|
|
6
|
+
<alert-box timeout='5000' tw-color='bg-blue-200' position='top' text='something something alert box'></alert-box>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
class BlockMaker extends EnigmaticElement {
|
|
2
|
+
|
|
3
|
+
async connectedCallback() {
|
|
4
|
+
let numblocks = this.getAttribute('num')
|
|
5
|
+
while(numblocks--) {
|
|
6
|
+
let ch = document.createElement('e-e')
|
|
7
|
+
document.body.appendChild(ch)
|
|
8
|
+
ch.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16)
|
|
9
|
+
}
|
|
10
|
+
this.style.display = 'none'
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
customElements.define('block-maker', BlockMaker)
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<script src='//unpkg.com/enigmatic'></script>
|
|
2
|
+
<script src='block-maker.js'></script>
|
|
3
|
+
<link rel='stylesheet' href='//unpkg.com/enigmatic/index.css'>
|
|
4
|
+
|
|
5
|
+
<body class='grid' style='--rows: repeat(3, 1fr); --cols: repeat(3, 1fr)'>
|
|
6
|
+
<block-maker num='9'></block-maker>
|
|
7
|
+
</body>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
class ProgressBar extends EnigmaticElement {
|
|
2
|
+
connectedCallback() {
|
|
3
|
+
this.innerHTML = `<progress id="file" value="${this.getAttribute('value')}" max="${this.getAttribute('max')}"></progress>`
|
|
4
|
+
}
|
|
5
|
+
set(v) {
|
|
6
|
+
this.children[0].value = v
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
customElements.define('progress-bar', ProgressBar)
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@keyframes growProgressBar {
|
|
2
|
+
0%, 33% {
|
|
3
|
+
--pgPercentage: 0
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
100% {
|
|
7
|
+
--pgPercentage: var(--data)
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@property --pgPercentage {
|
|
12
|
+
syntax: '<number>';
|
|
13
|
+
inherits: false;
|
|
14
|
+
initial-value: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
chart-radial-progress {
|
|
18
|
+
--size: 12rem;
|
|
19
|
+
--fg: #369;
|
|
20
|
+
--bg: #def;
|
|
21
|
+
--pgPercentage: var(--data);
|
|
22
|
+
animation: growProgressBar 1s 1 forwards;
|
|
23
|
+
width: var(--size);
|
|
24
|
+
height: var(--size);
|
|
25
|
+
border-radius: 50%;
|
|
26
|
+
display: grid;
|
|
27
|
+
place-items: center;
|
|
28
|
+
background:
|
|
29
|
+
radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
|
|
30
|
+
conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
|
|
31
|
+
font-family: Helvetica, Arial, sans-serif;
|
|
32
|
+
font-size: calc(var(--size) / 5);
|
|
33
|
+
color: var(--fg);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
chart-radial-progress {
|
|
37
|
+
counter-reset: percentage var(--data);
|
|
38
|
+
content: counter(percentage) '%';
|
|
39
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
class ChartRadialProgress extends EnigmaticElement {
|
|
2
|
+
constructor() {
|
|
3
|
+
super()
|
|
4
|
+
loadCSS('chart-radial-progress.css')
|
|
5
|
+
}
|
|
6
|
+
set(v) {
|
|
7
|
+
console.log(v)
|
|
8
|
+
this.innerHTML = v + this.getAttribute('symbol')
|
|
9
|
+
this.style = `--data:${v}`
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
customElements.define('chart-radial-progress', ChartRadialProgress)
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script src='//unpkg.com/enigmatic'></script>
|
|
2
|
+
<script src='chart-radial-progress.js'></script>
|
|
3
|
+
<link rel='stylesheet' href='//unpkg.com/enigmatic/index.css'>
|
|
4
|
+
|
|
5
|
+
<body class='grid' style='--rows: repeat(3, 1fr); --cols: repeat(3, 1fr)'>
|
|
6
|
+
<chart-radial-progress symbol='%' data='rp' style='--data:10'></chart-radial-progress>
|
|
7
|
+
</body>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
main = () => {
|
|
11
|
+
data.set('rp', 20)
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
class ChartStatistic extends EnigmaticElement {
|
|
2
|
+
|
|
3
|
+
async connectedCallback() {
|
|
4
|
+
const units = this.getAttribute('units')
|
|
5
|
+
this.innerHTML = `
|
|
6
|
+
<style>
|
|
7
|
+
chart-statistic {
|
|
8
|
+
text-transform: uppercase;
|
|
9
|
+
align-items: center;
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
}
|
|
13
|
+
.chart-statistic-value {
|
|
14
|
+
font-size: 2.5em;
|
|
15
|
+
font-weight: bold;
|
|
16
|
+
}
|
|
17
|
+
.chart-statistic-units {
|
|
18
|
+
font-size: 1.5em;
|
|
19
|
+
font-weight: normal;
|
|
20
|
+
}
|
|
21
|
+
</style>
|
|
22
|
+
|
|
23
|
+
<div class="chart-statistic-value">${this.getAttribute('default')||'0'}</div>
|
|
24
|
+
<div class="chart-statistic-units">${this.getAttribute('units')}</div>
|
|
25
|
+
`
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
set(newdata) {
|
|
29
|
+
this.children[1].innerText = newdata
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
customElements.define('chart-statistic', ChartStatistic)
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script src='//unpkg.com/enigmatic'></script>
|
|
2
|
+
<script src='chart-statistic.js'></script>
|
|
3
|
+
<link rel='stylesheet' href='//unpkg.com/enigmatic/index.css'>
|
|
4
|
+
|
|
5
|
+
<body class='grid' style='--rows: repeat(3, 1fr); --cols: repeat(3, 1fr)'>
|
|
6
|
+
<chart-statistic data='dp' default='10' units='Dollars'></chart-statistic>
|
|
7
|
+
</body>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
main = () => {
|
|
11
|
+
data.set('dp', 60)
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
class DataGrid extends EnigmaticElement {
|
|
2
|
+
|
|
3
|
+
async connectedCallback() {
|
|
4
|
+
const key = this.getAttribute('data')
|
|
5
|
+
const rows = this.getAttribute('rows')
|
|
6
|
+
const cols = this.getAttribute('cols')
|
|
7
|
+
const pid = this.getAttribute('id')
|
|
8
|
+
this.style.display = 'grid'
|
|
9
|
+
this.style.gridTemplateColumns = `repeat(${cols}, 1fr)`
|
|
10
|
+
this.style.gridTemplateRows = `repeat(${rows}, 1fr)`
|
|
11
|
+
this.innerHTML += `
|
|
12
|
+
<style>
|
|
13
|
+
cell {
|
|
14
|
+
width: 10rem;
|
|
15
|
+
padding: 0.5rem;
|
|
16
|
+
}
|
|
17
|
+
</style>`
|
|
18
|
+
let html = ''
|
|
19
|
+
for (let rn=0; rn<rows; rn++) {
|
|
20
|
+
for(let cn=0; cn<cols; cn++) {
|
|
21
|
+
html += `<cell id='${pid}-c${cn}r${rn}'>${cn}, ${rn}</cell>`
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
this.innerHTML = html
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
set(newdata) {
|
|
28
|
+
/*
|
|
29
|
+
for(const header, const cn of Object.keys(newdata[0])){
|
|
30
|
+
const id = `${this.id}-c${cn}r0`
|
|
31
|
+
$(`#${id}`).innerHTML = header
|
|
32
|
+
console.log(`#${id}`)
|
|
33
|
+
}
|
|
34
|
+
*/
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
customElements.define('data-grid', DataGrid)
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script src='//unpkg.com/enigmatic'></script>
|
|
2
|
+
<script src='data-grid.js'></script>
|
|
3
|
+
<link rel='stylesheet' href='//unpkg.com/enigmatic/index.css'>
|
|
4
|
+
|
|
5
|
+
<body class='grid' style='--rows: repeat(3, 1fr); --cols: repeat(3, 1fr)'>
|
|
6
|
+
<data-grid data='dp' rows='4' cols='12'></data-grid>
|
|
7
|
+
</body>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
main = () => {
|
|
11
|
+
data.set('dp', 60)
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
class DataSource extends EnigmaticElement {
|
|
2
|
+
constructor() {
|
|
3
|
+
super()
|
|
4
|
+
}
|
|
5
|
+
async connectedCallback() {
|
|
6
|
+
const isWait = this.hasAttribute('wait')
|
|
7
|
+
if (!isWait)
|
|
8
|
+
await this.main()
|
|
9
|
+
}
|
|
10
|
+
async main() {
|
|
11
|
+
await window.ready()
|
|
12
|
+
this.fetch()
|
|
13
|
+
}
|
|
14
|
+
async fetch() {
|
|
15
|
+
const url = this.getAttribute('href')
|
|
16
|
+
if(!url) return
|
|
17
|
+
const target = this.getAttribute('target')
|
|
18
|
+
let json
|
|
19
|
+
if (this.hasAttribute('cache'))
|
|
20
|
+
json = await this.cache(url)
|
|
21
|
+
else
|
|
22
|
+
json = await (await fetch(url)).json()
|
|
23
|
+
if (target)
|
|
24
|
+
window.data.set(this.getAttribute('target'), json)
|
|
25
|
+
}
|
|
26
|
+
async cache(url) {
|
|
27
|
+
const cached = localStorage.getItem(url)
|
|
28
|
+
if (cached)
|
|
29
|
+
return JSON.parse(cached)
|
|
30
|
+
const json = await (await fetch(url)).json()
|
|
31
|
+
localStorage.setItem(url, JSON.stringify(json))
|
|
32
|
+
return json
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
customElements.define('data-source', DataSource)
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<script src='https://unpkg.com/enigmatic'></script>
|
|
2
|
+
<script src='data-source.js'></script>
|
|
3
|
+
|
|
4
|
+
<data-source href='https://randomuser.me/api' target='users' cache></data-source>
|
|
5
|
+
<data-source id='d2' href='https://randomuser.me/api' target='users2' cache wait></data-source>
|
|
6
|
+
|
|
7
|
+
<e-e data='users.results'>one</e-e>
|
|
8
|
+
<e-e data='users2.results'>Do not load with page</e-e>
|
|
9
|
+
|
|
10
|
+
<button onclick='d2.fetch()'>Fetch</button>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
class DataStream extends EnigmaticElement {
|
|
2
|
+
eventSource = null
|
|
3
|
+
constructor() {
|
|
4
|
+
super()
|
|
5
|
+
}
|
|
6
|
+
async connectedCallback() {
|
|
7
|
+
const isWait = this.hasAttribute('wait')
|
|
8
|
+
if (!isWait)
|
|
9
|
+
await this.main()
|
|
10
|
+
}
|
|
11
|
+
async main() {
|
|
12
|
+
await window.ready()
|
|
13
|
+
this.fetch()
|
|
14
|
+
}
|
|
15
|
+
async fetch() {
|
|
16
|
+
const url = this.getAttribute('href') || Error('Data stream needs a href')
|
|
17
|
+
const target = this.getAttribute('target') || Error('Data stream needs a target')
|
|
18
|
+
this.eventSource = new EventSource(url)
|
|
19
|
+
this.eventSource.onmessage = (e) => {
|
|
20
|
+
let d = e.data
|
|
21
|
+
try { d = JSON.parse(d) } catch(c) {}
|
|
22
|
+
console.log(d)
|
|
23
|
+
data.set(target, d)
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
customElements.define('data-stream', DataStream)
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<script src='https://unpkg.com/enigmatic'></script>
|
|
2
|
+
<script src='data-stream.js'></script>
|
|
3
|
+
|
|
4
|
+
<data-stream id='my' href='https://events-test-16hsk7tpgefv.runkit.sh/' target='tgt' wait></data-source>
|
|
5
|
+
|
|
6
|
+
<e-e data='tgt.time'>ready</e-e>
|
|
7
|
+
<button onclick='my.fetch()'>Fetch</button>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
class FontAwesome extends HTMLElement {
|
|
2
|
+
async connectedCallback() {
|
|
3
|
+
await loadCSS('//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css')
|
|
4
|
+
this.innerHTML = `<i class="${this.getAttribute('icon')}"></i>`
|
|
5
|
+
this.currentIcon = this.getAttribute('icon')
|
|
6
|
+
}
|
|
7
|
+
set (icon) {
|
|
8
|
+
this.children[0].setAttribute('class', icon)
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
customElements.define('font-awesome', FontAwesome)
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<script src='https://unpkg.com/enigmatic'></script>
|
|
2
|
+
<script src='font-awesome.js'></script>
|
|
3
|
+
<link rel='stylesheet' href='https://unpkg.com/enigmatic/index.css'>
|
|
4
|
+
|
|
5
|
+
<font-awesome class='fifty' id='i' icon='fa fa-camera'></font-awesome>
|
|
6
|
+
|
|
7
|
+
<button onclick='i.set("fa fa-comments")'>Fetch</button>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
class ForList extends EnigmaticElement {
|
|
2
|
+
innerTemplate = ''
|
|
3
|
+
constructor(parent, tag, attrs) {
|
|
4
|
+
super()
|
|
5
|
+
}
|
|
6
|
+
set(array) {
|
|
7
|
+
if(!this.innerTemplate)
|
|
8
|
+
this.innerTemplate = this.innerHTML
|
|
9
|
+
this.innerHTML = ''
|
|
10
|
+
for (const rec of array) {
|
|
11
|
+
let addhtml = this.innerTemplate
|
|
12
|
+
for(const m of addhtml.match(/\{\{(.*?)\}\}/g)) {
|
|
13
|
+
const dest = m.replace(/{{|}}/g,'').split('.')
|
|
14
|
+
let k, val = rec
|
|
15
|
+
while(k = dest.shift()) {
|
|
16
|
+
val = val[k]
|
|
17
|
+
}
|
|
18
|
+
addhtml = addhtml.replace(m, val)
|
|
19
|
+
}
|
|
20
|
+
this.innerHTML += addhtml
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
customElements.define("for-list", ForList)
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<script src='https://unpkg.com/enigmatic'></script>
|
|
2
|
+
<script src='for-list.js'></script>
|
|
3
|
+
<script src='../data-source/data-source.js'></script>
|
|
4
|
+
|
|
5
|
+
<data-source href='https://randomuser.me/api/?results=5' target='users' cache></data-source>
|
|
6
|
+
|
|
7
|
+
<for-list data='users.results'>
|
|
8
|
+
<div>{{name.title}} {{name.first}} {{name.last}} {{email}}</div>
|
|
9
|
+
</for-list>
|
|
10
|
+
|
|
11
|
+
<button onclick=''>Fetch</button>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
class HelloWorld extends EnigmaticElement {
|
|
2
|
+
connectedCallback() {
|
|
3
|
+
this.innerHTML = `
|
|
4
|
+
<style>
|
|
5
|
+
hello-world > h1 {
|
|
6
|
+
padding: 1em;
|
|
7
|
+
color: white;
|
|
8
|
+
background: linear-gradient(to left, red, yellow, green, blue, violet)
|
|
9
|
+
}
|
|
10
|
+
</style>
|
|
11
|
+
<h1>${this.getAttribute('message')||'Hello World!'}</h1>
|
|
12
|
+
`;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
customElements.define('hello-world', HelloWorld)
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import './block-maker/block-maker.js'
|
|
2
|
+
import './chart-progress-bar/chart-progress-bar.js'
|
|
3
|
+
import './chart-radial-progress/chart-radial-progress.js'
|
|
4
|
+
import './chart-statistic/chart-statistic.js'
|
|
5
|
+
import './data-grid/data-grid.js'
|
|
6
|
+
import './data-source/data-source.js'
|
|
7
|
+
import './data-stream/data-stream.js'
|
|
8
|
+
import './font-awesome/font-awesome.js'
|
|
9
|
+
import './for-list/for-list.js'
|
|
10
|
+
import './hello-world/hello-world.js'
|
|
11
|
+
import './map-embed/map-embed.js'
|
|
12
|
+
//import './monaco-editor.js'
|
|
13
|
+
import './online-indicator/online-indicator.js'
|
|
14
|
+
import './side-menu/side-menu.js'
|
|
15
|
+
import './test-runner/test-runner.js'
|
|
16
|
+
import './toggle-switch/toggle-switch.js'
|
|
17
|
+
import './view-panel/view-panel.js'
|
|
18
|
+
import './you-tube/you-tube.js'
|
|
19
|
+
import './tailwind-css/tailwind-css.js'
|
|
20
|
+
import './alert-box/alert-box.js'
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
class MapEmbed extends EnigmaticElement {
|
|
2
|
+
connectedCallback() {
|
|
3
|
+
const where = this.getAttribute('where')
|
|
4
|
+
const zoom = this.getAttribute('zoom')
|
|
5
|
+
this.innerHTML = `<iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=${where||'Chicago'}&t=&z=${zoom||14}&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><style>.mapouter{position:relative;text-align:right;height:500px;width:600px;}</style>`
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
customElements.define("map-embed", MapEmbed)
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<script src='//unpkg.com/enigmatic'></script>
|
|
2
|
+
<script type='module' src='monaco-editor.mjs'></script>
|
|
3
|
+
|
|
4
|
+
<monaco-editor id='me1' estyle="width: 600px; height: 400px; border: 1px solid gray"></monaco-editor>
|
|
5
|
+
<code for='me1' hidden>class HelloWorld extends HTMLElement {
|
|
6
|
+
connectedCallback() {
|
|
7
|
+
this.innerHTML = '<div>Hello World!</div>'
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
customElements.define('hello-world', HelloWorld)
|
|
11
|
+
</code>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as monaco from 'https://cdn.skypack.dev/monaco-editor@0.23'
|
|
2
|
+
customElements.define('monaco-editor', class extends EnigmaticElement {
|
|
3
|
+
connectedCallback() {
|
|
4
|
+
const c = document.createElement('div')
|
|
5
|
+
c.style = this.getAttribute('estyle') || "width: 600px; height: 400px; border: 1px solid gray"
|
|
6
|
+
this.appendChild(c)
|
|
7
|
+
const id = 'me1'
|
|
8
|
+
const codewin = $(`code[for=${id}]`)?.innerHTML || ''
|
|
9
|
+
this.editor = monaco.editor.create(c, {
|
|
10
|
+
value: codewin,
|
|
11
|
+
language: 'javascript'
|
|
12
|
+
})
|
|
13
|
+
}
|
|
14
|
+
set(lang = 'javascript', code){
|
|
15
|
+
this.editor.setModel(monaco.editor.createModel(code, lang))
|
|
16
|
+
}
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
/*
|
|
20
|
+
|
|
21
|
+
example..
|
|
22
|
+
|
|
23
|
+
<monaco-editor id='me1' estyle="width: 600px; height: 400px; border: 1px solid gray"></monaco-editor>
|
|
24
|
+
<code for='me1' hidden>
|
|
25
|
+
class HelloWorld extends HTMLElement {
|
|
26
|
+
connectedCallback() {
|
|
27
|
+
this.innerHTML = '<div>Hello World!</div>'
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
customElements.define('hello-world', HelloWorld)
|
|
31
|
+
</code>
|
|
32
|
+
|
|
33
|
+
*/
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<script src='https://unpkg.com/enigmatic'></script>
|
|
2
|
+
<script src='online-indicator.js'></script>
|
|
3
|
+
|
|
4
|
+
1 <online-indicator></online-indicator>
|
|
5
|
+
2 <online-indicator online='On' offline='Off'></online-indicator>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
main = async () => {
|
|
9
|
+
// Promise based offline detection
|
|
10
|
+
await $('online-indicator').wentOffline()
|
|
11
|
+
console.log('went offline')
|
|
12
|
+
await $('online-indicator').wentOnline()
|
|
13
|
+
console.log('went online')
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
class OnlineIndicator extends EnigmaticElement {
|
|
2
|
+
connectedCallback() {
|
|
3
|
+
const o = this.getAttribute('online')
|
|
4
|
+
const f = this.getAttribute('offline')
|
|
5
|
+
this.innerHTML = window.navigator.onLine ? (o || '🟢') : (f || '🔴')
|
|
6
|
+
window.addEventListener('online', this.connectedCallback.bind(this))
|
|
7
|
+
window.addEventListener('offline', this.connectedCallback.bind(this))
|
|
8
|
+
}
|
|
9
|
+
async wentOnline() {
|
|
10
|
+
return new Promise(resolve => {
|
|
11
|
+
window.addEventListener('online', resolve)
|
|
12
|
+
})
|
|
13
|
+
}
|
|
14
|
+
async wentOffline() {
|
|
15
|
+
return new Promise(resolve => {
|
|
16
|
+
window.addEventListener('offline', resolve)
|
|
17
|
+
})
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
customElements.define('online-indicator', OnlineIndicator)
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
class SideMenu extends EnigmaticElement {
|
|
2
|
+
connectedCallback() {
|
|
3
|
+
this.innerHTML = `
|
|
4
|
+
<e-e id='sm1' style='overflow:hidden; background: radial-gradient(circle, #E5E6E4, #FFF); top: 0; height: 98%; padding: 10px; position: absolute; right: 0; width: 300px'>
|
|
5
|
+
${$('side-menu').innerHTML}
|
|
6
|
+
</e-e>
|
|
7
|
+
`
|
|
8
|
+
this.opened = false
|
|
9
|
+
this.toggleclasses = this.getAttribute('toggle-classes')?.split(' ') || ['show', 'hide']
|
|
10
|
+
this.classList.add(this.toggleclasses[1])
|
|
11
|
+
}
|
|
12
|
+
toggle() {
|
|
13
|
+
super.toggle(this.toggleclasses)
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
customElements.define('side-menu', SideMenu)
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<script src='//unpkg.com/enigmatic'></script>
|
|
2
|
+
<script src='tailwind-css.js'></script>
|
|
3
|
+
<link rel='stylesheet' href='http://localhost:3000/index.css'>
|
|
4
|
+
|
|
5
|
+
<tailwind-css></tailwind-css>
|
|
6
|
+
|
|
7
|
+
<div class='underline red'>tailwind</div>
|
|
8
|
+
|
|
9
|
+
<div class="py-3 px-5 mb-4 bg-blue-100 text-blue-900 text-sm rounded-md border border-blue-200" role="alert">
|
|
10
|
+
A simple <strong>primary</strong> alert—check it out!
|
|
11
|
+
</div>
|