Skip to content

Commit

Permalink
feat(popover): support popping from bottom or top of screen
Browse files Browse the repository at this point in the history 
Closes #1986
  • Loading branch information
@ajoslin
ajoslin committed Aug 20, 2014
1 parent 25ee658 commit 5d06c4a
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 13 deletions.
28 changes: 20 additions & 8 deletions js/angular/service/popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@


IonicModule
.factory('$ionicPopover', ['$ionicModal', '$ionicPosition', '$document',
function($ionicModal, $ionicPosition, $document) {
.factory('$ionicPopover', ['$ionicModal', '$ionicPosition', '$document', '$window',
function($ionicModal, $ionicPosition, $document, $window) {

var POPOVER_BODY_PADDING = 6;

Expand All @@ -81,23 +81,35 @@ function($ionicModal, $ionicPosition, $document) {
var targetEle = angular.element(target.target || target);
var buttonOffset = $ionicPosition.offset( targetEle );
var popoverWidth = popoverEle.prop('offsetWidth');
var popoverHeight = popoverEle.prop('offsetHeight');
var bodyWidth = $document[0].body.clientWidth;
var bodyHeight = $document[0].body.clientHeight;
// clientHeight doesn't work on all platforms for body
var bodyHeight = $window.innerHeight;

var popoverCSS = {
top: buttonOffset.top + buttonOffset.height,
left: buttonOffset.left + buttonOffset.width / 2 - popoverWidth / 2
};
var arrowEle = jqLite(popoverEle[0].querySelector('.popover-arrow'));

if(popoverCSS.left < POPOVER_BODY_PADDING) {
if (popoverCSS.left < POPOVER_BODY_PADDING) {
popoverCSS.left = POPOVER_BODY_PADDING;
} else if(popoverCSS.left + popoverWidth + POPOVER_BODY_PADDING > bodyWidth) {
popoverCSS.left = bodyWidth - popoverWidth - POPOVER_BODY_PADDING;
}

var arrowEle = popoverEle[0].querySelector('.popover-arrow');
angular.element(arrowEle).css({
left: (buttonOffset.left - popoverCSS.left) + (buttonOffset.width / 2) - (arrowEle.offsetWidth / 2) + 'px'
// If the popover when popped down stretches past bottom of screen,
// make it pop up
if (buttonOffset.top + buttonOffset.height + popoverHeight > bodyHeight) {
popoverCSS.top = buttonOffset.top - popoverHeight;
popoverEle.removeClass('popover-top').addClass('popover-bottom');
} else {
popoverCSS.top = buttonOffset.top + buttonOffset.height;
popoverEle.removeClass('popover-bottom').addClass('popover-top');
}

arrowEle.css({
left: buttonOffset.left + buttonOffset.width / 2 -
arrowEle.prop('offsetWidth') / 2 - popoverCSS.left + 'px'
});

popoverEle.css({
Expand Down
27 changes: 23 additions & 4 deletions scss/_popover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
z-index: $z-index-popover;
display: block;
margin-left: -$popover-width / 2;
margin-top: 12px;
height: $popover-height;
width: $popover-width;
background-color: $popover-bg-color;
Expand All @@ -40,6 +39,13 @@
.item:last-child {
border-bottom: 0;
}

&.popover-top {
margin-top: 12px;
}
&.popover-bottom {
margin-top: -12px;
}
}


Expand Down Expand Up @@ -71,6 +77,7 @@
.popover {
box-shadow: $popover-box-shadow-ios;
}

.popover,
.popover .bar-header {
border-radius: $popover-border-radius-ios;
Expand All @@ -84,8 +91,6 @@
}
.popover-arrow {
position: absolute;
top: -17px;
left: 43%;
display: block;
width: 30px;
height: 19px;
Expand All @@ -103,6 +108,15 @@
@include rotate(-45deg);
}
}
.popover-top .popover-arrow {
top: -17px;
}
.popover-bottom .popover-arrow {
bottom: -10px;
&:after {
top: -6px;
}
}
}


Expand All @@ -112,13 +126,18 @@
.popover {
background-color: $popover-bg-color-android;
box-shadow: $popover-box-shadow-android;
margin-top: -32px;

.item {
border-color: $popover-bg-color-android;
background-color: $popover-bg-color-android;
color: #4d4d4d;
}
&.popover-top {
margin-top: -32px;
}
&.popover-bottom {
margin-top: 32px;
}
}

.popover-backdrop,
Expand Down
14 changes: 13 additions & 1 deletion test/html/popover.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,24 @@ <h1 class="title">Popover</h1>
Content? Yes, content.
</ion-content>

<ion-footer-bar>
<ion-footer-bar class="bar-subfooter">
<button class="button" ng-click="setPlatform('ios')">iOS</button>
<button class="button" ng-click="setPlatform('android')">Android</button>
<button class="button" ng-click="setPlatform('base')">Base</button>
</ion-footer-bar>

<ion-footer-bar>
<div class="buttons">
<button class="button button-icon ion-android-more" ng-click="openPopover($event)"></button>
</div>
<h1 class="title">Popover</h1>
<div class="buttons">
<button class="button" ng-click="openPopover2($event)">Popover 2</button>
<button class="button" ng-click="openPopover($event)">Popover</button>
<button class="button" ng-click="openPopover($event)">Popover</button>
</div>
</ion-footer-bar>


<script id="popover.html" type="text/ng-template">
<ion-popover-view ng-controller="PopoverCtrl">
Expand Down

1 comment on commit 5d06c4a

@SinoBoeckmann
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this code no in the current 1.2.4-nightly-1917 (master branch) release?
https://github.com/driftyco/ionic/blob/5d06c4aef8bf39703f9f4f32de52dad7749d1de5/js/angular/service/popover.js

Please sign in to comment.