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.
241 lines
7.4 KiB
241 lines
7.4 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
|
|
<title>VerticalDropMode</title> |
|
|
|
<script type="text/javascript" |
|
src="../../../../../dojo/dojo.js" |
|
data-dojo-config="isDebug: true, parseOnLoad: true"> |
|
</script> |
|
|
|
<script type="text/javascript"> |
|
dojo.require("dijit.robotx"); |
|
dojo.require("dojo.parser"); |
|
dojo.require("dojox.mdnd.tests.unitTests.dropMode.FixtureLib"); |
|
dojo.require("dojox.mdnd.dropMode.VerticalDropMode"); |
|
|
|
dojo.addOnLoad(function(){ |
|
|
|
doh.robot.initRobot('resources/domElement.html'); |
|
|
|
doh.register("getDragPoint", |
|
[ |
|
// summary: |
|
// getDragPoint get the reference point used to |
|
// represent the drag item. |
|
// |
|
// For the VerticalDropMode this point varies with the |
|
// direction of moving (up or down). |
|
|
|
new getDragPointFixture("firstCall",function(){ |
|
// On the first call, this point is : |
|
// X = (X position + width/2) |
|
// Y = Y position |
|
var point = this.dropMode.getDragPoint(this.coords, this.size, this.mousePosition); |
|
doh.assertTrue(point.x === 75); |
|
doh.assertTrue(point.y === 50); |
|
}), |
|
|
|
new getDragPointFixture("moveHorizontal",function(){ |
|
// The drag item move from (25,50) to (125,50). |
|
// X = (X position + width/2) |
|
// Y = Y position |
|
|
|
//1st call |
|
this.dropMode.getDragPoint(this.coords, this.size, this.mousePosition); |
|
//2nd call |
|
var point = this.dropMode.getDragPoint( |
|
{'x':125,'y':50}, |
|
this.size); |
|
doh.assertTrue(point.x === 175); |
|
doh.assertTrue(point.y === 50); |
|
}), |
|
|
|
new getDragPointFixture("moveUp",function(){ |
|
// The drag item move from (25,50) to (25,0). |
|
// X = (X position + width/2) |
|
// Y = Y position |
|
|
|
//1st call |
|
this.dropMode.getDragPoint(this.coords, this.size, this.mousePosition); |
|
//2nd call |
|
var point = this.dropMode.getDragPoint( |
|
{'x':25,'y':0}, |
|
this.size); |
|
doh.assertTrue(point.x === 75); |
|
doh.assertTrue(point.y === 0); |
|
}), |
|
|
|
new getDragPointFixture("moveDown",function(){ |
|
// The drag item move from (25,50) to (25,0). |
|
// X = (X position + width/2) |
|
// Y = Y position + Y size |
|
|
|
//1st call |
|
this.dropMode.getDragPoint(this.coords, this.size, this.mousePosition); |
|
//2nd call |
|
var point = this.dropMode.getDragPoint( |
|
{'x':25,'y':75}, |
|
this.size); |
|
doh.assertTrue(point.x === 75); |
|
doh.assertTrue(point.y === 175); |
|
}) |
|
] |
|
); |
|
|
|
doh.register("addArea", |
|
[ |
|
// summary: |
|
// addArea allows to add a DnD area. They are sorted |
|
// by their x position. |
|
|
|
new AreaFixture("addAnArea", function(){ |
|
this.dropMode.addArea(this.array, this.objectA); |
|
doh.assertTrue(this.array.length === 1); |
|
doh.assertTrue(this.objectA.coords.x === 50 && this.objectA.coords.y === 50); |
|
}), |
|
|
|
new AreaFixture("addAtStart", function(){ |
|
this.dropMode.addArea(this.array, this.objectB); |
|
this.dropMode.addArea(this.array, this.objectA); |
|
doh.assertTrue(this.array.length === 2); |
|
doh.assertTrue(this.array[0]=== this.objectA); |
|
}), |
|
|
|
new AreaFixture("addAtEnd", function(){ |
|
this.dropMode.addArea(this.array, this.objectB); |
|
this.dropMode.addArea(this.array, this.objectC); |
|
doh.assertTrue(this.array.length === 2); |
|
doh.assertTrue(this.array[1] === this.objectC); |
|
}), |
|
|
|
new AreaFixture("addAtMiddle", function(){ |
|
this.dropMode.addArea(this.array, this.objectB); |
|
this.dropMode.addArea(this.array, this.objectD); |
|
console.dir(this.array); |
|
this.dropMode.addArea(this.array, this.objectC); |
|
doh.assertTrue(this.array.length === 3); |
|
doh.assertTrue(this.array[1] === this.objectC); |
|
}) |
|
] |
|
); |
|
|
|
doh.register("updateAreas", |
|
[ |
|
// summary: |
|
// Refresh intervals between areas to determinate the |
|
// nearest area to drop an item. |
|
|
|
new AreaFixture("areaDropZone", function(){ |
|
this.dropMode.addArea(this.array, this.objectA); |
|
this.dropMode.addArea(this.array, this.objectB); |
|
this.dropMode.addArea(this.array, this.objectC); |
|
this.dropMode.addArea(this.array, this.objectD); |
|
this.dropMode.updateAreas(this.array); |
|
|
|
doh.assertTrue(this.objectA.coords.x1 === -1 && this.objectA.coords.x2 === 176); |
|
doh.assertTrue(this.objectB.coords.x1 === 176 && this.objectB.coords.x2 === 326); |
|
doh.assertTrue(this.objectD.coords.x1 === 601 && this.objectD.coords.x2 === -1); |
|
}), |
|
|
|
new AreaFixture("updateDOMCoord", function(){ |
|
this.dropMode.addArea(this.array, this.objectA); |
|
this.dropMode.addArea(this.array, this.objectB); |
|
this.dropMode.addArea(this.array, this.objectC); |
|
this.dropMode.addArea(this.array, this.objectD); |
|
this.dropMode.updateAreas(this.array); |
|
|
|
doh.assertTrue(this.objectC.coords.x === 350 && this.objectC.coords.y === 50); |
|
doh.assertTrue(this.objectC.coords.x1 === 326 && this.objectC.coords.x2 === 601); |
|
var domNode = this.objectC.node; |
|
dojo.style(domNode,{'left': '400px','top':'25px'}); |
|
this.dropMode.updateAreas(this.array); |
|
doh.assertTrue(this.objectC.coords.x === 400 && this.objectC.coords.y === 25); |
|
doh.assertTrue(this.objectC.coords.x1 === 351 && this.objectC.coords.x2 === 626); |
|
}) |
|
] |
|
); |
|
|
|
doh.register("initItems", |
|
[ |
|
// summary: |
|
// iniItems allows to initialize the horizontal line |
|
// in order to determinate the drop zone. |
|
|
|
new ItemFixture("initItems", function(){ |
|
|
|
this.object = { |
|
'items':[this.itemA] |
|
} |
|
this.dropMode.initItems(this.object); |
|
|
|
doh.assertTrue(this.itemA.y === 551); |
|
}), |
|
|
|
new ItemFixture("initItems2", function(){ |
|
|
|
this.object = { |
|
'items':[this.itemA, this.itemB, this.itemC, this.itemD] |
|
} |
|
this.dropMode.initItems(this.object); |
|
|
|
doh.assertTrue(this.itemA.y === 551); |
|
doh.assertTrue(this.itemB.y === 701); |
|
doh.assertTrue(this.itemC.y === 851); |
|
doh.assertTrue(this.itemD.y === 1051); |
|
}) |
|
] |
|
); |
|
|
|
doh.register("refreshItems", |
|
[ |
|
new ItemFixture("addAtStart", function(){ |
|
|
|
this.object = { |
|
'items':[this.itemA, this.itemB, this.itemC, this.itemD] |
|
} |
|
this.dropMode.initItems(this.object); |
|
this.dropMode.refreshItems(this.object, 0, {h:50,w:50}, true); |
|
|
|
doh.assertTrue(this.itemA.y === 601); |
|
}), |
|
|
|
new ItemFixture("addDropIndicator", function(){ |
|
|
|
this.object = { |
|
'items':[this.itemA, this.itemB, this.itemC, this.itemD] |
|
} |
|
this.dropMode.initItems(this.object); |
|
this.dropMode.refreshItems(this.object, 2, {h:50,w:50}, true); |
|
doh.assertTrue(this.itemB.y === 701); |
|
doh.assertTrue(this.itemD.y === 1101); |
|
}), |
|
|
|
new ItemFixture("removeDropIndicator", function(){ |
|
|
|
this.object = { |
|
'items':[this.itemA, this.itemB, this.itemC, this.itemD] |
|
} |
|
this.dropMode.initItems(this.object); |
|
this.dropMode.refreshItems(this.object, 2, {h:50,w:50}, true); |
|
|
|
doh.assertTrue(this.itemB.y === 701); |
|
doh.assertTrue(this.itemD.y === 1101); |
|
|
|
this.dropMode.refreshItems(this.object, 2, {h:50,w:50}, false); |
|
|
|
doh.assertTrue(this.itemB.y === 701); |
|
doh.assertTrue(this.itemD.y === 1051); |
|
}) |
|
] |
|
); |
|
|
|
doh.run(); |
|
}); |
|
</script> |
|
<style type="text/css"></style> |
|
</head> |
|
<body></body> |
|
</html> |