v2.0.0

- new: open directly the browser colorpicker if solid color without opacity
- new: tracking focusout event, eventually fixing field value
- new: color code printed in shorter format
- new: revamped user experience interacting with gradient slider and manually editing field value
- added: attribute reference to the colorpicker ID in the picker
- fixed: various bugfixes

README.md

@@ -7,7 +7,7 @@ So I decided to build my own solution in **pure javascript** aiming to create th
 
 ### Top features list:
 
-- sigle 31KB file, no dependencies, 100% pure javascript
+- sigle 34KB file, no dependencies, 100% pure javascript
 - supports solid color and/on linear gradient and/or radial gradient
 - unlimited gradient color steps support
 - optional transparency support

demo.html

@@ -86,9 +86,12 @@ <h4>The colorpicker for modern web, by <a href="https://lcweb.it" target="_blank
             <!-- REQUIRED HTML -->
 
             <form>
-                <label>Basic solid colorpicker, supporting opacity and preventing direct user input</label>
-                <input type="text" name="solid" value="#00f" style="width: 75px;" />
+                <label>Basic solid colorpicker and preventing direct user input</label>
+                <input type="text" name="solid" value="#1a6ff4" style="width: 75px;" />
 
+                <label>Simple input field with solid color, supporting opacity</label>
+                <input type="text" name="simple" value="rgba(115, 26, 244, 0.66)" />
+
                 <label>Full featured!</label>
                 <input type="text" name="full" value="linear-gradient(90deg, rgba(255, 255, 255, .4), #000)" />
             </form>
@@ -110,7 +113,7 @@ <h4>The colorpicker for modern web, by <a href="https://lcweb.it" target="_blank
     <script>
         new lc_color_picker('input[name=solid]', {
             modes           : ['solid'],
-            transparency    : true,
+            transparency    : false,
             no_input_mode   : true,
             preview_style   : {
                 input_padding   : 45,
@@ -119,7 +122,20 @@ <h4>The colorpicker for modern web, by <a href="https://lcweb.it" target="_blank
             },
         });
 
-        new lc_color_picker('input[name=full]', {
+        new lc_color_picker('input[name="simple"]', {
+            modes           : ['solid'],
+            transparency    : true,
+            open_on_focus   : true,
+            wrap_width      : '100%',
+            preview_style   : {
+                input_padding   : 45,
+                side            : 'left',
+                width           : 40,
+            },
+            fallback_colors : ['rgb(115, 26, 244)'],
+        });
+
+        new lc_color_picker('input[name="full"]', {
             transparency    : true,
             open_on_focus   : true,
             wrap_width      : '100%',
@@ -131,7 +147,7 @@ <h4>The colorpicker for modern web, by <a href="https://lcweb.it" target="_blank
             fallback_colors : ['#ff0', 'linear-gradient(90deg, rgba(255, 255, 255, .4), #000)'],
 
             on_change: function(new_value, target_field) {
-                console.log(new_value, target_field);    
+                console.log({new_value, target_field});    
             },
         });
     </script>