npm - perfect-gui - Versions diffs - 2.5.2 → 2.6.0 - Mend

perfect-gui 2.5.2 → 2.6.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 (19) hide show

package/README.md +8 -3
package/package.json +1 -1
package/src/index.js +24 -16
package/src/styles.js +5 -3
package/test/build/bundle.js +1 -1
package/test/build/index.html +150 -4
package/test/build/main.css +83 -330
package/test/package-lock.json +2331 -10957
package/test/package.json +10 -22
package/test/src/index.html +148 -2
package/test/src/index.js +12 -174
package/test/src/js/basics.js +49 -0
package/test/src/js/folders.js +23 -0
package/test/src/js/full_featured.js +84 -0
package/test/src/js/getRandomColor.js +8 -0
package/test/src/js/multiple.js +40 -0
package/test/src/js/other.js +34 -0
package/test/src/styles/main.scss +58 -3
package/test/webpack.config.js +2 -38

package/test/package.json CHANGED Viewed

@@ -1,35 +1,23 @@
 {
-  "name": "8",
-  "version": "2.0.0",
+  "name": "perfect-gui_example",
+  "version": "1.0.0",
   "description": "",
   "main": "webpack.config.js",
   "scripts": {
-    "dev": "webpack-dev-server --watch",
+    "start": "webpack serve",
     "build": "webpack --mode=production"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^3.2.0",
-    "image-webpack-loader": "^4.6.0",
+    "css-loader": "^6.7.1",
+    "html-webpack-plugin": "^5.5.0",
     "json-loader": "^0.5.7",
-    "mini-css-extract-plugin": "^0.4.5",
-    "node-sass": "^4.14.1",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.21.0",
-    "webpack": "^4.29.3",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
-  },
-  "dependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.1",
-    "babel-loader": "^8.0.5",
-    "css-loader": "^2.1.1",
-    "normalize.css": "^8.0.1"
+    "mini-css-extract-plugin": "^2.6.1",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.1"
   }
 }

package/test/src/index.html CHANGED Viewed

@@ -9,8 +9,154 @@
 </head>
 <body>
-    <div id="element"></div>
-    <p id="note"></p>
+    <div class="wrapper">
+        <h1>Perfect GUI API</h1>
+        <h2>Basics</h2>
+        <div id="container-1" class="container">
+            <div class="element"></div>
+            <p class="note"></p>
+        </div>
+<!-- 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>
+    <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Basics&#39;</span><span style="color: #f8f8f2">,</span>
+<span style="color: #f8f8f2">});</span>
+<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>
+    <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: #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>
+<span style="color: #f8f8f2">});</span>
+<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>
+    <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>
+    <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>
+<span style="color: #f8f8f2">);</span>
+<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>
+    <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>
+    <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>
+<span style="color: #f8f8f2">});</span>
+<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>
+    <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>
+    <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>
+<span style="color: #f8f8f2">});</span>
+<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>
+    <span style="color: #a6e22e">path</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</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">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>
+        <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>
+    <span style="color: #f8f8f2">}</span>
+<span style="color: #f8f8f2">);</span>
+<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>
+    <span style="color: #a6e22e">path</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</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">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>
+        <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>
+    <span style="color: #f8f8f2">}</span>
+<span style="color: #f8f8f2">);</span>
+</pre></div>
+        <h2>Positioning</h2>
+        <p>GUI instances can be positioned in any corner of the screen / container.</p>
+        <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>
+        <div id="container-2" class="container">
+            <div class="element"></div>
+        </div>
+       <!-- 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>
+    <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>
+    <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">200</span>
+<span style="color: #f8f8f2">});</span>
+<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>
+    <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>
+<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>
+    <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>
+    <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">200</span>
+<span style="color: #f8f8f2">});</span>
+<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>
+<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>
+    <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>
+    <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;top right&#39;</span>
+<span style="color: #f8f8f2">});</span>
+<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>
+<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>
+    <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>
+    <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;right bottom&#39;</span>
+<span style="color: #f8f8f2">});</span>
+<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>
+</pre></div>
+        <h2>Folders</h2>
+        Folders can be closed by default by setting the <i>open</i> parameter to <span class="code">false</span>.
+        <div id="container-3" class="container">
+            <div class="element"></div>
+        </div>
+        <!-- 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>
+    <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Folders&#39;</span>
+<span style="color: #f8f8f2">});</span>
+<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>
+<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>
+    <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>
+<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>
+<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>
+    <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>
+</pre></div>
+        <h2>Other options</h2>
+        <p>GUI panels can be dragged around with the <span class="code">draggable</span> option.</p>
+        <p>They can also have a custom width, by using the <span class="code">width</span> option.</p>
+        <p>The <span class="code">toggleClose()</span> method can be used to open / close a GUI panel.</p>
+        <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>
+        <div id="container-4" class="container">
+        </div>
+        <!-- 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>
+    <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>
+    <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">500</span><span style="color: #f8f8f2">,</span>
+    <span style="color: #a6e22e">draggable</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span>
+<span style="color: #f8f8f2">});</span>
+<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>
+<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>
+    <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>
+    <span style="color: #a6e22e">close</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
+    <span style="color: #a6e22e">draggable</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
+    <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>
+<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>
+    <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toggleClose</span><span style="color: #f8f8f2">();</span>
+<span style="color: #f8f8f2">});</span>
+<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>
+    <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>
+    <span style="color: #a6e22e">closed</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
+<span style="color: #f8f8f2">});</span>
+<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>
+    <span style="color: #a6e22e">gui_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toggleClose</span><span style="color: #f8f8f2">();</span>
+<span style="color: #f8f8f2">});</span>
+</pre></div>
+    </div>
 </body>
 </html>

package/test/src/index.js CHANGED Viewed

@@ -1,178 +1,16 @@
-import "@babel/polyfill"
+import './styles/main.scss';
+import perfectGUI from '../../src/index';
+//import full_featured_gui from './js/full_featured';
+import basics from './js/basics';
+import multiple from './js/multiple';
+import folders from './js/folders';
+import other from './js/other';
+import getRandomColor from './js/getRandomColor';
-import 'normalize.css'
-import './styles/main.scss'
+basics();
-import perfectGUI from '../../src/index'
+multiple();
-const element = document.getElementById('element');
+folders();
-const gui_1 = new perfectGUI({
-    name: "This is a basic panel",
-    draggable: true
-});
-gui_1.addImage(
-    'Background 1',
-    'https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80',
-    () => {
-        document.body.style.backgroundImage = `url(https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80)`;
-        document.body.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Joel Filipe on Unsplash";
-    }
-);
-gui_1.addImage(
-    'Background 2',
-    'https://images.unsplash.com/photo-1535370976884-f4376736ab06?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80',
-    () => {
-        document.body.style.backgroundImage = `url(https://images.unsplash.com/photo-1535370976884-f4376736ab06?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80)`;
-        document.body.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Richard M. on Unsplash";
-    }
-);
-gui_1.addImage(
-    'Background 3',
-    'https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80',
-    () => {
-        document.body.style.backgroundImage = `url(https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80)`;
-        document.body.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Cassi Josh on Unsplash";
-    }
-);
-gui_1.addImage(
-    'Background 3',
-    'https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80',
-    () => {
-        document.body.style.backgroundImage = `url(https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80)`;
-        document.body.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Cassi Josh on Unsplash";
-    }
-);
-let folder = gui_1.addFolder('Some folder');
-folder.addButton("Random element color", () => {
-    element.style.backgroundColor = get_random_color();
-});
-folder.addImage(
-    'Background 1',
-    'https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80',
-    () => {
-        document.body.style.backgroundImage = `url(https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80)`;
-        document.body.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Joel Filipe on Unsplash";
-    }
-);
-folder.addImage(
-    'Background 1',
-    'https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80',
-    () => {
-        document.body.style.backgroundImage = `url(https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80)`;
-        document.body.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Joel Filipe on Unsplash";
-    }
-);
-folder.addImage(
-    'Background 1',
-    'https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80',
-    () => {
-        document.body.style.backgroundImage = `url(https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80)`;
-        document.body.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Joel Filipe on Unsplash";
-    }
-);
-folder.addImage(
-    'Background 1',
-    'https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80',
-    () => {
-        document.body.style.backgroundImage = `url(https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80)`;
-        document.body.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Joel Filipe on Unsplash";
-    }
-);
-gui_1.addButton("Random element color", () => {
-    element.style.backgroundColor = get_random_color();
-});
-gui_1.addSlider("Scale", {min: .1, max: 2, value: 1, step: .01 }, (value) => {
-    element.style.transform = `scale(${value})`;
-});
-gui_1.addSlider("3-step border-radius", {min: 0, max: 50, value: 0, step: 25 }, (value) => {
-    element.style.borderRadius = `${value}%`;
-});
-let folder2 = gui_1.addFolder('ok', false);
-folder2.addButton("Random element color", () => {
-    element.style.backgroundColor = get_random_color();
-});
-gui_1.addSwitch("Opacity switch", true, (state) => {
-    if (!state) element.style.opacity = .5;
-    else element.style.opacity = 1;
-});
-gui_1.addList('Select a color', ['red', 'pink', 'yellow', 'blue'], function(item) {
-    element.style.backgroundColor = item;
-});
-function get_random_color() {
-    var letters = '0123456789ABCDEF'.split('');
-    var color = '#';
-    for (var i = 0; i < 6; i++ ) {
-        color += letters[Math.round(Math.random() * 15)];
-    }
-    return color;
-};
-const gui_2 = new perfectGUI({
-    name: "This is one is closed",
-    width: 175,
-    closed: true,
-    draggable: true
-});
-let f = gui_2.addFolder("test");
-f.addButton('ok', ()=>{});
-gui_2.addButton("Toggle the first GUI", () => {
-    gui_1.toggleClose();
-});
-gui_2.addButton("You can put a lot of text in a button if you want to.", () => {
-    element.style.backgroundColor = get_random_color();
-});
-const gui_3 = new perfectGUI({
-    name: "You can drag panels around...",
-    draggable: true
-});
-gui_3.addButton("...with the 'draggable' option.", () => {
-    element.style.backgroundColor = get_random_color();
-});
-const gui_4 = new perfectGUI({
-    name: "This panel is not draggable.",
-    position: 'top right',
-    draggable: false
-});
-gui_4.addButton("It's up to you.", ()=>{
-    element.style.backgroundColor = get_random_color();
-});
-const gui_5 = new perfectGUI({
-    name: "You can place the panels wherever you want",
-    position: 'right bottom',
-    width: 450
-});
-gui_5.addButton("And you can set their width, with the 'width' option.", () => {
-});
+other();

package/test/src/js/basics.js ADDED Viewed

@@ -0,0 +1,49 @@
+import perfectGUI from '../../../src/index';
+import getRandomColor from './getRandomColor';
+export default function basics() {
+    const element = document.querySelector('#container-1 .element');
+    const gui_1 = new perfectGUI({
+        name: 'Basics',
+        container: '#container-1'
+    });
+    gui_1.addButton('Button', () => {
+        element.style.backgroundColor = getRandomColor();
+        element.style.backgroundImage = 'none';
+    });
+    gui_1.addSlider('Slider',
+        { min: 0, max: 2, value: 1, step: .01 },
+        value => element.style.transform = `scale(${ value })`
+    );
+    gui_1.addSwitch('Switch', true, state => {
+        if ( state ) element.classList.remove('round');
+        else element.classList.add('round');
+    });
+    gui_1.addList('List', ['red', 'pink', 'yellow', 'blue'], item => {
+        element.style.backgroundColor = item;
+        element.style.backgroundImage = 'none';
+    });
+    gui_1.addImage('Image 1',
+        'https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=512&q=80',
+        path => {
+            element.style.backgroundImage = `url(${path})`;
+            document.querySelector('#container-1 .note').textContent = "Photo by Joel Filipe on Unsplash";
+        }
+    );
+    gui_1.addImage('Image 2',
+        'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=512&q=80',
+        path => {
+            element.style.backgroundImage = `url(${path})`;
+            document.querySelector('#container-1 .note').textContent = "Photo by Milad Fakurian on Unsplash";
+        }
+    );
+}

package/test/src/js/folders.js ADDED Viewed

@@ -0,0 +1,23 @@
+import getRandomColor from './getRandomColor';
+import perfectGUI from '../../../src/index';
+export default function folders() {
+    const element = document.querySelector('#container-3 .element');
+    const gui = new perfectGUI({
+        name: 'Folders',
+        container: '#container-3'
+    });
+    let folder_1 = gui.addFolder('Folder 1 (open)');
+    folder_1.addButton("Random color", () => {
+        element.style.backgroundColor = getRandomColor();
+    });
+    let folder_2 = gui.addFolder('Folder 2 (closed)', { closed: true });
+    folder_2.addButton("Random color", () => {
+        element.style.backgroundColor = getRandomColor();
+    });
+}

package/test/src/js/full_featured.js ADDED Viewed

@@ -0,0 +1,84 @@
+const full_featured_gui = new perfectGUI({
+    name: "This is a basic panel",
+    draggable: true,
+    container: '#container-1'
+});
+full_featured_gui.addImage(
+    'Background 1',
+    'https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=80',
+    () => {
+        full_featured_gui.container.style.backgroundImage = `url(https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80)`;
+        full_featured_gui.container.style.backgroundColor = `none`;
+        document.getElementById('note').textContent = "Photo by Joel Filipe on Unsplash";
+    }
+);
+full_featured_gui.addImage(
+    'Background 2',
+    'https://images.unsplash.com/photo-1535370976884-f4376736ab06?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=80',
+    () => {
+        full_featured_gui.container.style.backgroundImage = `url(https://images.unsplash.com/photo-1535370976884-f4376736ab06?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80)`;
+        full_featured_gui.container.style.backgroundColor = `none`;
+        document.getElementById('note').textContent = "Photo by Richard M. on Unsplash";
+    }
+);
+full_featured_gui.addImage(
+    'Background 3',
+    'https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=80',
+    () => {
+        full_featured_gui.container.style.backgroundImage = `url(https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80)`;
+        full_featured_gui.container.style.backgroundColor = `none`;
+        document.getElementById('note').textContent = "Photo by Cassi Josh on Unsplash";
+    }
+);
+full_featured_gui.addImage(
+    'Background 4',
+    'https://images.unsplash.com/photo-1574169208507-84376144848b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=768&q=80',
+    () => {
+        full_featured_gui.container.style.backgroundImage = `url(https://images.unsplash.com/photo-1574169208507-84376144848b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=768&q=80)`;
+        full_featured_gui.container.style.backgroundColor = `none`;
+        document.getElementById('note').textContent = "Photo by United States Geological Survey on Unsplash";
+    }
+);
+let folder = full_featured_gui.addFolder('Some folder');
+folder.addButton("Random element color", () => {
+    element.style.backgroundColor = get_random_color();
+});
+folder.addImage(
+    'Background 5',
+    'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1024&q=80',
+    () => {
+        full_featured_gui.container.style.backgroundImage = `url(https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1024&q=80)`;
+        full_featured_gui.container.style.backgroundColor = `none`;
+        document.getElementById('note').textContent = "Photo by Milad Fakurian on Unsplash";
+    }
+);
+full_featured_gui.addButton("Random element color", () => {
+    element.style.backgroundColor = get_random_color();
+});
+full_featured_gui.addSlider("Scale", {min: .1, max: 2, value: 1, step: .01 }, (value) => {
+    element.style.transform = `scale(${value})`;
+});
+full_featured_gui.addSlider("3-step border-radius", {min: 0, max: 50, value: 0, step: 25 }, (value) => {
+    element.style.borderRadius = `${value}%`;
+});
+let folder2 = full_featured_gui.addFolder('ok', false);
+folder2.addButton("Random element color", () => {
+    element.style.backgroundColor = get_random_color();
+});
+full_featured_gui.addSwitch("Opacity switch", true, (state) => {
+    if (!state) element.style.opacity = .5;
+    else element.style.opacity = 1;
+});
+full_featured_gui.addList('Select a color', ['red', 'pink', 'yellow', 'blue'], function(item) {
+    element.style.backgroundColor = item;
+});

package/test/src/js/getRandomColor.js ADDED Viewed

@@ -0,0 +1,8 @@
+export default function getRandomColor() {
+    var letters = '0123456789ABCDEF'.split('');
+    var color = '#';
+    for (var i = 0; i < 6; i++ ) {
+        color += letters[Math.round(Math.random() * 15)];
+    }
+    return color;
+};