From 761947e61ec73da51a3d860c2f37911e7db11f4e Mon Sep 17 00:00:00 2001
From: Pavel Tolstov <ray66rus@gmail.com>
Date: Wed, 18 Mar 2015 17:19:06 +0300
Subject: [PATCH] possibility for custom color added (should use option with
 'data-is-user-defined' in select)

---
 jquery.simplecolorpicker.css | 10 ++++++++++
 jquery.simplecolorpicker.js  | 35 ++++++++++++++++++++++++++++++++---
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/jquery.simplecolorpicker.css b/jquery.simplecolorpicker.css
index 001a5ae..6b59051 100644
--- a/jquery.simplecolorpicker.css
+++ b/jquery.simplecolorpicker.css
@@ -85,3 +85,13 @@
 .simplecolorpicker span.vr {
   border-left: 1px solid #222; /* @gray-dark */
 }
+
+.simplecolorpicker input[type="color"] {
+  width: 0;
+  height: 0;
+  padding: 0;
+  border: 0;
+  visibility: hidden;
+}
+
+.simplecolorpicker .custom-container { text-align: right; }
\ No newline at end of file
diff --git a/jquery.simplecolorpicker.js b/jquery.simplecolorpicker.js
index ac63238..249aaab 100644
--- a/jquery.simplecolorpicker.js
+++ b/jquery.simplecolorpicker.js
@@ -93,8 +93,11 @@
                          + role + '>'
                          + '</span>');
 
-        self.$colorList.append($colorSpan);
-        $colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self));
+        if($option.data('is-user-defined') == undefined) {
+          self.$colorList.append($colorSpan);
+          $colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self));
+        } else
+          self.setupCustomColorSelector($colorSpan);
 
         var $next = $option.next();
         if ($next.is('optgroup') === true) {
@@ -173,6 +176,29 @@
       }
     },
 
+    setupCustomColorSelector: function(colorSpan) {
+      var customColorContainer = $('<div class="custom-container">' + this.options.customString + '&nbsp;</div>');
+      customColorContainer.append(colorSpan);
+      var $userColorSelector = $('<input type="color" value="' + colorSpan.data('color') + '" />');
+      customColorContainer.append($userColorSelector);
+      this.$colorList.append(customColorContainer);
+      $userColorSelector.on('change.' + this.type, $.proxy(this.userColorSelected, this));
+      colorSpan.on('click.' + this.type, function(e) { $(e.target).next().trigger('click') });
+    },
+
+    /**
+     * The user selected custom color
+     */
+    userColorSelected: function(e) {
+      var colorPicker = $(e.target);
+      var userColor = colorPicker.val();
+      var colorSpan = colorPicker.prev();
+      colorSpan.data('color', userColor);
+      this.$select.find('option[data-is-user-defined]').val(userColor);
+      var clickEvt = jQuery.Event('click', {target: colorSpan});
+      this.colorSpanClicked.call(this, clickEvt);
+    },
+
     /**
      * Prevents the mousedown event from "eating" the click event.
      */
@@ -229,7 +255,10 @@
     picker: false,
 
     // Animation delay in milliseconds
-    pickerDelay: 0
+    pickerDelay: 0,
+
+    // Custom color prompt
+    customString: "Select color:"
   };
 
 })(jQuery);