added rgba fallback for hex with opacity

istvan-ujjmeszaros · Aug 11, 2014 · e6519ae · e6519ae
1 parent 7a7ea8e
commit e6519ae
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 52 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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();