From 90406b12784bcb4971a9ad3dd9c0f402aea89172 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Sun, 22 Feb 2015 18:45:07 +0100
Subject: [PATCH] Refactored Resizable to match Draggable

---
 public_html/js/Util/Resizable.js | 62 +++++++++++++++++++++++---------
 1 file changed, 45 insertions(+), 17 deletions(-)

diff --git a/public_html/js/Util/Resizable.js b/public_html/js/Util/Resizable.js
index 1d4240de..68ee6796 100644
--- a/public_html/js/Util/Resizable.js
+++ b/public_html/js/Util/Resizable.js
@@ -2,8 +2,50 @@ var App = App || {};
 App.Util = App.Util || {};
 
 App.Util.Resizable = function(jQuery) {
+	function relativeResizeStrategy($element) {
+		var $parent = $element.parent();
+		var delta;
+		var width = $element.width();
+		var height = $element.height();
+
+		var getSize = function() {
+			return {width: width, height: height};
+		};
+
+		var setSize = function(newWidth, newHeight) {
+			width = newWidth;
+			height = newHeight;
+			var screenWidth = Math.min(Math.max(width, 20), $parent.outerWidth() + $parent.offset().left - $element.offset().left);
+			var screenHeight = Math.min(Math.max(height, 20), $parent.outerHeight() + $parent.offset().top - $element.offset().top);
+			screenWidth *= 100.0 / $parent.outerWidth();
+			screenHeight *= 100.0 / $parent.outerHeight();
+			$element.css({
+				width: screenWidth + '%',
+				height: screenHeight + '%'});
+		};
+
+		return {
+			mouseClicked: function(e) {
+				delta = {
+					x: $element.width() - e.clientX,
+					y: $element.height() - e.clientY,
+				};
+			},
+
+			mouseMoved: function(e) {
+				setSize(
+					e.clientX + delta.x,
+					e.clientY + delta.y);
+			},
+
+			getSize: getSize,
+			setSize: setSize,
+		};
+	}
+
 	function makeResizable($element) {
 		var $resizer = jQuery('<div class="resizer"></div>');
+		var strategy = relativeResizeStrategy($element);
 		$element.append($resizer);
 
 		$resizer.mousedown(function(e) {
@@ -11,27 +53,13 @@ App.Util.Resizable = function(jQuery) {
 			e.stopPropagation();
 			$element.addClass('resizing');
 
-			var $parent = $element.parent();
-			var deltaX = $element.width() - e.clientX;
-			var deltaY = $element.height() - e.clientY;
-
-			var update = function(e) {
-				var w = e.clientX + deltaX;
-				var h = e.clientY + deltaY;
-				w = Math.min(Math.max(w, 20), $parent.outerWidth() + $parent.offset().left - $element.offset().left);
-				h = Math.min(Math.max(h, 20), $parent.outerHeight() + $parent.offset().top - $element.offset().top);
-				w *= 100.0 / $parent.outerWidth();
-				h *= 100.0 / $parent.outerHeight();
-				$element.css({
-					width: w + '%',
-					height: h + '%'});
-			};
+			strategy.mouseClicked(e);
 
 			jQuery(window).bind('mousemove.elemsize', function(e) {
-				update(e);
+				strategy.mouseMoved(e);
 			}).bind('mouseup.elemsize', function(e) {
 				e.preventDefault();
-				update(e);
+				strategy.mouseMoved(e);
 				$element.removeClass('resizing');
 				jQuery(window).unbind('mousemove.elemsize');
 				jQuery(window).unbind('mouseup.elemsize');