chore(demos): add demos for docs

demos/action-menu/index.ts

@@ -0,0 +1,41 @@
+import {App, ActionMenu} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class IonicApp {
+
+  constructor(actionMenu: ActionMenu) {
+    this.actionMenu = actionMenu;
+  }
+
+  openMenu() {
+
+    this.actionMenu.open({
+      buttons: [
+        { text: 'Share This' },
+        { text: 'Move' }
+      ],
+      destructiveText: 'Delete',
+      titleText: 'Modify your album',
+      cancelText: 'Cancel',
+      cancel: function() {
+        console.log('Canceled');
+      },
+      destructiveButtonClicked: () => {
+        console.log('Destructive clicked');
+      },
+      buttonClicked: function(index) {
+        console.log('Button clicked', index);
+        if(index == 1) { return false; }
+        return true;
+      }
+
+    }).then(actionMenuRef => {
+      this.actionMenuRef = actionMenuRef;
+    });
+
+  }
+
+}

demos/action-menu/main.html

@@ -0,0 +1,3 @@
+<ion-content class="padding">
+  <button (click)="openMenu()">Open Action Menu</button>
+</ion-content>

demos/aside/index.ts

@@ -0,0 +1,36 @@
+import {App, IonicApp, IonicView} from 'ionic/ionic';
+
+
+@IonicView({templateUrl: 'page1.html'})
+class Page1 {}
+
+
+@IonicView({templateUrl: 'page2.html'})
+class Page2 {}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+
+  constructor(app: IonicApp) {
+    this.app = app;
+    this.rootView = Page1;
+
+    this.pages = [
+      { title: 'Page 1', component: Page1 },
+      { title: 'Page 2', component: Page2 },
+    ];
+  }
+
+  openPage(aside, page) {
+    // close the menu when clicking a link from the aside
+    aside.close();
+
+    // Reset the content nav to have just this page
+    // we wouldn't want the back button to show in this scenario
+    let nav = this.app.getComponent('nav');
+    nav.setRoot(page.component);
+  }
+}

demos/aside/main.html

@@ -0,0 +1,25 @@
+<ion-aside #aside [content]="content" id="menu">
+
+  <ion-toolbar secondary>
+    <ion-title>Left Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item *ng-for="#p of pages" (^click)="openPage(aside, p)">
+        {{p.title}}
+      </button>
+
+      <button ion-item aside-toggle="menu" id="e2eCloseMenu">
+        Close Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-aside>
+
+
+<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

demos/aside/page1.html

@@ -0,0 +1,25 @@
+
+<ion-navbar *navbar>
+
+  <button aside-toggle id="e2eHeaderToggleAside">
+    <icon menu></icon>
+  </button>
+
+  <ion-title>
+    Aside
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+
+  <h3>Page 1</h3>
+
+  <p>
+    <button id="e2eContentToggleAside" aside-toggle>Toggle Aside</button>
+  </p>
+
+    <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
+</ion-content>

demos/aside/page2.html

@@ -0,0 +1,22 @@
+
+<ion-navbar *navbar>
+
+  <button aside-toggle id="e2eHeaderToggleAside">
+    <icon menu></icon>
+  </button>
+
+  <ion-title>
+    Aside
+  </ion-title>
+
+</ion-navbar>
+
+<ion-content #content class="padding">
+
+  <h3>Page 2</h3>
+
+  <p>
+    <button aside-toggle id="e2eContentToggleAside">Toggle Aside</button>
+  </p>
+
+</ion-content>

demos/list/index.ts

@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

demos/list/main.html

@@ -0,0 +1,104 @@
+<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
+
+<ion-content class="outer-content">
+
+  <ion-list>
+
+    <ion-header>
+      List Header
+    </ion-header>
+
+    <ion-switch>
+      <icon wifi item-left></icon>
+      Wifi
+    </ion-switch>
+
+    <ion-item>
+      <icon heart item-left></icon>
+      Affection
+      <div class="item-note" item-right>
+        Very Little
+      </div>
+    </ion-item>
+
+    <ion-item>
+      <icon home item-left></icon>
+      Home
+      <div class="item-note" item-right>
+        Where the heart is
+      </div>
+    </ion-item>
+
+  </ion-list>
+
+
+  <ion-list>
+
+    <ion-header>
+      List Header
+    </ion-header>
+
+    <ion-switch checked="true">
+      <icon color-wand item-left></icon>
+      Magic
+    </ion-switch>
+
+    <ion-item>
+      <icon star item-left></icon>
+      Star status
+      <div class="item-note" item-right>
+        Super
+      </div>
+    </ion-item>
+
+  </ion-list>
+
+
+  <ion-list>
+
+    <ion-header>
+      List Header with text that is too long to fit inside the list header
+    </ion-header>
+
+    <ion-item>
+      <icon pizza item-left></icon>
+      Pizza
+      <div class="item-note" item-right>
+        Always
+      </div>
+    </ion-item>
+
+    <ion-item>
+      <icon beer item-left></icon>
+      Beer
+      <div class="item-note" item-right>
+        Yes Plz
+      </div>
+    </ion-item>
+
+    <ion-item>
+      <icon wine item-left></icon>
+      Wine
+      <div class="item-note" item-right>
+        All the time
+      </div>
+    </ion-item>
+
+  </ion-list>
+
+
+  <ion-list>
+
+    <ion-item>
+      <icon chatboxes item-left></icon>
+      New List, no header, Item 1
+    </ion-item>
+
+    <ion-item>
+      <icon chatboxes item-left></icon>
+      New List, no header, Item 2
+    </ion-item>
+
+  </ion-list>
+
+</ion-content>

demos/modal/index.ts

@@ -0,0 +1,194 @@
+import {App, IonicView, IonicApp, IonicConfig, Platform} from 'ionic/ionic';
+import {Modal, ActionMenu, NavController, NavParams, Animation} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class MyAppCmp {
+
+  constructor(modal: Modal, app: IonicApp, ionicConfig: IonicConfig) {
+    this.modal = modal;
+
+    console.log('platforms', Platform.platforms());
+    console.log('mode', ionicConfig.setting('mode'));
+
+    console.log('core', Platform.is('core'))
+    console.log('cordova', Platform.is('cordova'))
+    console.log('mobile', Platform.is('mobile'))
+    console.log('ipad', Platform.is('ipad'))
+    console.log('iphone', Platform.is('iphone'))
+    console.log('phablet', Platform.is('phablet'))
+    console.log('tablet', Platform.is('tablet'))
+    console.log('ios', Platform.is('ios'))
+    console.log('android', Platform.is('android'))
+    console.log('windows phone', Platform.is('windowsphone'))
+
+    console.log('isRTL', app.isRTL())
+
+    Platform.ready().then(() => {
+      console.log('Platform.ready')
+    });
+
+  }
+
+  openModal() {
+    this.modal.open(ContactModal, {
+      enterAnimation: 'my-fade-in',
+      leaveAnimation: 'my-fade-out',
+      handle: 'my-awesome-modal'
+    });
+  }
+}
+
+@IonicView({
+  template: '<ion-nav [root]="rootView"></ion-nav>'
+})
+export class ContactModal {
+  constructor() {
+    console.log('ContactModal constructor')
+    this.rootView = ModalFirstPage;
+  }
+  viewLoaded() {
+    console.log('ContactModal viewLoaded');
+  }
+  viewWillEnter() {
+    console.log('ContactModal viewWillEnter');
+  }
+  viewDidEnter() {
+    console.log('ContactModal viewDidEnter');
+  }
+  viewWillLeave() {
+    console.log('ContactModal viewWillLeave');
+  }
+  viewDidLeave() {
+    console.log('ContactModal viewDidLeave');
+  }
+  viewWillUnload() {
+    console.log('ContactModal viewWillUnload');
+  }
+  viewDidUnload() {
+    console.log('ContactModal viewDidUnload');
+  }
+}
+
+
+@IonicView({
+  template: `
+    <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button id="e2eCloseMenu" (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
+    <ion-content class="padding">
+      <p>
+        <button (click)="push()">Push (Go to 2nd)</button>
+      </p>
+      <p>
+        <button (click)="openActionMenu()">Open Action Menu</button>
+      </p>
+      <p>
+        <button (click)="closeByHandeModal()">Close By Handle</button>
+      </p>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+    </ion-content>
+  `
+})
+export class ModalFirstPage {
+  constructor(
+    nav: NavController,
+    modal: Modal,
+    actionMenu: ActionMenu
+  ) {
+    this.nav = nav;
+    this.modal = modal;
+    this.actionMenu = actionMenu;
+  }
+
+  push() {
+    this.nav.push(ModalSecondPage, { id: 8675309, myData: [1,2,3,4] }, { animation: 'ios' });
+  }
+
+  closeModal() {
+    let modal = this.modal.get();
+    modal.close();
+  }
+
+  closeByHandeModal() {
+    let modal = this.modal.get('my-awesome-modal');
+    modal.close();
+  }
+
+  openActionMenu() {
+    this.actionMenu.open({
+      buttons: [
+        { text: 'Share This' },
+        { text: 'Move' }
+      ],
+      destructiveText: 'Delete',
+      titleText: 'Modify your album',
+      cancelText: 'Cancel',
+      cancel: function() {
+        console.log('Canceled');
+      },
+      destructiveButtonClicked: () => {
+        console.log('Destructive clicked');
+      },
+      buttonClicked: function(index) {
+        console.log('Button clicked', index);
+        if(index == 1) { return false; }
+        return true;
+      }
+    }).then(actionMenuRef => {
+      this.actionMenuRef = actionMenuRef;
+    });
+  }
+}
+
+
+@IonicView({
+  template: `
+    <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
+    <ion-content class="padding">
+      <p>
+        <button (click)="nav.pop()">Pop (Go back to 1st)</button>
+      </p>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+    </ion-content>
+  `
+})
+export class ModalSecondPage {
+  constructor(
+    nav: NavController,
+    params: NavParams
+  ) {
+    this.nav = nav;
+    this.params = params;
+
+    console.log('Second page params:', params);
+  }
+
+}
+
+
+class FadeIn extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(450)
+      .fadeIn();
+  }
+}
+
+Animation.register('my-fade-in', FadeIn);
+
+class FadeOut extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(250)
+      .fadeOut();
+  }
+}
+
+Animation.register('my-fade-out', FadeOut);

demos/modal/main.html

@@ -0,0 +1,3 @@
+<ion-content class="padding">
+  <button id="e2eOpenModal" (click)="openModal()">Open Modal</button>
+</ion-content>

demos/navigation/index.ts

@@ -0,0 +1,130 @@
+import {App, NavController} from 'ionic/ionic';
+import {IonicView, IonicConfig, IonicApp} from 'ionic/ionic';
+import {NavParams, NavController} from 'ionic/ionic';
+
+
+@IonicView({
+  template: '' +
+    '<ion-navbar *navbar primary>' +
+      '<ion-title>{{title}}</ion-title>' +
+      '<ion-nav-items secondary>' +
+        '<button>S1</button>' +
+      '</ion-nav-items>' +
+    '</ion-navbar>' +
+    '<ion-content class="padding">' +
+      '<p>{{title}}</p>' +
+      '<p><button id="from1To2" primary (click)="push()">Push (Go to 2nd)</button></p>' +
+      '<p><button [push-data]="pushData" [nav-push]="pushPage">Push w/ nav-push (Go to 2nd)</button></p>' +
+      '<p><button (click)="setItems()">setItems() (Go to 3rd, no history)</button></p>' +
+      '<icon class="ion-ios-arrow-back"></icon>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+    '</ion-content>'
+})
+class FirstPage {
+  constructor(
+    nav: NavController,
+    app: IonicApp,
+    config: IonicConfig
+  ) {
+    this.nav = nav;
+    this.title = 'First Page';
+
+    this.pushPage = SecondPage;
+    this.pushData = {
+      id: 420
+    }
+  }
+
+  setItems() {
+    let items = [
+      ThirdPage
+    ];
+
+    this.nav.setItems(items);
+  }
+
+  push() {
+    this.nav.push(SecondPage, { id: 8675309, myData: [1,2,3,4] } );
+  }
+}
+
+
+@IonicView({
+  template: `
+    <ion-content class="padding">
+      <h1>Second page</h1>
+      <p>This page does not have a nav bar!</p>
+      <p><button (click)="pop()">Pop (Go back to 1st)</button></p>
+      <p><button id="from2To1" nav-pop>Pop with NavPop (Go back to 1st)</button></p>
+      <p><button id="from2To3" (click)="push()">Push (Go to 3rd)</button></p>
+      <p><button (click)="setItems()">setItems() (Go to 3rd, FirstPage 1st in history)</button></p>
+      <div class="green"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
+    </ion-content>
+  `
+})
+class SecondPage {
+  constructor(
+    nav: NavController,
+    params: NavParams
+  ) {
+    this.nav = nav;
+    this.params = params;
+
+    console.log('Second page params:', params);
+  }
+
+  setItems() {
+    let items = [
+      FirstPage,
+      ThirdPage
+    ];
+
+    this.nav.setItems(items);
+  }
+
+  pop() {
+    this.nav.pop();
+  }
+
+  push() {
+    this.nav.push(ThirdPage);
+  }
+
+}
+
+
+@IonicView({
+  template: `
+    <ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
+    <ion-content class="padding">
+      <p>
+        <button id="from3To2" (click)="pop()">Pop (Go back to 2nd)</button>
+      </p>
+      <div class="yellow"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
+    </ion-content>
+  `
+})
+class ThirdPage {
+  constructor(
+    nav: NavController
+  ) {
+    this.nav = nav
+  }
+
+  pop() {
+    this.nav.pop()
+  }
+
+}
+
+
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  constructor() {
+    this.root = FirstPage;
+  }
+}

demos/slides/index.ts

@@ -0,0 +1,47 @@
+import {App, IonicApp, Http} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class MyApp {
+  constructor(private app: IonicApp) {
+    this.extraOptions = {
+      loop: true
+    };
+
+    this.images = [];
+
+    let tags = "amsterdam";
+    let FLICKR_API_KEY = '504fd7414f6275eb5b657ddbfba80a2c';
+
+    let baseUrl = 'https://api.flickr.com/services/rest/';
+
+    Http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key=' + FLICKR_API_KEY + '&jsoncallback=JSON_CALLBACK&format=json&tags=' + tags, {
+      method: 'jsonp'
+    }).then((val) => {
+      this.images = val.photos.photo.slice(0, 20);
+      setTimeout(() => {
+        this.slider.update();
+      });
+    }, (err) => {
+      alert('Unable to load images');
+      console.error(err);
+    })
+  }
+
+  onInit() {
+    setTimeout(() => {
+      this.slider = this.app.getComponent('slider');
+      console.log('Got slider', this.slider);
+    });
+  }
+
+  getImageUrl(item) {
+    return "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret + "_z.jpg";
+  }
+
+  doRefresh() {
+    console.log('DOREFRESH')
+  }
+}

demos/slides/main.html

@@ -0,0 +1,13 @@
+<ion-slides [options]="extraOptions" id="slider" style="background-color: black" zoom>
+  <ion-slide *ng-for="#image of images">
+    <img data-src="{{getImageUrl(image)}}" slide-lazy>
+  </ion-slide>
+</ion-slides>
+<style>
+
+ion-scroll {
+  width: 100%;
+  height: 100%;
+}
+
+</style>