From e6519aee1716d083e44df03898676f9202529485 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Istv=C3=A1n=20Ujj-M=C3=A9sz=C3=A1ros?= <styu007@gmail.com>
Date: Mon, 11 Aug 2014 20:06:50 +0200
Subject: [PATCH] added rgba fallback for hex with opacity

---
 index.html                                   | 49 ++++++++++----------
 nocielch.html                                | 49 ++++++++++----------
 src/bootstrap.colorpickersliders.js          | 14 +++++-
 src/bootstrap.colorpickersliders.nocielch.js | 14 +++++-
 4 files changed, 74 insertions(+), 52 deletions(-)

diff --git a/index.html b/index.html
index b7ce43b..972c6fb 100644
--- a/index.html
+++ b/index.html
@@ -43,14 +43,37 @@ <h1>Bootstrap Color Picker Sliders</h1>
 
       <h2>Examples</h2>
 
+      <h3>Full featured popover (HSV panel, HSL and RGB sliders, color swatches)</h3>
+
+      This popovers shows all the features in a grouped manner, so the user can choose the preferred color picking method.
+
+      <div class="row">
+        <div class="col-md-4">
+          <form class="form-vertical" role="form">
+            <div class="form-group">
+              <label for="small" class="control-label">Full featured popover</label>
+              <input type="text" class="form-control" id="full-popover" value="#A6FF00" data-color-format="hex">
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <script>
+        $("input#full-popover").ColorPickerSliders({
+          placement: 'right',
+          hsvpanel: true,
+          previewformat: 'hex'
+        });
+      </script>
+
       <h3>HSV flat</h3>
 
       <div class="row">
-        <div class="col-md-6">
+        <div class="col-md-4">
           <div id="hsvflat"></div>
         </div>
 
-        <div class="col-md-6">
+        <div class="col-md-8">
           <pre class="prettyprint">
 &lt;div id=&quot;hsvflat&quot;&gt;&lt;/div&gt;
 &lt;script&gt;
@@ -113,28 +136,6 @@ <h3>HSL and CIE Lch sliders with customizable color swatches (flat rendering)</h
         </div>
       </div>
 
-      <h3>Full featured popover (HSV panel, HSL and RGB sliders, color swatches)</h3>
-
-      This popovers shows all the features in a grouped manner, so the user can choose the preferred color picking method.
-
-      <div class="row">
-        <div class="col-md-4">
-          <form class="form-vertical" role="form">
-            <div class="form-group">
-              <label for="small" class="control-label">Full featured popover</label>
-              <input type="text" class="form-control" id="full-popover" value="#0040FF">
-            </div>
-          </form>
-        </div>
-      </div>
-
-      <script>
-        $("input#full-popover").ColorPickerSliders({
-          placement: 'right',
-          hsvpanel: true
-        });
-      </script>
-
       <h3>Different sizes and color sliders (in bootstrap popovers)</h3>
 
       <div class="row">
diff --git a/nocielch.html b/nocielch.html
index bc525e4..bb9ffb7 100644
--- a/nocielch.html
+++ b/nocielch.html
@@ -43,14 +43,37 @@ <h1>Bootstrap Color Picker Sliders</h1>
 
       <h2>Examples</h2>
 
+      <h3>Full featured popover (HSV panel, HSL and RGB sliders, color swatches)</h3>
+
+      This popovers shows all the features in a grouped manner, so the user can choose the preferred color picking method.
+
+      <div class="row">
+        <div class="col-md-4">
+          <form class="form-vertical" role="form">
+            <div class="form-group">
+              <label for="small" class="control-label">Full featured popover</label>
+              <input type="text" class="form-control" id="full-popover" value="#A6FF00" data-color-format="hex">
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <script>
+        $("input#full-popover").ColorPickerSliders({
+          placement: 'right',
+          hsvpanel: true,
+          previewformat: 'hex'
+        });
+      </script>
+
       <h3>HSV flat</h3>
 
       <div class="row">
-        <div class="col-md-6">
+        <div class="col-md-4">
           <div id="hsvflat"></div>
         </div>
 
-        <div class="col-md-6">
+        <div class="col-md-8">
           <pre class="prettyprint">
 &lt;div id=&quot;hsvflat&quot;&gt;&lt;/div&gt;
 &lt;script&gt;
@@ -111,28 +134,6 @@ <h3>HSL sliders with customizable color swatches (flat rendering)</h3>
         </div>
       </div>
 
-      <h3>Full featured popover (HSV panel, HSL and RGB sliders, color swatches)</h3>
-
-      This popovers shows all the features in a grouped manner, so the user can choose the preferred color picking method.
-
-      <div class="row">
-        <div class="col-md-4">
-          <form class="form-vertical" role="form">
-            <div class="form-group">
-              <label for="small" class="control-label">Full featured popover</label>
-              <input type="text" class="form-control" id="full-popover" value="#0040FF">
-            </div>
-          </form>
-        </div>
-      </div>
-
-      <script>
-        $("input#full-popover").ColorPickerSliders({
-          placement: 'right',
-          hsvpanel: true
-        });
-      </script>
-
       <h3>Different sizes and color sliders (in bootstrap popovers)</h3>
 
       <div class="row">
diff --git a/src/bootstrap.colorpickersliders.js b/src/bootstrap.colorpickersliders.js
index 416e1c7..f52af5d 100644
--- a/src/bootstrap.colorpickersliders.js
+++ b/src/bootstrap.colorpickersliders.js
@@ -1336,7 +1336,12 @@
 
             switch (format) {
               case 'hex':
-                $element.val(color.tiny.toHexString());
+                if (color.hsla.a < 1) {
+                  $element.val(color.tiny.toRgbString());
+                }
+                else {
+                  $element.val(color.tiny.toHexString());
+                }
                 break;
               case 'hsl':
                 $element.val(color.tiny.toHslString());
@@ -1479,7 +1484,12 @@
 
         switch (settings.previewformat) {
           case 'hex':
-            colorstring = color.tiny.toHexString();
+            if (color.hsla.a < 1) {
+              colorstring = color.tiny.toRgbString();
+            }
+            else {
+              colorstring = color.tiny.toHexString();
+            }
             break;
           case 'hsl':
             colorstring = color.tiny.toHslString();
diff --git a/src/bootstrap.colorpickersliders.nocielch.js b/src/bootstrap.colorpickersliders.nocielch.js
index b70dfc7..066c02a 100644
--- a/src/bootstrap.colorpickersliders.nocielch.js
+++ b/src/bootstrap.colorpickersliders.nocielch.js
@@ -1221,7 +1221,12 @@
 
             switch (format) {
               case 'hex':
-                $element.val(color.tiny.toHexString());
+                if (color.hsla.a < 1) {
+                  $element.val(color.tiny.toRgbString());
+                }
+                else {
+                  $element.val(color.tiny.toHexString());
+                }
                 break;
               case 'hsl':
                 $element.val(color.tiny.toHslString());
@@ -1301,7 +1306,12 @@
 
         switch (settings.previewformat) {
           case 'hex':
-            colorstring = color.tiny.toHexString();
+            if (color.hsla.a < 1) {
+              colorstring = color.tiny.toRgbString();
+            }
+            else {
+              colorstring = color.tiny.toHexString();
+            }
             break;
           case 'hsl':
             colorstring = color.tiny.toHslString();