perfect-gui 2.6.0 → 3.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 (18) hide show
  1. package/README.md +35 -25
  2. package/package.json +1 -1
  3. package/src/index.js +165 -19
  4. package/src/styles.js +53 -2
  5. package/test/src/index.html +141 -43
  6. package/test/src/index.js +7 -2
  7. package/test/src/js/basics.js +29 -14
  8. package/test/src/js/folders.js +4 -4
  9. package/test/src/js/full_featured.js +14 -14
  10. package/test/src/js/kill_create.js +36 -0
  11. package/test/src/js/multiple.js +9 -9
  12. package/test/src/js/other.js +12 -10
  13. package/test/src/js/vectors.js +27 -0
  14. package/test/src/styles/main.scss +18 -1
  15. package/test/webpack.config.js +0 -1
  16. package/test/build/bundle.js +0 -1
  17. package/test/build/index.html +0 -162
  18. package/test/build/main.css +0 -91
package/test/src/index.html CHANGED
@@ -19,143 +19,241 @@
19
19
  <p class="note"></p>
20
20
  </div>
21
21
 
22
- <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_1</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
23
- <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Basics&#39;</span><span style="color: #f8f8f2">,</span>
22
+ <div class="code-button" onclick="document.getElementById('code-block-basics').classList.toggle('code-block--hidden')">See code</div>
23
+ <div id="code-block-basics" class="code-block code-block--hidden">
24
+ <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">position</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">{</span>
25
+ <span style="color: #a6e22e">x</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">0</span>
26
+ <span style="color: #f8f8f2">};</span>
27
+
28
+ <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
29
+ <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Basics&#39;</span>
24
30
  <span style="color: #f8f8f2">});</span>
25
31
 
26
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
27
- <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>
28
- <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">backgroundImage</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&#39;none&#39;</span><span style="color: #f8f8f2">;</span>
29
- <span style="color: #f8f8f2">});</span>
32
+ <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">changeColor</span><span style="color: #f8f8f2">);</span>
30
33
 
31
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addSlider</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Slider&#39;</span><span style="color: #f8f8f2">,</span>
32
- <span style="color: #f8f8f2">{</span> <span style="color: #a6e22e">min</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">max</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">2</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">value</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">1</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">step</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">.</span><span style="color: #ae81ff">01</span> <span style="color: #f8f8f2">},</span>
33
- <span style="color: #a6e22e">value</span> <span style="color: #f92672">=&gt;</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">transform</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">scale</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span> <span style="color: #a6e22e">value</span> <span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span>
34
+ <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Slider (simple callback)&#39;</span><span style="color: #f8f8f2">,</span>
35
+ <span style="color: #f8f8f2">{</span> <span style="color: #a6e22e">min</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">max</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">1</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">value</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">1</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">step</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">.</span><span style="color: #ae81ff">2</span> <span style="color: #f8f8f2">},</span>
36
+ <span style="color: #a6e22e">value</span> <span style="color: #f92672">=&gt;</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">opacity</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">value</span>
34
37
  <span style="color: #f8f8f2">);</span>
35
38
 
36
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addSwitch</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Switch&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">state</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
39
+ <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Slider 2 (object binding)&#39;</span><span style="color: #f8f8f2">,</span>
40
+ <span style="color: #f8f8f2">{</span> <span style="color: #a6e22e">object</span><span style="color: #f92672">:</span> <span style="color: #a6e22e">position</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">prop</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;x&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">min</span><span style="color: #f92672">:</span> <span style="color: #f92672">-</span><span style="color: #ae81ff">30</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">max</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">30</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">step</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">.</span><span style="color: #ae81ff">1</span> <span style="color: #f8f8f2">}</span>
41
+ <span style="color: #f8f8f2">);</span>
42
+
43
+ <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toggle</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Switch&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">state</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
37
44
  <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(</span> <span style="color: #a6e22e">state</span> <span style="color: #f8f8f2">)</span> <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">classList</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">remove</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;round&#39;</span><span style="color: #f8f8f2">);</span>
38
45
  <span style="color: #66d9ef">else</span> <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">classList</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">add</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;round&#39;</span><span style="color: #f8f8f2">);</span>
39
46
  <span style="color: #f8f8f2">});</span>
40
47
 
41
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addList</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;List&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">[</span><span style="color: #e6db74">&#39;red&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;pink&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;yellow&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;blue&#39;</span><span style="color: #f8f8f2">],</span> <span style="color: #a6e22e">item</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
48
+ <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">list</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;List&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">[</span><span style="color: #e6db74">&#39;red&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;pink&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;yellow&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;blue&#39;</span><span style="color: #f8f8f2">],</span> <span style="color: #a6e22e">item</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
42
49
  <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">item</span><span style="color: #f8f8f2">;</span>
43
50
  <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">backgroundImage</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&#39;none&#39;</span><span style="color: #f8f8f2">;</span>
44
51
  <span style="color: #f8f8f2">});</span>
45
52
 
46
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addImage</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Image 1&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;path/to/image-1.jpg&#39;</span><span style="color: #f8f8f2">,</span>
47
- <span style="color: #a6e22e">path</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
48
- <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">backgroundImage</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">url</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">path</span><span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
53
+ <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">image</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Image 1&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;path/to/image-1.jpg&#39;</span><span style="color: #f8f8f2">,</span>
54
+ <span style="color: #a6e22e">evt</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
55
+ <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">backgroundImage</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">url</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">evt</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">path</span><span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
49
56
  <span style="color: #f8f8f2">document.</span><span style="color: #a6e22e">querySelector</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;#container-1 .note&#39;</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">textContent</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;Photo by Joel Filipe on Unsplash&quot;</span><span style="color: #f8f8f2">;</span>
50
57
  <span style="color: #f8f8f2">}</span>
51
58
  <span style="color: #f8f8f2">);</span>
52
59
 
53
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addImage</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Image 2&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;path/to/image-2.jpg&#39;</span><span style="color: #f8f8f2">,</span>
54
- <span style="color: #a6e22e">path</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
55
- <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">backgroundImage</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">url</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">path</span><span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
60
+ <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">image</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Image 2&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;path/to/image-2.jpg&#39;</span><span style="color: #f8f8f2">,</span>
61
+ <span style="color: #a6e22e">evt</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
62
+ <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">backgroundImage</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">url</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">evt</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">path</span><span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
56
63
  <span style="color: #f8f8f2">document.</span><span style="color: #a6e22e">querySelector</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;#container-1 .note&#39;</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">textContent</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;Photo by Milad Fakurian on Unsplash&quot;</span><span style="color: #f8f8f2">;</span>
57
64
  <span style="color: #f8f8f2">}</span>
58
65
  <span style="color: #f8f8f2">);</span>
66
+
67
+ <span style="color: #66d9ef">function</span> <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
68
+ <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">transform</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">translateX</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">position</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">x</span><span style="color: #f8f8f2">}</span><span style="color: #a6e22e">px</span><span style="color: #f8f8f2">)</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
69
+ <span style="color: #a6e22e">requestAnimationFrame</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">);</span>
70
+ <span style="color: #f8f8f2">}</span>
71
+
72
+ <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">();</span>
73
+ </pre></div>
74
+ </div>
75
+
76
+ <h2>Vectors</h2>
77
+
78
+ <div id="container-vectors" class="container">
79
+ <div class="element"></div>
80
+ <p class="note"></p>
81
+ </div>
82
+
83
+ <div class="code-button" onclick="document.getElementById('code-block-vectors').classList.toggle('code-block--hidden')">See code</div>
84
+ <div id="code-block-vectors" class="code-block code-block--hidden">
85
+ <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">position</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">{</span>
86
+ <span style="color: #a6e22e">x</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">,</span>
87
+ <span style="color: #a6e22e">y</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">0</span>
88
+ <span style="color: #f8f8f2">}</span>
89
+
90
+ <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
91
+ <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Vectors&#39;</span>
92
+ <span style="color: #f8f8f2">});</span>
93
+
94
+ <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">vector2</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Position&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">{</span>
95
+ <span style="color: #a6e22e">x</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">{</span> <span style="color: #a6e22e">object</span><span style="color: #f92672">:</span> <span style="color: #a6e22e">position</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">prop</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;x&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">min</span><span style="color: #f92672">:</span> <span style="color: #f92672">-</span><span style="color: #ae81ff">50</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">max</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">50</span> <span style="color: #f8f8f2">},</span>
96
+ <span style="color: #a6e22e">y</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">{</span> <span style="color: #a6e22e">object</span><span style="color: #f92672">:</span> <span style="color: #a6e22e">position</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">prop</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;y&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">min</span><span style="color: #f92672">:</span> <span style="color: #f92672">-</span><span style="color: #ae81ff">50</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">max</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">50</span> <span style="color: #f8f8f2">},</span>
97
+ <span style="color: #f8f8f2">});</span>
98
+
99
+ <span style="color: #66d9ef">function</span> <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
100
+ <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">transform</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">translate</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">position</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">x</span><span style="color: #f8f8f2">}</span><span style="color: #a6e22e">px</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #f92672">-</span><span style="color: #a6e22e">position</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">y</span><span style="color: #f8f8f2">}</span><span style="color: #a6e22e">px</span><span style="color: #f8f8f2">)</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
101
+ <span style="color: #a6e22e">requestAnimationFrame</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">);</span>
102
+ <span style="color: #f8f8f2">}</span>
103
+
104
+ <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">();</span>
59
105
  </pre></div>
106
+ </div>
60
107
 
61
108
  <h2>Positioning</h2>
109
+
62
110
  <p>GUI instances can be positioned in any corner of the screen / container.</p>
63
111
  <p>When multiple instances share the same position (like GUI 1 and GUI 2 in the example below), they are stacked next to each other.</p>
112
+
64
113
  <div id="container-2" class="container">
65
114
  <div class="element"></div>
66
115
  </div>
67
116
 
68
- <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_1</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
117
+ <div class="code-button" onclick="document.getElementById('code-block-positioning').classList.toggle('code-block--hidden')">See code</div>
118
+ <div id="code-block-positioning" class="code-block code-block--hidden">
119
+ <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_1</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
69
120
  <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 1&#39;</span><span style="color: #f8f8f2">,</span>
70
121
  <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">200</span>
71
122
  <span style="color: #f8f8f2">});</span>
72
123
 
73
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Buttons can handle multiple lines of text.&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
124
+ <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Buttons can handle multiple lines of text.&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
74
125
  <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>
75
126
  <span style="color: #f8f8f2">});</span>
76
127
 
77
- <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_2</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
128
+ <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_2</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
78
129
  <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 2&#39;</span><span style="color: #f8f8f2">,</span>
79
130
  <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">200</span>
80
131
  <span style="color: #f8f8f2">});</span>
81
132
 
82
- <span style="color: #a6e22e">gui_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</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>
133
+ <span style="color: #a6e22e">gui_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</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>
83
134
 
84
- <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_3</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
135
+ <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_3</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
85
136
  <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 3&#39;</span><span style="color: #f8f8f2">,</span>
86
137
  <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;top right&#39;</span>
87
138
  <span style="color: #f8f8f2">});</span>
88
139
 
89
- <span style="color: #a6e22e">gui_3</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</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>
140
+ <span style="color: #a6e22e">gui_3</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</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>
90
141
 
91
- <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_4</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
142
+ <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_4</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
92
143
  <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 4&#39;</span><span style="color: #f8f8f2">,</span>
93
144
  <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;right bottom&#39;</span>
94
145
  <span style="color: #f8f8f2">});</span>
95
146
 
96
- <span style="color: #a6e22e">gui_4</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</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>
147
+ <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">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</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>
97
148
  </pre></div>
149
+ </div>
98
150
 
99
151
 
100
152
  <h2>Folders</h2>
101
- Folders can be closed by default by setting the <i>open</i> parameter to <span class="code">false</span>.
153
+
154
+ <p>Folders can be closed by default by setting the <i>open</i> parameter to <span class="code-inline">false</span>.</p>
155
+
102
156
  <div id="container-3" class="container">
103
157
  <div class="element"></div>
104
158
  </div>
105
159
 
106
- <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
160
+ <div class="code-button" onclick="document.getElementById('code-block-folders').classList.toggle('code-block--hidden')">See code</div>
161
+ <div id="code-block-folders" class="code-block code-block--hidden">
162
+ <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
107
163
  <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Folders&#39;</span>
108
164
  <span style="color: #f8f8f2">});</span>
109
165
 
110
- <span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_1</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addFolder</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Folder 1&#39;</span><span style="color: #f8f8f2">);</span>
166
+ <span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_1</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">folder</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Folder 1&#39;</span><span style="color: #f8f8f2">);</span>
111
167
 
112
- <span style="color: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;Random color&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
168
+ <span style="color: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;Random color&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
113
169
  <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>
114
170
  <span style="color: #f8f8f2">});</span>
115
171
 
116
- <span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_2</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addFolder</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Folder 2&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">false</span><span style="color: #f8f8f2">);</span>
172
+ <span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_2</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">folder</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Folder 2&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">false</span><span style="color: #f8f8f2">);</span>
117
173
 
118
- <span style="color: #a6e22e">folder_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;Random color&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
174
+ <span style="color: #a6e22e">folder_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;Random color&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
119
175
  <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>
120
176
  <span style="color: #f8f8f2">});</span>
121
177
  </pre></div>
178
+ </div>
122
179
 
123
180
  <h2>Other options</h2>
124
- <p>GUI panels can be dragged around with the <span class="code">draggable</span> option.</p>
125
- <p>They can also have a custom width, by using the <span class="code">width</span> option.</p>
126
- <p>The <span class="code">toggleClose()</span> method can be used to open / close a GUI panel.</p>
127
- <p>Just like folders, GUI panels can be closed by default by setting the <span class="code">close</span> option to <span class="code">true</span>.</p>
128
- <div id="container-4" class="container">
129
- </div>
130
181
 
131
- <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_1</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
182
+ <p>GUI panels can be dragged around with the <span class="code-inline">draggable</span> option.</p>
183
+ <p>They can also have a custom width, by using the <span class="code-inline">width</span> option.</p>
184
+ <p>The <span class="code-inline">toggleClose()</span> method can be used to open / close a GUI panel.</p>
185
+ <p>Just like folders, GUI panels can be closed by default by setting the <span class="code-inline">close</span> option to <span class="code-inline">true</span>.</p>
186
+
187
+ <div id="container-4" class="container"></div>
188
+
189
+ <div class="code-button" onclick="document.getElementById('code-block-containers').classList.toggle('code-block--hidden')">See code</div>
190
+ <div id="code-block-containers" class="code-block code-block--hidden">
191
+ <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_1</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
132
192
  <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 1 (drag me!)&#39;</span><span style="color: #f8f8f2">,</span>
133
193
  <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">500</span><span style="color: #f8f8f2">,</span>
134
194
  <span style="color: #a6e22e">draggable</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span>
135
195
  <span style="color: #f8f8f2">});</span>
136
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Custom width using the `width` option&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{});</span>
196
+ <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Custom width using the `width` option&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{});</span>
137
197
 
138
- <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_2</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
198
+ <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_2</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
139
199
  <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 2 (drag me!)&#39;</span><span style="color: #f8f8f2">,</span>
140
200
  <span style="color: #a6e22e">close</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
141
201
  <span style="color: #a6e22e">draggable</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
142
202
  <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;bottom left&#39;</span>
143
203
  <span style="color: #f8f8f2">});</span>
144
204
 
145
- <span style="color: #a6e22e">gui_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;gui_1.toggleClose();&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
205
+ <span style="color: #a6e22e">gui_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;gui_1.toggleClose();&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
146
206
  <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toggleClose</span><span style="color: #f8f8f2">();</span>
147
207
  <span style="color: #f8f8f2">});</span>
148
208
 
149
- <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_3</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
209
+ <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_3</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
150
210
  <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 3 (closed)&#39;</span><span style="color: #f8f8f2">,</span>
151
211
  <span style="color: #a6e22e">closed</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
152
212
  <span style="color: #f8f8f2">});</span>
153
213
 
154
- <span style="color: #a6e22e">gui_3</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;gui_2.toggleClose();&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
214
+ <span style="color: #a6e22e">gui_3</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;gui_2.toggleClose();&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
155
215
  <span style="color: #a6e22e">gui_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toggleClose</span><span style="color: #f8f8f2">();</span>
156
216
  <span style="color: #f8f8f2">});</span>
157
217
  </pre></div>
218
+ </div>
219
+
220
+ <h2>Killing and creating dynamically</h2>
221
+
222
+ <p>There is no .kill() method at the moment, so instances have to be killed "manually".</p>
223
+
224
+ <div id="container-5" class="container"></div>
225
+
226
+ <div class="code-button" onclick="document.getElementById('code-block-killing').classList.toggle('code-block--hidden')">See code</div>
227
+ <div id="code-block-killing" class="code-block code-block--hidden">
228
+ <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">guis</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">[];</span>
158
229
 
230
+ <span style="color: #66d9ef">let</span> <span style="color: #a6e22e">gui_1</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
231
+ <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 1&#39;</span><span style="color: #f8f8f2">,</span>
232
+ <span style="color: #f8f8f2">});</span>
233
+
234
+ <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Create GUI panel&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
235
+ <span style="color: #a6e22e">guis</span><span style="color: #f8f8f2">[</span><span style="color: #a6e22e">guis</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">length</span><span style="color: #f8f8f2">]</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
236
+ <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Created GUI&#39;</span><span style="color: #f8f8f2">,</span>
237
+ <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;bottom left&#39;</span><span style="color: #f8f8f2">,</span>
238
+ <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">150</span>
239
+ <span style="color: #f8f8f2">});</span>
240
+ <span style="color: #f8f8f2">});</span>
241
+
242
+ <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Kill GUI panel&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
243
+ <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">index</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">guis</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">length</span> <span style="color: #f92672">-</span> <span style="color: #ae81ff">1</span><span style="color: #f8f8f2">;</span>
244
+ <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(</span> <span style="color: #a6e22e">index</span> <span style="color: #f92672">&gt;=</span> <span style="color: #ae81ff">0</span> <span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
245
+ <span style="color: #75715e">// Removes html elements</span>
246
+ <span style="color: #a6e22e">guis</span><span style="color: #f8f8f2">[</span><span style="color: #a6e22e">index</span><span style="color: #f8f8f2">].</span><span style="color: #a6e22e">wrapper</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">remove</span><span style="color: #f8f8f2">();</span>
247
+
248
+ <span style="color: #75715e">// Frees up memory</span>
249
+ <span style="color: #a6e22e">guis</span><span style="color: #f8f8f2">[</span><span style="color: #a6e22e">index</span><span style="color: #f8f8f2">]</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">null</span><span style="color: #f8f8f2">;</span>
250
+
251
+ <span style="color: #75715e">// Removes null value from array</span>
252
+ <span style="color: #a6e22e">guis</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">splice</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">index</span><span style="color: #f8f8f2">,</span> <span style="color: #ae81ff">1</span><span style="color: #f8f8f2">);</span>
253
+ <span style="color: #f8f8f2">}</span>
254
+ <span style="color: #f8f8f2">});</span>
255
+ </pre></div>
256
+ </div>
159
257
  </div>
160
258
  </body>
161
259
 
package/test/src/index.js CHANGED
@@ -2,15 +2,20 @@ import './styles/main.scss';
2
2
  import perfectGUI from '../../src/index';
3
3
  //import full_featured_gui from './js/full_featured';
4
4
  import basics from './js/basics';
5
+ import vectors from './js/vectors';
5
6
  import multiple from './js/multiple';
6
7
  import folders from './js/folders';
7
8
  import other from './js/other';
8
- import getRandomColor from './js/getRandomColor';
9
+ import kill_create from './js/kill_create';
9
10
 
10
11
  basics();
11
12
 
13
+ vectors();
14
+
12
15
  multiple();
13
16
 
14
17
  folders();
15
18
 
16
- other();
19
+ other();
20
+
21
+ kill_create();
package/test/src/js/basics.js CHANGED
@@ -1,49 +1,64 @@
1
- import perfectGUI from '../../../src/index';
1
+ import GUI from '../../../src/index';
2
2
  import getRandomColor from './getRandomColor';
3
3
 
4
4
  export default function basics() {
5
+ const position = {
6
+ x: 0,
7
+ };
5
8
 
6
9
  const element = document.querySelector('#container-1 .element');
7
10
 
8
- const gui_1 = new perfectGUI({
11
+ const gui = new GUI({
9
12
  name: 'Basics',
10
13
  container: '#container-1'
11
14
  });
12
15
 
13
- gui_1.addButton('Button', () => {
16
+ gui.button('Button', () => {
14
17
  element.style.backgroundColor = getRandomColor();
15
18
  element.style.backgroundImage = 'none';
16
19
  });
17
20
 
18
- gui_1.addSlider('Slider',
19
- { min: 0, max: 2, value: 1, step: .01 },
20
- value => element.style.transform = `scale(${ value })`
21
+ gui.slider('Slider (simple callback)',
22
+ { min: 0, max: 1, value: 1, step: .2 },
23
+ value => {
24
+ element.style.opacity = value;
25
+ }
26
+ );
27
+
28
+ gui.slider('Slider 2 (object binding)',
29
+ { object: position, prop: 'x', min: -30, max: 30, step: .1 }
21
30
  );
22
31
 
23
- gui_1.addSwitch('Switch', true, state => {
32
+ gui.toggle('Switch', true, state => {
24
33
  if ( state ) element.classList.remove('round');
25
34
  else element.classList.add('round');
26
35
  });
27
36
 
28
- gui_1.addList('List', ['red', 'pink', 'yellow', 'blue'], item => {
37
+ gui.list('List', ['red', 'pink', 'yellow', 'blue'], item => {
29
38
  element.style.backgroundColor = item;
30
39
  element.style.backgroundImage = 'none';
31
40
  });
32
41
 
33
- gui_1.addImage('Image 1',
42
+ gui.image('Image 1',
34
43
  'https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=512&q=80',
35
- path => {
36
- element.style.backgroundImage = `url(${path})`;
44
+ evt => {
45
+ element.style.backgroundImage = `url(${evt.path})`;
37
46
  document.querySelector('#container-1 .note').textContent = "Photo by Joel Filipe on Unsplash";
38
47
  }
39
48
  );
40
49
 
41
- gui_1.addImage('Image 2',
50
+ gui.image('Image 2',
42
51
  'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=512&q=80',
43
- path => {
44
- element.style.backgroundImage = `url(${path})`;
52
+ evt => {
53
+ element.style.backgroundImage = `url(${evt.path})`;
45
54
  document.querySelector('#container-1 .note').textContent = "Photo by Milad Fakurian on Unsplash";
46
55
  }
47
56
  );
48
57
 
58
+ function loop() {
59
+ element.style.transform = `translateX(${position.x}px)`;
60
+ requestAnimationFrame(loop);
61
+ }
62
+
63
+ loop();
49
64
  }
package/test/src/js/folders.js CHANGED
@@ -9,15 +9,15 @@ export default function folders() {
9
9
  container: '#container-3'
10
10
  });
11
11
 
12
- let folder_1 = gui.addFolder('Folder 1 (open)');
12
+ let folder_1 = gui.folder('Folder 1 (open)');
13
13
 
14
- folder_1.addButton("Random color", () => {
14
+ folder_1.button("Random color", () => {
15
15
  element.style.backgroundColor = getRandomColor();
16
16
  });
17
17
 
18
- let folder_2 = gui.addFolder('Folder 2 (closed)', { closed: true });
18
+ let folder_2 = gui.folder('Folder 2 (closed)', { closed: true });
19
19
 
20
- folder_2.addButton("Random color", () => {
20
+ folder_2.button("Random color", () => {
21
21
  element.style.backgroundColor = getRandomColor();
22
22
  });
23
23
  }