Skip to content

Commit

Permalink
fix ariatemplates#1178 multiple issues when dragging within a parent …
Browse files Browse the repository at this point in the history
…container that is scrollable

Also partly fixes ariatemplates#695 one of the failing test for IE7/8: test.aria.utils.dragdrop.OutOfBoundaryTest now passes
  • Loading branch information
simonarbuckle committed Jul 23, 2014
1 parent 9dba9f6 commit 2a74c19
Show file tree
Hide file tree
Showing 7 changed files with 328 additions and 36 deletions.
53 changes: 35 additions & 18 deletions src/aria/utils/Dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -731,27 +731,28 @@ Aria.classDefinition({
* @public
*/
getOffset : function (element) {
var style = element.currentStyle || element.style;
var isAbsolute = style.position == "absolute";
var pxRegExp = this.pxRegExp;

var offsetTop = element.offsetTop;
var offsetLeft = element.offsetLeft;
var offset = {
top : (isAbsolute && pxRegExp.test(style.top)) ? parseInt(style.top, 10) : offsetTop,
left : (isAbsolute && pxRegExp.test(style.left)) ? parseInt(style.left, 10) : offsetLeft
};

if (isNaN(offset.top)) {
offset.top = offsetTop;
var isAbsolute = this.getStyle(element, "position") === "absolute";
var position = {};
if (isAbsolute) {
position.left = this.getStylePx(element, "left", null);
position.top = this.getStylePx(element, "top", null);
}

if (isNaN(offset.left)) {
offset.left = offsetLeft;
if (position.left == null || position.top == null) {
var offsetParent = element.offsetParent;
var offsetParentPosition = this.calculatePosition(offsetParent);
var elementPosition = this.calculatePosition(element);
if (position.left == null) {
var borderLeft = this.getStylePx(offsetParent, "borderLeftWidth", 0);
position.left = elementPosition.left - offsetParentPosition.left + offsetParent.scrollLeft
- borderLeft;
}
if (position.top == null) {
var borderTop = this.getStylePx(offsetParent, "borderTopWidth", 0);
position.top = elementPosition.top - offsetParentPosition.top + offsetParent.scrollTop - borderTop;
}
}

return offset;

return position;
},

/**
Expand Down Expand Up @@ -1277,6 +1278,22 @@ Aria.classDefinition({
this.refreshScrollbars(domElt);
},

/**
* Calls getStyle(domElt, property) and returns the value as a number if it is in pixels. Otherwise, returns the
* provided default value.
* @param {HTMLElement} element The DOM element on which to retrieve a CSS property
* @param {String} property The CSS property to retrieve
* @param {Number} defaultValue default value to return in case getStyle does not return a value in pixels
* @return {Number}
*/
getStylePx : function (element, property, defaultValue) {
var value = this.getStyle(element, property);
if (this.pxRegExp.test(value)) {
return parseInt(value, 10);
}
return defaultValue;
},

/**
* Proxy/polly fill method for getElementsByClassName. On browser which don't support this feature the behaviour
* is emulated, otherwise the native version is called.
Expand Down
23 changes: 5 additions & 18 deletions src/aria/utils/dragdrop/Drag.js
Original file line number Diff line number Diff line change
Expand Up @@ -271,11 +271,7 @@
* @param {HTMLElement} element
*/
_setElementStyle : function (element) {
var offset = aria.utils.Dom.getOffset(element);
var position = {
left : offset.left,
top : offset.top
};
var position = aria.utils.Dom.getOffset(element);
this._elementInitialPosition = position;

var style = element.style;
Expand Down Expand Up @@ -365,25 +361,18 @@
start : function (coord) {
this.posX = coord.x;
this.posY = coord.y;
var element = this.getElement(true), parentScroll, domUtil = aria.utils.Dom;
var element = this.getElement(true), domUtil = aria.utils.Dom;
// This will prevent text selection on IE on the element
element.onselectstart = Aria.returnFalse;

this._setElementStyle(element);
this._setBoundary();
var movable = this.getMovable();
if (movable) {
// This will prevent text selection on IE on the movable
movable.onselectstart = Aria.returnFalse;
if (movable.offsetTop < element.offsetTop) {
movable.style.top = element.offsetTop + "px";
}
this._movableInitialGeometry = aria.utils.Dom.getGeometry(movable);
this._movableInitialGeometry = domUtil.getGeometry(movable);
this._movableGeometry = aria.utils.Json.copy(this._movableInitialGeometry);
// This is to handle if there is a scroll
parentScroll = domUtil._getDocumentScroll().scrollTop;
this._movableGeometry.y += (parentScroll > 0) ? parentScroll : 0;
var offset = aria.utils.Dom.getOffset(movable);
var offset = domUtil.getOffset(movable);
this._baseMovableOffset = {
left : this._movableGeometry.x - offset.left,
top : this._movableGeometry.y - offset.top
Expand Down Expand Up @@ -429,12 +418,10 @@
* Handle the drag end. Apply the correct positioning to the draggable element
*/
end : function () {
var element = this.getElement(), parentScroll, domUtil = aria.utils.Dom;
var element = this.getElement();
// This is to handle if there is a scroll
parentScroll = domUtil._getDocumentScroll().scrollTop;
element.onselectstart = Aria.returnTrue;
if (this.proxy && this.proxy.overlay) {
this._movableInitialGeometry.y += (parentScroll > 0) ? parentScroll : 0;
element.style.top = (this._elementInitialPosition.top + this._movableGeometry.y - this._movableInitialGeometry.y)
+ "px";
element.style.left = (this._elementInitialPosition.left + this._movableGeometry.x - this._movableInitialGeometry.x)
Expand Down
1 change: 1 addition & 0 deletions test/aria/utils/dragdrop/DragTestSuite.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ Aria.classDefinition({
$constructor : function () {
this.$TestSuite.constructor.call(this);

this.addTests("test.aria.utils.dragdrop.ScrollIntoViewThenDragTest");
this.addTests("test.aria.utils.dragdrop.DragErrorTest");
this.addTests("test.aria.utils.dragdrop.DragBasicTest");
this.addTests("test.aria.utils.dragdrop.DragConstraintTest");
Expand Down
57 changes: 57 additions & 0 deletions test/aria/utils/dragdrop/ScrollIntoViewDragDropCSS.tpl.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/*
* Copyright 2012 Amadeus s.a.s.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

{CSSTemplate {
$classpath : "test.aria.utils.dragdrop.ScrollIntoViewDragDropCSS"
}}

{macro main()}
.boundary1 {
float: left;
width: 300px;
height: 600px;
border: 1px solid #cdcdcd;
overflow-x: hidden;
overflow-y: auto;
}

.boundary2 {
width: 650px;
height: 200px;
border: 1px solid #cdcdcd;
overflow-x: auto;
overflow-y: hidden;
white-space:nowrap;
}

.constrained-draggable-class1 {
width : 270px;
height: 200px;
border: 1px solid #ddd;
background-color: #eee;
padding: 5px;
}
.constrained-draggable-class2 {
width : 270px;
height: 200px;
border: 1px solid #ddd;
background-color: #eee;
padding: 5px;
display: inline-block;
}

{/macro}

{/CSSTemplate}
42 changes: 42 additions & 0 deletions test/aria/utils/dragdrop/ScrollIntoViewDragTestTemplate.tpl
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/*
* Copyright 2012 Amadeus s.a.s.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

{Template {
$classpath : "test.aria.utils.dragdrop.ScrollIntoViewDragTestTemplate",
$css : ["test.aria.utils.dragdrop.ScrollIntoViewDragDropCSS"],
$hasScript : true
} }

{macro main ( )}

<div id="first-boundary", class="boundary1">
<div id="constrained-draggable1" class="constrained-draggable-class1">Drag One</div>
<div id="constrained-draggable2" class="constrained-draggable-class1">Drag Two</div>
<div id="constrained-draggable3" class="constrained-draggable-class1">Drag Three</div>
<div id="constrained-draggable4" class="constrained-draggable-class1">Drag Four</div>
<div id="constrained-draggable5" class="constrained-draggable-class1">Drag Five</div>
</div>

<div id="second-boundary", class="boundary2">
<div id="constrained-draggable6" class="constrained-draggable-class2">Drag One</div>
<div id="constrained-draggable7" class="constrained-draggable-class2">Drag Two</div>
<div id="constrained-draggable8" class="constrained-draggable-class2">Drag Three</div>
<div id="constrained-draggable9" class="constrained-draggable-class2">Drag Four</div>
<div id="constrained-draggable10" class="constrained-draggable-class2">Drag Five</div>
</div>

{/macro}

{/Template}
26 changes: 26 additions & 0 deletions test/aria/utils/dragdrop/ScrollIntoViewDragTestTemplateScript.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
Aria.tplScriptDefinition({
$classpath : "test.aria.utils.dragdrop.ScrollIntoViewDragTestTemplateScript",
$dependencies : ["aria.utils.Mouse", "aria.utils.dragdrop.Drag"],
$destructor : function () {
this._dragFive.$dispose();
this._dragTen.$dispose();
},
$prototype : {
$displayReady : function () {
this._dragFive = new aria.utils.dragdrop.Drag("constrained-draggable5", {
cursor : "move",
proxy : {
type : "CloneOverlay"
},
constrainTo : "first-boundary"
});
this._dragTen = new aria.utils.dragdrop.Drag("constrained-draggable10", {
cursor : "move",
proxy : {
type : "CloneOverlay"
},
constrainTo : "second-boundary"
});
}
}
});
Loading

0 comments on commit 2a74c19

Please sign in to comment.