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.
Files changed (49) hide show
  1. package/README.md +2 -2
  2. package/components/chart/chart.html +7 -5
  3. package/components/chart/example.html +3 -5
  4. package/components/chart.html +67 -65
  5. package/components/components.js +29 -9
  6. package/components/gantt/example.html +2 -7
  7. package/components/gantt/gantt.html +33 -26
  8. package/components/gauge/example.html +1 -1
  9. package/components/gauge/gauge.html +20 -0
  10. package/components/gauge.html +47 -44
  11. package/components/orgchart/example.html +25 -0
  12. package/components/orgchart/orgchart.html +41 -0
  13. package/components/repl/code-editor.html +64 -0
  14. package/components/repl/editor.html +37 -0
  15. package/components/repl/editorjs-inline-tool/index.js +3 -0
  16. package/components/repl/editorjs-inline-tool/inline-tools.js +28 -0
  17. package/components/repl/editorjs-inline-tool/tool.js +175 -0
  18. package/components/repl/repl-with-wysiwyg.html +355 -0
  19. package/components/repl/repl.html +345 -0
  20. package/components/repl/sup.js +44 -0
  21. package/components/repl/wysiwyg-repl.html +258 -0
  22. package/components/timeline/example.html +33 -0
  23. package/components/timeline/timeline.html +44 -0
  24. package/examples/anchor.html +11 -0
  25. package/examples/chart.html +22 -54
  26. package/examples/counter.html +5 -3
  27. package/examples/counter2.html +26 -0
  28. package/examples/directives.html +19 -17
  29. package/examples/forgeinform.html +45 -43
  30. package/examples/form.html +22 -20
  31. package/examples/gauge.html +2 -0
  32. package/examples/invalid-template-literals.html +5 -3
  33. package/examples/message.html +10 -4
  34. package/examples/nested.html +1 -1
  35. package/examples/object-bound-form.html +12 -10
  36. package/examples/remote.html +17 -15
  37. package/examples/shared.html +41 -0
  38. package/examples/xor.html +21 -19
  39. package/lightview.js +138 -90
  40. package/package.json +7 -2
  41. package/sites/client.html +48 -0
  42. package/sites/index.html +247 -0
  43. package/test/basic.html +17 -16
  44. package/test/basic.test.mjs +0 -10
  45. package/test/extended.html +17 -20
  46. package/types.js +10 -1
  47. package/unsplash.key +1 -0
  48. package/components/gauge/guage.html +0 -19
  49. package/examples/duration.html +0 -279
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # lightview v1.7.1b (BETA)
1
+ # lightview v1.8.1b (BETA)
2
2
 
3
3
  Small, simple, powerful web UI and micro front end creation ...
4
4
 
@@ -36,7 +36,7 @@ Meanwhile, here is what you get:
36
36
 
37
37
  1) SPA, and MPA friendly ... somewhat SEO friendly and short steps away from fully SEO friendly.
38
38
 
39
- 1) A [component library](https://lightview.dev/components) including charts and gauges.
39
+ 1) A [component library](https://lightview.dev/components) including charts and gauges that work in Markdown files.
40
40
 
41
41
  1) Lots of live [editable examples](https://lightview.dev/#examples).
42
42
 
package/components/chart/chart.html CHANGED
@@ -1,15 +1,17 @@
1
+ <!DOCTYPE html>
1
2
  <html>
2
3
  <head>
3
4
  <meta charset="UTF-8">
4
- <title>Lightview:Chart</title>
5
+ <title>Lightview:Component:Chart</title>
5
6
  </head>
6
7
  <body>
7
8
  <div id="target"></div>
8
- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
9
9
  <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
10
- <script type="lightview/module">
11
- const {chart} = await import("/components/components.js");
12
- chart(self);
10
+ <script id="lightview">
11
+ (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
12
+ const {chart} = await import(new URL("../components.js", this.componentBaseURI).href);
13
+ chart(self);
14
+ }
13
15
  </script>
14
16
  </body>
15
17
  </html>
package/components/chart/example.html CHANGED
@@ -5,11 +5,9 @@
5
5
  <script src="../../lightview.js"></script>
6
6
  </head>
7
7
  <body>
8
- <l-chart id="myChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night">
8
+ <l-chart id="myPieChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night">
9
9
  {
10
- options: {
11
-
12
- },
10
+ options: { },
13
11
  columns: [
14
12
  {label: "Topping", type: "string"},
15
13
  {label: "Slices", type: "number"}
@@ -24,7 +22,7 @@
24
22
  }
25
23
  </l-chart>
26
24
  <script>
27
- const el = document.getElementById("myChart");
25
+ const el = document.getElementById("myPieChart");
28
26
  el.addEventListener("mounted",() => {
29
27
  chart = el.chart;
30
28
  chart.addRow(["Anchovies",1]);
package/components/chart.html CHANGED
@@ -7,75 +7,77 @@
7
7
  <div id="target"></div>
8
8
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
9
9
  <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
10
- <script type="lightview/module">
11
- let table = JSON5.parse(self.firstChild.textContent.trim()),
12
- chart,
13
- datatable,
14
- options = {};
15
- const target = self.getElementById("target"),
16
- resizeObserver = new ResizeObserver(entries => {
17
- for (let entry of entries) {
18
- if(entry.contentBoxSize) {
19
- // Firefox implements `contentBoxSize` as a single content rect, rather than an array
20
- const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
21
- options.width = contentBoxSize.inlineSize;
22
- } else {
23
- options.width = entry.contentRect.width;
24
- }
25
- }
26
- chart.draw(datatable, options);
27
- }),
28
- callback = (textNode, oldValue, newValue) => {
29
- datatable = new google.visualization.DataTable();
30
- try {
31
- table = table || JSON5.parse(newValue.trim());
32
- datatable = google.visualization.arrayToDataTable(table);
10
+ <script id="lightview">
11
+ (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
12
+ let table = JSON5.parse(self.firstChild.textContent.trim()),
13
+ chart,
14
+ datatable,
15
+ options = {};
16
+ const target = self.getElementById("target"),
17
+ resizeObserver = new ResizeObserver(entries => {
18
+ for (let entry of entries) {
19
+ if (entry.contentBoxSize) {
20
+ // Firefox implements `contentBoxSize` as a single content rect, rather than an array
21
+ const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
22
+ options.width = contentBoxSize.inlineSize;
23
+ } else {
24
+ options.width = entry.contentRect.width;
25
+ }
26
+ }
33
27
  chart.draw(datatable, options);
34
- table = null;
35
- } catch (e) {
36
- target.innerText = e + newValue;
37
- }
38
- };
39
- self.firstChild.innerText = "Loading ...";
40
- self.variables({type: "string", title: "string", style: "string"}, {observed});
41
- if(style) target.setAttribute("style",style);
42
- self.addRow = (row) => {
43
- datatable.addRows([row]);
44
- chart.draw(datatable, options);
45
- };
46
- self.setValue = (row,col,value) => {
47
- if(datatable) {
48
- datatable.setValue(row,col,value);
28
+ }),
29
+ callback = (textNode, oldValue, newValue) => {
30
+ datatable = new google.visualization.DataTable();
31
+ try {
32
+ table = table || JSON5.parse(newValue.trim());
33
+ datatable = google.visualization.arrayToDataTable(table);
34
+ chart.draw(datatable, options);
35
+ table = null;
36
+ } catch (e) {
37
+ target.innerText = e + newValue;
38
+ }
39
+ };
40
+ self.firstChild.innerText = "Loading ...";
41
+ self.variables({type: "string", title: "string", style: "string"}, {observed});
42
+ if (style) target.setAttribute("style", style);
43
+ self.addRow = (row) => {
44
+ datatable.addRows([row]);
49
45
  chart.draw(datatable, options);
50
- }
51
- };
52
- self.setOptions = (newOptions) => {
53
- Object.assign(options,newOptions);
54
- };
55
- self.init = () => {
56
- if(!options.title && title) options.title = title;
57
- chart = new google.visualization[type](target);
58
- addEventListener("change",({target,value}) => {
59
- if (target === "type") {
60
- chart = new google.visualization[type](target);
61
- } else if (target === "title") {
62
- options.title = value;
63
- } else if(target === "style") {
64
- target.setAttribute("style",value);
46
+ };
47
+ self.setValue = (row, col, value) => {
48
+ if (datatable) {
49
+ datatable.setValue(row, col, value);
50
+ chart.draw(datatable, options);
65
51
  }
66
- chart.draw(datatable, options);
52
+ };
53
+ self.setOptions = (newOptions) => {
54
+ Object.assign(options, newOptions);
55
+ };
56
+ self.init = () => {
57
+ if (!options.title && title) options.title = title;
58
+ chart = new google.visualization[type](target);
59
+ addEventListener("change", ({target, value}) => {
60
+ if (target === "type") {
61
+ chart = new google.visualization[type](target);
62
+ } else if (target === "title") {
63
+ options.title = value;
64
+ } else if (target === "style") {
65
+ target.setAttribute("style", value);
66
+ }
67
+ chart.draw(datatable, options);
68
+ });
69
+ const node = self.firstChild;
70
+ callback(node, node.textContent, node.textContent);
71
+ // Will be used by the Lightview global observer
72
+ node.characterDataMutationCallback = callback;
73
+ // resized charts if window resizes
74
+ resizeObserver.observe(target);
75
+ };
76
+ self.addEventListener("connected", ({target}) => {
77
+ google.charts.load("current", {"packages": ["corechart", "gauge"]});
78
+ google.charts.setOnLoadCallback(self.init);
67
79
  });
68
- const node = self.firstChild;
69
- callback(node, node.textContent, node.textContent);
70
- // Will be used by the Lightview global observer
71
- node.characterDataMutationCallback = callback;
72
- // resized charts if window resizes
73
- resizeObserver.observe(target);
74
- };
75
- self.addEventListener("connected", ({target}) => {
76
- google.charts.load("current", {"packages": ["corechart","gauge"]});
77
- google.charts.setOnLoadCallback(self.init);
78
- });
80
+ }
79
81
  </script>
80
82
  </body>
81
83
  </html>
package/components/components.js CHANGED
@@ -1,4 +1,4 @@
1
- const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type,rowTransform}={}) => {
1
+ const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type,optionsTransform, rowTransform}={}) => {
2
2
  options = {...options};
3
3
  columns = [...columns];
4
4
  let chart,
@@ -36,27 +36,39 @@ const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type
36
36
  if(entry.contentBoxSize) {
37
37
  // Firefox implements `contentBoxSize` as a single content rect, rather than an array
38
38
  const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
39
- options.width = contentBoxSize.inlineSize;
39
+ if(options.width !== contentBoxSize.inlineSize) {
40
+ options.width = contentBoxSize.inlineSize;
41
+ chart.draw(datatable, options);
42
+ }
40
43
  } else {
41
- options.width = entry.contentRect.width;
44
+ if(options.width !== entry.contentRect.width) {
45
+ options.width = entry.contentRect.width;
46
+ chart.draw(datatable, options);
47
+ }
42
48
  }
43
49
  }
44
- chart.draw(datatable, options);
45
50
  }),
46
51
  callback = (textNode, oldValue, newValue) => {
47
52
  datatable = new google.visualization.DataTable();
48
53
  try {
49
54
  const config = JSON5.parse(newValue.trim());
50
- if(config.options) options=config.options;
55
+ if(config.options) Object.assign(options,config.options);
51
56
  if(config.columns) columns=config.columns;
52
57
  if(config.rows) rows=config.rows;
53
58
  columns.forEach((column) => {
54
59
  datatable.addColumn(column);
55
60
  });
56
- if(rowTransform) rows = rows.map((row) => rowTransform(row));
61
+ if(optionsTransform) options = optionsTransform(options);
62
+ if(rowTransform) rows = rows.map((row,index) => rowTransform(row,index,options));
57
63
  datatable.addRows(rows);
64
+ const {selectedStyle,style} = options;
65
+ rows.forEach((row,index) => {
66
+ if(selectedStyle) datatable.setRowProperty(index,"selectedStyle",selectedStyle);
67
+ if(style) datatable.setRowProperty(index,"style",style);
68
+ });
58
69
  chart.draw(datatable, options);
59
70
  } catch (e) {
71
+ console.error(e + newValue);
60
72
  target.innerText = e + newValue;
61
73
  }
62
74
  };
@@ -81,13 +93,21 @@ const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type
81
93
  // Will be used by the Lightview global observer
82
94
  node.characterDataMutationCallback = callback;
83
95
  // resized charts if window resizes
84
- resizeObserver.observe(target);
96
+ resizeObserver.observe(document.body);
85
97
  self.dispatchEvent(new Event("mounted"));
86
98
  };
87
99
  self.addEventListener("connected", ({target}) => {
88
- google.charts.load("current", {"packages":packages});
89
- google.charts.setOnLoadCallback(self.init);
100
+ const gscript = document.createElement("script");
101
+ gscript.setAttribute("src","https://www.gstatic.com/charts/loader.js");
102
+ gscript.onload = () => {
103
+ google.charts.load("current", {"packages":packages});
104
+ google.charts.setOnLoadCallback(self.init);
105
+ };
106
+ self.appendChild(gscript);
90
107
  });
108
+ const jscript = document.createElement("script");
109
+ jscript.setAttribute("src","https://unpkg.com/json5@^2.0.0/dist/index.min.js");
110
+ document.head.appendChild(jscript);
91
111
  }
92
112
 
93
113
  export {chart};
package/components/gantt/example.html CHANGED
@@ -1,6 +1,7 @@
1
1
  <!DOCTYPE html>
2
+ <html>
2
3
  <head>
3
- <title>Lightview:Chart:Example</title>
4
+ <title>Lightview:Component:Gantt:Example</title>
4
5
  <link href="./gantt.html" rel="module">
5
6
  <script src="../../lightview.js"></script>
6
7
  </head>
@@ -17,11 +18,5 @@
17
18
  ]
18
19
  }
19
20
  </l-gantt>
20
- <script>
21
- const el = document.getElementById("myChart");
22
- el.addEventListener("mounted",() => {
23
- chart = el.chart;
24
- });
25
- </script>
26
21
  </body>
27
22
  </html>
package/components/gantt/gantt.html CHANGED
@@ -1,35 +1,42 @@
1
+ <!DOCTYPE html>
1
2
  <html>
2
3
  <head>
3
- <meta charset="UTF-8">
4
- <title>Lightview:Gantt</title>
4
+ <title>Lightview:Component:Gantt</title>
5
5
  </head>
6
6
  <body>
7
7
  <div id="target"></div>
8
- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
9
8
  <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
10
- <script type="lightview/module">
11
- const {chart} = await import("/components/components.js"),
12
- {duration} = await import("/types.js");
13
- chart(self,{
14
- packages:["gantt"],
15
- columns:[
16
- {label:"Task ID",type:"string"},
17
- {label:"Task Name",type:"string"},
18
- {label:"Start Date",type:"date"},
19
- {label:"End Date",type:"date"},
20
- {label:"Duration",type:"number"},
21
- {label:"% Complete",type:"number"},
22
- {label:"Dependencies",type:"string"}
23
- ],
24
- type:"Gantt",
25
- rowTransform(row) {
26
- return row.map((item,index) => {
27
- if(item && (index===2 || index===3)) return new Date(item);
28
- if(item && index===4) return duration.parse(item);
29
- return item;
30
- })
31
- }
32
- });
9
+ <script id="lightview">
10
+ (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
11
+ const {chart} = await import("../components.js"),
12
+ {duration} = await import("/types.js");
13
+ chart(self, {
14
+ packages: ["gantt"],
15
+ columns: [
16
+ {label: "Task ID", type: "string"},
17
+ {label: "Task Name", type: "string"},
18
+ {label: "Start Date", type: "date"},
19
+ {label: "End Date", type: "date"},
20
+ {label: "Duration", type: "number"},
21
+ {label: "% Complete", type: "number"},
22
+ {label: "Dependencies", type: "string"}
23
+ ],
24
+ type: "Gantt",
25
+ rowTransform(row, i) {
26
+ return row.map((item, index) => {
27
+ if (item && (index === 2 || index === 3)) {
28
+ const date = new Date(item);
29
+ if (!date || typeof (date) !== "object" || !(date instanceof Date)) {
30
+ throw new TypeError(`row:${i} col:${index} is not a date`);
31
+ }
32
+ return date;
33
+ }
34
+ if (item && index === 4) return duration.parse(item);
35
+ return item;
36
+ })
37
+ }
38
+ });
39
+ }
33
40
  </script>
34
41
  </body>
35
42
  </html>
package/components/gauge/example.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!DOCTYPE html>
2
2
  <head>
3
- <title>Lightview:Gauge:Example</title>
3
+ <title>Lightview:Component:Gauge:Example</title>
4
4
  <link href="./gauge.html" rel="module">
5
5
  <script src="../../lightview.js"></script>
6
6
  </head>
package/components/gauge/gauge.html ADDED
@@ -0,0 +1,20 @@
1
+ <html>
2
+ <head>
3
+ <meta charset="UTF-8">
4
+ <title>Lightview:Component:Gauge</title>
5
+ </head>
6
+ <body>
7
+ <div id="target"></div>
8
+ <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
9
+ <script id="lightview">
10
+ (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
11
+ const {chart} = await import("../components.js");
12
+ chart(self, {
13
+ packages: ["corechart", "gauge"],
14
+ columns: [{label: "Label", type: "string"}, {label: "Value", type: "number"}],
15
+ type: "Gauge"
16
+ });
17
+ }
18
+ </script>
19
+ </body>
20
+ </html>
package/components/gauge.html CHANGED
@@ -6,52 +6,55 @@
6
6
  <body hidden>
7
7
  <div id="target"></div>
8
8
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
9
- <script type="lightview/module">
10
- const target = self.getElementById("target"),
11
- resizeObserver = new ResizeObserver(entries => {
12
- for (let entry of entries) {
13
- if(entry.contentBoxSize) {
14
- // Firefox implements `contentBoxSize` as a single content rect, rather than an array
15
- const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
16
- options.width = contentBoxSize.inlineSize;
17
- } else {
18
- options.width = entry.contentRect.width;
9
+ <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
10
+ <script id="lightview">
11
+ (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
12
+ const target = self.getElementById("target"),
13
+ resizeObserver = new ResizeObserver(entries => {
14
+ for (let entry of entries) {
15
+ if (entry.contentBoxSize) {
16
+ // Firefox implements `contentBoxSize` as a single content rect, rather than an array
17
+ const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
18
+ options.width = contentBoxSize.inlineSize;
19
+ } else {
20
+ options.width = entry.contentRect.width;
21
+ }
22
+ }
23
+ chart.draw(datatable, options);
24
+ });
25
+ let chart,
26
+ datatable,
27
+ options;
28
+ self.variables({label: "string", value: "number", style: "string"}, {observed});
29
+ if (style) target.setAttribute("style", style);
30
+ self.setValue = (newValue) => {
31
+ if (datatable) {
32
+ datatable.setValue(0, 1, newValue);
33
+ chart.draw(datatable, options);
19
34
  }
20
- }
21
- chart.draw(datatable, options);
35
+ };
36
+ self.init = () => {
37
+ options = {};
38
+ chart = new google.visualization.Gauge(target);
39
+ datatable = google.visualization.arrayToDataTable([["Label", "Value"], [label, value]]);
40
+ addEventListener("change", ({target, value}) => {
41
+ if (target === "label") {
42
+ datatable.setValue(0, 0, value);
43
+ } else if (target === "value") {
44
+ self.setValue(value);
45
+ } else if (target === "style") {
46
+ target.setAttribute("style", value);
47
+ }
48
+ chart.draw(datatable, options);
49
+ });
50
+ resizeObserver.observe(target);
51
+ self.removeAttribute("hidden");
52
+ };
53
+ self.addEventListener("mounted", ({target}) => {
54
+ google.charts.load("current", {"packages": ["corechart", "gauge"]});
55
+ google.charts.setOnLoadCallback(self.init);
22
56
  });
23
- let chart,
24
- datatable,
25
- options;
26
- self.variables({label: "string", value:"number", style: "string"}, {observed});
27
- if(style) target.setAttribute("style",style);
28
- self.setValue = (newValue) => {
29
- if(datatable) {
30
- datatable.setValue(0,1,newValue);
31
- chart.draw(datatable, options);
32
- }
33
- };
34
- self.init = () => {
35
- options = { };
36
- chart = new google.visualization.Gauge(target);
37
- datatable = google.visualization.arrayToDataTable([["Label","Value"],[label,value]]);
38
- addEventListener("change",({target,value}) => {
39
- if (target === "label") {
40
- datatable.setValue(0,0,value);
41
- } else if(target ==="value") {
42
- self.setValue(value);
43
- } else if(target === "style") {
44
- target.setAttribute("style",value);
45
- }
46
- chart.draw(datatable, options);
47
- });
48
- resizeObserver.observe(target);
49
- self.removeAttribute("hidden");
50
- };
51
- self.addEventListener("connected", ({target}) => {
52
- google.charts.load("current", {"packages": ["corechart","gauge"]});
53
- google.charts.setOnLoadCallback(self.init);
54
- });
57
+ }
55
58
  </script>
56
59
  </body>
57
60
  </html>
package/components/orgchart/example.html ADDED
@@ -0,0 +1,25 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Lightview:Component:OrgChart:Example</title>
5
+ <link href="./orgchart.html" rel="module">
6
+ <script src="../../lightview2.js"></script>
7
+ </head>
8
+ <body>
9
+ <l-orgchart id="myChart" style="height:500px;" title="My Org">
10
+ {
11
+ options: {
12
+ selectedStyle:"color:red"
13
+ },
14
+ // 4 columns in definition data name,title,manager,tooltip
15
+ rows: [
16
+ ["Mike","President","",""],
17
+ ["Jim","CFO","Mike",""],
18
+ ['Alice', 'Controller','Jim',""],
19
+ ['Bob', 'CIO', 'Mike',""],
20
+ ['Carol', 'Executive Assistant',"Mike",""]
21
+ ]
22
+ }
23
+ </l-orgchart>
24
+ </body>
25
+ </html>
package/components/orgchart/orgchart.html ADDED
@@ -0,0 +1,41 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Lightview:Component:OrgChart</title>
5
+ <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
6
+ </head>
7
+ <body>
8
+ <link id="load-css-2" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/51/css/orgchart/orgchart.css">
9
+ <div id="target"></div>
10
+ <script id="lightview">
11
+ (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
12
+ const {chart} = await import("../components.js");
13
+ chart(self, {
14
+ options: {allowHtml: true, allowCollapse: true},
15
+ packages: ["orgchart"],
16
+ columns: [
17
+ {label: "Name", type: "string"},
18
+ {label: "Manager", type: "string"},
19
+ {label: "Tooltip", type: "string"}
20
+ ],
21
+ type: "OrgChart",
22
+ // 4 columns in definition data name,title,manager,tooltip
23
+ rowTransform(row) {
24
+ return row.reduce((row, item, index) => {
25
+ item ||= "";
26
+ if (index === 1) {
27
+ row[0] = {
28
+ v: row[0],
29
+ f: `<div style="text-align:center;">${row[0]}<div style="font-style:italic">${item}</div></div>`
30
+ }
31
+ } else {
32
+ row.push(item);
33
+ }
34
+ return row;
35
+ }, []);
36
+ }
37
+ });
38
+ }
39
+ </script>
40
+ </body>
41
+ </html>
package/components/repl/code-editor.html ADDED
@@ -0,0 +1,64 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Title</title>
6
+ <link rel="stylesheet"
7
+ href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
8
+ <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
9
+ </head>
10
+ <body>
11
+ <div style="position:relative">
12
+ <pre style="position:absolute;top:0;left:0;"><textarea id="editor" class="hljs language-html" style="border:none"></textarea></pre>
13
+ <pre style="position:absolute;top:0;left:0;"><code id="codereflector" class="hljs language-html" style="padding:2px;"></code></pre>
14
+ </div>
15
+ <style>
16
+ .cursor {
17
+ -webkit-animation: 2s linear infinite condemned_blink_effect; /* for Safari 4.0 - 8.0 */
18
+ animation: 2s linear infinite condemned_blink_effect;
19
+ position:relative;left:-.45ch;letter-spacing:1px;
20
+ }
21
+
22
+ /* for Safari 4.0 - 8.0 */
23
+ @-webkit-keyframes condemned_blink_effect {
24
+ 0% {
25
+ visibility: hidden;
26
+ }
27
+ 50% {
28
+ visibility: hidden;
29
+ }
30
+ 100% {
31
+ visibility: visible;
32
+ }
33
+ }
34
+
35
+ @keyframes condemned_blink_effect {
36
+ 0% {
37
+ visibility: hidden;
38
+ }
39
+ 50% {
40
+ visibility: hidden;
41
+ }
42
+ 100% {
43
+ visibility: visible;
44
+ }
45
+ }
46
+ </style>
47
+ <script>
48
+
49
+
50
+ const editor = document.getElementById("editor"),
51
+ reflector = document.getElementById("codereflector");
52
+ Object.defineProperty(editor,"innerText",{get() { return editor.value; }});
53
+ editor.addEventListener("input",() => {
54
+ //editor.style.cssText = document.defaultView.getComputedStyle(reflector, "").cssText;
55
+ const startPosition = editor.selectionStart,
56
+ endPosition = editor.selectionEnd,
57
+ value = editor.value.substring(0,startPosition) + "|cursor|" + editor.value.substring(startPosition);
58
+ reflector.innerText = value;
59
+ hljs.highlightElement(reflector);
60
+ reflector.innerHTML = reflector.innerHTML.replace("|cursor|",'<span class="cursor">|</span>');
61
+ })
62
+ </script>
63
+ </body>
64
+ </html>