From de7209f83168448ee89996de179cfa1b7a7df482 Mon Sep 17 00:00:00 2001
From: Jason Xie <duckzlandd@yahoo.com>
Date: Wed, 18 Mar 2015 14:27:30 +0800
Subject: [PATCH] Added true dynamic format switch

Adding true dynamic format switching capabilities, when user set the options format to false the dynamic switching occurs.
It will change the color format as user input the color code in the textfield or use the picker to select the color.
I
---
 src/js/colorpicker.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/js/colorpicker.js b/src/js/colorpicker.js
index c8a81d7e..5ce40f85 100644
--- a/src/js/colorpicker.js
+++ b/src/js/colorpicker.js
@@ -109,7 +109,7 @@
             if (this.options.horizontal) {
                 this.picker.addClass('colorpicker-horizontal');
             }
-            if (this.format === 'rgba' || this.format === 'hsla') {
+            if (this.format === 'rgba' || this.format === 'hsla' || this.options.format === false) {
                 this.picker.addClass('colorpicker-with-alpha');
             }
             if (this.options.align === 'right') {
@@ -429,6 +429,24 @@
                 if (this.currentSlider.callTop) {
                     this.color[this.currentSlider.callTop].call(this.color, top / this.currentSlider.maxTop);
                 }
+                // Change format dynamically
+                // Only occurs if user choose the dynamic format by
+                // setting option format to false
+                if (this.currentSlider.callTop == 'setAlpha'
+                    && this.options.format === false) {
+
+                  // Converting from hex / rgb to rgba
+                  if (this.color.value.a != 1) {
+                    this.format = 'rgba';
+                    this.color.origFormat = 'rgba';
+                  }
+
+                  // Converting from rgba to hex
+                  else {
+                    this.format = 'hex';
+                    this.color.origFormat = 'hex';
+                  }
+                }
                 this.update(true);
 
                 this.element.trigger({
@@ -462,6 +480,12 @@
                 } else {
                     var val = this.input.val();
                     this.color = new Color(val);
+                    // Change format dynamically
+                    // Only occurs if user choose the dynamic format by
+                    // setting option format to false
+                    if (this.color.origFormat && this.options.format === false) {
+                      this.format = this.color.origFormat;
+                    }
                     if (this.getValue(false) !== false) {
                         this.updateData();
                         this.updateComponent();