feat(popover): created popovers

demos/service/popover/index.html

@@ -0,0 +1,76 @@
+---
+name: popover
+component: $ionicPopover
+---
+
+<ion-header-bar class="bar-positive" title="Popover" ng-controller="HeaderCtrl">
+  <div class="buttons">
+    <button class="button button-icon ion-android-more" ng-click="openPopover($event)" id="icon-btn"></button>
+  </div>
+  <h1 class="title">Popover</h1>
+  <div class="buttons">
+    <button class="button" ng-click="openPopover2($event)" id="mid-btn">Popover 2</button>
+    <button class="button" ng-click="openPopover($event)" id="right-btn">Popover</button>
+  </div>
+</ion-header-bar>
+
+<ion-content class="padding has-header" ng-controller="PlatformCtrl">
+  <p>
+    <button class="button" ng-click="setPlatform('ios')" id="ios">iOS</button>
+    <button class="button" ng-click="setPlatform('android')" id="android">Android</button>
+    <button class="button" ng-click="setPlatform('base')" id="base">Base</button>
+  </p>
+</ion-content>
+
+<script id="popover.html" type="text/ng-template">
+  <ion-popover-view>
+    <ion-header-bar>
+      <h1 class="title">Popover Header</h1>
+    </ion-header-bar>
+    <ion-content>
+      <div class="list">
+        <label class="item item-input">
+          <span class="input-label">First Name</span>
+          <input type="text" placeholder="">
+        </label>
+        <label class="item item-input">
+          <span class="input-label">Last Name</span>
+          <input type="text" placeholder="">
+        </label>
+        <label class="item item-input">
+          <span class="input-label">Email</span>
+          <input type="text" placeholder="">
+        </label>
+        <button class="button button-block button-positive">Submit</button>
+      </div>
+    </ion-content>
+  </ion-popover-view>
+</script>
+
+
+<script id="popover2.html" type="text/ng-template">
+  <ion-popover-view>
+    <ion-content>
+      <div class="list">
+        <div class="item">
+          Item 1
+        </div>
+        <div class="item">
+          Item 2
+        </div>
+        <div class="item">
+          Item 3
+        </div>
+        <div class="item">
+          Item 4
+        </div>
+        <div class="item">
+          Item 5
+        </div>
+        <div class="item">
+          Item 6
+        </div>
+      </div>
+    </ion-content>
+  </ion-popover-view>
+</script>

demos/service/popover/index.js

@@ -0,0 +1,33 @@
+---
+name: popover
+component: $ionicPopover
+---
+
+angular.module('popover', ['ionic'])
+
+.controller('HeaderCtrl', function($scope, $ionicPopover) {
+
+  $scope.openPopover = function($event) {
+    $scope.popover.show($event);
+  };
+  $ionicPopover.fromTemplateUrl('popover.html', function(popover) {
+    $scope.popover = popover;
+  });
+
+  $scope.openPopover2 = function($event) {
+    $scope.popover2.show($event);
+  };
+  $ionicPopover.fromTemplateUrl('popover2.html', function(popover) {
+    $scope.popover2 = popover;
+  });
+})
+
+.controller('PlatformCtrl', function($scope, $ionicPopover) {
+
+  $scope.setPlatform = function(p) {
+    document.body.classList.remove('platform-ios');
+    document.body.classList.remove('platform-android');
+    document.body.classList.add('platform-' + p);
+  };
+
+});

demos/service/popover/test.scenario.js

@@ -0,0 +1,41 @@
+---
+name: popover
+component: $ionicPopover
+---
+
+it('should open left side ios popover', function(){
+  element(by.css('#ios')).click();
+  element(by.css('#icon-btn')).click();
+});
+
+it('should close ios popover when clicking backdrop', function(){
+  element(by.css('.popover-backdrop.active')).click();
+});
+
+it('should open middle ios popover', function(){
+  element(by.css('#mid-btn')).click();
+});
+
+it('should open right ios popover', function(){
+  element(by.css('.popover-backdrop.active')).click();
+  element(by.css('#right-btn')).click();
+});
+
+it('should open left side android popover', function(){
+  element(by.css('.popover-backdrop.active')).click();
+  element(by.css('#android')).click();
+  element(by.css('#icon-btn')).click();
+});
+
+it('should close android popover when clicking backdrop', function(){
+  element(by.css('.popover-backdrop.active')).click();
+});
+
+it('should open middle android popover', function(){
+  element(by.css('#mid-btn')).click();
+});
+
+it('should open right android popover', function(){
+  element(by.css('.popover-backdrop.active')).click();
+  element(by.css('#right-btn')).click();
+});

js/angular/directive/popover.js

@@ -0,0 +1,16 @@
+/*
+ * We don't document the ionPopover directive, we instead document
+ * the $ionicPopover service
+ */
+IonicModule
+.directive('ionPopover', [function() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    controller: [function(){}],
+    template: '<div class="popover-backdrop">' +
+                '<div class="popover-wrapper" ng-transclude></div>' +
+              '</div>'
+  };
+}]);

js/angular/directive/popoverView.js

@@ -0,0 +1,10 @@
+IonicModule
+.directive('ionPopoverView', function() {
+  return {
+    restrict: 'E',
+    compile: function(element) {
+      element.append( angular.element('<div class="popover-arrow"></div>') );
+      element.addClass('popover');
+    }
+  };
+});

js/angular/service/modal.js

@@ -112,27 +112,30 @@ function($rootScope, $document, $compile, $timeout, $ionicPlatform, $ionicTempla
      * @description Show this modal instance.
      * @returns {promise} A promise which is resolved when the modal is finished animating in.
      */
-    show: function() {
+    show: function(target) {
       var self = this;
 
       if(self.scope.$$destroyed) {
-        $log.error('Cannot call modal.show() after remove(). Please create a new modal instance using $ionicModal.');
+        $log.error('Cannot call ' +  self.viewType + '.show() after remove(). Please create a new ' +  self.viewType + ' instance.');
         return;
       }
 
       var modalEl = jqLite(self.modalEl);
 
       self.el.classList.remove('hide');
       $timeout(function(){
-        $document[0].body.classList.add('modal-open');
+        $document[0].body.classList.add(self.viewType + '-open');
       }, 400);
 
-
       if(!self.el.parentElement) {
         modalEl.addClass(self.animation);
         $document[0].body.appendChild(self.el);
       }
 
+      if(target && self.positionView) {
+        self.positionView(target, modalEl);
+      }
+
       modalEl.addClass('ng-enter active')
              .removeClass('ng-leave ng-leave-active');
 
@@ -149,7 +152,7 @@ function($rootScope, $document, $compile, $timeout, $ionicPlatform, $ionicTempla
       $timeout(function(){
         modalEl.addClass('ng-enter-active');
         ionic.trigger('resize');
-        self.scope.$parent && self.scope.$parent.$broadcast('modal.shown', self);
+        self.scope.$parent && self.scope.$parent.$broadcast(self.viewType + '.shown', self);
         self.el.classList.add('active');
       }, 20);
 
@@ -183,15 +186,15 @@ function($rootScope, $document, $compile, $timeout, $ionicPlatform, $ionicTempla
 
       self.$el.off('click');
       self._isShown = false;
-      self.scope.$parent && self.scope.$parent.$broadcast('modal.hidden', self);
+      self.scope.$parent && self.scope.$parent.$broadcast(self.viewType + '.hidden', self);
       self._deregisterBackButton && self._deregisterBackButton();
 
       ionic.views.Modal.prototype.hide.call(self);
 
       return $timeout(function(){
-        $document[0].body.classList.remove('modal-open');
+        $document[0].body.classList.remove(self.viewType + '-open');
         self.el.classList.add('hide');
-      }, 500);
+      }, self.hideDelay || 500);
     },
 
     /**
@@ -202,7 +205,7 @@ function($rootScope, $document, $compile, $timeout, $ionicPlatform, $ionicTempla
      */
     remove: function() {
       var self = this;
-      self.scope.$parent && self.scope.$parent.$broadcast('modal.removed', self);
+      self.scope.$parent && self.scope.$parent.$broadcast(self.viewType + '.removed', self);
 
       return self.hide().then(function() {
         self.scope.$destroy();
@@ -224,6 +227,8 @@ function($rootScope, $document, $compile, $timeout, $ionicPlatform, $ionicTempla
     // Create a new scope for the modal
     var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
 
+    options.viewType = options.viewType || 'modal';
+
     extend(scope, {
       $hasHeader: false,
       $hasSubheader: false,
@@ -234,19 +239,19 @@ function($rootScope, $document, $compile, $timeout, $ionicPlatform, $ionicTempla
     });
 
     // Compile the template
-    var element = $compile('<ion-modal>' + templateString + '</ion-modal>')(scope);
+    var element = $compile('<ion-' + options.viewType + '>' + templateString + '</ion-' + options.viewType + '>')(scope);
 
     options.$el = element;
     options.el = element[0];
-    options.modalEl = options.el.querySelector('.modal');
+    options.modalEl = options.el.querySelector('.' + options.viewType);
     var modal = new ModalView(options);
 
     modal.scope = scope;
 
-    // If this wasn't a defined scope, we can assign 'modal' to the isolated scope
+    // If this wasn't a defined scope, we can assign the viewType to the isolated scope
     // we created
     if(!options.scope) {
-      scope.modal = modal;
+      scope[ options.viewType ] = modal;
     }
 
     return modal;