perfect-gui 3.5.4 → 3.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/package.json +1 -1
- package/test/src/index.html +197 -182
- package/test/src/index.js +2 -0
- package/test/src/js/prism.js +5 -0
- package/test/src/styles/prism.css +3 -0
- package/test/src/styles/styles.css +2 -2
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ https://thibka.github.io/perfect-gui/public/
|
|
|
18
18
|
npm i perfect-gui
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
##
|
|
21
|
+
## Hello world
|
|
22
22
|
|
|
23
23
|
```javascript
|
|
24
24
|
import GUI from 'perfect-gui';
|
|
@@ -26,7 +26,6 @@ import GUI from 'perfect-gui';
|
|
|
26
26
|
const gui = new GUI();
|
|
27
27
|
|
|
28
28
|
gui.button('Click me', callback);
|
|
29
|
-
|
|
30
29
|
```
|
|
31
30
|
|
|
32
31
|
## Options
|
package/package.json
CHANGED
package/test/src/index.html
CHANGED
|
@@ -4,8 +4,28 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="utf-8" />
|
|
6
6
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
-
<title
|
|
7
|
+
<title>Perfect GUI</title>
|
|
8
8
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
|
+
<script defer src="./bundle.js?166a9da11b001ec1b300"></script>
|
|
10
|
+
<link href="main.css?166a9da11b001ec1b300" rel="stylesheet">
|
|
11
|
+
|
|
12
|
+
<meta name="author" content="Thibaut Foussard">
|
|
13
|
+
<meta name="description" content="Nice and simple GUI for JavaScript">
|
|
14
|
+
<link rel="canonical" href="https://thibka.github.io/perfect-gui/public/">
|
|
15
|
+
|
|
16
|
+
<meta property="og:image" content="https://thibka.github.io/perfect-gui/_data/social.png">
|
|
17
|
+
<meta property="og:image:type" content="image/jpg">
|
|
18
|
+
<meta property="og:image:width" content="1200">
|
|
19
|
+
<meta property="og:image:height" content="628">
|
|
20
|
+
<meta property="og:type" content="website">
|
|
21
|
+
<meta property="og:url" content="https://thibka.github.io/perfect-gui/public/">
|
|
22
|
+
<meta property="og:title" content="Perfect GUI">
|
|
23
|
+
<meta property="og:description" content="Nice and simple GUI for JavaScript">
|
|
24
|
+
|
|
25
|
+
<link rel="apple-touch-icon" sizes="180x180" href="https://thibka.github.io/perfect-gui/_data/fav/180x180.png">
|
|
26
|
+
<link rel="icon" type="image/png" sizes="32x32" href="https://thibka.github.io/perfect-gui/_data/fav/32x32.png">
|
|
27
|
+
<link rel="icon" type="image/png" sizes="16x16" href="https://thibka.github.io/perfect-gui/_data/fav/16x16.png">
|
|
28
|
+
<link rel="shortcut icon" href="https://thibka.github.io/perfect-gui/_data/fav/16x16.ico">
|
|
9
29
|
</head>
|
|
10
30
|
|
|
11
31
|
<body>
|
|
@@ -19,6 +39,7 @@
|
|
|
19
39
|
<a class="sidebar__item" href="#killing-creating">Killing and creating dynamically</a>
|
|
20
40
|
</div>
|
|
21
41
|
<div class="main">
|
|
42
|
+
|
|
22
43
|
<h1>Perfect GUI API</h1>
|
|
23
44
|
|
|
24
45
|
<h2 id="basics">Basics</h2>
|
|
@@ -30,55 +51,54 @@
|
|
|
30
51
|
|
|
31
52
|
<div class="code-button" onclick="document.getElementById('code-block-basics').classList.toggle('code-block--hidden')">See code</div>
|
|
32
53
|
<div id="code-block-basics" class="code-block code-block--hidden">
|
|
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
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
</pre></div>
|
|
54
|
+
<pre><code class="language-js">const position = {
|
|
55
|
+
x: 0
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
const gui = new GUI({ name: 'Basics' });
|
|
59
|
+
|
|
60
|
+
gui.button('Button', changeColor);
|
|
61
|
+
|
|
62
|
+
gui.slider({ name: 'Slider (simple callback)', value: 1 },
|
|
63
|
+
value => element.style.opacity = value
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
gui.slider({
|
|
67
|
+
name: 'Slider 2 (object binding)',
|
|
68
|
+
obj: position,
|
|
69
|
+
prop: 'x',
|
|
70
|
+
min: -30,
|
|
71
|
+
max: 30,
|
|
72
|
+
step: .1
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
gui.toggle('Switch', true, state => {
|
|
76
|
+
if ( state ) element.classList.remove('round');
|
|
77
|
+
else element.classList.add('round');
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
gui.list('List', ['red', 'pink', 'yellow', 'blue'], item => {
|
|
81
|
+
element.style.backgroundColor = item;
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
gui.image('Image 1', 'path/to/image-1.jpg', evt => {
|
|
85
|
+
element.style.backgroundImage = `url(${evt.path})`;
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
gui.image('Image 2', 'path/to/image-2.jpg', evt => {
|
|
89
|
+
element.style.backgroundImage = `url(${evt.path})`;
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
gui.color('Color', '#ff0000', color => {
|
|
93
|
+
element.style.backgroundColor = color;
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
function loop() {
|
|
97
|
+
element.style.transform = `translateX(${position.x}px)`;
|
|
98
|
+
requestAnimationFrame(loop);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
loop();</code></pre>
|
|
82
102
|
|
|
83
103
|
</div>
|
|
84
104
|
|
|
@@ -91,27 +111,26 @@
|
|
|
91
111
|
|
|
92
112
|
<div class="code-button" onclick="document.getElementById('code-block-vectors').classList.toggle('code-block--hidden')">See code</div>
|
|
93
113
|
<div id="code-block-vectors" class="code-block code-block--hidden">
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
</pre></div>
|
|
114
|
+
<pre><code class="language-js">const position = {
|
|
115
|
+
x: 0,
|
|
116
|
+
y: 0
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
const gui = new perfectGUI({
|
|
120
|
+
name: 'Vectors'
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
gui.vector2('Position', {
|
|
124
|
+
x: { object: position, prop: 'x', min: -50, max: 50 },
|
|
125
|
+
y: { object: position, prop: 'y', min: -50, max: 50 },
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
function loop() {
|
|
129
|
+
element.style.transform = `translate(${position.x}px, ${-position.y}px)`;
|
|
130
|
+
requestAnimationFrame(loop);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
loop();</code></pre>
|
|
115
134
|
</div>
|
|
116
135
|
|
|
117
136
|
<h2 id="positioning">Positioning</h2>
|
|
@@ -125,36 +144,36 @@
|
|
|
125
144
|
|
|
126
145
|
<div class="code-button" onclick="document.getElementById('code-block-positioning').classList.toggle('code-block--hidden')">See code</div>
|
|
127
146
|
<div id="code-block-positioning" class="code-block code-block--hidden">
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
147
|
+
<pre><code class="language-js">const gui_1 = new GUI({
|
|
148
|
+
name: 'GUI 1',
|
|
149
|
+
width: 200
|
|
150
|
+
});
|
|
151
|
+
|
|
152
|
+
gui_1.button('Buttons can handle multiple lines of text.', () => {
|
|
153
|
+
element.style.backgroundColor = getRandomColor();
|
|
154
|
+
});
|
|
132
155
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
156
|
+
const gui_2 = new GUI({
|
|
157
|
+
name: 'GUI 2',
|
|
158
|
+
width: 200
|
|
159
|
+
});
|
|
136
160
|
|
|
137
|
-
|
|
138
|
-
<span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'GUI 2'</span><span style="color: #f8f8f2">,</span>
|
|
139
|
-
<span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">200</span>
|
|
140
|
-
<span style="color: #f8f8f2">});</span>
|
|
161
|
+
gui_2.button('Button', () => element.style.backgroundColor = getRandomColor() );
|
|
141
162
|
|
|
142
|
-
|
|
163
|
+
const gui_3 = new GUI({
|
|
164
|
+
name: 'GUI 3',
|
|
165
|
+
position: 'top left'
|
|
166
|
+
});
|
|
143
167
|
|
|
144
|
-
|
|
145
|
-
<span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'GUI 3'</span><span style="color: #f8f8f2">,</span>
|
|
146
|
-
<span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'top left'</span>
|
|
147
|
-
<span style="color: #f8f8f2">});</span>
|
|
168
|
+
gui_3.button('Button', () => element.style.backgroundColor = getRandomColor() );
|
|
148
169
|
|
|
149
|
-
|
|
170
|
+
const gui_4 = new GUI({
|
|
171
|
+
name: 'GUI 4',
|
|
172
|
+
position: 'bottom right'
|
|
173
|
+
});
|
|
150
174
|
|
|
151
|
-
|
|
152
|
-
<span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'GUI 4'</span><span style="color: #f8f8f2">,</span>
|
|
153
|
-
<span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'bottom right'</span>
|
|
154
|
-
<span style="color: #f8f8f2">});</span>
|
|
175
|
+
gui_4.button('Button', () => element.style.backgroundColor = getRandomColor() );</code></pre>
|
|
155
176
|
|
|
156
|
-
<span style="color: #a6e22e">gui_4</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'Button'</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=></span> <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">);</span>
|
|
157
|
-
</pre></div>
|
|
158
177
|
</div>
|
|
159
178
|
|
|
160
179
|
|
|
@@ -169,27 +188,25 @@
|
|
|
169
188
|
|
|
170
189
|
<div class="code-button" onclick="document.getElementById('code-block-folders').classList.toggle('code-block--hidden')">See code</div>
|
|
171
190
|
<div id="code-block-folders" class="code-block code-block--hidden">
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
191
|
+
<pre><code class="language-js">const gui = new perfectGUI({
|
|
192
|
+
name: 'Folders'
|
|
193
|
+
});
|
|
175
194
|
|
|
176
|
-
|
|
195
|
+
let folder_1 = gui.folder({ name: 'Folder 1' });
|
|
177
196
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
197
|
+
folder_1.button('Random color', () => {
|
|
198
|
+
element.style.backgroundColor = getRandomColor();
|
|
199
|
+
});
|
|
181
200
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
201
|
+
folder_1.slider({ name: 'Size', value: 1 }, value => {
|
|
202
|
+
element.style.transform = `scale(${value})`;
|
|
203
|
+
});
|
|
185
204
|
|
|
186
|
-
|
|
205
|
+
let folder_2 = gui.folder({ name: 'Folder 2', closed: true });
|
|
187
206
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
</pre></div>
|
|
192
|
-
|
|
207
|
+
folder_2.button('Random color', () => {
|
|
208
|
+
element.style.backgroundColor = getRandomColor();
|
|
209
|
+
});</code></pre>
|
|
193
210
|
|
|
194
211
|
</div>
|
|
195
212
|
|
|
@@ -206,49 +223,48 @@
|
|
|
206
223
|
|
|
207
224
|
<div class="code-button" onclick="document.getElementById('code-block-containers').classList.toggle('code-block--hidden')">See code</div>
|
|
208
225
|
<div id="code-block-containers" class="code-block code-block--hidden">
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
</pre></div>
|
|
226
|
+
<pre><code class="language-js">const gui_1 = new GUI({
|
|
227
|
+
name: 'GUI 1 (drag me!)',
|
|
228
|
+
width: 500,
|
|
229
|
+
draggable: true
|
|
230
|
+
});
|
|
231
|
+
gui_1.button('Custom width using the `width` option', () => {});
|
|
232
|
+
|
|
233
|
+
const gui_2 = new GUI({
|
|
234
|
+
name: 'GUI 2 (drag me!)',
|
|
235
|
+
close: true,
|
|
236
|
+
draggable: true,
|
|
237
|
+
position: 'bottom left'
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
gui_2.button('gui_1.toggleClose();', () => {
|
|
241
|
+
gui_1.toggleClose();
|
|
242
|
+
});
|
|
243
|
+
|
|
244
|
+
const gui_3 = new GUI({
|
|
245
|
+
name: 'GUI 3 (closed, scrollable)',
|
|
246
|
+
closed: true,
|
|
247
|
+
});
|
|
248
|
+
|
|
249
|
+
let f1 = gui_3.folder({ name: 'folder', color: '#33329f' });
|
|
250
|
+
for (let i = 0; i < 3; i ++) {
|
|
251
|
+
f1.button('btn '+ i, () => {});
|
|
252
|
+
}
|
|
253
|
+
let f2 = gui_3.folder({ name: 'folder', color: '#9f3293' });
|
|
254
|
+
for (let i = 0; i < 3; i ++) {
|
|
255
|
+
f2.button('btn '+ i, () => {});
|
|
256
|
+
}
|
|
257
|
+
for (let i = 0; i < 10; i ++) {
|
|
258
|
+
gui_3.button('btn '+ i, () => {});
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
const gui_4 = new GUI({
|
|
262
|
+
name: 'GUI 4 (custom color)',
|
|
263
|
+
position: 'bottom right',
|
|
264
|
+
color: '#226666'
|
|
265
|
+
});
|
|
266
|
+
|
|
267
|
+
gui_4.button('lorem', () => {});</code></pre>
|
|
252
268
|
|
|
253
269
|
</div>
|
|
254
270
|
|
|
@@ -260,35 +276,34 @@
|
|
|
260
276
|
|
|
261
277
|
<div class="code-button" onclick="document.getElementById('code-block-killing').classList.toggle('code-block--hidden')">See code</div>
|
|
262
278
|
<div id="code-block-killing" class="code-block code-block--hidden">
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
</pre></div>
|
|
279
|
+
<pre><code class="language-js">const guis = [];
|
|
280
|
+
|
|
281
|
+
let gui_1 = new GUI({
|
|
282
|
+
name: 'GUI 1',
|
|
283
|
+
});
|
|
284
|
+
|
|
285
|
+
gui_1.button('Create GUI panel', () => {
|
|
286
|
+
guis[guis.length] = new GUI({
|
|
287
|
+
name: 'Created GUI',
|
|
288
|
+
position: 'bottom left',
|
|
289
|
+
width: 150,
|
|
290
|
+
color: 'red'
|
|
291
|
+
});
|
|
292
|
+
});
|
|
293
|
+
|
|
294
|
+
gui_1.button('Kill GUI panel', () => {
|
|
295
|
+
const index = guis.length - 1;
|
|
296
|
+
if ( index >= 0 ) {
|
|
297
|
+
// Removes html elements
|
|
298
|
+
guis[index].wrapper.remove();
|
|
299
|
+
|
|
300
|
+
// Frees up memory
|
|
301
|
+
guis[index] = null;
|
|
302
|
+
|
|
303
|
+
// Removes null value from array
|
|
304
|
+
guis.splice(index, 1);
|
|
305
|
+
}
|
|
306
|
+
});</code></pre>
|
|
292
307
|
</div>
|
|
293
308
|
</div>
|
|
294
309
|
</div>
|
package/test/src/index.js
CHANGED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/* PrismJS 1.29.0
|
|
2
|
+
https://prismjs.com/download.html#themes=prism-okaidia&languages=clike+javascript */
|
|
3
|
+
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j<O||"string"==typeof C.value);C=C.next)L++,j+=C.value.length;L--,E=e.slice(A,j),P.index-=A}else if(!(P=l(b,0,E,m)))continue;S=P.index;var N=P[0],_=E.slice(0,S),M=E.slice(S+N.length),W=A+E.length;g&&W>g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,""")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
|
|
4
|
+
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
|
|
5
|
+
Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/* PrismJS 1.29.0
|
|
2
|
+
https://prismjs.com/download.html#themes=prism-okaidia&languages=clike+javascript */
|
|
3
|
+
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
|