From 012d1fbb0b2bf5701b09480f9345d183ba3c64cf Mon Sep 17 00:00:00 2001
From: bgrins <briangrinstead@gmail.com>
Date: Tue, 11 Jun 2013 15:21:02 -0500
Subject: [PATCH] Force movement in single axis when shift is pressed.  Fixes
 issue #34

---
 spectrum.js | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/spectrum.js b/spectrum.js
index ec33723c..02eb9e60 100644
--- a/spectrum.js
+++ b/spectrum.js
@@ -161,7 +161,8 @@
             paletteArray = $.isArray(palette[0]) ? palette : [palette],
             selectionPalette = opts.selectionPalette.slice(0),
             maxSelectionSize = opts.maxSelectionSize,
-            draggingClass = "sp-dragging";
+            draggingClass = "sp-dragging",
+            shiftMovementDirection = null;
 
         var doc = element.ownerDocument,
             body = doc.body,
@@ -309,10 +310,32 @@
                 move();
             }, dragStart, dragStop);
 
-            draggable(dragger, function (dragX, dragY) {
-                currentSaturation = parseFloat(dragX / dragWidth);
-                currentValue = parseFloat((dragHeight - dragY) / dragHeight);
+            draggable(dragger, function (dragX, dragY, e) {
+
+                // shift+drag should snap the movement to either the x or y axis.
+                if (!e.shiftKey) {
+                    shiftMovementDirection = null;
+                }
+                else if (!shiftMovementDirection) {
+                    var oldDragX = currentSaturation * dragWidth;
+                    var oldDragY = dragHeight - (currentValue * dragHeight);
+                    var furtherFromX = Math.abs(dragX - oldDragX) > Math.abs(dragY - oldDragY);
+
+                    shiftMovementDirection = furtherFromX ? "x" : "y";
+                }
+
+                var setSaturation = !shiftMovementDirection || shiftMovementDirection === "x";
+                var setValue = !shiftMovementDirection || shiftMovementDirection === "y";
+
+                if (setSaturation) {
+                    currentSaturation = parseFloat(dragX / dragWidth);
+                }
+                if (setValue) {
+                    currentValue = parseFloat((dragHeight - dragY) / dragHeight);
+                }
+                
                 move();
+
             }, dragStart, dragStop);
 
             if (!!initialColor) {
@@ -428,6 +451,7 @@
                 reflow();
             }
             container.addClass(draggingClass);
+            shiftMovementDirection = null;
         }
 
         function dragStop() {