lightview 1.8.1-b → 2.0.0

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 (224) hide show
  1. package/.agent/workflows/daisyui-component-migration.md +155 -0
  2. package/.codacy/cli.sh +149 -0
  3. package/.codacy/codacy.yaml +15 -0
  4. package/.github/instructions/codacy.instructions.md +72 -0
  5. package/.wranglerignore +21 -0
  6. package/README.md +1331 -21
  7. package/_headers +4 -0
  8. package/build.js +70 -0
  9. package/components/actions/button.js +151 -0
  10. package/components/actions/dropdown.js +120 -0
  11. package/components/actions/modal.js +146 -0
  12. package/components/actions/swap.js +118 -0
  13. package/components/daisyui.js +288 -0
  14. package/components/data-display/accordion.js +128 -0
  15. package/components/data-display/alert.js +112 -0
  16. package/components/data-display/avatar.js +170 -0
  17. package/components/data-display/badge.js +82 -0
  18. package/components/data-display/card.js +151 -0
  19. package/components/data-display/carousel.js +94 -0
  20. package/components/data-display/chart.js +220 -0
  21. package/components/data-display/chat.js +128 -0
  22. package/components/data-display/collapse.js +103 -0
  23. package/components/data-display/countdown.js +69 -0
  24. package/components/data-display/diff.js +111 -0
  25. package/components/data-display/kbd.js +65 -0
  26. package/components/data-display/loading.js +75 -0
  27. package/components/data-display/progress.js +79 -0
  28. package/components/data-display/radial-progress.js +88 -0
  29. package/components/data-display/skeleton.js +66 -0
  30. package/components/data-display/stats.js +159 -0
  31. package/components/data-display/table.js +146 -0
  32. package/components/data-display/timeline.js +146 -0
  33. package/components/data-display/toast.js +72 -0
  34. package/components/data-display/tooltip.js +74 -0
  35. package/components/data-input/checkbox.js +253 -0
  36. package/components/data-input/file-input.js +224 -0
  37. package/components/data-input/input.js +264 -0
  38. package/components/data-input/radio.js +338 -0
  39. package/components/data-input/range.js +204 -0
  40. package/components/data-input/rating.js +219 -0
  41. package/components/data-input/select.js +287 -0
  42. package/components/data-input/textarea.js +287 -0
  43. package/components/data-input/toggle.js +201 -0
  44. package/components/index.js +137 -0
  45. package/components/layout/divider.js +72 -0
  46. package/components/layout/drawer.js +142 -0
  47. package/components/layout/footer.js +100 -0
  48. package/components/layout/hero.js +109 -0
  49. package/components/layout/indicator.js +90 -0
  50. package/components/layout/join.js +78 -0
  51. package/components/layout/navbar.js +110 -0
  52. package/components/navigation/breadcrumbs.js +91 -0
  53. package/components/navigation/dock.js +103 -0
  54. package/components/navigation/menu.js +126 -0
  55. package/components/navigation/pagination.js +105 -0
  56. package/components/navigation/steps.js +89 -0
  57. package/components/navigation/tabs.css +177 -0
  58. package/components/navigation/tabs.js +123 -0
  59. package/components/theme/theme-switch.css +65 -0
  60. package/components/theme/theme-switch.js +177 -0
  61. package/docs/about.html +164 -0
  62. package/docs/api/computed.html +184 -0
  63. package/docs/api/effects.html +173 -0
  64. package/docs/api/elements.html +180 -0
  65. package/docs/api/enhance.html +225 -0
  66. package/docs/api/hypermedia.html +165 -0
  67. package/docs/api/index.html +178 -0
  68. package/docs/api/nav.html +18 -0
  69. package/docs/api/signals.html +136 -0
  70. package/docs/api/state.html +217 -0
  71. package/docs/assets/images/logo-favicon.svg +42 -0
  72. package/docs/assets/images/logo-static.svg +40 -0
  73. package/docs/assets/images/logo.svg +66 -0
  74. package/docs/assets/js/examplify.js +395 -0
  75. package/docs/assets/styles/site.css +1102 -0
  76. package/docs/assets/styles/themes.css +236 -0
  77. package/docs/components/accordion.html +439 -0
  78. package/docs/components/alert.html +528 -0
  79. package/docs/components/avatar.html +586 -0
  80. package/docs/components/badge.html +531 -0
  81. package/docs/components/breadcrumbs.html +278 -0
  82. package/docs/components/button.html +579 -0
  83. package/docs/components/card.html +561 -0
  84. package/docs/components/carousel.html +286 -0
  85. package/docs/components/chart-area.html +702 -0
  86. package/docs/components/chart-bar.html +782 -0
  87. package/docs/components/chart-column.html +735 -0
  88. package/docs/components/chart-line.html +794 -0
  89. package/docs/components/chart-pie.html +823 -0
  90. package/docs/components/chart.html +612 -0
  91. package/docs/components/chat.html +547 -0
  92. package/docs/components/checkbox.html +641 -0
  93. package/docs/components/collapse.html +536 -0
  94. package/docs/components/component-nav.html +53 -0
  95. package/docs/components/countdown.html +470 -0
  96. package/docs/components/diff.html +245 -0
  97. package/docs/components/divider.html +240 -0
  98. package/docs/components/dock.html +277 -0
  99. package/docs/components/drawer.html +515 -0
  100. package/docs/components/dropdown.html +479 -0
  101. package/docs/components/file-input.html +591 -0
  102. package/docs/components/footer.html +301 -0
  103. package/docs/components/gallery.html +504 -0
  104. package/docs/components/hero.html +264 -0
  105. package/docs/components/index.css +840 -0
  106. package/docs/components/index.html +735 -0
  107. package/docs/components/indicator.html +342 -0
  108. package/docs/components/input.html +644 -0
  109. package/docs/components/join.html +285 -0
  110. package/docs/components/kbd.html +322 -0
  111. package/docs/components/loading.html +521 -0
  112. package/docs/components/menu.html +461 -0
  113. package/docs/components/modal.html +639 -0
  114. package/docs/components/navbar.html +321 -0
  115. package/docs/components/pagination.html +279 -0
  116. package/docs/components/progress.html +514 -0
  117. package/docs/components/radial-progress.html +434 -0
  118. package/docs/components/radio.html +655 -0
  119. package/docs/components/range.html +611 -0
  120. package/docs/components/rating.html +642 -0
  121. package/docs/components/select.html +696 -0
  122. package/docs/components/sidebar-setup.js +93 -0
  123. package/docs/components/skeleton.html +447 -0
  124. package/docs/components/spinner.html +68 -0
  125. package/docs/components/stats.html +486 -0
  126. package/docs/components/steps.html +356 -0
  127. package/docs/components/swap.html +517 -0
  128. package/docs/components/switch.html +68 -0
  129. package/docs/components/table.html +668 -0
  130. package/docs/components/tabs.html +506 -0
  131. package/docs/components/text-input.html +68 -0
  132. package/docs/components/textarea.html +603 -0
  133. package/docs/components/timeline.html +487 -0
  134. package/docs/components/toast.html +474 -0
  135. package/docs/components/toggle.html +564 -0
  136. package/docs/components/tooltip.html +423 -0
  137. package/docs/examples/getting-started-example.html +40 -0
  138. package/docs/examples/index.html +93 -0
  139. package/docs/getting-started/index.html +739 -0
  140. package/docs/getting-started/reviews.html +23 -0
  141. package/docs/getting-started/reviews.odom +108 -0
  142. package/docs/getting-started/reviews.vdom +84 -0
  143. package/docs/index.html +134 -0
  144. package/docs/playground.html +416 -0
  145. package/docs/router.html +285 -0
  146. package/docs/styles/index.html +190 -0
  147. package/functions/_middleware.js +32 -0
  148. package/index.html +309 -0
  149. package/lightview-router.js +364 -0
  150. package/lightview-x.js +1577 -0
  151. package/lightview.js +658 -1109
  152. package/lightview.js.backup +793 -0
  153. package/middleware/locale.js +25 -0
  154. package/middleware/markdown.js +44 -0
  155. package/middleware/notFound.js +37 -0
  156. package/package.json +27 -41
  157. package/watch.js +92 -0
  158. package/wrangler.toml +12 -0
  159. package/.idea/lightview.iml +0 -12
  160. package/.idea/modules.xml +0 -8
  161. package/.idea/vcs.xml +0 -6
  162. package/LICENSE +0 -21
  163. package/codepen-no-tabs-embed.css +0 -2
  164. package/components/chart/chart.html +0 -17
  165. package/components/chart/example.html +0 -32
  166. package/components/chart.html +0 -83
  167. package/components/components.js +0 -113
  168. package/components/gantt/example.html +0 -22
  169. package/components/gantt/gantt.html +0 -42
  170. package/components/gauge/example.html +0 -28
  171. package/components/gauge/gauge.html +0 -20
  172. package/components/gauge.html +0 -60
  173. package/components/orgchart/example.html +0 -25
  174. package/components/orgchart/orgchart.html +0 -41
  175. package/components/repl/code-editor.html +0 -64
  176. package/components/repl/editor.html +0 -37
  177. package/components/repl/editorjs-inline-tool/index.js +0 -3
  178. package/components/repl/editorjs-inline-tool/inline-tools.js +0 -28
  179. package/components/repl/editorjs-inline-tool/tool.js +0 -175
  180. package/components/repl/repl-with-wysiwyg.html +0 -355
  181. package/components/repl/repl.html +0 -345
  182. package/components/repl/sup.js +0 -44
  183. package/components/repl/wysiwyg-repl.html +0 -258
  184. package/components/timeline/example.html +0 -33
  185. package/components/timeline/timeline.html +0 -44
  186. package/components/timeline.html +0 -81
  187. package/examples/anchor.html +0 -11
  188. package/examples/chart.html +0 -34
  189. package/examples/counter.html +0 -26
  190. package/examples/counter.test.mjs +0 -47
  191. package/examples/counter2.html +0 -26
  192. package/examples/directives.html +0 -79
  193. package/examples/foreign.html +0 -50
  194. package/examples/forgeinform.html +0 -98
  195. package/examples/form.html +0 -61
  196. package/examples/gauge.html +0 -18
  197. package/examples/invalid-template-literals.html +0 -44
  198. package/examples/medium/remote.html +0 -60
  199. package/examples/message.html +0 -18
  200. package/examples/nested.html +0 -11
  201. package/examples/object-bound-form.html +0 -34
  202. package/examples/remote-server.js +0 -51
  203. package/examples/remote.html +0 -34
  204. package/examples/remote.json +0 -1
  205. package/examples/scratch.html +0 -69
  206. package/examples/sensors/index.html +0 -30
  207. package/examples/sensors/sensor-server.js +0 -30
  208. package/examples/shared.html +0 -41
  209. package/examples/template.html +0 -33
  210. package/examples/timeline.html +0 -21
  211. package/examples/todo.html +0 -38
  212. package/examples/top.html +0 -10
  213. package/examples/types.html +0 -94
  214. package/examples/xor.html +0 -62
  215. package/jest-puppeteer.config.js +0 -5
  216. package/jest.config.json +0 -12
  217. package/sites/client.html +0 -48
  218. package/sites/index.html +0 -247
  219. package/test/basic.html +0 -93
  220. package/test/basic.test.mjs +0 -315
  221. package/test/extended.html +0 -29
  222. package/test/extended.test.mjs +0 -448
  223. package/types.js +0 -534
  224. package/unsplash.key +0 -1
package/components/gauge/example.html DELETED
@@ -1,28 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Lightview:Component:Gauge:Example</title>
4
- <link href="./gauge.html" rel="module">
5
- <script src="../../lightview.js"></script>
6
- </head>
7
- <body>
8
- <l-gauge id="myChart" style="height:500px;" title="Server" hidden l-unhide>
9
- {
10
- options: {
11
-
12
- },
13
- rows: [
14
- ['Memory', 80],
15
- ['CPU', 55],
16
- ['Network', 68]
17
- ]
18
- }
19
- </l-gauge>
20
- <script>
21
- const el = document.getElementById("myChart");
22
- el.addEventListener("mounted",() => {
23
- chart = el.chart;
24
- chart.addRow(["Storage",10]);
25
- });
26
- </script>
27
- </body>
28
- </html>
package/components/gauge/gauge.html DELETED
@@ -1,20 +0,0 @@
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 DELETED
@@ -1,60 +0,0 @@
1
- <html>
2
- <head>
3
- <meta charset="UTF-8">
4
- <title>Lightview:Gauge</title>
5
- </head>
6
- <body hidden>
7
- <div id="target"></div>
8
- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
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);
34
- }
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);
56
- });
57
- }
58
- </script>
59
- </body>
60
- </html>
package/components/orgchart/example.html DELETED
@@ -1,25 +0,0 @@
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 DELETED
@@ -1,41 +0,0 @@
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 DELETED
@@ -1,64 +0,0 @@
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>
package/components/repl/editor.html DELETED
@@ -1,37 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Component:REPL:Example</title>
6
- <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
7
- <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
8
- <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
9
- </head>
10
- <body>
11
- <div id="editor"></div>
12
- <script>
13
- const wysywigEl = document.getElementById("wysywig");
14
- const editor = new EditorJS({
15
- /**
16
- * Id of Element that should contain the Editor
17
- */
18
- holder: "editor",
19
-
20
- /**
21
- * Available Tools list.
22
- * Pass Tool's class or Settings object for each Tool you want to use
23
- */
24
- tools: {
25
- header: {
26
- class: Header,
27
- inlineToolbar: ['link']
28
- },
29
- list: {
30
- class: List,
31
- inlineToolbar: true
32
- }
33
- }
34
- })
35
- </script>
36
- </body>
37
- </html>
package/components/repl/editorjs-inline-tool/index.js DELETED
@@ -1,3 +0,0 @@
1
- export { default } from './tool.js';
2
- export { ItalicInlineTool, StrongInlineTool, UnderlineInlineTool, } from './inline-tools.js';
3
- //# sourceMappingURL=index.js.map
package/components/repl/editorjs-inline-tool/inline-tools.js DELETED
@@ -1,28 +0,0 @@
1
- import createGenericInlineTool from './tool.js';
2
- export var ItalicInlineTool = createGenericInlineTool({
3
- sanitize: {
4
- em: {},
5
- },
6
- shortcut: 'CMD+I',
7
- tagName: 'EM',
8
- toolboxIcon:
9
- // icon editor-js uses
10
- '<svg class="icon icon--italic" width="34px" height="34px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#italic"></use></svg>',
11
- });
12
- export var StrongInlineTool = createGenericInlineTool({
13
- sanitize: {
14
- strong: {},
15
- },
16
- shortcut: 'CMD+B',
17
- tagName: 'STRONG',
18
- toolboxIcon: '<svg class="icon icon--bold" width="12px" height="14px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bold"></use></svg>',
19
- });
20
- export var UnderlineInlineTool = createGenericInlineTool({
21
- sanitize: {
22
- u: {},
23
- },
24
- tagName: 'U',
25
- // icon taken from https://github.com/mui-org/material-ui/blob/4fba0dafd30f608937efa32883d151ba01fc9681/packages/material-ui-icons/src/FormatUnderlined.js
26
- toolboxIcon: '<svg width="24" height="24" viewBox="-8 0 38 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"></path></svg>',
27
- });
28
- //# sourceMappingURL=inline-tools.js.map
package/components/repl/editorjs-inline-tool/tool.js DELETED
@@ -1,175 +0,0 @@
1
- /**
2
- * GenericInlineTool returns an EditorJS.InlineTool capable of wrapping a
3
- * selected text with any given `tagName`.
4
- *
5
- * inspired by
6
- * @see https://github.com/editor-js/marker/blob/c306bcb33c88eaa3c172eaf387fbcd06ae6b297f/src/index.js
7
- */
8
- var createGenericInlineTool = function (_a) {
9
- var _b;
10
- var sanitize = _a.sanitize, shortcut = _a.shortcut, tagName = _a.tagName, toolboxIcon = _a.toolboxIcon;
11
- return _b = /** @class */ (function () {
12
- /**
13
- * @param {{api: object}} - Editor.js API
14
- */
15
- function GenericInlineTool(_a) {
16
- var api = _a.api;
17
- this.api = null;
18
- this.button = null;
19
- this.tag = null;
20
- this.iconClasses = null;
21
- this.api = api;
22
- /**
23
- * Toolbar Button
24
- *
25
- * @type {HTMLElement|null}
26
- */
27
- this.button = null;
28
- /**
29
- * Tag that should is rendered in the editor
30
- *
31
- * @type {string}
32
- */
33
- this.tag = tagName;
34
- /**
35
- * CSS classes
36
- */
37
- this.iconClasses = {
38
- base: this.api.styles.inlineToolButton,
39
- active: this.api.styles.inlineToolButtonActive,
40
- };
41
- }
42
- /**
43
- * Create button element for Toolbar
44
- *
45
- * @return {HTMLButtonElement}
46
- */
47
- GenericInlineTool.prototype.render = function () {
48
- this.button = document.createElement('button');
49
- this.button.type = 'button';
50
- this.button.classList.add(this.iconClasses.base);
51
- this.button.innerHTML = this.toolboxIcon;
52
- return this.button;
53
- };
54
- /**
55
- * Wrap/Unwrap selected fragment
56
- *
57
- * @param {Range} range - selected fragment
58
- */
59
- GenericInlineTool.prototype.surround = function (range) {
60
- if (!range) {
61
- return;
62
- }
63
- var termWrapper = this.api.selection.findParentTag(this.tag);
64
- /**
65
- * If start or end of selection is in the highlighted block
66
- */
67
- if (termWrapper) {
68
- this.unwrap(termWrapper);
69
- }
70
- else {
71
- this.wrap(range);
72
- }
73
- };
74
- /**
75
- * Wrap selection with term-tag
76
- *
77
- * @param {Range} range - selected fragment
78
- */
79
- GenericInlineTool.prototype.wrap = function (range) {
80
- /**
81
- * Create a wrapper for given tagName
82
- */
83
- var strongElement = document.createElement(this.tag);
84
- /**
85
- * SurroundContent throws an error if the Range splits a non-Text node with only one of its boundary points
86
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents}
87
- *
88
- * // range.surroundContents(span);
89
- */
90
- strongElement.appendChild(range.extractContents());
91
- range.insertNode(strongElement);
92
- /**
93
- * Expand (add) selection to highlighted block
94
- */
95
- this.api.selection.expandToTag(strongElement);
96
- };
97
- /**
98
- * Unwrap term-tag
99
- *
100
- * @param {HTMLElement} termWrapper - term wrapper tag
101
- */
102
- GenericInlineTool.prototype.unwrap = function (termWrapper) {
103
- /**
104
- * Expand selection to all term-tag
105
- */
106
- this.api.selection.expandToTag(termWrapper);
107
- var sel = window.getSelection();
108
- var range = sel.getRangeAt(0);
109
- var unwrappedContent = range.extractContents();
110
- /**
111
- * Remove empty term-tag
112
- */
113
- termWrapper.parentNode.removeChild(termWrapper);
114
- /**
115
- * Insert extracted content
116
- */
117
- range.insertNode(unwrappedContent);
118
- /**
119
- * Restore selection
120
- */
121
- sel.removeAllRanges();
122
- sel.addRange(range);
123
- };
124
- /**
125
- * Check and change Term's state for current selection
126
- */
127
- GenericInlineTool.prototype.checkState = function () {
128
- var termTag = this.api.selection.findParentTag(this.tag);
129
- this.button.classList.toggle(this.iconClasses.active, !!termTag);
130
- return !!termTag;
131
- };
132
- Object.defineProperty(GenericInlineTool.prototype, "toolboxIcon", {
133
- /**
134
- * Get Tool icon's SVG
135
- * @return {string}
136
- */
137
- get: function () {
138
- return toolboxIcon;
139
- },
140
- enumerable: false,
141
- configurable: true
142
- });
143
- Object.defineProperty(GenericInlineTool, "sanitize", {
144
- /**
145
- * Sanitizer rule
146
- * @return {Object.<string>} {Object.<string>}
147
- */
148
- get: function () {
149
- return sanitize;
150
- },
151
- enumerable: false,
152
- configurable: true
153
- });
154
- Object.defineProperty(GenericInlineTool.prototype, "shortcut", {
155
- /**
156
- * Set a shortcut
157
- */
158
- get: function () {
159
- return shortcut;
160
- },
161
- enumerable: false,
162
- configurable: true
163
- });
164
- return GenericInlineTool;
165
- }()),
166
- /**
167
- * Specifies Tool as Inline Toolbar Tool
168
- *
169
- * @return {boolean}
170
- */
171
- _b.isInline = true,
172
- _b;
173
- };
174
- export default createGenericInlineTool;
175
- //# sourceMappingURL=tool.js.map