lightview 1.7.1-b → 1.8.1-b
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/README.md +2 -2
- package/components/chart/chart.html +7 -5
- package/components/chart/example.html +3 -5
- package/components/chart.html +67 -65
- package/components/components.js +29 -9
- package/components/gantt/example.html +2 -7
- package/components/gantt/gantt.html +33 -26
- package/components/gauge/example.html +1 -1
- package/components/gauge/gauge.html +20 -0
- package/components/gauge.html +47 -44
- package/components/orgchart/example.html +25 -0
- package/components/orgchart/orgchart.html +41 -0
- package/components/repl/code-editor.html +64 -0
- package/components/repl/editor.html +37 -0
- package/components/repl/editorjs-inline-tool/index.js +3 -0
- package/components/repl/editorjs-inline-tool/inline-tools.js +28 -0
- package/components/repl/editorjs-inline-tool/tool.js +175 -0
- package/components/repl/repl-with-wysiwyg.html +355 -0
- package/components/repl/repl.html +345 -0
- package/components/repl/sup.js +44 -0
- package/components/repl/wysiwyg-repl.html +258 -0
- package/components/timeline/example.html +33 -0
- package/components/timeline/timeline.html +44 -0
- package/examples/anchor.html +11 -0
- package/examples/chart.html +22 -54
- package/examples/counter.html +5 -3
- package/examples/counter2.html +26 -0
- package/examples/directives.html +19 -17
- package/examples/forgeinform.html +45 -43
- package/examples/form.html +22 -20
- package/examples/gauge.html +2 -0
- package/examples/invalid-template-literals.html +5 -3
- package/examples/message.html +10 -4
- package/examples/nested.html +1 -1
- package/examples/object-bound-form.html +12 -10
- package/examples/remote.html +17 -15
- package/examples/shared.html +41 -0
- package/examples/xor.html +21 -19
- package/lightview.js +138 -90
- package/package.json +7 -2
- package/sites/client.html +48 -0
- package/sites/index.html +247 -0
- package/test/basic.html +17 -16
- package/test/basic.test.mjs +0 -10
- package/test/extended.html +17 -20
- package/types.js +10 -1
- package/unsplash.key +1 -0
- package/components/gauge/guage.html +0 -19
- package/examples/duration.html +0 -279
|
@@ -0,0 +1,345 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Lightview:Sites</title>
|
|
6
|
+
<script src="https://unpkg.com/@isomorphic-git/lightning-fs"></script>
|
|
7
|
+
<script src="https://unpkg.com/isomorphic-git"></script>
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
9
|
+
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
|
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
|
11
|
+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
|
|
12
|
+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
|
|
13
|
+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script>
|
|
14
|
+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
|
|
15
|
+
<script src="https://cdn.jsdelivr.net/npm/editorjs-tooltip@1.1.3/dist/bundle.min.js"></script>
|
|
16
|
+
<script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image@1.1.0/dist/bundle.min.js"></script>
|
|
17
|
+
<script src="https://cdn.jsdelivr.net/npm/@rodrigoodhin/editorjs-image-gallery@0.1.0/dist/bundle.min.js"></script>
|
|
18
|
+
<script src="https://cdn.jsdelivr.net/npm/editorjs-header-with-anchor@2.6.0/dist/bundle.min.js"></script>
|
|
19
|
+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script>
|
|
20
|
+
<script src="https://cdn.jsdelivr.net/npm/@calumk/editorjs-codeflask@1.0.9/dist/editorjs-codeflask.bundle.min.js"></script>
|
|
21
|
+
<script src="https://cdn.jsdelivr.net/npm/editorjs-github-gist-plugin@1.1.0/dist/main.min.js"></script>
|
|
22
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
23
|
+
<template id="repl">
|
|
24
|
+
|
|
25
|
+
<div id="content" style="flex:auto;min-height:100%;width:750px;max-width:750px;height:100%;border:1px solid;padding:10px;margin:0 auto">
|
|
26
|
+
<div style="display:flex;flex-direction:column;">
|
|
27
|
+
<div id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;text-align:center">
|
|
28
|
+
<span style="padding-right:10px"><label for="headhtml" l-on:click="${onTabClick}">HTML Head</label><input for="headhtml" value="${headhtmlPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
|
|
29
|
+
<span style="padding-right:10px"><label for="bodyhtml" l-on:click="${onTabClick}">HTML Body</label><input for="bodyhtml" value="${bodyhtmlPinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
|
|
30
|
+
<!--span style="padding-right:10px"><label for="markdown" l-on:click="${onTabClick}">Markdown (Body)</label><input for="markdown" value="${markdownPinned}" type="checkbox" l-on:click="${onPinClick}"></span-->
|
|
31
|
+
<span style="padding-right:10px"><label for="css" l-on:click="${onTabClick}">Style</label><input for="css" value="${cssPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
|
|
32
|
+
<span style="padding-right:10px"><label for="script" l-on:click="${onTabClick}">Script</label><input for="script" value="${scriptPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
|
|
33
|
+
<span style="padding-right:10px"><label for="preview" l-on:click="${onTabClick}">Preview</label><input for="preview" value="${previewPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<textarea id="headhtml" style="height:200px;max-width:99%;width:99%;margin-right:2px;display:none">${headhtml}</textarea>
|
|
37
|
+
<textarea id="bodyhtml" style="height:200px;max-width:99%;width:99%;margin-right:2px;">${bodyhtml}</textarea>
|
|
38
|
+
<!--textarea id="markdown" style="height:200px;max-width:99%;width:99%;margin-right:2px;display:none">${markdown}</textarea-->
|
|
39
|
+
<textarea id="css" style="height:200px;max-width:99%;width:99%;margin-right:2px;display:none">${cssText}</textarea>
|
|
40
|
+
<textarea id="script" style="height:200px;max-width:99%;width:99%;margin-right:2px;display:none">${scriptText}</textarea>
|
|
41
|
+
<div id="preview" style="max-width:99%;width:99%;margin-right:2px;display:none"></div>
|
|
42
|
+
</div>
|
|
43
|
+
<div style="width:100%;text-align:center">
|
|
44
|
+
<div style="padding:5px">${source}</div>
|
|
45
|
+
<button l-on:click="${doSave}">Save</button>
|
|
46
|
+
<button l-if="${!source.trim().startsWith('http')}" l-on:click="${doReset}">Reset</button>
|
|
47
|
+
</div>
|
|
48
|
+
<style id="style">
|
|
49
|
+
label:hover {
|
|
50
|
+
text-decoration: underline
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
53
|
+
<script type="lightview/module">
|
|
54
|
+
const turndownService = new TurndownService({headingStyle:"atx",codeBlockStyle:"fenced",emDelimiter:"*"});
|
|
55
|
+
turndownService.keep(() => true);
|
|
56
|
+
|
|
57
|
+
const {html,css,script} = await import("../../types.js");
|
|
58
|
+
self.variables({
|
|
59
|
+
onTabClick:"function",
|
|
60
|
+
onPinClick:"function",
|
|
61
|
+
doSave: "function",
|
|
62
|
+
doReset:"function"
|
|
63
|
+
});
|
|
64
|
+
self.variables({
|
|
65
|
+
wysiwygPinned:"boolean",
|
|
66
|
+
bodyhtmlPinned:"boolean",
|
|
67
|
+
bodyhtml:html,
|
|
68
|
+
markdownPinned:"boolean",
|
|
69
|
+
markdown:"string",
|
|
70
|
+
cssPinned:"boolean",
|
|
71
|
+
cssText:css,
|
|
72
|
+
scriptPinned:"boolean",
|
|
73
|
+
scriptText:script,
|
|
74
|
+
headhtmlPinned:"boolean",
|
|
75
|
+
headhtml:html,
|
|
76
|
+
previewPinned:"boolean",
|
|
77
|
+
source:"string",
|
|
78
|
+
},{reactive});
|
|
79
|
+
self.variables({
|
|
80
|
+
src:"string",
|
|
81
|
+
},{imported});
|
|
82
|
+
|
|
83
|
+
bodyhtmlPinned = true;
|
|
84
|
+
|
|
85
|
+
const loadFromFile = async () => {
|
|
86
|
+
const html = await fs.readFile(url.pathname,{encoding:"utf8"});
|
|
87
|
+
source = `IndexedDB://${url.hostname+"_repl"}${url.pathname}`;
|
|
88
|
+
return html;
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
const loadFromServer = async () => {
|
|
92
|
+
const response = await fetch(url.href);
|
|
93
|
+
const html = await response.text();
|
|
94
|
+
source = url.href;
|
|
95
|
+
return html;
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
const parseFullHTML = (fullHTML) => {
|
|
99
|
+
const parser = new DOMParser(),
|
|
100
|
+
fragment = parser.parseFromString(fullHTML,"text/html"),
|
|
101
|
+
body_el = fragment?.querySelector("body"),
|
|
102
|
+
style_el = fragment?.querySelector("style"),
|
|
103
|
+
script_el = body_el?.querySelector("script");
|
|
104
|
+
if(style_el) {
|
|
105
|
+
cssText = style_el?.innerHTML;
|
|
106
|
+
style_el.remove();
|
|
107
|
+
} else {
|
|
108
|
+
cssText = "";
|
|
109
|
+
}
|
|
110
|
+
if(script_el) {
|
|
111
|
+
scriptText = script_el?.innerHTML,
|
|
112
|
+
script_el.remove();
|
|
113
|
+
} else {
|
|
114
|
+
scriptText = "";
|
|
115
|
+
}
|
|
116
|
+
headhtml = fragment?.head.innerHTML || "";
|
|
117
|
+
bodyhtml = body_el?.innerHTML;
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
let fs,
|
|
121
|
+
url;
|
|
122
|
+
if(src) {
|
|
123
|
+
url = new URL(src,window.location.href);
|
|
124
|
+
fs = new LightningFS(url.hostname+"_repl").promises;
|
|
125
|
+
try {
|
|
126
|
+
parseFullHTML(await loadFromFile());
|
|
127
|
+
} catch(e) {
|
|
128
|
+
try {
|
|
129
|
+
parseFullHTML(await loadFromServer());
|
|
130
|
+
} catch(e) {
|
|
131
|
+
fullHTML = e.message;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
} else {
|
|
135
|
+
url = new URL(window.location.href);
|
|
136
|
+
fs = new LightningFS(url.hostname+"_repl").promises;
|
|
137
|
+
bodyhtml = "";
|
|
138
|
+
headhtml = "";
|
|
139
|
+
scriptText = "";
|
|
140
|
+
cssText = "";
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
// initialize variables
|
|
144
|
+
markdown = "";
|
|
145
|
+
|
|
146
|
+
const tabs = [...self.querySelectorAll("label[for]")]
|
|
147
|
+
.map((label) => {
|
|
148
|
+
const id = label.getAttribute("for");
|
|
149
|
+
return [id,self.getElementById(id),label];
|
|
150
|
+
});
|
|
151
|
+
|
|
152
|
+
const showTab = (targetid) => {
|
|
153
|
+
tabs.forEach(([id,el,label]) => {
|
|
154
|
+
if(id===targetid || self.varsProxy[`${id}Pinned`]) {
|
|
155
|
+
el.style.display = "unset";
|
|
156
|
+
} else if(!self.varsProxy[`${id}Pinned`]) {
|
|
157
|
+
el.style.display = "none";
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
const hideTab = (targetid) => {
|
|
163
|
+
tabs.forEach(([id,el,label]) => {
|
|
164
|
+
if(id===targetid) el.style.display = "none";
|
|
165
|
+
});
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
onTabClick = (event) => {
|
|
169
|
+
showTab(event.target.getAttribute("for"));
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
onPinClick = (event) => {
|
|
173
|
+
const id = event.target.getAttribute("for"),
|
|
174
|
+
checked = self.varsProxy[`${id}Pinned`] = event.target.checked;
|
|
175
|
+
if(checked) onTabClick(event);
|
|
176
|
+
else hideTab(id);
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
doSave = async () => {
|
|
180
|
+
const parts = url.pathname.split("/");
|
|
181
|
+
let dir = "";
|
|
182
|
+
parts.shift();parts.pop();
|
|
183
|
+
for(const part of parts) {
|
|
184
|
+
dir = dir + "/" + part;
|
|
185
|
+
try {
|
|
186
|
+
await fs.mkdir(dir);
|
|
187
|
+
} catch(e) {
|
|
188
|
+
if(e.message==="EEXIST") break;
|
|
189
|
+
throw e;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
fs.writeFile(url.pathname,doPreview(),{encoding:"utf8"},()=>{});
|
|
193
|
+
source = `IndexedDB://${url.hostname+"_repl"}${url.pathname}`;
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
doReset = async () => {
|
|
197
|
+
try {
|
|
198
|
+
await fs.unlink(url.pathname);
|
|
199
|
+
} catch(e) {
|
|
200
|
+
|
|
201
|
+
}
|
|
202
|
+
if(src) {
|
|
203
|
+
try {
|
|
204
|
+
parseFullHTML(await loadFromServer());
|
|
205
|
+
doPreview();
|
|
206
|
+
} catch(e) {
|
|
207
|
+
previewEl.innerHTML = fullHTML = e.message;
|
|
208
|
+
}
|
|
209
|
+
} else {
|
|
210
|
+
bodyhtml = "";
|
|
211
|
+
headhtml = "";
|
|
212
|
+
scriptText = "";
|
|
213
|
+
cssText = "";
|
|
214
|
+
previewEl.innerHTML = "";
|
|
215
|
+
}
|
|
216
|
+
};
|
|
217
|
+
|
|
218
|
+
const doPreview = () => {
|
|
219
|
+
// not quite write, createComponent needs to be reworked to handle a head and import its links
|
|
220
|
+
const template = document.createElement("template");
|
|
221
|
+
template.innerHTML = bodyhtmlEl.value + "<style>" + cssText + "</style>" + '<script type="lightview/module">' + scriptText + "<" + "/script>";
|
|
222
|
+
const component = window.customElements.get("x-preview");
|
|
223
|
+
if(component) { component.setTemplateNode(template); }
|
|
224
|
+
else { Lightview.createComponent("x-preview",template); }
|
|
225
|
+
previewEl.innerHTML = "<x-preview></x-preview>";
|
|
226
|
+
return "<html><head>"+headhtml+"</head><body>"+template.innerHTML+"<body></html>"
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
const wysywigEl = self.getElementById("wysiwyg"),
|
|
230
|
+
markdownEl = self.getElementById("markdown"),
|
|
231
|
+
bodyhtmlEl = self.getElementById("bodyhtml"),
|
|
232
|
+
headhtmlEl = self.getElementById("headhtml"),
|
|
233
|
+
tabsEl = self.getElementById("tabs"),
|
|
234
|
+
styleEl = self.getElementById("style"),
|
|
235
|
+
previewEl = self.getElementById("preview");
|
|
236
|
+
|
|
237
|
+
let prevmarkdown; // prevents indirect recursion
|
|
238
|
+
observe(() => {
|
|
239
|
+
const text = turndownService.turndown(bodyhtml).trim();
|
|
240
|
+
if(text && text!==prevtext) {
|
|
241
|
+
markdown = markdownEl.innerHTML = prevmarkdown = text;
|
|
242
|
+
}
|
|
243
|
+
});
|
|
244
|
+
|
|
245
|
+
let prevbodyhtml; // prevents indirect recursion
|
|
246
|
+
observe(() => {
|
|
247
|
+
const html = marked.parse(markdown).trim();
|
|
248
|
+
if(html && html!==prevbodyhtml) {
|
|
249
|
+
bodyhtml = bodyhtmlEl.innerText = prevbodyhtml = html;
|
|
250
|
+
}
|
|
251
|
+
});
|
|
252
|
+
|
|
253
|
+
const initEditor = () => {
|
|
254
|
+
|
|
255
|
+
};
|
|
256
|
+
|
|
257
|
+
self.addEventListener("connected",() => {
|
|
258
|
+
initEditor();
|
|
259
|
+
doPreview();
|
|
260
|
+
});
|
|
261
|
+
</script>
|
|
262
|
+
</template>
|
|
263
|
+
<script src="../../lightview.js"></script>
|
|
264
|
+
</head>
|
|
265
|
+
<body style="min-height:95vh;">
|
|
266
|
+
<script>Lightview.createComponent("l-repl", document.getElementById("repl"));</script>
|
|
267
|
+
<l-repl style="min-height:95vh" src="../../examples/counter.html"><div id="editor" slot="editor" style="border:solid 1px;max-height:95vh;overflow:auto;margin-bottom:5px;padding-left:10px;"></div></l-repl>
|
|
268
|
+
<script type="module">
|
|
269
|
+
//import {Sup} from "./sup.js";
|
|
270
|
+
import createGenericInlineTool,{ItalicInlineTool, UnderlineInlineTool, StrongInlineTool} from "./editorjs-inline-tool/index.js";
|
|
271
|
+
const editor = new EditorJS({
|
|
272
|
+
/**
|
|
273
|
+
* Id of Element that should contain the Editor
|
|
274
|
+
*/
|
|
275
|
+
holder: "editor",
|
|
276
|
+
|
|
277
|
+
/**
|
|
278
|
+
* Available Tools list.
|
|
279
|
+
* Pass Tool's class or Settings object for each Tool you want to use
|
|
280
|
+
*/
|
|
281
|
+
tools: {
|
|
282
|
+
header: Header,
|
|
283
|
+
list: List,
|
|
284
|
+
table: Table,
|
|
285
|
+
embed: Embed,
|
|
286
|
+
linkWithPreview: LinkTool,
|
|
287
|
+
image: {
|
|
288
|
+
class: InlineImage,
|
|
289
|
+
inlineToolbar: true,
|
|
290
|
+
config: {
|
|
291
|
+
embed: {
|
|
292
|
+
display: true,
|
|
293
|
+
},
|
|
294
|
+
unsplash: {
|
|
295
|
+
appName: 'Lightview',
|
|
296
|
+
clientId: 'nRe-dHABvjv2shxyvDFQd3Y9MPni77qBG9ImAVH0wig'
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
imageGallery: ImageGallery,
|
|
301
|
+
sup: {
|
|
302
|
+
class: createGenericInlineTool({
|
|
303
|
+
sanitize: { sup: {} },
|
|
304
|
+
shortcut: "CMD+^",
|
|
305
|
+
tagName:"SUP",
|
|
306
|
+
toolboxIcon: '<i class="fa fa-superscript"></i>'
|
|
307
|
+
})
|
|
308
|
+
},
|
|
309
|
+
sub: {
|
|
310
|
+
class: createGenericInlineTool({
|
|
311
|
+
sanitize: { sub: {} },
|
|
312
|
+
shortcut: "CMD+SHIFT+^",
|
|
313
|
+
tagName:"SUB",
|
|
314
|
+
toolboxIcon: '<i class="fa fa-subscript"></i>'
|
|
315
|
+
})
|
|
316
|
+
},
|
|
317
|
+
code: {
|
|
318
|
+
class: createGenericInlineTool({
|
|
319
|
+
sanitize: { code: {} },
|
|
320
|
+
tagName:"CODE",
|
|
321
|
+
toolboxIcon: '<i class="fa fa-code"></i>'
|
|
322
|
+
})
|
|
323
|
+
},
|
|
324
|
+
gist: Gist,
|
|
325
|
+
precode: editorjsCodeflask,
|
|
326
|
+
i: ItalicInlineTool,
|
|
327
|
+
u: UnderlineInlineTool,
|
|
328
|
+
tooltip: {
|
|
329
|
+
class: Tooltip,
|
|
330
|
+
config: {
|
|
331
|
+
location: 'left',
|
|
332
|
+
highlightColor: '#FFEFD5',
|
|
333
|
+
underline: true,
|
|
334
|
+
backgroundColor: '#154360',
|
|
335
|
+
textColor: '#FDFEFE',
|
|
336
|
+
holder: 'editor',
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
//strong: StrongInlineTool, redundant with bold, which really needs to be replaced
|
|
340
|
+
// https://github.com/hata6502/editorjs-style use as a base for input fields editor
|
|
341
|
+
},
|
|
342
|
+
})
|
|
343
|
+
</script>
|
|
344
|
+
</body>
|
|
345
|
+
</html>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
class Sup {
|
|
2
|
+
static get isInline() {
|
|
3
|
+
return true;
|
|
4
|
+
}
|
|
5
|
+
static get title() {
|
|
6
|
+
return "Supercase";
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
constructor({api}) {
|
|
10
|
+
this.api = api;
|
|
11
|
+
this.button = null;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
render() {
|
|
15
|
+
this.button = document.createElement('button');
|
|
16
|
+
this.button.type = 'button';
|
|
17
|
+
this.button.textContent = '²';
|
|
18
|
+
this.button.classList.add(this.api.styles.inlineToolButton);
|
|
19
|
+
return this.button;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
surround(range) {
|
|
23
|
+
if (this.state) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
const selectedText = range.extractContents();
|
|
27
|
+
const sup = document.createElement('SUP');
|
|
28
|
+
|
|
29
|
+
sup.appendChild(selectedText);
|
|
30
|
+
range.insertNode(sup);
|
|
31
|
+
|
|
32
|
+
this.api.selection.expandToTag(sup);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
checkState(selection) {
|
|
36
|
+
const text = selection.anchorNode;
|
|
37
|
+
if (!text) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
this.state = true;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export {Sup, Sup as default}
|
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Lightview:Sites</title>
|
|
6
|
+
<script src="https://unpkg.com/@isomorphic-git/lightning-fs"></script>
|
|
7
|
+
<script src="https://unpkg.com/isomorphic-git"></script>
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
9
|
+
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
|
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/codeflask@1.4.1/build/codeflask.min.js" integrity="sha256-YdO3p9WDoWX5KYPzdxjQKrxt5QhTVqohfcTdrRQiB8w=" crossorigin="anonymous"></script>
|
|
11
|
+
<script src="https://cdn.jsdelivr.net/npm/@calumk/editorjs-codeflask@1.0.9/dist/editorjs-codeflask.bundle.min.js"></script>
|
|
12
|
+
<script src="https://cdn.jsdelivr.net/npm/editorjs-github-gist-plugin@1.1.0/dist/main.min.js"></script>
|
|
13
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
14
|
+
<template id="repl">
|
|
15
|
+
<div id="content" style="min-height:100%;width:750px;max-width:750px;height:100%;border:1px solid;padding:10px;margin:0 auto">
|
|
16
|
+
<div style="display:flex;flex-direction:column;">
|
|
17
|
+
<div id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;text-align:center">
|
|
18
|
+
<span style="padding-right:10px"><label for="headhtml" l-on:click="${onTabClick}">HTML Head</label><input for="headhtml" value="${headhtmlPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
|
|
19
|
+
<span style="padding-right:10px"><label for="bodyhtml" l-on:click="${onTabClick}">HTML Body</label><input for="bodyhtml" value="${bodyhtmlPinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
|
|
20
|
+
<span style="padding-right:10px"><label for="csstext" l-on:click="${onTabClick}">Style</label><input for="csstext" value="${csstextPinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
|
|
21
|
+
<span style="padding-right:10px"><label for="scripttext" l-on:click="${onTabClick}">Script</label><input for="scripttext" value="${scripttextinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
|
|
22
|
+
<span style="padding-right:10px"><label for="preview" l-on:click="${onTabClick}">Preview</label><input for="preview" value="${previewPinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div id="headhtml" style="display:inline-block;border:solid 1px;height:200px;width:750px;max-height:85vh;max-width:740px;overflow:auto;margin-bottom:5px;padding-left:10px;"></div>
|
|
26
|
+
<div id="bodyhtml" style="display:inline-block;border:solid 1px;height:200px;width:750px;max-height:85vh;max-width:740px;overflow:auto;margin-bottom:5px;padding-left:10px;"></div>
|
|
27
|
+
<div id="csstext" style="display:inline-block;border:solid 1px;height:200px;width:260px;max-height:85vh;max-width:740px;overflow:auto;margin-bottom:5px;padding-left:10px;"></div>
|
|
28
|
+
<div id="scripttext" style="display:inline-block;border:solid 1px;height:200px;width:460px;max-height:85vh;max-width:740px;overflow:auto;margin-bottom:5px;padding-left:10px;"></div>
|
|
29
|
+
<div id="preview" style="display:inline-block;border:1px solid;resize:both;height:200px;max-width:100%;width:100%;"></div>
|
|
30
|
+
</div>
|
|
31
|
+
<div style="width:100%;text-align:center">
|
|
32
|
+
<div style="padding:5px">${source}</div>
|
|
33
|
+
<button l-on:click="${doSave}">Save</button>
|
|
34
|
+
<button l-if="${!source.trim().startsWith('http')}" l-on:click="${doReset}">Reset</button>
|
|
35
|
+
</div>
|
|
36
|
+
<style id="style">
|
|
37
|
+
label:hover {
|
|
38
|
+
text-decoration: underline
|
|
39
|
+
}
|
|
40
|
+
</style>
|
|
41
|
+
<script type="lightview/module">
|
|
42
|
+
const turndownService = new TurndownService({headingStyle:"atx",codeBlockStyle:"fenced",emDelimiter:"*"});
|
|
43
|
+
turndownService.keep(() => true);
|
|
44
|
+
|
|
45
|
+
const {html,css,script} = await import("../../types.js");
|
|
46
|
+
self.variables({
|
|
47
|
+
onTabClick:"function",
|
|
48
|
+
onPinClick:"function",
|
|
49
|
+
doSave: "function",
|
|
50
|
+
doReset:"function"
|
|
51
|
+
});
|
|
52
|
+
self.variables({
|
|
53
|
+
wysiwygPinned:"boolean",
|
|
54
|
+
bodyhtmlPinned:"boolean",
|
|
55
|
+
bodyhtml:html,
|
|
56
|
+
markdownPinned:"boolean",
|
|
57
|
+
markdown:html,
|
|
58
|
+
csstextPinned:"boolean",
|
|
59
|
+
csstext:css,
|
|
60
|
+
scripttextPinned:"boolean",
|
|
61
|
+
scripttext:script,
|
|
62
|
+
headhtmlPinned:"boolean",
|
|
63
|
+
headhtml:html,
|
|
64
|
+
previewPinned:"boolean",
|
|
65
|
+
source:"string",
|
|
66
|
+
},{reactive});
|
|
67
|
+
self.variables({
|
|
68
|
+
src:"string",
|
|
69
|
+
},{imported});
|
|
70
|
+
|
|
71
|
+
bodyhtmlPinned = true;
|
|
72
|
+
csstextPinned = true;
|
|
73
|
+
scripttextPinned = true;
|
|
74
|
+
previewPinned = true;
|
|
75
|
+
|
|
76
|
+
const loadFromFile = async () => {
|
|
77
|
+
const html = await fs.readFile(url.pathname,{encoding:"utf8"});
|
|
78
|
+
source = `IndexedDB://${url.hostname+"_repl"}${url.pathname}`;
|
|
79
|
+
return html;
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
const loadFromServer = async () => {
|
|
83
|
+
const response = await fetch(url.href);
|
|
84
|
+
const html = await response.text();
|
|
85
|
+
source = url.href;
|
|
86
|
+
return html;
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
const parseFullHTML = (fullHTML) => {
|
|
90
|
+
const parser = new DOMParser(),
|
|
91
|
+
fragment = parser.parseFromString(fullHTML,"text/html"),
|
|
92
|
+
body_el = fragment?.querySelector("body"),
|
|
93
|
+
style_el = fragment?.querySelector("style"),
|
|
94
|
+
script_el = body_el?.querySelector("script");
|
|
95
|
+
if(style_el) {
|
|
96
|
+
csstext = style_el?.innerHTML;
|
|
97
|
+
style_el.remove();
|
|
98
|
+
} else {
|
|
99
|
+
csstext = "";
|
|
100
|
+
}
|
|
101
|
+
if(script_el) {
|
|
102
|
+
scripttext = script_el?.innerHTML,
|
|
103
|
+
script_el.remove();
|
|
104
|
+
} else {
|
|
105
|
+
scripttext = "";
|
|
106
|
+
}
|
|
107
|
+
headhtml = fragment?.head.innerHTML || "";
|
|
108
|
+
bodyhtml = body_el?.innerHTML;
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
let fs,
|
|
112
|
+
url;
|
|
113
|
+
if(src) {
|
|
114
|
+
url = new URL(src,window.location.href);
|
|
115
|
+
fs = new LightningFS(url.hostname+"_repl").promises;
|
|
116
|
+
try {
|
|
117
|
+
parseFullHTML(await loadFromFile());
|
|
118
|
+
} catch(e) {
|
|
119
|
+
try {
|
|
120
|
+
parseFullHTML(await loadFromServer());
|
|
121
|
+
} catch(e) {
|
|
122
|
+
fullHTML = e.message;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
} else {
|
|
126
|
+
url = new URL(window.location.href);
|
|
127
|
+
fs = new LightningFS(url.hostname+"_repl").promises;
|
|
128
|
+
bodyhtml = "";
|
|
129
|
+
headhtml = "";
|
|
130
|
+
scripttext = "";
|
|
131
|
+
csstext = "";
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
// initialize variables
|
|
135
|
+
markdown = "";
|
|
136
|
+
|
|
137
|
+
const tabs = [...self.querySelectorAll("label[for]")]
|
|
138
|
+
.map((label) => {
|
|
139
|
+
const id = label.getAttribute("for");
|
|
140
|
+
return [id,self.getElementById(id),label];
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
const showTab = (targetid) => {
|
|
144
|
+
tabs.forEach(([id,el,label]) => {
|
|
145
|
+
if(id===targetid || self.varsProxy[`${id}Pinned`]) {
|
|
146
|
+
el.style.display = "unset";
|
|
147
|
+
} else if(!self.varsProxy[`${id}Pinned`]) {
|
|
148
|
+
el.style.display = "none";
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
const hideTab = (targetid) => {
|
|
154
|
+
tabs.forEach(([id,el,label]) => {
|
|
155
|
+
if(id===targetid) el.style.display = "none";
|
|
156
|
+
});
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
onTabClick = (event) => {
|
|
160
|
+
showTab(event.target.getAttribute("for"));
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
onPinClick = (event) => {
|
|
164
|
+
const id = event.target.getAttribute("for"),
|
|
165
|
+
checked = self.varsProxy[`${id}Pinned`] = event.target.checked;
|
|
166
|
+
if(checked) onTabClick(event);
|
|
167
|
+
else hideTab(id);
|
|
168
|
+
};
|
|
169
|
+
|
|
170
|
+
doSave = async () => {
|
|
171
|
+
const parts = url.pathname.split("/");
|
|
172
|
+
let dir = "";
|
|
173
|
+
parts.shift();parts.pop();
|
|
174
|
+
for(const part of parts) {
|
|
175
|
+
dir = dir + "/" + part;
|
|
176
|
+
try {
|
|
177
|
+
await fs.mkdir(dir);
|
|
178
|
+
} catch(e) {
|
|
179
|
+
if(e.message==="EEXIST") break;
|
|
180
|
+
throw e;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
fs.writeFile(url.pathname,doPreview(),{encoding:"utf8"},()=>{});
|
|
184
|
+
source = `IndexedDB://${url.hostname+"_repl"}${url.pathname}`;
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
doReset = async () => {
|
|
188
|
+
try {
|
|
189
|
+
await fs.unlink(url.pathname);
|
|
190
|
+
} catch(e) {
|
|
191
|
+
|
|
192
|
+
}
|
|
193
|
+
if(src) {
|
|
194
|
+
try {
|
|
195
|
+
parseFullHTML(await loadFromServer());
|
|
196
|
+
doPreview();
|
|
197
|
+
} catch(e) {
|
|
198
|
+
previewEl.innerHTML = fullHTML = e.message;
|
|
199
|
+
}
|
|
200
|
+
} else {
|
|
201
|
+
bodyhtml = "";
|
|
202
|
+
headhtml = "";
|
|
203
|
+
scripttext = "";
|
|
204
|
+
csstext = "";
|
|
205
|
+
previewEl.innerHTML = "";
|
|
206
|
+
}
|
|
207
|
+
};
|
|
208
|
+
|
|
209
|
+
const doPreview = () => {
|
|
210
|
+
// not quite write, createComponent needs to be reworked to handle a head and import its links
|
|
211
|
+
const template = document.createElement("template");
|
|
212
|
+
template.innerHTML = bodyhtmlEl.value + "<style>" + csstext + "</style>" + '<script type="lightview/module">' + scripttext + "<" + "/script>";
|
|
213
|
+
const component = window.customElements.get("x-preview");
|
|
214
|
+
if(component) { component.setTemplateNode(template); }
|
|
215
|
+
else { Lightview.createComponent("x-preview",template); }
|
|
216
|
+
previewEl.innerHTML = "<x-preview></x-preview>";
|
|
217
|
+
return "<html><head>"+headhtml+"</head><body>"+template.innerHTML+"<body></html>"
|
|
218
|
+
};
|
|
219
|
+
|
|
220
|
+
const bodyhtmlEl = self.getElementById("bodyhtml"),
|
|
221
|
+
headhtmlEl = self.getElementById("headhtml"),
|
|
222
|
+
tabsEl = self.getElementById("tabs"),
|
|
223
|
+
csstextEl = self.getElementById("csstext"),
|
|
224
|
+
scripttextEl = self.getElementById("scripttext"),
|
|
225
|
+
previewEl = self.getElementById("preview");
|
|
226
|
+
|
|
227
|
+
const initEditors = () => {
|
|
228
|
+
[["headhtml",headhtmlEl,"html"],["bodyhtml",bodyhtmlEl,"html"],["csstext",csstextEl,"css"],[ "scripttext",scripttextEl,"js"]].forEach(([id,target,language]) => {
|
|
229
|
+
const flask = new CodeFlask(target, { language,lineNumbers:true });
|
|
230
|
+
flask.updateCode(self.vars[id].value);
|
|
231
|
+
});
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
self.addEventListener("connected",() => {
|
|
235
|
+
initEditors();
|
|
236
|
+
doPreview();
|
|
237
|
+
});
|
|
238
|
+
</script>
|
|
239
|
+
</template>
|
|
240
|
+
<script src="../../lightview.js"></script>
|
|
241
|
+
</head>
|
|
242
|
+
<body style="min-height:95vh;">
|
|
243
|
+
<script>Lightview.createComponent("l-repl", document.getElementById("repl"));</script>
|
|
244
|
+
<!--l-repl style="min-height:95vh" src="../../examples/counter.html"></l-repl-->
|
|
245
|
+
<div id="htmlhead" style="max-width:750px;max-height:500px;height:500px;border:1px solid;resize:both" ></div>
|
|
246
|
+
<div id="htmlbody" style="max-width:750px;max-height:500px;height:500px;border:1px solid;resize:both" ></div>
|
|
247
|
+
<script>
|
|
248
|
+
new CodeFlask('#htmlhead', {
|
|
249
|
+
language: 'html',
|
|
250
|
+
lineNumbers: true
|
|
251
|
+
});
|
|
252
|
+
new CodeFlask('#htmlbody', {
|
|
253
|
+
language: 'html',
|
|
254
|
+
lineNumbers: true
|
|
255
|
+
});
|
|
256
|
+
</script>
|
|
257
|
+
</body>
|
|
258
|
+
</html>
|