Fixes and tests for bar addition and reset size bugs

Makefile

@@ -63,7 +63,7 @@ qunit:
 
 .PHONY: tag
 tag: check
-	## Tag the most recent commit, and push the tag to github
+	## Tag and push to github, e.g. make tag v=0.0.1
 ifdef v
 	git tag -a $(v) -m "Version $(v)"
 	git push --tags

src/jquery.scalable.auto.js

@@ -35,11 +35,14 @@
 				}
 			});
 
-			widget._handle = $(".ui-resizable-e")
+			widget._wrapper = widget.element.parent()
+				.css("position", "relative");			
+			widget._original_wwidth = widget._wrapper.width();
+			widget._original_wheight = widget._wrapper.height();
+
+			widget._handle = $(".ui-resizable-e", widget._wrapper)
 				.wrap("<div></div>");
 			widget._bar = widget._handle.parent();
-			widget._wrapper = widget._bar.parent()
-				.css("position", "relative");
 
 			if (widget.options.arrow) {
 				widget._arrow = widget.options.arrow;
@@ -85,22 +88,22 @@
 				.click(function () { return false; });
 		},
 
-		_arrow: ("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cD" +
-			"ovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h" +
-			"0PSI0OCI+PGxpbmVhckdyYWRpZW50IGlkPSJhIj48c3RvcCBzdG9w" +
-			"LWNvbG9yPSIjY2NjIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvb" +
-			"G9yPSIjZWVlIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50Pj" +
-			"xwYXRoIGQ9Im0xMS41LDIzLjUgMTYsMTAgMCwtOCAxNiwwIDAsOCA" +
-			"xNiwtMTAgLTE2LC0xMCAwLDggLTE2LDAgMCwtOHoiIHN0eWxlPSJm" +
-			"aWxsOnVybCgjYSk7c3Ryb2tlOiM1NTUiLz48L3N2Zz4="),
+		_arrow: ("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c" +
+			"DovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2" +
+			"h0PSI0OCI+PGxpbmVhckdyYWRpZW50IGlkPSJhIj48c3RvcCBzdG9" +
+			"wLWNvbG9yPSIjY2NjIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNv" +
+			"bG9yPSIjZWVlIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50P" +
+			"jxwYXRoIGQ9Im0xMS41LDIzLjUgMTYsMTAgMCwtOCAxNiwwIDAsOC" +
+			"AxNiwtMTAgLTE2LC0xMCAwLDggLTE2LDAgMCwtOHoiIHN0eWxlPSJ" +
+			"maWxsOnVybCgjYSk7c3Ryb2tlOiM1NTUiLz48L3N2Zz4="),
 
 		reset: function () {
 			var widget = this;
 
+			widget._wrapper.width(widget._original_wwidth)
+				.height(widget._original_wheight);
 			widget.element.width(widget._original_width)
 				.height(widget._original_height);
-			widget._wrapper.width(widget._original_width)
-				.height(widget._original_height);
 		},
 
 		destroy: function () {

src/jquery.scalable.js

@@ -35,11 +35,14 @@
 				}
 			});
 
-			widget._handle = $(".ui-resizable-e")
+			widget._wrapper = widget.element.parent()
+				.css("position", "relative");			
+			widget._original_wwidth = widget._wrapper.width();
+			widget._original_wheight = widget._wrapper.height();
+
+			widget._handle = $(".ui-resizable-e", widget._wrapper)
 				.wrap("<div></div>");
 			widget._bar = widget._handle.parent();
-			widget._wrapper = widget._bar.parent()
-				.css("position", "relative");
 
 			if (widget.options.arrow) {
 				widget._arrow = widget.options.arrow;
@@ -85,22 +88,22 @@
 				.click(function () { return false; });
 		},
 
-		_arrow: ("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cD" +
-			"ovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h" +
-			"0PSI0OCI+PGxpbmVhckdyYWRpZW50IGlkPSJhIj48c3RvcCBzdG9w" +
-			"LWNvbG9yPSIjY2NjIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvb" +
-			"G9yPSIjZWVlIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50Pj" +
-			"xwYXRoIGQ9Im0xMS41LDIzLjUgMTYsMTAgMCwtOCAxNiwwIDAsOCA" +
-			"xNiwtMTAgLTE2LC0xMCAwLDggLTE2LDAgMCwtOHoiIHN0eWxlPSJm" +
-			"aWxsOnVybCgjYSk7c3Ryb2tlOiM1NTUiLz48L3N2Zz4="),
+		_arrow: ("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c" +
+			"DovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2" +
+			"h0PSI0OCI+PGxpbmVhckdyYWRpZW50IGlkPSJhIj48c3RvcCBzdG9" +
+			"wLWNvbG9yPSIjY2NjIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNv" +
+			"bG9yPSIjZWVlIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50P" +
+			"jxwYXRoIGQ9Im0xMS41LDIzLjUgMTYsMTAgMCwtOCAxNiwwIDAsOC" +
+			"AxNiwtMTAgLTE2LC0xMCAwLDggLTE2LDAgMCwtOHoiIHN0eWxlPSJ" +
+			"maWxsOnVybCgjYSk7c3Ryb2tlOiM1NTUiLz48L3N2Zz4="),
 
 		reset: function () {
 			var widget = this;
 
+			widget._wrapper.width(widget._original_wwidth)
+				.height(widget._original_wheight);
 			widget.element.width(widget._original_width)
 				.height(widget._original_height);
-			widget._wrapper.width(widget._original_width)
-				.height(widget._original_height);
 		},
 
 		destroy: function () {

test/setup.js

@@ -21,6 +21,33 @@ var setup = function () {
 	};
 };
 
+var setup2 = function (style) {
+	var img = $("<img>").attr({
+		id: "test01",
+		src: "sample.svg",
+		width: "480",
+		height: "320"
+	}).css(style || {});
+
+	var fixture = $("#qunit-fixture")
+		.append(img);
+
+	img.scalable();
+	var wrapper = img.parent();
+
+	return {
+		target: img,
+		handle: $(".ui-resizable-handle", wrapper),
+		bar: $(".ui-scalable-bar", wrapper),
+		wrapper: wrapper
+	};
+};
+
+var reset = function () {
+	var fixture = $("#qunit-fixture")
+		.empty();
+};
+
 $.extend($.simulate.prototype, {
 	drag: function( el ) {
 		var self = this,

test/test.js

@@ -1,3 +1,5 @@
+reset();
+
 test("Method existence", function () {
 	expect(1);
 	var div = $("<div></div>");
@@ -99,6 +101,94 @@ test("Reset to original size", function () {
 	equals(s.target.height(), 320, "Reset to original height");
 });
 
+test("Added border before creation", function () {
+	expect(6); // 8
+	reset();
+	var s = setup2({border: "64px solid #ccc"});
+	var w = s.wrapper.width();
+	var h = s.wrapper.height();
+
+	drag(s.handle, 24, 0);
+	equals(s.target.width(), 504, "Enlarged result is 24px wider");
+	// bug! the border size doesn't scale!
+	// equals(s.target.height(), 336, "Enlarged result is 16px taller");
+	s.target.scalable("reset");
+
+	drag(s.handle, 96, 0);
+	equals(s.target.width(), 576, "Enlarged result is 96px wider");
+
+	// regression test: bug in 0.0.1
+	// equals(s.target.height(), 384, "Enlarged result is 64px taller");
+	s.target.scalable("reset");
+
+	equals(s.target.width(), 480, "Reset to original width");
+	equals(s.target.height(), 320, "Reset to original height");
+
+	// regression tests: bugs in 0.0.1
+	equals(s.wrapper.width(), w, "Reset to original wrapper width");
+	equals(s.wrapper.height(), h, "Reset to original wrapper height");
+});
+
+test("Added border after creation", function () {
+	expect(4);
+	var s = setup();
+
+	s.target.css("border", "64px solid #ccc");
+
+	drag(s.handle, 96, 0);
+	equals(s.target.width(), 576, "Enlarged result is 96px wider");
+	equals(s.target.height(), 384, "Enlarged result is 64px taller");
+	s.target.scalable("reset");
+
+	equals(s.target.width(), 480, "Reset to original width");
+	equals(s.target.height(), 320, "Reset to original height");
+});
+
+test("Two scalable elements", function () {
+	expect(18);
+	reset();
+	var a = setup2();
+	var b = setup2();
+
+	ok($(".ui-resizable", a.wrapper).size() === 1,
+		"Only one image (a)");
+	ok($(".ui-resizable-handle", a.wrapper).size() === 1,
+		"Only one handle (a)");
+	ok($(".ui-scalable-bar", a.wrapper).size() === 1,
+		"Only one bar (a)"); // regression test: bug in 0.0.1
+	ok($(".ui-wrapper", a.wrapper).size() === 0,
+		"No wrapper in the wrapper (a)");
+	ok((!a.wrapper.parent().hasClass("ui-wrapper")),
+		"No wrapper around the wrapper (b)");
+
+	ok($(".ui-resizable", b.wrapper).size() === 1,
+		"Only one image (b)");
+	ok($(".ui-resizable-handle", b.wrapper).size() === 1,
+		"Only one handle (b)");
+	ok($(".ui-scalable-bar", b.wrapper).size() === 1,
+		"Only one bar (b)");
+	ok($(".ui-wrapper", b.wrapper).size() === 0,
+		"No wrapper in the wrapper (b)");
+	ok((!b.wrapper.parent().hasClass("ui-wrapper")),
+		"No wrapper around the wrapper (b)");
+
+	drag(a.handle, 96, 0);
+	equals(a.target.width(), 576, "Enlarged a is 96px wider");
+	equals(a.target.height(), 384, "Enlarged a is 64px taller");
+
+	drag(b.handle, 64, 0);
+	equals(b.target.width(), 544, "Enlarged b is 64px wider");
+	equals(b.target.height(), 362, "Enlarged b is 42px taller");
+
+	a.target.scalable("reset");
+	b.target.scalable("reset");
+
+	equals(a.target.width(), 480, "Reset a to original width");
+	equals(a.target.height(), 320, "Reset a to original height");
+	equals(b.target.width(), 480, "Reset b to original width");
+	equals(b.target.height(), 320, "Reset b to original height");
+});
+
 test("Large size", function () {
 	expect(4);
 	var s = setup();