diff options
| -rw-r--r-- | bower.json | 2 | ||||
| -rw-r--r-- | example/index.html | 5 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/nsPopover.js | 43 |
4 files changed, 40 insertions, 12 deletions
@@ -1,6 +1,6 @@ { "name": "nsPopover", - "version": "0.1.0", + "version": "0.2.0", "homepage": "https://github.com/nohros/nsPopover", "description": "Popover for angularjs library", "authors": [ diff --git a/example/index.html b/example/index.html index 9c7f01a..c9bd47e 100644 --- a/example/index.html +++ b/example/index.html @@ -25,15 +25,14 @@ <article>
<button ns-popover
ns-popover-template="popover"
- ns-popover-trigger="click"
- ns-popover-placement="bottom">
+ ns-popover-trigger="click">
Popover on bottom
</button>
<button ns-popover
ns-popover-template="popover"
ns-popover-trigger="click"
- ns-popover-placement="top">
+ ns-popover-placement="top|left">
Popover on top
</button>
diff --git a/package.json b/package.json index 1ad001a..9a10e21 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "author": "Neylor Ohmaly", "name": "nsPopover", - "version": "0.1.0", + "version": "0.2.0", "homepage": "http://nohros.com/nsPopover", "licenses": { "type": "MIT", diff --git a/src/nsPopover.js b/src/nsPopover.js index d31aad5..d391fac 100644 --- a/src/nsPopover.js +++ b/src/nsPopover.js @@ -36,7 +36,7 @@ plain: attrs.nsPopoverPlain,
trigger: attrs.nsPopoverTrigger || 'click',
container: attrs.nsPopoverContainer,
- placement: attrs.nsPopoverPlacement || 'bottom'
+ placement: attrs.nsPopoverPlacement || 'bottom|left'
};
var timeoutId_ = {};
@@ -47,6 +47,18 @@ }
var $popover = $el('<div></div>');
+ var placement_;
+ var align_;
+
+ var match = options.placement
+ .match(/^(top|bottom|left|right)$|((top|bottom)\|(center|left|right)+)|((left|right)\|(center|top|bottom)+)/);
+
+ if (!match) {
+ throw new Error('"' + options.placement + '" is not a valid placement or has a invalid combination of placements.');
+ }
+
+ placement_ = match[3] || match[1];
+ align_ = match[4] || match[2] || 'center';
$q.when(loadTemplate(options.template, options.plain)).then(function(template) {
template = angular.isString(template) ?
@@ -85,7 +97,7 @@ // position the popover accordingly to the defined placement around the
// |elm|.
- move($popover, options.placement, elm[0].getBoundingClientRect());
+ move($popover, placement_, align_, elm[0].getBoundingClientRect());
// Hide the popover without delay on click events.
$popover.on('click', function() {
@@ -112,20 +124,37 @@ * @param placement {String} The relative position to move the popover - top | bottom | left | right.
* @param rect {ClientRect} The ClientRect of the object to move the popover around.
*/
- function move(popover, placement, rect) {
+ function move(popover, placement, align, rect) {
var popoverRect = popover[0].getBoundingClientRect();
var top, left;
+
+ var positionX = function() {
+ if (align === 'center') {
+ return Math.round(rect.left + rect.width/2 - popoverRect.width/2);
+ } else {
+ return rect[align];
+ }
+ };
+
+ var positionY = function() {
+ if (align === 'center') {
+ return Math.round(rect.top + rect.height/2 - popoverRect.height/2);
+ } else {
+ return rect[align];
+ }
+ };
+
if (placement === 'top') {
top = rect.top - popoverRect.height - 1;
- left = rect.left;
+ left = positionX();
} else if (placement === 'right') {
- top = rect.top;
+ top = positionY();
left = rect.right +1;
} else if (placement === 'bottom') {
top = rect.bottom + 1;
- left = rect.left;
+ left = positionX(align);
} else if (placement === 'left') {
- top = rect.top;
+ top = positionY(align);
left = rect.left - popoverRect.width - 1;
}
popover
|