Commonjs

spectrum.js

@@ -5,14 +5,14 @@
 
 (function (factory) {
     "use strict";
-
-    if (typeof define === 'function' && define.amd) { // AMD
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
         define(['jquery'], factory);
-    }
-    else if (typeof exports == "object" && typeof module == "object") { // CommonJS
-        module.exports = factory;
-    }
-    else { // Browser
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS
+        module.exports = factory(require('jquery'));
+    } else {
+        // Browser globals
         factory(jQuery);
     }
 })(function($, undefined) {
@@ -237,6 +237,7 @@
             previewElement = replacer.find(".sp-preview-inner"),
             initialColor = opts.color || (isInput && boundElement.val()),
             colorOnShow = false,
+            lastKnownColor = false,
             preferredFormat = opts.preferredFormat,
             currentPreferredFormat = preferredFormat,
             clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange,
@@ -347,12 +348,8 @@
                 e.stopPropagation();
                 e.preventDefault();
                 isEmpty = true;
-                move();
 
-                if(flat) {
-                    //for the flat style, this is a change event
-                    updateOriginalInput(true);
-                }
+                updateOriginalInput();
             });
 
             chooseButton.text(opts.chooseText);
@@ -391,7 +388,8 @@
                     currentAlpha = Math.round(currentAlpha * 10) / 10;
                 }
 
-                move();
+                updateUI();
+                updateOriginalInput();
             }, dragStart, dragStop);
 
             draggable(slider, function (dragX, dragY) {
@@ -400,7 +398,8 @@
                 if (!opts.showAlpha) {
                     currentAlpha = 1;
                 }
-                move();
+                updateUI();
+                updateOriginalInput();
             }, dragStart, dragStop);
 
             draggable(dragger, function (dragX, dragY, e) {
@@ -431,13 +430,13 @@
                 if (!opts.showAlpha) {
                     currentAlpha = 1;
                 }
-
-                move();
+                updateUI();
+                updateOriginalInput();
 
             }, dragStart, dragStop);
 
             if (!!initialColor) {
-                set(initialColor);
+                set(initialColor, false, true);
 
                 // In case color was black - update the preview UI and set the format
                 // since the set function will not run (default color is black).
@@ -457,12 +456,9 @@
             function paletteElementClick(e) {
                 if (e.data && e.data.ignore) {
                     set($(e.target).closest(".sp-thumb-el").data("color"));
-                    move();
                 }
                 else {
                     set($(e.target).closest(".sp-thumb-el").data("color"));
-                    move();
-                    updateOriginalInput(true);
                     if (opts.hideAfterPaletteSelect) {
                       hide();
                     }
@@ -472,26 +468,12 @@
             }
 
             var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
-            paletteContainer.delegate(".sp-thumb-el", paletteEvent, paletteElementClick);
-            initialColorContainer.delegate(".sp-thumb-el:nth-child(1)", paletteEvent, { ignore: true }, paletteElementClick);
+            paletteContainer.on(paletteEvent, ".sp-thumb-el", paletteElementClick);
+            initialColorContainer.on(paletteEvent, ".sp-thumb-el:nth-child(1)", { ignore: true }, paletteElementClick);
         }
 
         function updateSelectionPaletteFromStorage() {
-
             if (localStorageKey && window.localStorage) {
-
-                // Migrate old palettes over to new format.  May want to remove this eventually.
-                try {
-                    var oldPalette = window.localStorage[localStorageKey].split(",#");
-                    if (oldPalette.length > 1) {
-                        delete window.localStorage[localStorageKey];
-                        $.each(oldPalette, function(i, c) {
-                             addColorToSelectionPalette(c);
-                        });
-                    }
-                }
-                catch(e) { }
-
                 try {
                     selectionPalette = window.localStorage[localStorageKey].split(";");
                 }
@@ -578,13 +560,11 @@
 
             if ((value === null || value === "") && allowEmpty) {
                 set(null);
-                updateOriginalInput(true);
             }
             else {
                 var tiny = tinycolor(value);
                 if (tiny.isValid()) {
                     set(tiny);
-                    updateOriginalInput(true);
                 }
                 else {
                     textInput.addClass("sp-validation-error");
@@ -665,7 +645,7 @@
             set(colorOnShow, true);
         }
 
-        function set(color, ignoreFormatChange) {
+        function set(color, ignoreFormatChange, ignoreInputChange) {
             if (tinycolor.equals(color, get())) {
                 // Update UI just in case a validation error needs
                 // to be cleared.
@@ -686,11 +666,15 @@
                 currentValue = newHsv.v;
                 currentAlpha = newHsv.a;
             }
-            updateUI();
 
             if (newColor && newColor.isValid() && !ignoreFormatChange) {
                 currentPreferredFormat = preferredFormat || newColor.getFormat();
             }
+
+            updateUI();
+            if (!ignoreInputChange) {
+                updateOriginalInput();
+            }
         }
 
         function get(opts) {
@@ -712,13 +696,6 @@
             return !textInput.hasClass("sp-validation-error");
         }
 
-        function move() {
-            updateUI();
-
-            callbacks.move(get());
-            boundElement.trigger('move.spectrum', [ get() ]);
-        }
-
         function updateUI() {
 
             textInput.removeClass("sp-validation-error");
@@ -842,20 +819,32 @@
 
         function updateOriginalInput(fireCallback) {
             var color = get(),
-                displayColor = '',
-                hasChanged = !tinycolor.equals(color, colorOnShow);
+                displayColor = '';
 
             if (color) {
-                displayColor = color.toString(currentPreferredFormat);
                 // Update the selection palette with the current color
                 addColorToSelectionPalette(color);
+
+                if (isInput) {
+                    boundElement.val(color.toString(currentPreferredFormat));
+                }
             }
 
-            if (isInput) {
-                boundElement.val(displayColor);
+            // Fire the "input" event (aka 'move')
+            if (!tinycolor.equals(color, lastKnownColor)) {
+                lastKnownColor = color;
+                callbacks.move(get());
+                boundElement.trigger('move.spectrum', [ get() ]);
             }
 
-            if (fireCallback && hasChanged) {
+            // Flat colorpickers fire "change" event on any input
+            // since they don't have a way to revert.
+            // Normal colorpickers wait until the picker is closed
+            // to fire one (if necessary).
+            var careAboutChanges = flat || fireCallback;
+            var hasChanged = !tinycolor.equals(color, colorOnShow);
+            if (careAboutChanges && hasChanged) {
+                colorOnShow = color;
                 callbacks.change(color);
                 boundElement.trigger('change', [ color ]);
             }
@@ -890,6 +879,7 @@
         }
 
         function destroy() {
+            hide();
             boundElement.show();
             offsetElement.unbind("click.spectrum touchstart.spectrum");
             container.remove();
@@ -938,10 +928,7 @@
             enable: enable,
             disable: disable,
             offset: setOffset,
-            set: function (c) {
-                set(c);
-                updateOriginalInput();
-            },
+            set: set,
             get: get,
             destroy: destroy,
             container: container
@@ -1047,8 +1034,8 @@
                 var pageX = touches ? touches[0].pageX : e.pageX;
                 var pageY = touches ? touches[0].pageY : e.pageY;
 
-                var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
-                var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));