Skip to content
Browse files

Fixes and tests for bar addition and reset size bugs

  • Loading branch information...
1 parent 815a2de commit 06978b06941d5dbf6b439a3defd686a759927942 Sean B. Palmer committed Jan 31, 2012
Showing with 152 additions and 29 deletions.
  1. +1 −1 Makefile
  2. +1 −1 jquery.scalable.auto.min.js
  3. +1 −1 jquery.scalable.min.js
  4. +16 −13 src/jquery.scalable.auto.js
  5. +16 −13 src/jquery.scalable.js
  6. +27 −0 test/setup.js
  7. +90 −0 test/test.js
View
2 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
View
2 jquery.scalable.auto.min.js
@@ -2,4 +2,4 @@
* jQuery Scalable
* http://sbp.so/scalable
* Copyright 2012, Sean B. Palmer. Apache License 2.0
- */(function(a){"use strict",a.widget("ui.scalable",{options:{arrow:!1},_create:function(){function c(){b._wrapper.hasClass("ui-resizable-resizing")?b._hide_after_drag=!1:b._bar.show()}function d(){b._wrapper.hasClass("ui-resizable-resizing")?b._hide_after_drag=!0:b._bar.hide()}var b=this;b.element.resizable({aspectRatio:!0,autoHide:!0,handles:"e",minHeight:48,minWidth:72,create:function(a,c){b._original_width=b.element.width(),b._original_height=b.element.height()},stop:function(a,c){b._hide_after_drag&&(b._bar.hide(),b._hide_after_drag=!1)}}),b._handle=a(".ui-resizable-e").wrap("<div></div>"),b._bar=b._handle.parent(),b._wrapper=b._bar.parent().css("position","relative"),b.options.arrow&&(b._arrow=b.options.arrow),b._handle.css({background:"url("+b._arrow+") no-repeat",position:"absolute",cursor:"e-resize",top:"0",right:"0"}).width(72).height(48),b._bar.addClass("ui-scalable-bar").css({background:"rgba(204, 204, 204, .2)",position:"absolute",cursor:"pointer",top:"0",left:"0",width:"100%",height:"48px"}).click(a.proxy(b.reset,b)).hover(c,d).hide(),b.element.hover(c,d),b._bar.children().click(function(){return!1})},_arrow:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI0OCI+PGxpbmVhckdyYWRpZW50IGlkPSJhIj48c3RvcCBzdG9wLWNvbG9yPSIjY2NjIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWVlIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Im0xMS41LDIzLjUgMTYsMTAgMCwtOCAxNiwwIDAsOCAxNiwtMTAgLTE2LC0xMCAwLDggLTE2LDAgMCwtOHoiIHN0eWxlPSJmaWxsOnVybCgjYSk7c3Ryb2tlOiM1NTUiLz48L3N2Zz4=",reset:function(){var a=this;a.element.width(a._original_width).height(a._original_height),a._wrapper.width(a._original_width).height(a._original_height)},destroy:function(){a.Widget.prototype.destroy.call(this),this.element.resizable("destroy")}})})(jQuery),$(function(){if($(document).data("scalable")&&$(document).data("scalable").auto===!1)return;$(".scalable").scalable()});
+ */(function(a){"use strict",a.widget("ui.scalable",{options:{arrow:!1},_create:function(){function c(){b._wrapper.hasClass("ui-resizable-resizing")?b._hide_after_drag=!1:b._bar.show()}function d(){b._wrapper.hasClass("ui-resizable-resizing")?b._hide_after_drag=!0:b._bar.hide()}var b=this;b.element.resizable({aspectRatio:!0,autoHide:!0,handles:"e",minHeight:48,minWidth:72,create:function(a,c){b._original_width=b.element.width(),b._original_height=b.element.height()},stop:function(a,c){b._hide_after_drag&&(b._bar.hide(),b._hide_after_drag=!1)}}),b._wrapper=b.element.parent().css("position","relative"),b._original_wwidth=b._wrapper.width(),b._original_wheight=b._wrapper.height(),b._handle=a(".ui-resizable-e",b._wrapper).wrap("<div></div>"),b._bar=b._handle.parent(),b.options.arrow&&(b._arrow=b.options.arrow),b._handle.css({background:"url("+b._arrow+") no-repeat",position:"absolute",cursor:"e-resize",top:"0",right:"0"}).width(72).height(48),b._bar.addClass("ui-scalable-bar").css({background:"rgba(204, 204, 204, .2)",position:"absolute",cursor:"pointer",top:"0",left:"0",width:"100%",height:"48px"}).click(a.proxy(b.reset,b)).hover(c,d).hide(),b.element.hover(c,d),b._bar.children().click(function(){return!1})},_arrow:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI0OCI+PGxpbmVhckdyYWRpZW50IGlkPSJhIj48c3RvcCBzdG9wLWNvbG9yPSIjY2NjIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWVlIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Im0xMS41LDIzLjUgMTYsMTAgMCwtOCAxNiwwIDAsOCAxNiwtMTAgLTE2LC0xMCAwLDggLTE2LDAgMCwtOHoiIHN0eWxlPSJmaWxsOnVybCgjYSk7c3Ryb2tlOiM1NTUiLz48L3N2Zz4=",reset:function(){var a=this;a._wrapper.width(a._original_wwidth).height(a._original_wheight),a.element.width(a._original_width).height(a._original_height)},destroy:function(){a.Widget.prototype.destroy.call(this),this.element.resizable("destroy")}})})(jQuery),$(function(){if($(document).data("scalable")&&$(document).data("scalable").auto===!1)return;$(".scalable").scalable()});
View
2 jquery.scalable.min.js
@@ -2,4 +2,4 @@
* jQuery Scalable
* http://sbp.so/scalable
* Copyright 2012, Sean B. Palmer. Apache License 2.0
- */(function(a){"use strict",a.widget("ui.scalable",{options:{arrow:!1},_create:function(){function c(){b._wrapper.hasClass("ui-resizable-resizing")?b._hide_after_drag=!1:b._bar.show()}function d(){b._wrapper.hasClass("ui-resizable-resizing")?b._hide_after_drag=!0:b._bar.hide()}var b=this;b.element.resizable({aspectRatio:!0,autoHide:!0,handles:"e",minHeight:48,minWidth:72,create:function(a,c){b._original_width=b.element.width(),b._original_height=b.element.height()},stop:function(a,c){b._hide_after_drag&&(b._bar.hide(),b._hide_after_drag=!1)}}),b._handle=a(".ui-resizable-e").wrap("<div></div>"),b._bar=b._handle.parent(),b._wrapper=b._bar.parent().css("position","relative"),b.options.arrow&&(b._arrow=b.options.arrow),b._handle.css({background:"url("+b._arrow+") no-repeat",position:"absolute",cursor:"e-resize",top:"0",right:"0"}).width(72).height(48),b._bar.addClass("ui-scalable-bar").css({background:"rgba(204, 204, 204, .2)",position:"absolute",cursor:"pointer",top:"0",left:"0",width:"100%",height:"48px"}).click(a.proxy(b.reset,b)).hover(c,d).hide(),b.element.hover(c,d),b._bar.children().click(function(){return!1})},_arrow:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI0OCI+PGxpbmVhckdyYWRpZW50IGlkPSJhIj48c3RvcCBzdG9wLWNvbG9yPSIjY2NjIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWVlIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Im0xMS41LDIzLjUgMTYsMTAgMCwtOCAxNiwwIDAsOCAxNiwtMTAgLTE2LC0xMCAwLDggLTE2LDAgMCwtOHoiIHN0eWxlPSJmaWxsOnVybCgjYSk7c3Ryb2tlOiM1NTUiLz48L3N2Zz4=",reset:function(){var a=this;a.element.width(a._original_width).height(a._original_height),a._wrapper.width(a._original_width).height(a._original_height)},destroy:function(){a.Widget.prototype.destroy.call(this),this.element.resizable("destroy")}})})(jQuery);
+ */(function(a){"use strict",a.widget("ui.scalable",{options:{arrow:!1},_create:function(){function c(){b._wrapper.hasClass("ui-resizable-resizing")?b._hide_after_drag=!1:b._bar.show()}function d(){b._wrapper.hasClass("ui-resizable-resizing")?b._hide_after_drag=!0:b._bar.hide()}var b=this;b.element.resizable({aspectRatio:!0,autoHide:!0,handles:"e",minHeight:48,minWidth:72,create:function(a,c){b._original_width=b.element.width(),b._original_height=b.element.height()},stop:function(a,c){b._hide_after_drag&&(b._bar.hide(),b._hide_after_drag=!1)}}),b._wrapper=b.element.parent().css("position","relative"),b._original_wwidth=b._wrapper.width(),b._original_wheight=b._wrapper.height(),b._handle=a(".ui-resizable-e",b._wrapper).wrap("<div></div>"),b._bar=b._handle.parent(),b.options.arrow&&(b._arrow=b.options.arrow),b._handle.css({background:"url("+b._arrow+") no-repeat",position:"absolute",cursor:"e-resize",top:"0",right:"0"}).width(72).height(48),b._bar.addClass("ui-scalable-bar").css({background:"rgba(204, 204, 204, .2)",position:"absolute",cursor:"pointer",top:"0",left:"0",width:"100%",height:"48px"}).click(a.proxy(b.reset,b)).hover(c,d).hide(),b.element.hover(c,d),b._bar.children().click(function(){return!1})},_arrow:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI0OCI+PGxpbmVhckdyYWRpZW50IGlkPSJhIj48c3RvcCBzdG9wLWNvbG9yPSIjY2NjIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWVlIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Im0xMS41LDIzLjUgMTYsMTAgMCwtOCAxNiwwIDAsOCAxNiwtMTAgLTE2LC0xMCAwLDggLTE2LDAgMCwtOHoiIHN0eWxlPSJmaWxsOnVybCgjYSk7c3Ryb2tlOiM1NTUiLz48L3N2Zz4=",reset:function(){var a=this;a._wrapper.width(a._original_wwidth).height(a._original_wheight),a.element.width(a._original_width).height(a._original_height)},destroy:function(){a.Widget.prototype.destroy.call(this),this.element.resizable("destroy")}})})(jQuery);
View
29 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 () {
View
29 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 () {
View
27 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,
View
90 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();

0 comments on commit 06978b0

Please sign in to comment.
Something went wrong with that request. Please try again.