Found multiple issues when using aliases with multiple instances of c…

…olorpicker. Changes are explained in comments
allenxzy · Nov 15, 2016 · 7c4f649 · 7c4f649
1 parent 6f216a5
commit 7c4f649
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 18 deletions.
diff --git a/dist/css/bootstrap-colorpicker.min.css.map b/dist/css/bootstrap-colorpicker.min.css.map
diff --git a/dist/js/bootstrap-colorpicker.js b/dist/js/bootstrap-colorpicker.js
@@ -36,7 +36,10 @@
     };
     this.origFormat = null; // original string format
     if (predefinedColors) {
-      $.extend(this.colors, predefinedColors);
+      // We don't want to share aliases across instances so we extend new object
+      this.colors = $.extend({}, this.colors_lib, predefinedColors);
+      // Let's keep user defined aliases in separate object
+      this.user_colors = predefinedColors;
     }
     if (val) {
       if (val.toLowerCase !== undefined) {
@@ -51,8 +54,10 @@
 
   Color.prototype = {
     constructor: Color,
+    user_colors: {},
+    colors: {},
     // 140 predefined colors from the HTML Colors spec
-    colors: {
+    colors_lib: {
       "aliceblue": "#f0f8ff",
       "antiquewhite": "#faebd7",
       "aqua": "#00ffff",
@@ -340,8 +345,15 @@
     },
     toAlias: function(r, g, b, a) {
       var rgb = this.toHex(r, g, b, a);
-      for (var alias in this.colors) {
-        if (this.colors[alias] === rgb) {
+      //first check if there is user defined alias
+      for (var ualias in this.user_colors) {
+        if (this.user_colors[ualias] === rgb) {
+          return ualias;
+        }
+      }
+      //if not then iterate through pre-defined colors
+      for (var alias in this.colors_lib) {
+        if (this.colors_lib[alias] === rgb) {
           return alias;
         }
       }
@@ -846,20 +858,24 @@
       return val;
     },
     updateComponent: function(val) {
-      val = val || this.color.toString(this.format);
+      if (val !== undefined) {
+        val = new Color(val, this.options.colorSelectors);
+      } else {
+        val = this.color;
+      }
       if (this.component !== false) {
         var icn = this.component.find('i').eq(0);
         if (icn.length > 0) {
           icn.css({
-            'backgroundColor': val
+            'backgroundColor': val.toHex() // We always wan it to be valid value
           });
         } else {
           this.component.css({
-            'backgroundColor': val
+            'backgroundColor': val.toHex() // We always wan it to be valid value
           });
         }
       }
-      return val;
+      return val.toString(this.format);
     },
     update: function(force) {
       var val;