Handle reverting properly by resetting original input. Needed for bot…

…h form submission and autofill on reload after a revert

docs/docs.js

@@ -215,7 +215,18 @@ $("#showPalette").spectrum({
         ['black', 'white', 'blanchedalmond'],
         ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
     ],
-    change: updateBorders
+    hide: function(c) {
+        var label = $("[data-label-for=" + this.id + "]");
+        label.text("Hidden: " + c.toHexString());
+    },
+    change: function(c) {
+        var label = $("[data-label-for=" + this.id + "]");
+        label.text("Change called: " + c.toHexString());
+    },
+    move: function(c) {
+        var label = $("[data-label-for=" + this.id + "]");
+        label.text("Move called: " + c.toHexString());
+    }
 });
 
 var textPalette = ["rgb(255, 255, 255)", "rgb(204, 204, 204)", "rgb(192, 192, 192)", "rgb(153, 153, 153)", "rgb(102, 102, 102)", "rgb(51, 51, 51)", "rgb(0, 0, 0)", "rgb(255, 204, 204)", "rgb(255, 102, 102)", "rgb(255, 0, 0)", "rgb(204, 0, 0)", "rgb(153, 0, 0)", "rgb(102, 0, 0)", "rgb(51, 0, 0)", "rgb(255, 204, 153)", "rgb(255, 153, 102)", "rgb(255, 153, 0)", "rgb(255, 102, 0)", "rgb(204, 102, 0)", "rgb(153, 51, 0)", "rgb(102, 51, 0)", "rgb(255, 255, 153)", "rgb(255, 255, 102)", "rgb(255, 204, 102)", "rgb(255, 204, 51)", "rgb(204, 153, 51)", "rgb(153, 102, 51)", "rgb(102, 51, 51)", "rgb(255, 255, 204)", "rgb(255, 255, 51)", "rgb(255, 255, 0)", "rgb(255, 204, 0)", "rgb(153, 153, 0)", "rgb(102, 102, 0)", "rgb(51, 51, 0)", "rgb(153, 255, 153)", "rgb(102, 255, 153)", "rgb(51, 255, 51)", "rgb(51, 204, 0)", "rgb(0, 153, 0)", "rgb(0, 102, 0)", "rgb(0, 51, 0)", "rgb(153, 255, 255)", "rgb(51, 255, 255)", "rgb(102, 204, 204)", "rgb(0, 204, 204)", "rgb(51, 153, 153)", "rgb(51, 102, 102)", "rgb(0, 51, 51)", "rgb(204, 255, 255)", "rgb(102, 255, 255)", "rgb(51, 204, 255)", "rgb(51, 102, 255)", "rgb(51, 51, 255)", "rgb(0, 0, 153)", "rgb(0, 0, 102)", "rgb(204, 204, 255)", "rgb(153, 153, 255)", "rgb(102, 102, 204)", "rgb(102, 51, 255)", "rgb(102, 0, 204)", "rgb(51, 51, 153)", "rgb(51, 0, 153)", "rgb(255, 204, 255)", "rgb(255, 153, 255)", "rgb(204, 102, 204)", "rgb(204, 51, 204)", "rgb(153, 51, 153)", "rgb(102, 51, 102)", "rgb(51, 0, 51)"];
@@ -236,7 +247,7 @@ $("#showPaletteOnly").spectrum({
     move: function(c) {
         var label = $("[data-label-for=" + this.id + "]");
         label.text("Move called: " + c.toHexString());
-    },
+    }
 });
 
 $("#hideAfterPaletteSelect").spectrum({
@@ -256,7 +267,7 @@ $("#hideAfterPaletteSelect").spectrum({
     move: function(c) {
         var label = $("[data-label-for=" + this.id + "]");
         label.text("Move called: " + c.toHexString());
-    },
+    }
 });
 
 $("#togglePaletteOnly").spectrum({

index.html

@@ -335,6 +335,8 @@ <h3 id="options-showPalette">Show Palette</h3>
             </pre>
             <div class='example'>
                     <input type='text' name='showPalette' id='showPalette' value='lightblue' />
+                    <em data-label-for="showPalette" class='em-label'></em>
+
             </div>
         </div>
 

spectrum.js

@@ -685,6 +685,7 @@
 
         function revert() {
             set(colorOnShow, true);
+            updateOriginalInput(true);
         }
 
         function set(color, ignoreFormatChange) {

test/tests.js

@@ -233,25 +233,71 @@ test( "Palette Events Fire In Correct Order ", function() {
   el.spectrum("destroy");
 });
 
-test( "Palette click events work ", function() {
-  var el = $("<input id='spec' value='red' />").spectrum({
+test( "Palette click events work", function() {
+  expect(7);
+
+  var moveCount = 0;
+  var moves = ["blue", "green", "red"];
+  var changeCount = 0;
+
+  var el = $("<input id='spec' value='orange' />").spectrum({
     showPalette: true,
+    preferredFormat: "name",
     palette: [
       ["red", "green", "blue"]
     ],
-    move: function() {
-
+    show: function(c) {
+      equal(c.toName(), "orange", "correct shown color");
+    },
+    move: function(c) {
+      equal(c.toName(), moves[moveCount], "Move # " + moveCount + " is correct");
+      moveCount++;
+    },
+    change: function(c) {
+      equal(changeCount, 0, "Only one change happens");
+      equal(c.toName(), "red");
+      changeCount++;
     }
-  });
+  }).spectrum("show");
 
   el.spectrum("container").find(".sp-thumb-el:nth-child(3)").click();
-  equal (el.spectrum("get").toName(), "blue", "First click worked");
   el.spectrum("container").find(".sp-thumb-el:nth-child(2) .sp-thumb-inner").click();
-  equal (el.spectrum("get").toName(), "green", "Second click worked (on child element)");
   el.spectrum("container").find(".sp-thumb-el:nth-child(1) .sp-thumb-inner").click();
-  equal (el.spectrum("get").toName(), "red", "Third click worked (on child element)");
+  el.spectrum("container").find(".sp-choose").click();
+
+  equal(el.val(), "red", "Element's value is set");
   el.spectrum("destroy");
+});
+
+test( "Palette doesn't changes don't stick if cancelled", function() {
+  expect(4);
 
+  var moveCount = 0;
+  var moves = ["blue", "green", "red", "orange"];
+  var changeCount = 0;
+
+  var el = $("<input id='spec' value='orange' />").spectrum({
+    showPalette: true,
+    preferredFormat: "name",
+    palette: [
+      ["red", "green", "blue"]
+    ],
+    move: function(c) {
+      equal(c.toName(), moves[moveCount], "Move # " + moveCount + " is correct");
+      moveCount++;
+    },
+    change: function(c) {
+      ok(false, "No change fires");
+    }
+  }).spectrum("show");
+
+  el.spectrum("container").find(".sp-thumb-el:nth-child(3)").click();
+  el.spectrum("container").find(".sp-thumb-el:nth-child(2)").click();
+  el.spectrum("container").find(".sp-thumb-el:nth-child(1)").click();
+  el.spectrum("container").find(".sp-cancel").click();
+
+  equal(el.val(), "orange", "Element's value is the same");
+  el.spectrum("destroy");
 });
 
 test( "hideAfterPaletteSelect: Palette stays open after color select when false", function() {