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.
- package/build/components/Avatar.d.ts +15 -0
- package/build/components/NodeTree.d.ts +51 -26
- package/build/components/Vector.d.ts +10 -9
- package/build/core/Event.d.ts +6 -26
- package/build/core/Namespace.js +1 -1
- package/build/core/Namespace.js.map +1 -1
- package/build/core/Panel.d.ts +538 -538
- package/build/extensions/AssetView.d.ts +7 -6
- package/build/extensions/AssetView.js +194 -155
- package/build/extensions/AssetView.js.map +1 -1
- package/build/extensions/Audio.js.map +1 -1
- package/build/extensions/CodeEditor.d.ts +358 -350
- package/build/extensions/CodeEditor.js +5054 -5022
- package/build/extensions/CodeEditor.js.map +1 -1
- package/build/extensions/DocMaker.js +330 -327
- package/build/extensions/DocMaker.js.map +1 -1
- package/build/extensions/GraphEditor.js +2754 -2760
- package/build/extensions/GraphEditor.js.map +1 -1
- package/build/extensions/Timeline.d.ts +668 -670
- package/build/extensions/Timeline.js +3948 -3955
- package/build/extensions/Timeline.js.map +1 -1
- package/build/extensions/VideoEditor.d.ts +128 -128
- package/build/extensions/VideoEditor.js +893 -898
- package/build/extensions/VideoEditor.js.map +1 -1
- package/build/index.css.d.ts +3 -4
- package/build/index.d.ts +57 -56
- package/build/lexgui.all.js +1587 -1369
- package/build/lexgui.all.js.map +1 -1
- package/build/lexgui.all.min.js +1 -1
- package/build/lexgui.all.module.js +1584 -1364
- package/build/lexgui.all.module.js.map +1 -1
- package/build/lexgui.all.module.min.js +1 -1
- package/build/lexgui.css +6157 -5583
- package/build/lexgui.js +977 -815
- package/build/lexgui.js.map +1 -1
- package/build/lexgui.min.css +2 -3
- package/build/lexgui.min.js +1 -1
- package/build/lexgui.module.js +975 -811
- package/build/lexgui.module.js.map +1 -1
- package/build/lexgui.module.min.js +1 -1
- package/changelog.md +52 -1
- package/demo.js +167 -65
- package/examples/all-components.html +38 -52
- package/examples/asset-view.html +27 -0
- package/examples/code-editor.html +1 -1
- package/examples/editor.html +10 -95
- package/examples/index.html +2 -2
- package/examples/side-bar.html +1 -1
- package/examples/timeline.html +2 -2
- package/examples/video-editor.html +1 -1
- package/examples/video-editor2.html +2 -2
- 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
|
-
'
|
|
11
|
-
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
const
|
|
16
|
-
'
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
this.root = element;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
const
|
|
78
|
-
|
|
79
|
-
const
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
highlight = 'kwd';
|
|
100
|
-
}
|
|
101
|
-
else if (
|
|
102
|
-
highlight = '
|
|
103
|
-
}
|
|
104
|
-
else if (
|
|
105
|
-
highlight = '
|
|
106
|
-
}
|
|
107
|
-
else if (
|
|
108
|
-
highlight = '
|
|
109
|
-
}
|
|
110
|
-
else if (
|
|
111
|
-
highlight = '
|
|
112
|
-
}
|
|
113
|
-
else if ((content
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
highlight = '
|
|
120
|
-
}
|
|
121
|
-
else {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
let
|
|
135
|
-
|
|
136
|
-
let
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
button.
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
this.list(list, '
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
img
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
div
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
video
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
header
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
this.
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
this.
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
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('<', '<');
|
|
53
|
+
text.replaceAll('>', '>');
|
|
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
|