"Menu": "menu/menu.html",
"Position": "position/position.html",
"Progressbar": "progressbar/progressbar.html",
- //"Resizable": "resizable/resizable.html",
+ "Resizable": "resizable/resizable.html",
"Selectable": "selectable/selectable.html",
//"Slider": "slider/slider.html",
//"Sortable": "sortable/sortable.html",
files: grunt.file.expandFiles( "tests/unit/**/*.html" ).filter(function( file ) {
// disabling everything that doesn't (quite) work with PhantomJS for now
// TODO except for all|index|test, try to include more as we go
- return !( /(all|all-active|index|test|resizable|sortable|dialog|slider|datepicker|tabs|tooltip)\.html$/ ).test( file );
+ return !( /(all|all-active|index|test|sortable|dialog|slider|datepicker|tabs|tooltip)\.html$/ ).test( file );
})
},
lint: {
ui: grunt.file.expandFiles( "ui/*.js" ).filter(function( file ) {
// TODO remove items from this list once rewritten
- return !( /(mouse|datepicker|resizable|sortable)\.js$/ ).test( file );
+ return !( /(mouse|datepicker|sortable)\.js$/ ).test( file );
}),
grunt: [ "grunt.js", "build/**/*.js" ],
tests: "tests/unit/**/*.js"
"menu/menu.html",
"position/position.html",
"progressbar/progressbar.html",
- //"resizable/resizable.html",
+ "resizable/resizable.html",
"selectable/selectable.html",
//"slider/slider.html",
//"sortable/sortable.html",
"menu/menu.html",
"position/position.html",
"progressbar/progressbar.html",
- //"resizable/resizable.html",
+ "resizable/resizable.html",
"selectable/selectable.html",
"slider/slider.html",
//"sortable/sortable.html",
* resizable_core.js
*/
-TestHelpers.resizableDrag = function(el, dx, dy, complete) {
+TestHelpers.resizable = {
+ drag: function(el, dx, dy, complete) {
- // speed = sync -> Drag syncrhonously.
- // speed = fast|slow -> Drag asyncrhonously - animated.
+ // speed = sync -> Drag syncrhonously.
+ // speed = fast|slow -> Drag asyncrhonously - animated.
- //this mouseover is to work around a limitation in resizable
- //TODO: fix resizable so handle doesn't require mouseover in order to be used
- $(el).simulate("mouseover");
+ //this mouseover is to work around a limitation in resizable
+ //TODO: fix resizable so handle doesn't require mouseover in order to be used
+ $(el).simulate("mouseover");
- return $(el).simulate("drag", {
- dx: dx||0, dy: dy||0, speed: 'sync', complete: complete
- });
+ return $(el).simulate("drag", {
+ dx: dx||0, dy: dy||0, speed: 'sync', complete: complete
+ });
+ }
};
(function($) {
var handle = '.ui-resizable-n', target = $('#resizable1').resizable({ handles: 'all' });
- TestHelpers.resizableDrag(handle, 0, -50);
+ TestHelpers.resizable.drag(handle, 0, -50);
equal( target.height(), 150, "compare height" );
- TestHelpers.resizableDrag(handle, 0, 50);
+ TestHelpers.resizable.drag(handle, 0, 50);
equal( target.height(), 100, "compare height" );
});
var handle = '.ui-resizable-s', target = $('#resizable1').resizable({ handles: 'all' });
- TestHelpers.resizableDrag(handle, 0, 50);
+ TestHelpers.resizable.drag(handle, 0, 50);
equal( target.height(), 150, "compare height" );
- TestHelpers.resizableDrag(handle, 0, -50);
+ TestHelpers.resizable.drag(handle, 0, -50);
equal( target.height(), 100, "compare height" );
});
var handle = '.ui-resizable-e', target = $('#resizable1').resizable({ handles: 'all' });
- TestHelpers.resizableDrag(handle, 50);
+ TestHelpers.resizable.drag(handle, 50);
equal( target.width(), 150, "compare width");
- TestHelpers.resizableDrag(handle, -50);
+ TestHelpers.resizable.drag(handle, -50);
equal( target.width(), 100, "compare width" );
});
var handle = '.ui-resizable-w', target = $('#resizable1').resizable({ handles: 'all' });
- TestHelpers.resizableDrag(handle, -50);
+ TestHelpers.resizable.drag(handle, -50);
equal( target.width(), 150, "compare width" );
- TestHelpers.resizableDrag(handle, 50);
+ TestHelpers.resizable.drag(handle, 50);
equal( target.width(), 100, "compare width" );
});
var handle = '.ui-resizable-ne', target = $('#resizable1').css({ overflow: 'hidden' }).resizable({ handles: 'all' });
- TestHelpers.resizableDrag(handle, -50, -50);
+ TestHelpers.resizable.drag(handle, -50, -50);
equal( target.width(), 50, "compare width" );
equal( target.height(), 150, "compare height" );
- TestHelpers.resizableDrag(handle, 50, 50);
+ TestHelpers.resizable.drag(handle, 50, 50);
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
});
var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all' });
- TestHelpers.resizableDrag(handle, 50, 50);
+ TestHelpers.resizable.drag(handle, 50, 50);
equal( target.width(), 150, "compare width" );
equal( target.height(), 150, "compare height" );
- TestHelpers.resizableDrag(handle, -50, -50);
+ TestHelpers.resizable.drag(handle, -50, -50);
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
});
var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ handles: 'all' });
- TestHelpers.resizableDrag(handle, -50, -50);
+ TestHelpers.resizable.drag(handle, -50, -50);
equal( target.width(), 150, "compare width" );
equal( target.height(), 50, "compare height" );
- TestHelpers.resizableDrag(handle, 50, 50);
+ TestHelpers.resizable.drag(handle, 50, 50);
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
});
var handle = '.ui-resizable-nw', target = $('#resizable1').resizable({ handles: 'all' });
- TestHelpers.resizableDrag(handle, -50, -50);
+ TestHelpers.resizable.drag(handle, -50, -50);
equal( target.width(), 150, "compare width" );
equal( target.height(), 150, "compare height" );
- TestHelpers.resizableDrag(handle, 50, 50);
+ TestHelpers.resizable.drag(handle, 50, 50);
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
});
var handle = '.ui-resizable-e', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
- TestHelpers.resizableDrag(handle, 80);
+ TestHelpers.resizable.drag(handle, 80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
- TestHelpers.resizableDrag(handle, -130);
+ TestHelpers.resizable.drag(handle, -130);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
var handle = '.ui-resizable-w', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
- TestHelpers.resizableDrag(handle, -80);
+ TestHelpers.resizable.drag(handle, -80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
- TestHelpers.resizableDrag(handle, 130);
+ TestHelpers.resizable.drag(handle, 130);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
var handle = '.ui-resizable-n', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
- TestHelpers.resizableDrag(handle, 0, -80);
+ TestHelpers.resizable.drag(handle, 0, -80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
- TestHelpers.resizableDrag(handle, 0, 80);
+ TestHelpers.resizable.drag(handle, 0, 80);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
var handle = '.ui-resizable-s', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
- TestHelpers.resizableDrag(handle, 0, 80);
+ TestHelpers.resizable.drag(handle, 0, 80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
- TestHelpers.resizableDrag(handle, 0, -80);
+ TestHelpers.resizable.drag(handle, 0, -80);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
- TestHelpers.resizableDrag(handle, 80, 80);
+ TestHelpers.resizable.drag(handle, 80, 80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
- TestHelpers.resizableDrag(handle, -80, -80);
+ TestHelpers.resizable.drag(handle, -80, -80);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
- TestHelpers.resizableDrag(handle, -80, 80);
+ TestHelpers.resizable.drag(handle, -80, 80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
- TestHelpers.resizableDrag(handle, 80, -80);
+ TestHelpers.resizable.drag(handle, 80, -80);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
var handle = '.ui-resizable-ne', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
- TestHelpers.resizableDrag(handle, 80, -80);
+ TestHelpers.resizable.drag(handle, 80, -80);
equal( target.width(), 130, "compare maxWidth");
equal( target.height(), 130, "compare maxHeight");
- TestHelpers.resizableDrag(handle, -80, 80);
+ TestHelpers.resizable.drag(handle, -80, 80);
equal( target.width(), 70, "compare minWidth");
equal( target.height(), 70, "compare minHeight");
});
var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all', grid: [0, 20] });
- TestHelpers.resizableDrag(handle, 3, 9);
+ TestHelpers.resizable.drag(handle, 3, 9);
equal( target.width(), 103, "compare width");
equal( target.height(), 100, "compare height");
- TestHelpers.resizableDrag(handle, 15, 11);
+ TestHelpers.resizable.drag(handle, 15, 11);
equal( target.width(), 118, "compare width");
equal( target.height(), 120, "compare height");
});
var handle = '.ui-resizable-se', target = $('#resizable2').resizable({ handles: 'all', grid: [0, 20] });
- TestHelpers.resizableDrag(handle, 3, 9);
+ TestHelpers.resizable.drag(handle, 3, 9);
equal( target.width(), 103, "compare width");
equal( target.height(), 100, "compare height");
- TestHelpers.resizableDrag(handle, 15, 11);
+ TestHelpers.resizable.drag(handle, 15, 11);
equal( target.width(), 118, "compare width");
equal( target.height(), 120, "compare height");
});
var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
- TestHelpers.resizableDrag(handle, -50, -50);
+ TestHelpers.resizable.drag(handle, -50, -50);
equal( target.width(), 60, "compare minWidth" );
equal( target.height(), 60, "compare minHeight" );
- TestHelpers.resizableDrag(handle, 70, 70);
+ TestHelpers.resizable.drag(handle, 70, 70);
equal( target.width(), 100, "compare maxWidth" );
equal( target.height(), 100, "compare maxHeight" );
});
var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
- TestHelpers.resizableDrag(handle, 50, -50);
+ TestHelpers.resizable.drag(handle, 50, -50);
equal( target.width(), 60, "compare minWidth" );
equal( target.height(), 60, "compare minHeight" );
- TestHelpers.resizableDrag(handle, -70, 70);
+ TestHelpers.resizable.drag(handle, -70, 70);
equal( target.width(), 100, "compare maxWidth" );
equal( target.height(), 100, "compare maxHeight" );
});
var handle = '.ui-resizable-ne', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
- TestHelpers.resizableDrag(handle, -50, 50);
+ TestHelpers.resizable.drag(handle, -50, 50);
equal( target.width(), 60, "compare minWidth" );
equal( target.height(), 60, "compare minHeight" );
- TestHelpers.resizableDrag(handle, 70, -70);
+ TestHelpers.resizable.drag(handle, 70, -70);
equal( target.width(), 100, "compare maxWidth" );
equal( target.height(), 100, "compare maxHeight" );
});
var handle = '.ui-resizable-nw', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
- TestHelpers.resizableDrag(handle, 70, 70);
+ TestHelpers.resizable.drag(handle, 70, 70);
equal( target.width(), 60, "compare minWidth" );
equal( target.height(), 60, "compare minHeight" );
- TestHelpers.resizableDrag(handle, -70, -70);
+ TestHelpers.resizable.drag(handle, -70, -70);
equal( target.width(), 100, "compare maxWidth" );
equal( target.height(), 100, "compare maxHeight" );
});
* jquery.ui.mouse.js
* jquery.ui.draggable.js
*/
-
-
(function( $, undefined ) {
/*jshint onevar: false, curly: false, eqeqeq: false, laxbreak: true */
*/
(function( $, undefined ) {
+/*jshint onevar: false, curly: false, eqeqeq: false, funcscope: true, loopfunc: true */
+
+function num(v) {
+ return parseInt(v, 10) || 0;
+}
+
+function isNumber(value) {
+ return !isNaN(parseInt(value, 10));
+}
+
$.widget("ui.resizable", $.ui.mouse, {
version: "@VERSION",
widgetEventPrefix: "resize",
//TODO : What's going on here?
if ('se' == handle) {
axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
- };
+ }
//Insert into internal handles object and append to element
this.handles[handle] = '.ui-resizable-'+handle;
_mouseDrag: function(event) {
//Increase performance, avoid regex
- var el = this.helper, o = this.options, props = {},
- that = this, smp = this.originalMousePosition, a = this.axis;
+ var el = this.helper,
+ smp = this.originalMousePosition, a = this.axis;
var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0;
var trigger = this._change[a];
},
_updateCache: function(data) {
- var o = this.options;
this.offset = this.helper.offset();
if (isNumber(data.left)) this.position.left = data.left;
if (isNumber(data.top)) this.position.top = data.top;
if (isNumber(data.width)) this.size.width = data.width;
},
- _updateRatio: function(data, event) {
+ _updateRatio: function( data ) {
- var o = this.options, cpos = this.position, csize = this.size, a = this.axis;
+ var cpos = this.position, csize = this.size, a = this.axis;
if (isNumber(data.height)) data.width = (data.height * this.aspectRatio);
else if (isNumber(data.width)) data.height = (data.width / this.aspectRatio);
return data;
},
- _respectSize: function(data, event) {
+ _respectSize: function( data ) {
- var el = this.helper, o = this._vBoundaries, pRatio = this._aspectRatio || event.shiftKey, a = this.axis,
- ismaxw = isNumber(data.width) && o.maxWidth && (o.maxWidth < data.width), ismaxh = isNumber(data.height) && o.maxHeight && (o.maxHeight < data.height),
- isminw = isNumber(data.width) && o.minWidth && (o.minWidth > data.width), isminh = isNumber(data.height) && o.minHeight && (o.minHeight > data.height);
+ var o = this._vBoundaries, a = this.axis,
+ ismaxw = isNumber(data.width) && o.maxWidth && (o.maxWidth < data.width), ismaxh = isNumber(data.height) && o.maxHeight && (o.maxHeight < data.height),
+ isminw = isNumber(data.width) && o.minWidth && (o.minWidth > data.width), isminh = isNumber(data.height) && o.minHeight && (o.minHeight > data.height);
if (isminw) data.width = o.minWidth;
if (isminh) data.height = o.minHeight;
_proportionallyResize: function() {
- var o = this.options;
if (!this._proportionallyResizeElements.length) return;
var element = this.helper || this.element;
width: (element.width() - this.borderDif[1] - this.borderDif[3]) || 0
});
- };
+ }
},
},
_change: {
- e: function(event, dx, dy) {
+ e: function(event, dx) {
return { width: this.originalSize.width + dx };
},
- w: function(event, dx, dy) {
- var o = this.options, cs = this.originalSize, sp = this.originalPosition;
+ w: function(event, dx) {
+ var cs = this.originalSize, sp = this.originalPosition;
return { left: sp.left + dx, width: cs.width - dx };
},
n: function(event, dx, dy) {
- var o = this.options, cs = this.originalSize, sp = this.originalPosition;
+ var cs = this.originalSize, sp = this.originalPosition;
return { top: sp.top + dy, height: cs.height - dy };
},
s: function(event, dx, dy) {
$.ui.plugin.add("resizable", "alsoResize", {
- start: function (event, ui) {
+ start: function () {
var that = $(this).data("resizable"), o = that.options;
var _store = function (exp) {
}
},
- stop: function (event, ui) {
+ stop: function () {
$(this).removeData("resizable-alsoresize");
}
});
$.ui.plugin.add("resizable", "animate", {
- stop: function(event, ui) {
+ stop: function( event ) {
var that = $(this).data("resizable"), o = that.options;
var pr = that._proportionallyResizeElements, ista = pr.length && (/textarea/i).test(pr[0].nodeName),
$.ui.plugin.add("resizable", "containment", {
- start: function(event, ui) {
+ start: function() {
var that = $(this).data("resizable"), o = that.options, el = that.element;
var oc = o.containment, ce = (oc instanceof $) ? oc.get(0) : (/parent/.test(oc)) ? el.parent().get(0) : oc;
if (!ce) return;
}
},
- resize: function(event, ui) {
+ resize: function( event ) {
var that = $(this).data("resizable"), o = that.options,
- ps = that.containerSize, co = that.containerOffset, cs = that.size, cp = that.position,
- pRatio = that._aspectRatio || event.shiftKey, cop = { top:0, left:0 }, ce = that.containerElement;
+ co = that.containerOffset, cp = that.position,
+ pRatio = that._aspectRatio || event.shiftKey, cop = { top:0, left:0 }, ce = that.containerElement;
if (ce[0] != document && (/static/).test(ce.css('position'))) cop = co;
}
},
- stop: function(event, ui){
- var that = $(this).data("resizable"), o = that.options, cp = that.position,
+ stop: function(){
+ var that = $(this).data("resizable"), o = that.options,
co = that.containerOffset, cop = that.containerPosition, ce = that.containerElement;
var helper = $(that.helper), ho = helper.offset(), w = helper.outerWidth() - that.sizeDiff.width, h = helper.outerHeight() - that.sizeDiff.height;
$.ui.plugin.add("resizable", "ghost", {
- start: function(event, ui) {
+ start: function() {
var that = $(this).data("resizable"), o = that.options, cs = that.size;
that.ghost = that.originalElement.clone();
that.ghost
- .css({ opacity: .25, display: 'block', position: 'relative', height: cs.height, width: cs.width, margin: 0, left: 0, top: 0 })
+ .css({ opacity: 0.25, display: 'block', position: 'relative', height: cs.height, width: cs.width, margin: 0, left: 0, top: 0 })
.addClass('ui-resizable-ghost')
.addClass(typeof o.ghost == 'string' ? o.ghost : '');
},
- resize: function(event, ui){
- var that = $(this).data("resizable"), o = that.options;
+ resize: function(){
+ var that = $(this).data("resizable");
if (that.ghost) that.ghost.css({ position: 'relative', height: that.size.height, width: that.size.width });
},
- stop: function(event, ui){
- var that = $(this).data("resizable"), o = that.options;
+ stop: function() {
+ var that = $(this).data("resizable");
if (that.ghost && that.helper) that.helper.get(0).removeChild(that.ghost.get(0));
}
$.ui.plugin.add("resizable", "grid", {
- resize: function(event, ui) {
- var that = $(this).data("resizable"), o = that.options, cs = that.size, os = that.originalSize, op = that.originalPosition, a = that.axis, ratio = o._aspectRatio || event.shiftKey;
+ resize: function() {
+ var that = $(this).data("resizable"), o = that.options, cs = that.size, os = that.originalSize, op = that.originalPosition, a = that.axis;
o.grid = typeof o.grid == "number" ? [o.grid, o.grid] : o.grid;
var ox = Math.round((cs.width - os.width) / (o.grid[0]||1)) * (o.grid[0]||1), oy = Math.round((cs.height - os.height) / (o.grid[1]||1)) * (o.grid[1]||1);
});
-var num = function(v) {
- return parseInt(v, 10) || 0;
-};
-
-var isNumber = function(value) {
- return !isNaN(parseInt(value, 10));
-};
-
})(jQuery);