Skip to content

Commit

Permalink
fix ariatemplates#720 More positioning options for the Touch:Dialog w…
Browse files Browse the repository at this point in the history 
…idget
  • Loading branch information
@marclaval
marclaval committed Sep 17, 2013
1 parent 3a5cd70 commit 0fcc256
Show file tree
Hide file tree
Showing 16 changed files with 740 additions and 278 deletions.
32 changes: 29 additions & 3 deletions src/aria/popups/Beans.js
View file
Expand Up @@ -54,7 +54,7 @@ Aria.beanDefinitions({
$default : null
},
"absolutePosition" : {
$type : "dom:Position",
$type : "AbsolutePositionConfig",
$description : "Takes priority over domReference if defined. The exact coordinates where the popup should be displayed. Anchors and offsets will still be applied",
$default : null
},
Expand Down Expand Up @@ -124,12 +124,12 @@ Aria.beanDefinitions({
},
"animateOut" : {
$type : "animation:AnimationName",
$description : "Animation to apply to the opening popup",
$description : "When the popup is being closed, the reverse of the animation is applied",
$sample : "slide left"
},
"animateIn" : {
$type : "animation:AnimationName",
$description : "Animation to apply to the closing popup",
$description : "When the popup is being opened, the animation is applied",
$sample : "slide left"
}
}
Expand Down Expand Up @@ -179,6 +179,32 @@ Aria.beanDefinitions({
$default : 0
}
}
},
"AbsolutePositionConfig" : {
$type : "json:Object",
$description : "Configuration object to describe the absolute positionning of the popup",
$properties : {
"top" : {
$type : "json:Integer",
$description : "Top value of the AbsolutePosition object",
$default : null
},
"bottom" : {
$type : "json:Integer",
$description : "Bottom value of the AbsolutePosition object",
$default : null
},
"right" : {
$type : "json:Integer",
$description : "Right value of the AbsolutePosition object",
$default : null
},
"left" : {
$type : "json:Integer",
$description : "Left value of the AbsolutePosition object",
$default : null
}
}
}
}
});
65 changes: 48 additions & 17 deletions src/aria/popups/Popup.js
View file
Expand Up @@ -403,6 +403,8 @@ Aria.classDefinition({

var computedStyle = {
'top' : position.top,
'bottom' : position.bottom,
'right' : position.right,
'left' : position.left,
'height' : size.height,
'width' : size.width,
Expand Down Expand Up @@ -499,16 +501,18 @@ Aria.classDefinition({
// Origin has the same position as the reference in the beginning
var top = this.referencePosition.top;
var left = this.referencePosition.left;

var bottom = this.referencePosition.bottom;
var right = this.referencePosition.right;

// Depending on the reference's anchor configuration
// the origin has to be modified
// Anchor at the bottom of the reference, add its height to the top
if (referenceAnchor.indexOf(this.ANCHOR_BOTTOM) != -1) {
if (top && referenceAnchor.indexOf(this.ANCHOR_BOTTOM) != -1) {
top = top + this.referenceSize.height;
}

// Anchor at the right of the reference, add its width to the left
if (referenceAnchor.indexOf(this.ANCHOR_RIGHT) != -1) {
if (left && referenceAnchor.indexOf(this.ANCHOR_RIGHT) != -1) {
left = left + this.referenceSize.width;
}

Expand All @@ -517,34 +521,41 @@ Aria.classDefinition({
// modified as well
// Anchor at the bottom of the popup, substract the height of the
// popup to the top
if (popupAnchor.indexOf(this.ANCHOR_BOTTOM) != -1) {
if (top && popupAnchor.indexOf(this.ANCHOR_BOTTOM) != -1) {
top = top - size.height;
// apply the bottom offset
top = top - offset.bottom;
} else if (popupAnchor.indexOf(this.ANCHOR_TOP) != -1) {
} else if (top && popupAnchor.indexOf(this.ANCHOR_TOP) != -1) {
// apply the top offset
top = top + offset.top;
}

// Anchor at the right of the popup, substract the width of the
// popup to the top
if (popupAnchor.indexOf(this.ANCHOR_RIGHT) != -1) {
// popup to the left
if (left && popupAnchor.indexOf(this.ANCHOR_RIGHT) != -1) {
left = left - size.width;
// apply the right offset
left = left - offset.right;
} else if (popupAnchor.indexOf(this.ANCHOR_LEFT) != -1) {
} else if (left && popupAnchor.indexOf(this.ANCHOR_LEFT) != -1) {
// apply the left offset
left = left + offset.left;
}

// add scroll of document from absolute positioning
var documentScroll = aria.utils.Dom._getDocumentScroll();
left += documentScroll.scrollLeft;
top += documentScroll.scrollTop;
if (left) {
left += documentScroll.scrollLeft;
}
if (top) {
top += documentScroll.scrollTop;
}


var position = {
'top' : top,
'left' : left
'left' : left,
'bottom' : bottom,
'right' : right
};

return position;
Expand All @@ -563,7 +574,7 @@ Aria.classDefinition({
this._startAnimation(this.conf.animateOut, {
from : this.domElement,
type : 1
});
}, true);
} else {
this.domElement.style.cssText = "position:absolute;display:none;overflow:auto;";
}
Expand Down Expand Up @@ -683,14 +694,26 @@ Aria.classDefinition({
this.computedStyle = this._getComputedStyle();
}

this.domElement.style.cssText = ['top:', this.computedStyle.top, 'px;', 'left:', this.computedStyle.left,
'px;', 'z-index:', this.computedStyle.zIndex, ';', 'position:absolute;display:inline-block;'].join('');
var popupPosition = [];
if (this.computedStyle.left != null) {
popupPosition = popupPosition.concat('left:', this.computedStyle.left, 'px;');
}
if (this.computedStyle.right != null) {
popupPosition = popupPosition.concat('right:', this.computedStyle.right, 'px;');
}
if (this.computedStyle.top != null) {
popupPosition = popupPosition.concat('top:', this.computedStyle.top, 'px;');
}
if (this.computedStyle.bottom != null) {
popupPosition = popupPosition.concat('bottom:', this.computedStyle.bottom, 'px;');
}
this.domElement.style.cssText = popupPosition.concat(['z-index:', this.computedStyle.zIndex, ';', 'position:absolute;display:inline-block;']).join('');

if (this.conf.animateIn) {
this._startAnimation(this.conf.animateIn, {
to : this.domElement,
type : 1
});
}, false);
}

if (aria.core.Browser.isIE7 && !this.isOpen) {
Expand Down Expand Up @@ -931,7 +954,9 @@ Aria.classDefinition({

position = {
'top' : position.top,
'left' : position.left
'bottom': position.bottom,
'left' : position.left,
'right': position.right
};

this.reference = null;
Expand Down Expand Up @@ -989,17 +1014,23 @@ Aria.classDefinition({
* reverse"]
* @param {String} animationName
* @param {Object} animationCfg
* @param {Boolean} isOut
*/
_startAnimation : function (animationName, animationCfg) {
_startAnimation : function (animationName, animationCfg, isOut) {

var partsArray = animationName.split(' ');
var animationName = partsArray[0];
animationCfg.reverse = false;

if (partsArray[1] === "right" || partsArray[1] === "out" || partsArray[1] === "reverse") {
animationCfg.reverse = true;
} else if (partsArray[1] === "up" || partsArray[1] === "down") {
animationName += partsArray[1];
}

if (isOut) {
animationCfg.reverse = !animationCfg.reverse;
}

this._animator.start(animationName, animationCfg);
}
Expand Down

0 comments on commit 0fcc256

Please sign in to comment.