From 3e6ce1831b8eeeaab53e010c9603474cf9ddbbcd Mon Sep 17 00:00:00 2001
From: Perry Govier <govierp@gmail.com>
Date: Fri, 27 Jun 2014 11:27:06 -0500
Subject: [PATCH] fix(popup): if popup is taller than the window, shrink the
 popup body and make it scrollable. Closes #1679

---
 js/angular/service/popup.js             | 11 +++++++++++
 scss/_popup.scss                        |  6 ++++++
 test/html/popup.html                    |  9 +++++++++
 test/unit/angular/service/popup.unit.js | 12 ++++++++++++
 4 files changed, 38 insertions(+)

diff --git a/js/angular/service/popup.js b/js/angular/service/popup.js
index 2b13a82734b..560cdd34c09 100644
--- a/js/angular/service/popup.js
+++ b/js/angular/service/popup.js
@@ -317,6 +317,17 @@ function($ionicTemplateLoader, $ionicBackdrop, $q, $timeout, $rootScope, $docume
           //if hidden while waiting for raf, don't show
           if (!self.isShown) return;
 
+          //if the popup is taller than the window, make the popup body scrollable
+          if(self.element[0].offsetHeight > window.innerHeight - 20){
+            self.element[0].style.height = window.innerHeight - 20+'px';
+            popupBody = self.element[0].querySelectorAll('.popup-body');
+            popupHead = self.element[0].querySelectorAll('.popup-head');
+            popupButtons = self.element[0].querySelectorAll('.popup-buttons');
+            self.element.addClass('popup-tall');
+            newHeight = window.innerHeight - popupHead[0].offsetHeight - popupButtons[0].offsetHeight -20;
+            popupBody[0].style.height =  newHeight + 'px';
+          };
+
           self.element.removeClass('popup-hidden');
           self.element.addClass('popup-showing active');
           ionic.DomUtil.centerElementByMarginTwice(self.element[0]);
diff --git a/scss/_popup.scss b/scss/_popup.scss
index f2ce6fb0509..10a66bab466 100644
--- a/scss/_popup.scss
+++ b/scss/_popup.scss
@@ -36,6 +36,12 @@
     @include animation-timing-function(ease-in-out);
     @include animation-fill-mode(both);
   }
+  &.popup-tall{
+    overflow:hidden;
+    .popup-body{
+      overflow:auto;
+    }
+  }
 }
 
 .popup-head {
diff --git a/test/html/popup.html b/test/html/popup.html
index 615bd4ed3cf..8a524171671 100644
--- a/test/html/popup.html
+++ b/test/html/popup.html
@@ -18,6 +18,7 @@
       <button class="button button-balanced" ng-click="showPrompt()">Prompt</button>
       <button class="button button-balanced" ng-click="showPasswordPrompt()">Password Prompt</button>
       <button class="button button-positive" ng-click="showAlert()">Alert</button>
+      <button class="button button-positive" ng-click="showTallAlert()">Tall Alert</button>
       <div class="list">
         <a class="item" href="#">Item</a>
         <a class="item" href="#">Item</a>
@@ -145,6 +146,14 @@
                 }, 1000);
               });
           };
+          $scope.showTallAlert = function() {
+            $ionicPopup.alert({
+              title: 'Tall Alert',
+              content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
+            }).then(function(res) {
+              console.log('Closed');
+            });
+          };
       });
     </script>
   </body>
diff --git a/test/unit/angular/service/popup.unit.js b/test/unit/angular/service/popup.unit.js
index 09365583673..9d2911d5c9e 100644
--- a/test/unit/angular/service/popup.unit.js
+++ b/test/unit/angular/service/popup.unit.js
@@ -108,6 +108,18 @@ describe('$ionicPopup service', function() {
         expect(popup.element.hasClass('active')).toBe(false);
         ionic.requestAnimationFrame = function(cb) { cb(); };
       });
+      it('should shrink .popup-body height so that the popup is never taller than the window', function() {
+        str = 'All work and no play... ';
+        for(var i=0; i<13;i++){
+          str = str + str;
+        }
+        var popup = TestUtil.unwrapPromise($ionicPopup._createPopup({
+          template: str
+        }));
+        popup.show();
+        var windowIsLarger = popup.element[0].offsetHeight < window.innerHeight;
+        expect(windowIsLarger).toBe(true);
+      });
     });
 
     describe('hide', function() {