Popup

ionic/components.ts

@@ -23,6 +23,7 @@ export * from 'ionic/components/nav/nav'
 export * from 'ionic/components/nav/nav-controller'
 export * from 'ionic/components/nav/nav-push'
 export * from 'ionic/components/nav-bar/nav-bar'
+export * from 'ionic/components/popup/popup'
 export * from 'ionic/components/slides/slides'
 export * from 'ionic/components/radio/radio'
 export * from 'ionic/components/scroll/scroll'

ionic/components/app/app.ts

@@ -11,6 +11,7 @@ import * as util from '../../util/util';
 // injectables
 import {ActionMenu} from '../action-menu/action-menu';
 import {Modal} from '../modal/modal';
+import {Popup} from '../popup/popup';
 import {FocusHolder} from '../form/focus-holder';
 
 
@@ -205,6 +206,7 @@ export function ionicBootstrap(component, config, router) {
       // TODO: probs need a better way to inject global injectables
       let actionMenu = new ActionMenu(app, config);
       let modal = new Modal(app, config);
+      let popup = new Popup(app, config);
 
       // add injectables that will be available to all child components
       let injectableBindings = [
@@ -212,7 +214,8 @@ export function ionicBootstrap(component, config, router) {
         bind(IonicConfig).toValue(config),
         bind(IonicRouter).toValue(router),
         bind(ActionMenu).toValue(actionMenu),
-        bind(Modal).toValue(modal)
+        bind(Modal).toValue(modal),
+        bind(Popup).toValue(popup)
       ];
 
       bootstrap(component, injectableBindings).then(appRef => {

ionic/components/popup/popup.scss

@@ -0,0 +1,143 @@
+
+// Modals
+// --------------------------
+
+$popup-bg-color:                  #fff !default;
+$popup-backdrop-bg-active:        #000 !default;
+$popup-backdrop-bg-inactive:      rgba(0,0,0,0) !default;
+
+$popup-border-radius:             0px !default;
+$popup-background-color:          rgba(255,255,255,0.9) !default;
+
+$popup-button-border-radius:      2px !default;
+$popup-button-line-height:        20px !default;
+$popup-button-min-height:         45px !default;
+
+
+ion-popup {
+  position: absolute;
+  top: 0;
+  z-index: $z-index-overlay;
+  overflow: hidden;
+  min-height: 100%;
+  width: 100%;
+  background-color: $modal-bg-color;
+
+  transform: translate3d(0px, 100%, 0px);
+  &.show-overlay {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+
+
+/**
+ * Popups
+ * --------------------------------------------------
+ */
+
+ion-popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0,0,0,0);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  z-index: $z-index-overlay;
+
+  // Start hidden
+  visibility: hidden;
+  /*
+  &.popup-showing {
+    visibility: visible;
+  }
+
+  &.popup-hidden .popup {
+    @include animation-name(scaleOut);
+    @include animation-duration($popup-leave-animation-duration);
+    @include animation-timing-function(ease-in-out);
+    @include animation-fill-mode(both);
+  }
+
+  &.active .popup {
+    @include animation-name(superScaleIn);
+    @include animation-duration($popup-enter-animation-duration);
+    @include animation-timing-function(ease-in-out);
+    @include animation-fill-mode(both);
+  }
+  */
+
+  .popup {
+    width: $popup-width;
+    max-width: 100%;
+    max-height: 90%;
+
+    border-radius: $popup-border-radius;
+    background-color: $popup-background-color;
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  input,
+  textarea {
+    width: 100%;
+  }
+}
+
+.popup-head {
+  padding: 15px 10px;
+  border-bottom: 1px solid #eee;
+  text-align: center;
+}
+.popup-title {
+  margin: 0;
+  padding: 0;
+  font-size: 15px;
+}
+.popup-sub-title {
+  margin: 5px 0 0 0;
+  padding: 0;
+  font-weight: normal;
+  font-size: 11px;
+}
+.popup-body {
+  padding: 10px;
+  overflow: auto;
+}
+
+.popup-buttons {
+  display: flex;
+  flex-direction: row;
+  padding: 10px;
+  min-height: $popup-button-min-height + 20;
+
+  .button {
+    flex: 1;
+    display: block;
+    min-height: $popup-button-min-height;
+    border-radius: $popup-button-border-radius;
+    line-height: $popup-button-line-height;
+
+    margin-right: 5px;
+    &:last-child {
+      margin-right: 0px;
+    }
+  }
+}
+
+.popup-open {
+  pointer-events: none;
+
+  &.modal-open .modal {
+    pointer-events: none;
+  }
+
+  .popup-backdrop, .popup {
+    pointer-events: auto;
+  }
+}

ionic/components/popup/popup.ts

@@ -0,0 +1,87 @@
+import {Component, View, Injectable, CSSClass, NgIf, NgFor} from 'angular2/angular2';
+
+import {Overlay} from '../overlay/overlay';
+import {Animation} from '../../animations/animation';
+import * as util from 'ionic/util';
+
+
+@Injectable()
+export class Popup extends Overlay {
+
+  alert(context={}) {
+    if(typeof context === 'string') {
+      context = {
+        text: context,
+        buttons: [
+          { text: 'Ok' }
+        ]
+      }
+    }
+    let defaults = {
+      enterAnimation: 'modal-slide-in',
+      leaveAnimation: 'modal-slide-out',
+    };
+
+    return this.create(OVERLAY_TYPE, AlertType, util.extend(defaults, opts), context);
+  }
+
+  get(handle) {
+    if (handle) {
+      return this.getByHandle(handle, OVERLAY_TYPE);
+    }
+    return this.getByType(OVERLAY_TYPE);
+  }
+
+}
+
+const OVERLAY_TYPE = 'popup';
+
+@Component({
+  selector: 'ion-popup-alert'
+})
+@View({
+  template: '<div class="popup">' +
+    '<div class="popup-head">' +
+      '<h3 class="popup-title" [inner-html]="title"></h3>' +
+      '<h5 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h5>' +
+    '</div>' +
+    '<div class="popup-body">' +
+    '</div>' +
+    '<div class="popup-buttons" *ng-if="buttons.length">' +
+      '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" class="button" [class]="button.type || \'button-default\'" [inner-html]="button.text"></button>' +
+    '</div>' +
+  '</div>' +
+'</div>',
+  directives: [CSSClass, NgIf, NgFor]
+})
+class AlertType {
+  constructor() {
+    console.log('Alert type');
+  }
+}
+
+/**
+ * Animations for modals
+ */
+class ModalSlideIn extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('cubic-bezier(.36,.66,.04,1)')
+      .duration(400)
+      .fromTo('translateY', '100%', '0%');
+  }
+}
+Animation.register('modal-slide-in', ModalSlideIn);
+
+
+class ModalSlideOut extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease-out')
+      .duration(250)
+      .fromTo('translateY', '0%', '100%');
+  }
+}
+Animation.register('modal-slide-out', ModalSlideOut);

ionic/components/popup/test/basic/index.ts

@@ -0,0 +1,18 @@
+import {App, IonicView, IonicApp, IonicConfig, Platform} from 'ionic/ionic';
+import {Popup} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class MyAppCmp {
+
+  constructor(popup: Popup, app: IonicApp, ionicConfig: IonicConfig) {
+    this.popup = popup;
+
+  }
+
+  doAlert() {
+    this.popup.alert('What!?');
+  }
+}

ionic/components/popup/test/basic/main.html

@@ -0,0 +1,6 @@
+<ion-content class="padding">
+  <button primary (click)="doAlert()">Alert</button>
+  <button primary (click)="doPrompt()">Prompt</button>
+  <button primary (click)="doConfirm()">Confirm</button>
+  <button primary (click)="doCustom()">Custom</button>
+</ion-content>