You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
244 lines
6.2 KiB
244 lines
6.2 KiB
5 years ago
|
define( [
|
||
|
"qunit",
|
||
|
"jquery",
|
||
|
"./helper",
|
||
|
"ui/widgets/resizable"
|
||
|
], function( QUnit, $, testHelper ) {
|
||
|
|
||
|
QUnit.module( "resizable: events" );
|
||
|
|
||
|
QUnit.test( "start", function( assert ) {
|
||
|
|
||
|
assert.expect( 5 );
|
||
|
|
||
|
var count = 0,
|
||
|
handle = ".ui-resizable-se";
|
||
|
|
||
|
$( "#resizable1" ).resizable( {
|
||
|
handles: "all",
|
||
|
start: function( event, ui ) {
|
||
|
assert.equal( ui.size.width, 100, "compare width" );
|
||
|
assert.equal( ui.size.height, 100, "compare height" );
|
||
|
assert.equal( ui.originalSize.width, 100, "compare original width" );
|
||
|
assert.equal( ui.originalSize.height, 100, "compare original height" );
|
||
|
count++;
|
||
|
}
|
||
|
} );
|
||
|
|
||
|
testHelper.drag( handle, 50, 50 );
|
||
|
|
||
|
assert.equal( count, 1, "start callback should happen exactly once" );
|
||
|
|
||
|
} );
|
||
|
|
||
|
QUnit.test( "resize", function( assert ) {
|
||
|
|
||
|
assert.expect( 9 );
|
||
|
|
||
|
var count = 0,
|
||
|
handle = ".ui-resizable-se";
|
||
|
|
||
|
$( "#resizable1" ).resizable( {
|
||
|
handles: "all",
|
||
|
resize: function( event, ui ) {
|
||
|
if ( count === 0 ) {
|
||
|
assert.equal( ui.size.width, 125, "compare width" );
|
||
|
assert.equal( ui.size.height, 125, "compare height" );
|
||
|
assert.equal( ui.originalSize.width, 100, "compare original width" );
|
||
|
assert.equal( ui.originalSize.height, 100, "compare original height" );
|
||
|
} else {
|
||
|
assert.equal( ui.size.width, 150, "compare width" );
|
||
|
assert.equal( ui.size.height, 150, "compare height" );
|
||
|
assert.equal( ui.originalSize.width, 100, "compare original width" );
|
||
|
assert.equal( ui.originalSize.height, 100, "compare original height" );
|
||
|
}
|
||
|
count++;
|
||
|
}
|
||
|
} );
|
||
|
|
||
|
testHelper.drag( handle, 50, 50 );
|
||
|
|
||
|
assert.equal( count, 2, "resize callback should happen exactly once per size adjustment" );
|
||
|
|
||
|
} );
|
||
|
|
||
|
QUnit.test( "resize (min/max dimensions)", function( assert ) {
|
||
|
|
||
|
assert.expect( 5 );
|
||
|
|
||
|
var count = 0,
|
||
|
handle = ".ui-resizable-se";
|
||
|
|
||
|
$( "#resizable1" ).resizable( {
|
||
|
handles: "all",
|
||
|
minWidth: 60,
|
||
|
minHeight: 60,
|
||
|
maxWidth: 100,
|
||
|
maxHeight: 100,
|
||
|
resize: function( event, ui ) {
|
||
|
assert.equal( ui.size.width, 60, "compare width" );
|
||
|
assert.equal( ui.size.height, 60, "compare height" );
|
||
|
assert.equal( ui.originalSize.width, 100, "compare original width" );
|
||
|
assert.equal( ui.originalSize.height, 100, "compare original height" );
|
||
|
count++;
|
||
|
}
|
||
|
} );
|
||
|
|
||
|
testHelper.drag( handle, -200, -200 );
|
||
|
|
||
|
assert.equal( count, 1, "resize callback should happen exactly once per size adjustment" );
|
||
|
|
||
|
} );
|
||
|
|
||
|
QUnit.test( "resize (containment)", function( assert ) {
|
||
|
|
||
|
assert.expect( 5 );
|
||
|
|
||
|
var count = 0,
|
||
|
handle = ".ui-resizable-se",
|
||
|
container = $( "#resizable1" ).wrap( "<div>" ).parent().css( {
|
||
|
height: "100px",
|
||
|
width: "100px"
|
||
|
} );
|
||
|
|
||
|
$( "#resizable1" ).resizable( {
|
||
|
handles: "all",
|
||
|
containment: container,
|
||
|
resize: function( event, ui ) {
|
||
|
assert.equal( ui.size.width, 10, "compare width" );
|
||
|
assert.equal( ui.size.height, 10, "compare height" );
|
||
|
assert.equal( ui.originalSize.width, 100, "compare original width" );
|
||
|
assert.equal( ui.originalSize.height, 100, "compare original height" );
|
||
|
count++;
|
||
|
}
|
||
|
} );
|
||
|
|
||
|
// Prove you can't resize outside containment by dragging southeast corner southeast
|
||
|
testHelper.drag( handle, 100, 100 );
|
||
|
|
||
|
// Prove you can't resize outside containment by dragging southeast corner northwest
|
||
|
testHelper.drag( handle, -200, -200 );
|
||
|
|
||
|
assert.equal( count, 1, "resize callback should happen exactly once per size adjustment" );
|
||
|
|
||
|
} );
|
||
|
|
||
|
QUnit.test( "resize (grid)", function( assert ) {
|
||
|
|
||
|
assert.expect( 5 );
|
||
|
|
||
|
var count = 0,
|
||
|
handle = ".ui-resizable-se";
|
||
|
|
||
|
$( "#resizable1" ).resizable( {
|
||
|
handles: "all",
|
||
|
grid: 50,
|
||
|
resize: function( event, ui ) {
|
||
|
assert.equal( ui.size.width, 150, "compare width" );
|
||
|
assert.equal( ui.size.height, 150, "compare height" );
|
||
|
assert.equal( ui.originalSize.width, 100, "compare original width" );
|
||
|
assert.equal( ui.originalSize.height, 100, "compare original height" );
|
||
|
count++;
|
||
|
}
|
||
|
} );
|
||
|
|
||
|
testHelper.drag( handle, 50, 50 );
|
||
|
|
||
|
assert.equal( count, 1, "resize callback should happen exactly once per grid-unit size adjustment" );
|
||
|
|
||
|
} );
|
||
|
|
||
|
QUnit.test( "resize, custom adjustment", function( assert ) {
|
||
|
assert.expect( 4 );
|
||
|
|
||
|
var handle = ".ui-resizable-se",
|
||
|
element = $( "#resizable1" ).resizable( {
|
||
|
resize: function( event, ui ) {
|
||
|
ui.size.width = 100;
|
||
|
ui.size.height = 200;
|
||
|
ui.position.left = 300;
|
||
|
ui.position.top = 400;
|
||
|
}
|
||
|
} );
|
||
|
|
||
|
testHelper.drag( handle, 50, 50 );
|
||
|
|
||
|
assert.equal( element.width(), 100, "resize event can control width" );
|
||
|
assert.equal( element.height(), 200, "resize event can control height" );
|
||
|
assert.equal( element.position().left, 300, "resize event can control left" );
|
||
|
assert.equal( element.position().top, 400, "resize event can control top" );
|
||
|
} );
|
||
|
|
||
|
QUnit.test( "stop", function( assert ) {
|
||
|
|
||
|
assert.expect( 5 );
|
||
|
|
||
|
var count = 0,
|
||
|
handle = ".ui-resizable-se";
|
||
|
|
||
|
$( "#resizable1" ).resizable( {
|
||
|
handles: "all",
|
||
|
stop: function( event, ui ) {
|
||
|
assert.equal( ui.size.width, 150, "compare width" );
|
||
|
assert.equal( ui.size.height, 150, "compare height" );
|
||
|
assert.equal( ui.originalSize.width, 100, "compare original width" );
|
||
|
assert.equal( ui.originalSize.height, 100, "compare original height" );
|
||
|
count++;
|
||
|
}
|
||
|
} );
|
||
|
|
||
|
testHelper.drag( handle, 50, 50 );
|
||
|
|
||
|
assert.equal( count, 1, "stop callback should happen exactly once" );
|
||
|
|
||
|
} );
|
||
|
|
||
|
QUnit.test( "resize (containment) works with parent with negative offset", function( assert ) {
|
||
|
|
||
|
assert.expect( 1 );
|
||
|
|
||
|
var widthBefore, widthAfter,
|
||
|
handle = ".ui-resizable-e",
|
||
|
target = $( "#resizable1" ),
|
||
|
absoluteContainer = target.wrap( "<div />" ).parent(),
|
||
|
fixedContainer = absoluteContainer.wrap( "<div />" ).parent(),
|
||
|
increaseWidthBy = 50;
|
||
|
|
||
|
// Position fixed container in window top left
|
||
|
fixedContainer.css( {
|
||
|
width: 400,
|
||
|
height: 100,
|
||
|
position: "fixed",
|
||
|
top: 0,
|
||
|
left: 0
|
||
|
} );
|
||
|
|
||
|
// Position absolute container within fixed on slightly outside window
|
||
|
absoluteContainer.css( {
|
||
|
width: 400,
|
||
|
height: 100,
|
||
|
position: "absolute",
|
||
|
top: 0,
|
||
|
left: -50
|
||
|
} );
|
||
|
|
||
|
// Set up resizable to be contained within absolute container
|
||
|
target.resizable( {
|
||
|
handles: "all",
|
||
|
containment: "parent"
|
||
|
} ).css( {
|
||
|
width: 300
|
||
|
} );
|
||
|
|
||
|
widthBefore = target.width();
|
||
|
|
||
|
testHelper.drag( handle, increaseWidthBy, 0 );
|
||
|
|
||
|
widthAfter = target.width();
|
||
|
|
||
|
assert.equal( widthAfter, ( widthBefore + increaseWidthBy ), "resizable width should be increased by the value dragged" );
|
||
|
|
||
|
} );
|
||
|
|
||
|
} );
|