From e147328d537c21d697e4e894f11b755bf776313a Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@designcreateplay.com>
Date: Tue, 14 Apr 2015 12:52:49 -0400
Subject: [PATCH] updated backgroundDraggable jquery plugin with fork that
 allows for percentages:
 https://github.com/bcole808/jquery-draggable-background/commit/ad2c5a87d16c6f6c55ab1a7b55b94d50a2434354

---
 public/src/client/groups/details.js           |  4 +--
 .../backgroundDraggable.js                    | 27 +++++++++++++++----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/public/src/client/groups/details.js b/public/src/client/groups/details.js
index bc1534f051..b066bd0339 100644
--- a/public/src/client/groups/details.js
+++ b/public/src/client/groups/details.js
@@ -198,7 +198,8 @@ define('forum/groups/details', ['iconSelect', 'vendor/colorpicker/colorpicker',
 		coverEl.find('.change').on('click', function() {
 			coverEl.toggleClass('active', 1);
 			coverEl.backgroundDraggable({
-				axis: 'y'
+				axis: 'y',
+				units: 'percent'
 			});
 			coverEl.on('dragover', Details.cover.onDragOver);
 			coverEl.on('drop', Details.cover.onDrop);
@@ -246,7 +247,6 @@ define('forum/groups/details', ['iconSelect', 'vendor/colorpicker/colorpicker',
 		if (files.length && files[0].type.match('image.*')) {
 			reader.onload = function(e) {
 				coverEl.css('background-image', 'url(' + e.target.result + ')');
-				coverEl.backgroundDraggable();
 				Details.cover.newCover = e.target.result;
 			};
 
diff --git a/public/vendor/jquery/draggable-background/backgroundDraggable.js b/public/vendor/jquery/draggable-background/backgroundDraggable.js
index baae4d0f95..8453e5aeb0 100644
--- a/public/vendor/jquery/draggable-background/backgroundDraggable.js
+++ b/public/vendor/jquery/draggable-background/backgroundDraggable.js
@@ -75,7 +75,7 @@
 
     // Get the image's width and height if bound
     var imageDimensions = { width: 0, height: 0 };
-    if (options.bound) {
+    if (options.bound || options.units == 'percent') {
       imageDimensions = getBackgroundImageDimensions($el);
     }
 
@@ -97,6 +97,12 @@
           xPos = parseInt(pos[1]) || 0,
           yPos = parseInt(pos[2]) || 0;
 
+      // We must convert percentage back to pixels
+      if (options.units == 'percent') {
+        xPos = Math.round(xPos / -200 * imageDimensions.width);
+        yPos = Math.round(yPos / -200 * imageDimensions.height);
+      }
+
       $window.on('mousemove.dbg touchmove.dbg', function(e) {
         e.preventDefault();
 
@@ -107,12 +113,22 @@
         var x = e.clientX,
             y = e.clientY;
 
-        xPos = options.axis === 'y' ? xPos : limit($el.innerWidth()-imageDimensions.width, 0, xPos+x-x0, options.bound);
-        yPos = options.axis === 'x' ? yPos : limit($el.innerHeight()-imageDimensions.height, 0, yPos+y-y0, options.bound);
+        if (options.units == 'percent') {
+          xPos = options.axis === 'y' ? xPos : limit(-imageDimensions.width/2, 0, xPos+x-x0, options.bound);
+          yPos = options.axis === 'x' ? yPos : limit(-imageDimensions.height/2, 0, yPos+y-y0, options.bound);
+
+          // Convert pixels to percentage
+          $el.css('background-position', xPos / imageDimensions.width * -200 + '% ' + yPos / imageDimensions.height * -200 + '%');
+        } else {
+          xPos = options.axis === 'y' ? xPos : limit($el.innerWidth()-imageDimensions.width, 0, xPos+x-x0, options.bound);
+          yPos = options.axis === 'x' ? yPos : limit($el.innerHeight()-imageDimensions.height, 0, yPos+y-y0, options.bound);
+
+          $el.css('background-position', xPos + 'px ' + yPos + 'px');
+        }
+
         x0 = x;
         y0 = y;
 
-        $el.css('background-position', xPos + 'px ' + yPos + 'px');
       });
 
       $window.on('mouseup.dbg touchend.dbg mouseleave.dbg', function() {
@@ -152,6 +168,7 @@
 
   $.fn.backgroundDraggable.defaults = {
     bound: true,
-    axis: undefined
+    axis: undefined,
+    units: 'pixels'
   };
 }(jQuery));
\ No newline at end of file