perfect-gui 3.4.6 → 3.5.1

package/README.md

@@ -14,17 +14,15 @@ https://thibka.github.io/perfect-gui/public/
 
 ## Install
 
-### NPM
 ```bash
 npm i perfect-gui
 ```
-```javascript
-import GUI from 'perfect-gui';
-```
 
 ## Usage
 
 ```javascript
+import GUI from 'perfect-gui';
+
 const gui = new GUI();
 
 gui.button('Click me', callback);
@@ -45,17 +43,20 @@ const gui = new GUI({
     width: 250,
     // Width of the panel (in pixels). 
     // Default is 290.
+
+    maxHeight: 500,
+    // Maximum height beyond which scrolling is necessary. 
+    // Default is the smallest value between the height of the window and the height of the container.
     
     closed: false, 
-    // Defines whether the panel should be open or closed by default. 
-    // Default is false (open).
+    // Defines whether the panel should be closed by default. 
+    // Default is false.
 
     position: 'bottom right',
     // Defines where to place the panel on screen.
-    // Accepted values are 'top', 'bottom', 'left' and 'right' 
-    // in no particular order ('bottom right' = 'right bottom').
+    // Accepted values are 'top', 'bottom', 'left' and 'right' in no particular order ('bottom right' = 'right bottom').
     // If multiple instances have the same position, they will be stacked horizontally.
-    // Default is 'top left'.
+    // Default is 'top right'.
 
     draggable: false,
     // Defines if the panel can be manually moved across the screen.
@@ -143,6 +144,14 @@ gui.vector2('Position', {
 });
 ```
 </td></tr>
+<tr><td>color</td><td>
+
+```javascript
+gui.color('Color', '#ff0000', color => {
+    console.log('Selected color:', color);
+});
+```
+</td></tr>
 <tr><td>folder</td><td>
 
 ```javascript
@@ -164,6 +173,6 @@ gui.toggleClose();
 
 
 ## To do
-- Color palette component
 - Vector2 drag & drop
-- Style list component
+- Style list component
+- Image button selection outline

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "3.4.6",
+  "version": "3.5.1",
   "description": "Nice and simple GUI for JavaScript.",
   "main": "src/index.js",
   "directories": {

package/src/index.js

@@ -18,7 +18,7 @@ export default class GUI {
         }
 
         this.name = (options != undefined && typeof options.name == "string") ? options.name : ''; 
-        this.color = options.color || null; 
+        this.backgroundColor = options.color || null; 
 
         if ( this instanceof GUI ) {
             if ( typeof GUI[GUI.instanceCounter] != 'number' ) {
@@ -73,7 +73,7 @@ export default class GUI {
             max-height: ${this.maxHeight}px;
             transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
             ${ this.screenCorner.y == 'top' ? '' : 'top: auto; bottom: 0;' }
-            ${ this.color ? 'background: ' + this.color + ';' : '' }
+            ${ this.backgroundColor ? 'background: ' + this.backgroundColor + ';' : '' }
         }`);
 
         if (options.autoRepositioning != false) window.addEventListener('resize', this._handleResize.bind(this));
@@ -96,12 +96,12 @@ export default class GUI {
     }
 
     _parseScreenCorner(position) {
-        let parsedPosition = {x: 'left', y: 'top'};
+        let parsedPosition = {x: 'right', y: 'top'};
 
         if (position == undefined) return parsedPosition;
-        else if (typeof position != 'string') console.error('[perfect-gui] The position option must be a string.');
+        else if (typeof position != 'string') console.error('[perfect-gui] Position must be a string.');
 
-        if (position.includes('right')) parsedPosition.x = 'right';
+        if (position.includes('left')) parsedPosition.x = 'left';
         if (position.includes('bottom')) parsedPosition.y = 'bottom';
 
         return parsedPosition;
@@ -142,6 +142,8 @@ export default class GUI {
         if (element.onchange) domElement.onchange = element.onchange;
         if (element.textContent) domElement.textContent = element.textContent;
         if (element.innerHTML) domElement.innerHTML = element.innerHTML;
+        if (element.type) domElement.type = element.type;
+        if (element.value) domElement.value = element.value;
         if (element.customAttributes) {
             for (var i in element.customAttributes) {
                 domElement.setAttribute(i, element.customAttributes[i]);
@@ -167,7 +169,7 @@ export default class GUI {
             parent: this.wrapper,
             class: 'p-gui__header',
             textContent: this.name,
-            inline: `${ this.color ? 'border-color: ' + this.color + ';' : ''}`
+            inline: `${ this.backgroundColor ? 'border-color: ' + this.backgroundColor + ';' : ''}`
         });
     
         this._createElement({
@@ -472,6 +474,28 @@ export default class GUI {
         });
     }
 
+    color(text, value, callback) {
+        const container = this._createElement({
+            el: 'div',
+            class: 'p-gui__color',
+            textContent: text,
+        });
+
+        const colorpicker = this._createElement({
+            parent: container,
+            el: 'input',
+            class: 'p-gui__color-picker',
+            type: 'color',
+            value
+        });
+
+        if (callback) {
+            colorpicker.addEventListener('input', () => {
+                callback(colorpicker.value);
+            });
+        }
+    }
+
     folder(options = {}) {
         let closed = typeof options.closed == 'boolean' ? options.closed : false;
         let name = options.name || '';

package/src/styles.js

@@ -92,7 +92,8 @@ return /* css */`
 .p-gui__button, 
 .p-gui__switch,
 .p-gui__list,
-.p-gui__vector2 {
+.p-gui__vector2,
+.p-gui__color {
     width: 100%;
     padding: 7px;
     font-size: 11px;
@@ -177,10 +178,6 @@ return /* css */`
     pointer-events: none;
 }
 
-.p-gui__list {
-    cursor: default;
-}
-
 .p-gui__switch-checkbox {
     width: 5px;
     height: 5px;
@@ -199,7 +196,13 @@ return /* css */`
     box-shadow: 0 0 5px #00ff89;
 }
 
-.p-gui__list-dropdown {
+.p-gui__list,
+.p-gui__color {
+    cursor: default;
+}
+
+.p-gui__list-dropdown,
+.p-gui__color-picker {
     position: absolute;
     right: 5px;
     top: 0;
@@ -209,6 +212,21 @@ return /* css */`
     cursor: pointer;
 }
 
+.p-gui__color-picker {
+    -webkit-appearance: none;
+    padding: 0;
+    background-color: transparent;
+    height: 15px;
+    border: 1px solid #222222;
+}
+
+.p-gui__color-picker::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+.p-gui__color-picker::-webkit-color-swatch {
+	border: none;
+}
+
 .p-gui__slider {
     width: 100%;
     margin-bottom: 8px;

package/test/src/index.html

@@ -11,7 +11,7 @@
 <body>
     <div class="wrapper">
         <h1>Perfect GUI API</h1>
-        
+
         <h2>Basics</h2>
 
         <div id="container-1" class="container">
@@ -25,22 +25,17 @@
     <span style="color: #a6e22e">x</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">0</span>
 <span style="color: #f8f8f2">};</span>
 
-<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>
-    <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: #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> <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: #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>
 
-<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: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Slider (simple callback)&#39;</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: #f8f8f2">},</span> <span style="color: #a6e22e">value</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">opacity</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">value</span>
-<span style="color: #f8f8f2">});</span>
+<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: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Slider (simple callback)&#39;</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">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> 
+<span style="color: #f8f8f2">);</span>
 
 <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: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Slider 2 (object binding)&#39;</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">obj</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> 
@@ -54,22 +49,19 @@
 
 <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>
     <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</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>
-    <span style="color: #a6e22e">evt</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">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>
-        <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</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> <span style="color: #a6e22e">evt</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">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>
+<span style="color: #f8f8f2">});</span>
 
-<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>
-    <span style="color: #a6e22e">evt</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">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>
-        <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>
+<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> <span style="color: #a6e22e">evt</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">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>
+<span style="color: #f8f8f2">});</span>
+
+<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">color</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Color&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;#ff0000&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">color</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">color</span><span style="color: #f8f8f2">;</span>
+<span style="color: #f8f8f2">});</span>
 
 <span style="color: #66d9ef">function</span> <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">()</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">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>
@@ -77,7 +69,8 @@
 <span style="color: #f8f8f2">}</span>
 
 <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">();</span>
-</pre></div>
+</pre></div>    
+    
         </div>
         
         <h2>Vectors</h2>
@@ -141,14 +134,14 @@
 
 <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>
     <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: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;top left&#39;</span>
 <span style="color: #f8f8f2">});</span>
 
 <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>
 
 <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>
     <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: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;bottom right&#39;</span>
 <span style="color: #f8f8f2">});</span>
 
 <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>
@@ -268,7 +261,8 @@
     <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>
         <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>
         <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">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">150</span>
+        <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">150</span><span style="color: #f8f8f2">,</span>
+        <span style="color: #a6e22e">color</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">'red'</span>
     <span style="color: #f8f8f2">});</span>
 <span style="color: #f8f8f2">});</span>
 

package/test/src/js/basics.js

@@ -25,8 +25,7 @@ export default function basics() {
         }
     );
 
-    gui.slider({ name: 'Slider 2 (object binding)', obj: position, prop: 'x', min: -30, max: 30, step: .1 }
-    );
+    gui.slider({ name: 'Slider 2 (object binding)', obj: position, prop: 'x', min: -30, max: 30, step: .1 });
 
     gui.toggle('Switch', true, state => {
         if ( state ) element.classList.remove('round');
@@ -34,8 +33,8 @@ export default function basics() {
     });
 
     gui.list('List', ['red', 'pink', 'yellow', 'blue'], item => {
-        element.style.backgroundColor = item;
         element.style.backgroundImage = 'none';
+        element.style.backgroundColor = item;
     });
 
     gui.image('Image 1',
@@ -54,6 +53,11 @@ export default function basics() {
         }
     );
 
+    gui.color('Color', '#ff0000', color => {
+        element.style.backgroundImage = 'none';
+        element.style.backgroundColor = color;
+    });
+
     function loop() {
         element.style.transform = `translateX(${position.x}px)`;
         requestAnimationFrame(loop);

package/test/src/js/demo.js

@@ -13,7 +13,6 @@ export default function()
         name: 'Control panel'
     });
 
-
     gui.button("Randomize color", () => {
         element.style.backgroundColor = get_random_color();
     });
@@ -62,5 +61,5 @@ export default function()
         x: {min: -10, max: 10, object: position, prop: 'x'},
         y: {min: -10, max: 10, object: position, prop: 'y'},
     }, () => {});
-    gui2.button('Randomize', () => {});
+    gui2.color('Color', '#ffd170', () => {});
 }

package/test/src/js/kill_create.js

@@ -16,7 +16,8 @@ export default function other() {
             container,
             name: 'Created GUI',
             position: 'bottom left',
-            width: 150
+            width: 150,
+            color: 'red'
         });
     });
 

package/test/src/js/multiple.js

@@ -24,7 +24,7 @@ export default function multiple() {
     
     const gui_3 = new GUI({
         name: 'GUI 3',
-        position: 'top right',
+        position: 'top left',
         container: '#container-2'
     });
     

package/test/src/styles/main.scss

@@ -94,7 +94,7 @@ pre {
     background-position: center;
     background-repeat: no-repeat;
     border: 1px solid black;
-    transition: .1s transform ease, .3s border-radius ease, .3s background-color linear;
+    transition: .1s transform ease, .3s border-radius ease;
 }
 
 .element.round {