lexgui 8.1.1 → 8.2.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 (52) hide show
  1. package/build/components/Avatar.d.ts +15 -0
  2. package/build/components/NodeTree.d.ts +51 -26
  3. package/build/components/Vector.d.ts +10 -9
  4. package/build/core/Event.d.ts +6 -26
  5. package/build/core/Namespace.js +1 -1
  6. package/build/core/Namespace.js.map +1 -1
  7. package/build/core/Panel.d.ts +538 -538
  8. package/build/extensions/AssetView.d.ts +7 -6
  9. package/build/extensions/AssetView.js +194 -155
  10. package/build/extensions/AssetView.js.map +1 -1
  11. package/build/extensions/Audio.js.map +1 -1
  12. package/build/extensions/CodeEditor.d.ts +358 -350
  13. package/build/extensions/CodeEditor.js +5054 -5022
  14. package/build/extensions/CodeEditor.js.map +1 -1
  15. package/build/extensions/DocMaker.js +330 -327
  16. package/build/extensions/DocMaker.js.map +1 -1
  17. package/build/extensions/GraphEditor.js +2754 -2760
  18. package/build/extensions/GraphEditor.js.map +1 -1
  19. package/build/extensions/Timeline.d.ts +668 -670
  20. package/build/extensions/Timeline.js +3948 -3955
  21. package/build/extensions/Timeline.js.map +1 -1
  22. package/build/extensions/VideoEditor.d.ts +128 -128
  23. package/build/extensions/VideoEditor.js +893 -898
  24. package/build/extensions/VideoEditor.js.map +1 -1
  25. package/build/index.css.d.ts +3 -4
  26. package/build/index.d.ts +57 -56
  27. package/build/lexgui.all.js +1587 -1369
  28. package/build/lexgui.all.js.map +1 -1
  29. package/build/lexgui.all.min.js +1 -1
  30. package/build/lexgui.all.module.js +1584 -1364
  31. package/build/lexgui.all.module.js.map +1 -1
  32. package/build/lexgui.all.module.min.js +1 -1
  33. package/build/lexgui.css +6157 -5583
  34. package/build/lexgui.js +977 -815
  35. package/build/lexgui.js.map +1 -1
  36. package/build/lexgui.min.css +2 -3
  37. package/build/lexgui.min.js +1 -1
  38. package/build/lexgui.module.js +975 -811
  39. package/build/lexgui.module.js.map +1 -1
  40. package/build/lexgui.module.min.js +1 -1
  41. package/changelog.md +52 -1
  42. package/demo.js +167 -65
  43. package/examples/all-components.html +38 -52
  44. package/examples/asset-view.html +27 -0
  45. package/examples/code-editor.html +1 -1
  46. package/examples/editor.html +10 -95
  47. package/examples/index.html +2 -2
  48. package/examples/side-bar.html +1 -1
  49. package/examples/timeline.html +2 -2
  50. package/examples/video-editor.html +1 -1
  51. package/examples/video-editor2.html +2 -2
  52. package/package.json +7 -4
@@ -1,327 +1,330 @@
1
- // This is a generated file. Do not edit.
2
- import { LX } from '../core/Namespace.js';
3
-
4
- // DocMaker.ts @jxarco
5
- if (!LX) {
6
- throw ('Missing LX namespace!');
7
- }
8
- LX.extensions.push('DocMaker');
9
- const CPP_KEY_WORDS = ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast',
10
- 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr', 'NULL', 'unsigned', 'namespace',
11
- 'auto'];
12
- const CLASS_WORDS = ['uint32_t', 'uint64_t', 'uint8_t'];
13
- const STATEMENT_WORDS = ['for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'import',
14
- 'from', 'await'];
15
- const JS_KEY_WORDS = ['var', 'let', 'const', 'static', 'function', 'null', 'undefined', 'new', 'delete', 'true',
16
- 'false', 'NaN', 'this'];
17
- const HTML_ATTRIBUTES = ['html', 'charset', 'rel', 'src', 'href', 'crossorigin', 'type', 'lang'];
18
- const HTML_TAGS = ['html', 'DOCTYPE', 'head', 'meta', 'title', 'link', 'script', 'body', 'style'];
19
- class DocMaker {
20
- root;
21
- _listQueued = undefined;
22
- constructor(element) {
23
- this.root = element ?? document.body;
24
- }
25
- setDomTarget(element) {
26
- this.root = element;
27
- }
28
- lineBreak(target) {
29
- target = target ?? this.root;
30
- target.appendChild(document.createElement('br'));
31
- }
32
- header(string, type, id) {
33
- console.assert(string !== undefined && type !== undefined);
34
- let header = document.createElement(type);
35
- header.innerHTML = string;
36
- if (id)
37
- header.id = id;
38
- this.root.appendChild(header);
39
- }
40
- paragraph(string, sup = false, className) {
41
- console.assert(string !== undefined);
42
- let paragraph = document.createElement(sup ? 'sup' : 'p');
43
- paragraph.className = 'leading-relaxed ' + (className ?? '');
44
- paragraph.innerHTML = string;
45
- this.root.appendChild(paragraph);
46
- }
47
- code(text, language = 'js') {
48
- console.assert(text !== undefined);
49
- text.replaceAll('<', '&lt;');
50
- text.replaceAll('>', '&gt;');
51
- let highlight = '';
52
- let content = '';
53
- const getHTML = (h, c) => {
54
- return `<span class="${h}">${c}</span>`;
55
- };
56
- for (let i = 0; i < text.length; ++i) {
57
- const char = text[i];
58
- const string = text.substr(i);
59
- const endLineIdx = string.indexOf('\n');
60
- const line = string.substring(0, endLineIdx > -1 ? endLineIdx : undefined);
61
- if (char == '@') {
62
- const str = line.substr(1);
63
- if (!(str.indexOf('@') > -1) && !(str.indexOf('[') > -1)) {
64
- continue;
65
- }
66
- let html = null;
67
- const tagIndex = str.indexOf('@');
68
- const skipTag = str[tagIndex - 1] == '|';
69
- // Highlight is specified
70
- if (text[i + 1] == '[') {
71
- highlight = str.substr(1, 3);
72
- content = str.substring(5, tagIndex);
73
- if (skipTag) {
74
- const newString = str.substring(6 + content.length);
75
- const preContent = content;
76
- const postContent = newString.substring(0, newString.indexOf('@'));
77
- const finalContent = preContent.substring(0, preContent.length - 1) + '@' + postContent;
78
- html = getHTML(highlight, finalContent);
79
- const ogContent = preContent + '@' + postContent;
80
- text = text.replace(`@[${highlight}]${ogContent}@`, html);
81
- }
82
- else {
83
- html = getHTML(highlight, content);
84
- text = text.replace(`@[${highlight}]${content}@`, html);
85
- }
86
- }
87
- else {
88
- content = str.substring(0, tagIndex);
89
- if (skipTag) {
90
- const preContent = str.substring(0, str.indexOf('@') - 1);
91
- content = str.substring(preContent.length + 1);
92
- content = preContent + content.substring(0, content.substring(1).indexOf('@') + 1);
93
- text = text.substr(0, i) + '@' + content + '@' + text.substr(i + content.length + 3);
94
- }
95
- if (language == 'cpp' && CPP_KEY_WORDS.includes(content)) {
96
- highlight = 'kwd';
97
- }
98
- else if (language == 'js' && JS_KEY_WORDS.includes(content)) {
99
- highlight = 'kwd';
100
- }
101
- else if (CLASS_WORDS.includes(content)) {
102
- highlight = 'cls';
103
- }
104
- else if (STATEMENT_WORDS.includes(content)) {
105
- highlight = 'lit';
106
- }
107
- else if (HTML_TAGS.includes(content)) {
108
- highlight = 'tag';
109
- }
110
- else if (HTML_ATTRIBUTES.includes(content)) {
111
- highlight = 'atn';
112
- }
113
- else if ((content[0] == '"' && content[content.length - 1] == '"')
114
- || (content[0] == "'" && content[content.length - 1] == "'")
115
- || (content[0] == '`' && content[content.length - 1] == '`')) {
116
- highlight = 'str';
117
- }
118
- else if (!Number.isNaN(parseFloat(content))) {
119
- highlight = 'dec';
120
- }
121
- else {
122
- console.error('ERROR[Code Parsing]: Unknown highlight type: ' + content);
123
- return;
124
- }
125
- html = getHTML(highlight, content);
126
- text = text.replace(`@${content}@`, html);
127
- }
128
- i += html.length - 1;
129
- }
130
- }
131
- let container = document.createElement('div');
132
- container.className = 'code-container';
133
- let pre = document.createElement('pre');
134
- let code = document.createElement('code');
135
- code.innerHTML = text;
136
- let button = document.createElement('button');
137
- button.title = 'Copy code sample';
138
- button.appendChild(LX.makeIcon('Copy'));
139
- button.addEventListener('click', this._copySnippet.bind(this, button));
140
- container.appendChild(button);
141
- pre.appendChild(code);
142
- container.appendChild(pre);
143
- this.root.appendChild(container);
144
- }
145
- list(list, type, target) {
146
- const validTypes = ['bullet', 'numbered'];
147
- console.assert(list && list.length > 0 && validTypes.includes(type), 'Invalid list type or empty list' + type);
148
- const typeString = type == 'bullet' ? 'ul' : 'ol';
149
- let ul = document.createElement(typeString);
150
- target = target ?? this.root;
151
- target.appendChild(ul);
152
- for (var el of list) {
153
- if (el.constructor === Array) {
154
- this.list(el, type, ul);
155
- return;
156
- }
157
- let li = document.createElement('li');
158
- li.className = 'leading-loose';
159
- li.innerHTML = el;
160
- ul.appendChild(li);
161
- }
162
- }
163
- bulletList(list) {
164
- this.list(list, 'bullet');
165
- }
166
- numberedList(list) {
167
- this.list(list, 'numbered');
168
- }
169
- startCodeBulletList() {
170
- let ul = document.createElement('ul');
171
- this._listQueued = ul;
172
- }
173
- endCodeBulletList() {
174
- if (this._listQueued === undefined)
175
- return;
176
- console.assert(this._listQueued !== undefined);
177
- this.root.appendChild(this._listQueued);
178
- this._listQueued = undefined;
179
- }
180
- codeListItem(item, target) {
181
- target = target ?? this._listQueued;
182
- let split = item.constructor === Array;
183
- if (split && item[0].constructor === Array) {
184
- this.codeBulletList(item, target);
185
- return;
186
- }
187
- let li = document.createElement('li');
188
- li.className = 'leading-loose';
189
- li.innerHTML = split
190
- ? (item.length == 2
191
- ? this.iCode(item[0]) + ': ' + item[1]
192
- : this.iCode(item[0] + " <span class='desc'>(" + item[1] + ')</span>') + ': ' + item[2])
193
- : this.iCode(item);
194
- target?.appendChild(li);
195
- }
196
- codeBulletList(list, target) {
197
- console.assert(list !== undefined && list.length > 0);
198
- let ul = document.createElement('ul');
199
- for (var el of list) {
200
- this.codeListItem(el, ul);
201
- }
202
- if (target) {
203
- target.appendChild(ul);
204
- }
205
- else {
206
- this.root.appendChild(ul);
207
- }
208
- }
209
- image(src, caption = '', parent) {
210
- let img = document.createElement('img');
211
- img.src = src;
212
- img.alt = caption;
213
- img.className = 'my-1';
214
- parent = parent ?? this.root;
215
- parent.appendChild(img);
216
- }
217
- images(sources, captions = [], width, height) {
218
- const mobile = navigator && /Android|iPhone/i.test(navigator.userAgent);
219
- if (!mobile) {
220
- let div = document.createElement('div');
221
- div.style.width = width ?? 'auto';
222
- div.style.height = height ?? '256px';
223
- div.className = 'flex flex-row justify-center';
224
- for (let i = 0; i < sources.length; ++i) {
225
- this.image(sources[i], captions[i], div);
226
- }
227
- this.root.appendChild(div);
228
- }
229
- else {
230
- for (let i = 0; i < sources.length; ++i) {
231
- this.image(sources[i], captions[i]);
232
- }
233
- }
234
- }
235
- video(src, caption = '', controls = true, autoplay = false) {
236
- let video = document.createElement('video');
237
- video.src = src;
238
- video.controls = controls;
239
- video.autoplay = autoplay;
240
- if (autoplay) {
241
- video.muted = true;
242
- }
243
- video.loop = true;
244
- video.alt = caption;
245
- this.root.appendChild(video);
246
- }
247
- note(text, warning = false, title, icon) {
248
- console.assert(text !== undefined);
249
- const note = LX.makeContainer([], 'border rounded-lg overflow-hidden text-md fg-secondary my-6', '', this.root);
250
- let header = document.createElement('div');
251
- header.className = 'flex bg-tertiary font-semibold px-3 py-2 gap-2 fg-secondary';
252
- header.appendChild(LX.makeIcon(icon ?? (warning ? 'MessageSquareWarning' : 'NotepadText')));
253
- header.innerHTML += title ?? (warning ? 'Important' : 'Note');
254
- note.appendChild(header);
255
- // Node body
256
- LX.makeContainer([], 'leading-6 p-3', text, note);
257
- }
258
- classCtor(name, params, language = 'js') {
259
- let paramsHTML = '';
260
- for (var p of params) {
261
- const str1 = p[0]; // cpp: param js: name
262
- const str2 = p[1]; // cpp: defaultValue js: type
263
- if (language == 'cpp') {
264
- paramsHTML += str1 + (str2 ? " = <span class='desc'>" + str2 + '</span>' : '')
265
- + (params.indexOf(p) != (params.length - 1) ? ', ' : '');
266
- }
267
- else if (language == 'js') {
268
- paramsHTML += str1 + ": <span class='desc'>" + str2 + '</span>'
269
- + (params.indexOf(p) != (params.length - 1) ? ', ' : '');
270
- }
271
- }
272
- let pr = document.createElement('p');
273
- pr.innerHTML = this.iCode("<span class='constructor'>" + name + '(' + paramsHTML + ')' + '</span>');
274
- this.root.appendChild(pr);
275
- }
276
- classMethod(name, desc, params, ret) {
277
- this.startCodeBulletList();
278
- let paramsHTML = '';
279
- for (var p of params) {
280
- const name = p[0];
281
- const type = p[1];
282
- paramsHTML += name + ": <span class='desc'>" + type + '</span>'
283
- + (params.indexOf(p) != (params.length - 1) ? ', ' : '');
284
- }
285
- let li = document.createElement('li');
286
- li.innerHTML = this.iCode("<span class='method'>" + name + ' (' + paramsHTML + ')' + (ret ? (': ' + ret) : '') + '</span>');
287
- this._listQueued?.appendChild(li);
288
- this.endCodeBulletList();
289
- this.paragraph(desc);
290
- return li.parentElement;
291
- }
292
- iLink(text, href) {
293
- console.assert(text !== undefined && href !== undefined);
294
- return `<a href="${href}">${text}</a>`;
295
- }
296
- iPage(text, page) {
297
- console.assert(text !== undefined && page !== undefined);
298
- const startPage = page.replace('.html', '');
299
- const g = globalThis;
300
- if (g.setPath && g.loadPage) {
301
- const tabName = g.setPath(startPage);
302
- return `<a onclick="loadPage('${page}', true, '${tabName}')">${text}</a>`;
303
- }
304
- else {
305
- console.warn('[DocMaker] Create globalThis.setPath and globalThis.loadPage to use inline pages!');
306
- }
307
- }
308
- iCode(text, codeClass) {
309
- console.assert(text !== undefined);
310
- return `<code class="inline ${codeClass ?? ''}">${text}</code>`;
311
- }
312
- _copySnippet(b) {
313
- b.innerHTML = '';
314
- b.appendChild(LX.makeIcon('Check'));
315
- b.classList.add('copied');
316
- setTimeout(() => {
317
- b.innerHTML = '';
318
- b.appendChild(LX.makeIcon('Copy'));
319
- b.classList.remove('copied');
320
- }, 2000);
321
- navigator.clipboard.writeText(b.dataset['snippet'] ?? b.parentElement.innerText);
322
- console.log('Copied!');
323
- }
324
- }
325
-
326
- export { DocMaker };
327
- //# sourceMappingURL=DocMaker.js.map
1
+ // This is a generated file. Do not edit.
2
+ import { LX } from '../core/Namespace.js';
3
+
4
+ // DocMaker.ts @jxarco
5
+ if (!LX) {
6
+ throw ('Missing LX namespace!');
7
+ }
8
+ LX.extensions.push('DocMaker');
9
+ const CPP_KEY_WORDS = ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true',
10
+ 'false', 'auto', 'struct', 'typedef', 'nullptr', 'NULL', 'unsigned', 'namespace', 'auto'];
11
+ const CLASS_WORDS = ['uint32_t', 'uint64_t', 'uint8_t'];
12
+ const STATEMENT_WORDS = ['for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'import', 'from', 'await'];
13
+ const JS_KEY_WORDS = ['var', 'let', 'const', 'static', 'function', 'null', 'undefined', 'new', 'delete', 'true', 'false', 'NaN', 'this'];
14
+ const HTML_ATTRIBUTES = ['html', 'charset', 'rel', 'src', 'href', 'crossorigin', 'type', 'lang'];
15
+ const HTML_TAGS = ['DOCTYPE', 'html', 'head', 'body', 'title', 'base', 'link', 'meta', 'style', 'main', 'section', 'nav', 'article', 'aside',
16
+ 'header', 'footer', 'address', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'hr', 'pre', 'blockquote', 'ol', 'ul', 'li', 'dl', 'dt', 'dd', 'figure',
17
+ 'figcaption', 'div', 'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 'dfn', 'em', 'i', 'kbd', 'mark', 'q', 'rp', 'rt', 'ruby', 's',
18
+ 'samp', 'small', 'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr', 'img', 'audio', 'video', 'source', 'track', 'picture', 'map', 'area',
19
+ 'canvas', 'iframe', 'embed', 'object', 'param', 'form', 'label', 'input', 'button', 'select', 'datalist', 'optgroup', 'option', 'textarea',
20
+ 'output', 'progress', 'meter', 'fieldset', 'legend', 'table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th',
21
+ 'details', 'summary', 'dialog', 'script', 'noscript', 'template'];
22
+ class DocMaker {
23
+ root;
24
+ _listQueued = undefined;
25
+ constructor(element) {
26
+ this.root = element ?? document.body;
27
+ }
28
+ setDomTarget(element) {
29
+ this.root = element;
30
+ }
31
+ lineBreak(target) {
32
+ target = target ?? this.root;
33
+ target.appendChild(document.createElement('br'));
34
+ }
35
+ header(string, type, id) {
36
+ console.assert(string !== undefined && type !== undefined);
37
+ let header = document.createElement(type);
38
+ header.innerHTML = string;
39
+ if (id)
40
+ header.id = id;
41
+ this.root.appendChild(header);
42
+ }
43
+ paragraph(string, sup = false, className) {
44
+ console.assert(string !== undefined);
45
+ let paragraph = document.createElement(sup ? 'sup' : 'p');
46
+ paragraph.className = 'leading-relaxed ' + (className ?? '');
47
+ paragraph.innerHTML = string;
48
+ this.root.appendChild(paragraph);
49
+ }
50
+ code(text, language = 'js') {
51
+ console.assert(text !== undefined);
52
+ text.replaceAll('<', '&lt;');
53
+ text.replaceAll('>', '&gt;');
54
+ let highlight = '';
55
+ let content = '';
56
+ const getHTML = (h, c) => {
57
+ return `<span class="${h}">${c}</span>`;
58
+ };
59
+ for (let i = 0; i < text.length; ++i) {
60
+ const char = text[i];
61
+ const string = text.substr(i);
62
+ const endLineIdx = string.indexOf('\n');
63
+ const line = string.substring(0, endLineIdx > -1 ? endLineIdx : undefined);
64
+ if (char == '@') {
65
+ const str = line.substr(1);
66
+ if (!(str.indexOf('@') > -1) && !(str.indexOf('[') > -1)) {
67
+ continue;
68
+ }
69
+ let html = null;
70
+ const tagIndex = str.indexOf('@');
71
+ const skipTag = str[tagIndex - 1] == '|';
72
+ // Highlight is specified
73
+ if (text[i + 1] == '[') {
74
+ highlight = str.substr(1, 3);
75
+ content = str.substring(5, tagIndex);
76
+ if (skipTag) {
77
+ const newString = str.substring(6 + content.length);
78
+ const preContent = content;
79
+ const postContent = newString.substring(0, newString.indexOf('@'));
80
+ const finalContent = preContent.substring(0, preContent.length - 1) + '@' + postContent;
81
+ html = getHTML(highlight, finalContent);
82
+ const ogContent = preContent + '@' + postContent;
83
+ text = text.replace(`@[${highlight}]${ogContent}@`, html);
84
+ }
85
+ else {
86
+ html = getHTML(highlight, content);
87
+ text = text.replace(`@[${highlight}]${content}@`, html);
88
+ }
89
+ }
90
+ else {
91
+ content = str.substring(0, tagIndex);
92
+ if (skipTag) {
93
+ const preContent = str.substring(0, str.indexOf('@') - 1);
94
+ content = str.substring(preContent.length + 1);
95
+ content = preContent + content.substring(0, content.substring(1).indexOf('@') + 1);
96
+ text = text.substr(0, i) + '@' + content + '@' + text.substr(i + content.length + 3);
97
+ }
98
+ if (language == 'cpp' && CPP_KEY_WORDS.includes(content)) {
99
+ highlight = 'kwd';
100
+ }
101
+ else if (language == 'js' && JS_KEY_WORDS.includes(content)) {
102
+ highlight = 'kwd';
103
+ }
104
+ else if (CLASS_WORDS.includes(content)) {
105
+ highlight = 'cls';
106
+ }
107
+ else if (STATEMENT_WORDS.includes(content)) {
108
+ highlight = 'lit';
109
+ }
110
+ else if (HTML_TAGS.includes(content)) {
111
+ highlight = 'tag';
112
+ }
113
+ else if (HTML_ATTRIBUTES.includes(content)) {
114
+ highlight = 'atn';
115
+ }
116
+ else if ((content[0] == '"' && content[content.length - 1] == '"')
117
+ || (content[0] == "'" && content[content.length - 1] == "'")
118
+ || (content[0] == '`' && content[content.length - 1] == '`')) {
119
+ highlight = 'str';
120
+ }
121
+ else if (!Number.isNaN(parseFloat(content))) {
122
+ highlight = 'dec';
123
+ }
124
+ else {
125
+ console.error('ERROR[Code Parsing]: Unknown highlight type: ' + content);
126
+ return;
127
+ }
128
+ html = getHTML(highlight, content);
129
+ text = text.replace(`@${content}@`, html);
130
+ }
131
+ i += html.length - 1;
132
+ }
133
+ }
134
+ let container = document.createElement('div');
135
+ container.className = 'code-container';
136
+ let pre = document.createElement('pre');
137
+ let code = document.createElement('code');
138
+ code.innerHTML = text;
139
+ let button = document.createElement('button');
140
+ button.title = 'Copy code sample';
141
+ button.appendChild(LX.makeIcon('Copy'));
142
+ button.addEventListener('click', this._copySnippet.bind(this, button));
143
+ container.appendChild(button);
144
+ pre.appendChild(code);
145
+ container.appendChild(pre);
146
+ this.root.appendChild(container);
147
+ }
148
+ list(list, type, target) {
149
+ const validTypes = ['bullet', 'numbered'];
150
+ console.assert(list && list.length > 0 && validTypes.includes(type), 'Invalid list type or empty list' + type);
151
+ const typeString = type == 'bullet' ? 'ul' : 'ol';
152
+ let ul = document.createElement(typeString);
153
+ target = target ?? this.root;
154
+ target.appendChild(ul);
155
+ for (var el of list) {
156
+ if (el.constructor === Array) {
157
+ this.list(el, type, ul);
158
+ return;
159
+ }
160
+ let li = document.createElement('li');
161
+ li.className = 'leading-loose';
162
+ li.innerHTML = el;
163
+ ul.appendChild(li);
164
+ }
165
+ }
166
+ bulletList(list) {
167
+ this.list(list, 'bullet');
168
+ }
169
+ numberedList(list) {
170
+ this.list(list, 'numbered');
171
+ }
172
+ startCodeBulletList() {
173
+ let ul = document.createElement('ul');
174
+ this._listQueued = ul;
175
+ }
176
+ endCodeBulletList() {
177
+ if (this._listQueued === undefined)
178
+ return;
179
+ console.assert(this._listQueued !== undefined);
180
+ this.root.appendChild(this._listQueued);
181
+ this._listQueued = undefined;
182
+ }
183
+ codeListItem(item, target) {
184
+ target = target ?? this._listQueued;
185
+ let split = item.constructor === Array;
186
+ if (split && item[0].constructor === Array) {
187
+ this.codeBulletList(item, target);
188
+ return;
189
+ }
190
+ let li = document.createElement('li');
191
+ li.className = 'leading-loose';
192
+ li.innerHTML = split
193
+ ? (item.length == 2
194
+ ? this.iCode(item[0]) + ': ' + item[1]
195
+ : this.iCode(item[0] + " <span class='desc'>(" + item[1] + ')</span>') + ': ' + item[2])
196
+ : this.iCode(item);
197
+ target?.appendChild(li);
198
+ }
199
+ codeBulletList(list, target) {
200
+ console.assert(list !== undefined && list.length > 0);
201
+ let ul = document.createElement('ul');
202
+ for (var el of list) {
203
+ this.codeListItem(el, ul);
204
+ }
205
+ if (target) {
206
+ target.appendChild(ul);
207
+ }
208
+ else {
209
+ this.root.appendChild(ul);
210
+ }
211
+ }
212
+ image(src, caption = '', parent) {
213
+ let img = document.createElement('img');
214
+ img.src = src;
215
+ img.alt = caption;
216
+ img.className = 'my-1';
217
+ parent = parent ?? this.root;
218
+ parent.appendChild(img);
219
+ }
220
+ images(sources, captions = [], width, height) {
221
+ const mobile = navigator && /Android|iPhone/i.test(navigator.userAgent);
222
+ if (!mobile) {
223
+ let div = document.createElement('div');
224
+ div.style.width = width ?? 'auto';
225
+ div.style.height = height ?? '256px';
226
+ div.className = 'flex flex-row justify-center';
227
+ for (let i = 0; i < sources.length; ++i) {
228
+ this.image(sources[i], captions[i], div);
229
+ }
230
+ this.root.appendChild(div);
231
+ }
232
+ else {
233
+ for (let i = 0; i < sources.length; ++i) {
234
+ this.image(sources[i], captions[i]);
235
+ }
236
+ }
237
+ }
238
+ video(src, caption = '', controls = true, autoplay = false) {
239
+ let video = document.createElement('video');
240
+ video.src = src;
241
+ video.controls = controls;
242
+ video.autoplay = autoplay;
243
+ if (autoplay) {
244
+ video.muted = true;
245
+ }
246
+ video.loop = true;
247
+ video.alt = caption;
248
+ this.root.appendChild(video);
249
+ }
250
+ note(text, warning = false, title, icon) {
251
+ console.assert(text !== undefined);
252
+ const note = LX.makeContainer([], 'border-color rounded-xl overflow-hidden text-sm text-secondary-foreground my-6', '', this.root);
253
+ let header = document.createElement('div');
254
+ header.className = 'flex bg-muted font-semibold px-3 py-2 gap-2 text-secondary-foreground';
255
+ header.appendChild(LX.makeIcon(icon ?? (warning ? 'MessageSquareWarning' : 'NotepadText')));
256
+ header.innerHTML += title ?? (warning ? 'Important' : 'Note');
257
+ note.appendChild(header);
258
+ // Node body
259
+ LX.makeContainer([], 'leading-6 p-3', text, note);
260
+ }
261
+ classCtor(name, params, language = 'js') {
262
+ let paramsHTML = '';
263
+ for (var p of params) {
264
+ const str1 = p[0]; // cpp: param js: name
265
+ const str2 = p[1]; // cpp: defaultValue js: type
266
+ if (language == 'cpp') {
267
+ paramsHTML += str1 + (str2 ? " = <span class='desc'>" + str2 + '</span>' : '')
268
+ + (params.indexOf(p) != (params.length - 1) ? ', ' : '');
269
+ }
270
+ else if (language == 'js') {
271
+ paramsHTML += str1 + ": <span class='desc'>" + str2 + '</span>'
272
+ + (params.indexOf(p) != (params.length - 1) ? ', ' : '');
273
+ }
274
+ }
275
+ let pr = document.createElement('p');
276
+ pr.innerHTML = this.iCode("<span class='constructor'>" + name + '(' + paramsHTML + ')' + '</span>');
277
+ this.root.appendChild(pr);
278
+ }
279
+ classMethod(name, desc, params, ret) {
280
+ this.startCodeBulletList();
281
+ let paramsHTML = '';
282
+ for (var p of params) {
283
+ const name = p[0];
284
+ const type = p[1];
285
+ paramsHTML += name + ": <span class='desc'>" + type + '</span>'
286
+ + (params.indexOf(p) != (params.length - 1) ? ', ' : '');
287
+ }
288
+ let li = document.createElement('li');
289
+ li.innerHTML = this.iCode("<span class='method'>" + name + ' (' + paramsHTML + ')' + (ret ? (': ' + ret) : '') + '</span>');
290
+ this._listQueued?.appendChild(li);
291
+ this.endCodeBulletList();
292
+ this.paragraph(desc);
293
+ return li.parentElement;
294
+ }
295
+ iLink(text, href) {
296
+ console.assert(text !== undefined && href !== undefined);
297
+ return `<a class="font-semibold underline-offset-4 hover:underline" href="${href}">${text}</a>`;
298
+ }
299
+ iPage(text, page) {
300
+ console.assert(text !== undefined && page !== undefined);
301
+ const startPage = page.replace('.html', '');
302
+ const g = globalThis;
303
+ if (g.setPath && g.loadPage) {
304
+ const tabName = g.setPath(startPage);
305
+ return `<a onclick="loadPage('${page}', true, '${tabName}')">${text}</a>`;
306
+ }
307
+ else {
308
+ console.warn('[DocMaker] Create globalThis.setPath and globalThis.loadPage to use inline pages!');
309
+ }
310
+ }
311
+ iCode(text, codeClass) {
312
+ console.assert(text !== undefined);
313
+ return `<code class="inline ${codeClass ?? ''}">${text}</code>`;
314
+ }
315
+ _copySnippet(b) {
316
+ b.innerHTML = '';
317
+ b.appendChild(LX.makeIcon('Check'));
318
+ b.classList.add('copied');
319
+ setTimeout(() => {
320
+ b.innerHTML = '';
321
+ b.appendChild(LX.makeIcon('Copy'));
322
+ b.classList.remove('copied');
323
+ }, 2000);
324
+ navigator.clipboard.writeText(b.dataset['snippet'] ?? b.parentElement.innerText);
325
+ console.log('Copied!');
326
+ }
327
+ }
328
+
329
+ export { DocMaker };
330
+ //# sourceMappingURL=DocMaker.js.map