feat(popover): support popping from bottom or top of screen

Closes #1986

Author: ajoslin

Diff for: js/angular/service/popover.js

@@ -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;
 
@@ -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({

Diff for: scss/_popover.scss

@@ -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;
@@ -40,6 +39,13 @@
   .item:last-child {
     border-bottom: 0;
   }
+
+  &.popover-top {
+    margin-top: 12px;
+  }
+  &.popover-bottom {
+    margin-top: -12px;
+  }
 }
 
 
@@ -71,6 +77,7 @@
   .popover {
     box-shadow: $popover-box-shadow-ios;
   }
+
   .popover,
   .popover .bar-header {
     border-radius: $popover-border-radius-ios;
@@ -84,8 +91,6 @@
   }
   .popover-arrow {
     position: absolute;
-    top: -17px;
-    left: 43%;
     display: block;
     width: 30px;
     height: 19px;
@@ -103,6 +108,15 @@
       @include rotate(-45deg);
     }
   }
+  .popover-top .popover-arrow {
+    top: -17px;
+  }
+  .popover-bottom .popover-arrow {
+    bottom: -10px;
+    &:after {
+      top: -6px;
+    }
+  }
 }
 
 
@@ -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,

Diff for: test/html/popover.html

@@ -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">