From 1f83cde78b3a04a523531ae040fb1942ac4806aa Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 13 Dec 2016 13:56:22 -0500 Subject: [PATCH] chore(demos): update demos to work * chore(demos): WIP refactor gulp demos task to use SystemJS move build files into dist/demos and comment out the AoT demos task for right now. This makes both `gulp demos` and `gulp demos.watch`work again. references #8411 * docs(demos): fix infinite scroll demo * chore(demos): move old demos task to demos.prod update the demos file with shared tasks, include the shared css * docs(demos): fix API demos to use correct styles * chore(demos): remove the main.ts files from each demo * chore(demos): add prod template and constant * chore(demos): remove tsconfig and package from demos * chore(demos): update app.module path to ionic * chore(demos): update app.module path to ionic * chore(demos): update prod task for demos to work with AoT also puts the demo build files into dist/ instead of the src directory * docs(demos): update deploy and docs tasks for new build * docs(scripts): update demos README * chore(demos): fix path for prod build --- demos/package.json | 28 -- demos/src/action-sheet/app.component.ts | 64 ----- demos/src/action-sheet/app.module.ts | 68 ++++- demos/src/action-sheet/index.html | 18 -- demos/src/alert/app.component.ts | 218 ---------------- demos/src/alert/app.module.ts | 220 +++++++++++++++- demos/src/alert/main.ts | 6 - demos/src/button/app.component.ts | 14 - demos/src/button/app.module.ts | 20 +- demos/src/button/index.html | 18 -- demos/src/button/main.ts | 6 - demos/src/checkbox/app.component.ts | 32 --- demos/src/checkbox/app.module.ts | 37 ++- demos/src/checkbox/index.html | 18 -- demos/src/checkbox/main.ts | 6 - demos/src/chip/app.component.ts | 18 -- demos/src/chip/app.module.ts | 23 +- demos/src/chip/index.html | 18 -- demos/src/chip/main.ts | 6 - demos/src/config/app.component.ts | 143 ----------- demos/src/config/app.module.ts | 150 ++++++++++- demos/src/config/index.html | 18 -- demos/src/config/main.ts | 6 - demos/src/datetime/app.component.ts | 70 ----- demos/src/datetime/app.module.ts | 76 +++++- demos/src/datetime/index.html | 18 -- demos/src/datetime/main.ts | 6 - demos/src/events/app.component.ts | 70 ----- demos/src/events/app.module.ts | 75 +++++- demos/src/events/index.html | 18 -- demos/src/events/main.ts | 6 - demos/src/fab/app.component.ts | 30 --- demos/src/fab/app.module.ts | 35 ++- demos/src/fab/main.ts | 6 - demos/src/hide-when/app.component.ts | 14 - demos/src/hide-when/app.module.ts | 18 -- demos/src/hide-when/index.html | 18 -- demos/src/hide-when/main.ts | 6 - demos/src/hide-when/page.html | 61 ----- demos/src/icon/app.component.ts | 14 - demos/src/icon/app.module.ts | 20 +- demos/src/icon/index.html | 18 -- demos/src/icon/main.ts | 6 - demos/src/infinite-scroll/app.component.ts | 90 ------- demos/src/infinite-scroll/app.module.ts | 110 +++++++- demos/src/infinite-scroll/index.html | 18 -- demos/src/infinite-scroll/main.ts | 6 - demos/src/input/app.component.ts | 15 -- demos/src/input/app.module.ts | 21 +- demos/src/input/index.html | 18 -- demos/src/input/main.ts | 6 - demos/src/item-reorder/app.component.ts | 82 ------ demos/src/item-reorder/app.module.ts | 87 ++++++- demos/src/item-reorder/index.html | 18 -- demos/src/item-reorder/main.ts | 6 - demos/src/item-sliding/app.component.ts | 97 ------- demos/src/item-sliding/app.module.ts | 101 +++++++- demos/src/item-sliding/index.html | 18 -- demos/src/item-sliding/main.ts | 6 - demos/src/item/app.component.ts | 15 -- demos/src/item/app.module.ts | 20 +- demos/src/item/index.html | 18 -- demos/src/item/main.ts | 6 - demos/src/label/app.component.ts | 14 - demos/src/label/app.module.ts | 19 +- demos/src/label/index.html | 18 -- demos/src/label/main.ts | 6 - demos/src/list/app.component.ts | 15 -- demos/src/list/app.module.ts | 21 +- demos/src/list/index.html | 18 -- demos/src/list/main.ts | 6 - demos/src/loading/app.component.ts | 130 ---------- demos/src/loading/app.module.ts | 134 +++++++++- demos/src/loading/index.html | 18 -- demos/src/loading/main.ts | 6 - demos/src/loading/style.css | 59 ----- demos/src/menu/app.component.ts | 33 --- demos/src/menu/app.module.ts | 36 ++- demos/src/menu/index.html | 18 -- demos/src/menu/main.ts | 6 - demos/src/modal/app.component.ts | 49 ---- demos/src/modal/app.module.ts | 52 +++- demos/src/modal/index.html | 18 -- demos/src/modal/main.ts | 6 - demos/src/nav-params/app.component.ts | 35 --- demos/src/nav-params/app.module.ts | 40 ++- demos/src/nav-params/index.html | 18 -- demos/src/nav-params/main.ts | 6 - demos/src/navbar/app.component.ts | 19 -- demos/src/navbar/app.module.ts | 24 +- demos/src/navbar/index.html | 18 -- demos/src/navbar/main.ts | 6 - demos/src/navigation/app.component.ts | 44 ---- demos/src/navigation/app.module.ts | 49 +++- demos/src/navigation/index.html | 18 -- demos/src/navigation/main.ts | 6 - demos/src/platform/app.component.ts | 25 -- demos/src/platform/app.module.ts | 29 ++- demos/src/platform/index.html | 18 -- demos/src/platform/main.ts | 6 - demos/src/popover/app.component.ts | 161 ------------ demos/src/popover/app.module.ts | 167 +++++++++++- demos/src/popover/index.html | 18 -- demos/src/popover/main.ts | 6 - demos/src/popover/page.html | 4 +- demos/src/popover/style.css | 122 --------- demos/src/radio/app.component.ts | 16 -- demos/src/radio/app.module.ts | 21 +- demos/src/radio/index.html | 18 -- demos/src/radio/main.ts | 6 - demos/src/range/app.component.ts | 22 -- demos/src/range/app.module.ts | 28 +- demos/src/range/index.html | 18 -- demos/src/range/main.ts | 6 - demos/src/refresher/app.component.ts | 101 -------- demos/src/refresher/app.module.ts | 104 +++++++- demos/src/refresher/index.html | 18 -- demos/src/refresher/main.ts | 6 - demos/src/scroll/app.component.ts | 15 -- demos/src/scroll/app.module.ts | 21 +- demos/src/scroll/index.html | 18 -- demos/src/scroll/main.ts | 6 - demos/src/scrollbar-fix.css | 6 - demos/src/searchbar/app.component.ts | 34 --- demos/src/searchbar/app.module.ts | 40 ++- demos/src/searchbar/index.html | 18 -- demos/src/searchbar/main.ts | 6 - demos/src/segment/app.component.ts | 92 ------- demos/src/segment/app.module.ts | 98 ++++++- demos/src/segment/index.html | 18 -- demos/src/segment/main.ts | 6 - demos/src/select/app.component.ts | 52 ---- demos/src/select/app.module.ts | 58 ++++- demos/src/select/index.html | 18 -- demos/src/select/main.ts | 6 - demos/src/show-when/app.component.ts | 14 - demos/src/show-when/app.module.ts | 20 +- demos/src/show-when/index.html | 18 -- demos/src/show-when/main.ts | 6 - demos/src/slides/app.component.ts | 14 - demos/src/slides/app.module.ts | 20 +- demos/src/slides/index.html | 18 -- demos/src/slides/main.ts | 6 - demos/src/tabs/app.component.ts | 43 ---- demos/src/tabs/app.module.ts | 49 +++- demos/src/tabs/index.html | 18 -- demos/src/tabs/main.ts | 6 - demos/src/tabs/page.html | 16 +- demos/src/tabs/style.css | 14 - demos/src/textarea/app.component.ts | 14 - demos/src/textarea/app.module.ts | 21 +- demos/src/textarea/index.html | 18 -- demos/src/textarea/main.ts | 6 - demos/src/title/app.component.ts | 20 -- demos/src/title/app.module.ts | 26 +- demos/src/title/index.html | 18 -- demos/src/title/main.ts | 6 - demos/src/toast/app.component.ts | 62 ----- demos/src/toast/app.module.ts | 67 ++++- demos/src/toast/index.html | 18 -- demos/src/toast/main.ts | 6 - demos/src/toggle/app.component.ts | 28 -- demos/src/toggle/app.module.ts | 34 ++- demos/src/toggle/index.html | 18 -- demos/src/toggle/main.ts | 6 - demos/src/toolbar/app.component.ts | 17 -- demos/src/toolbar/app.module.ts | 23 +- demos/src/toolbar/index.html | 18 -- demos/src/toolbar/main.ts | 6 - demos/tsconfig.json | 24 -- scripts/README.md | 10 + scripts/demos/demos.shared.css | 241 +++++++++++++++++ scripts/demos/demos.template.dev.html | 57 +++++ .../demos/demos.template.prod.html | 13 +- .../main.ts => scripts/demos/entry.ts | 0 scripts/docs/deploy.sh | 2 +- scripts/gulp/constants.ts | 2 + scripts/gulp/gulpfile.ts | 2 + scripts/gulp/tasks/demos.dev.ts | 187 ++++++++++++++ scripts/gulp/tasks/demos.prod.ts | 242 ++++++++++++++++++ scripts/gulp/tasks/demos.ts | 190 +++----------- scripts/gulp/tasks/docs.ts | 13 +- 182 files changed, 2946 insertions(+), 3626 deletions(-) delete mode 100644 demos/package.json delete mode 100644 demos/src/action-sheet/app.component.ts delete mode 100644 demos/src/action-sheet/index.html delete mode 100644 demos/src/alert/app.component.ts delete mode 100644 demos/src/alert/main.ts delete mode 100644 demos/src/button/app.component.ts delete mode 100644 demos/src/button/index.html delete mode 100644 demos/src/button/main.ts delete mode 100644 demos/src/checkbox/app.component.ts delete mode 100644 demos/src/checkbox/index.html delete mode 100644 demos/src/checkbox/main.ts delete mode 100644 demos/src/chip/app.component.ts delete mode 100644 demos/src/chip/index.html delete mode 100644 demos/src/chip/main.ts delete mode 100644 demos/src/config/app.component.ts delete mode 100644 demos/src/config/index.html delete mode 100644 demos/src/config/main.ts delete mode 100644 demos/src/datetime/app.component.ts delete mode 100644 demos/src/datetime/index.html delete mode 100644 demos/src/datetime/main.ts delete mode 100644 demos/src/events/app.component.ts delete mode 100644 demos/src/events/index.html delete mode 100644 demos/src/events/main.ts delete mode 100644 demos/src/fab/app.component.ts delete mode 100644 demos/src/fab/main.ts delete mode 100644 demos/src/hide-when/app.component.ts delete mode 100644 demos/src/hide-when/app.module.ts delete mode 100644 demos/src/hide-when/index.html delete mode 100644 demos/src/hide-when/main.ts delete mode 100644 demos/src/hide-when/page.html delete mode 100644 demos/src/icon/app.component.ts delete mode 100644 demos/src/icon/index.html delete mode 100644 demos/src/icon/main.ts delete mode 100644 demos/src/infinite-scroll/app.component.ts delete mode 100644 demos/src/infinite-scroll/index.html delete mode 100644 demos/src/infinite-scroll/main.ts delete mode 100644 demos/src/input/app.component.ts delete mode 100644 demos/src/input/index.html delete mode 100644 demos/src/input/main.ts delete mode 100644 demos/src/item-reorder/app.component.ts delete mode 100644 demos/src/item-reorder/index.html delete mode 100644 demos/src/item-reorder/main.ts delete mode 100644 demos/src/item-sliding/app.component.ts delete mode 100644 demos/src/item-sliding/index.html delete mode 100644 demos/src/item-sliding/main.ts delete mode 100644 demos/src/item/app.component.ts delete mode 100644 demos/src/item/index.html delete mode 100644 demos/src/item/main.ts delete mode 100644 demos/src/label/app.component.ts delete mode 100644 demos/src/label/index.html delete mode 100644 demos/src/label/main.ts delete mode 100644 demos/src/list/app.component.ts delete mode 100644 demos/src/list/index.html delete mode 100644 demos/src/list/main.ts delete mode 100644 demos/src/loading/app.component.ts delete mode 100644 demos/src/loading/index.html delete mode 100644 demos/src/loading/main.ts delete mode 100644 demos/src/loading/style.css delete mode 100644 demos/src/menu/app.component.ts delete mode 100644 demos/src/menu/index.html delete mode 100644 demos/src/menu/main.ts delete mode 100644 demos/src/modal/app.component.ts delete mode 100644 demos/src/modal/index.html delete mode 100644 demos/src/modal/main.ts delete mode 100644 demos/src/nav-params/app.component.ts delete mode 100644 demos/src/nav-params/index.html delete mode 100644 demos/src/nav-params/main.ts delete mode 100644 demos/src/navbar/app.component.ts delete mode 100644 demos/src/navbar/index.html delete mode 100644 demos/src/navbar/main.ts delete mode 100644 demos/src/navigation/app.component.ts delete mode 100644 demos/src/navigation/index.html delete mode 100644 demos/src/navigation/main.ts delete mode 100644 demos/src/platform/app.component.ts delete mode 100644 demos/src/platform/index.html delete mode 100644 demos/src/platform/main.ts delete mode 100644 demos/src/popover/app.component.ts delete mode 100644 demos/src/popover/index.html delete mode 100644 demos/src/popover/main.ts delete mode 100644 demos/src/popover/style.css delete mode 100644 demos/src/radio/app.component.ts delete mode 100644 demos/src/radio/index.html delete mode 100644 demos/src/radio/main.ts delete mode 100644 demos/src/range/app.component.ts delete mode 100644 demos/src/range/index.html delete mode 100644 demos/src/range/main.ts delete mode 100644 demos/src/refresher/app.component.ts delete mode 100644 demos/src/refresher/index.html delete mode 100644 demos/src/refresher/main.ts delete mode 100644 demos/src/scroll/app.component.ts delete mode 100644 demos/src/scroll/index.html delete mode 100644 demos/src/scroll/main.ts delete mode 100644 demos/src/scrollbar-fix.css delete mode 100644 demos/src/searchbar/app.component.ts delete mode 100644 demos/src/searchbar/index.html delete mode 100644 demos/src/searchbar/main.ts delete mode 100644 demos/src/segment/app.component.ts delete mode 100644 demos/src/segment/index.html delete mode 100644 demos/src/segment/main.ts delete mode 100644 demos/src/select/app.component.ts delete mode 100644 demos/src/select/index.html delete mode 100644 demos/src/select/main.ts delete mode 100644 demos/src/show-when/app.component.ts delete mode 100644 demos/src/show-when/index.html delete mode 100644 demos/src/show-when/main.ts delete mode 100644 demos/src/slides/app.component.ts delete mode 100644 demos/src/slides/index.html delete mode 100644 demos/src/slides/main.ts delete mode 100644 demos/src/tabs/app.component.ts delete mode 100644 demos/src/tabs/index.html delete mode 100644 demos/src/tabs/main.ts delete mode 100644 demos/src/tabs/style.css delete mode 100644 demos/src/textarea/app.component.ts delete mode 100644 demos/src/textarea/index.html delete mode 100644 demos/src/textarea/main.ts delete mode 100644 demos/src/title/app.component.ts delete mode 100644 demos/src/title/index.html delete mode 100644 demos/src/title/main.ts delete mode 100644 demos/src/toast/app.component.ts delete mode 100644 demos/src/toast/index.html delete mode 100644 demos/src/toast/main.ts delete mode 100644 demos/src/toggle/app.component.ts delete mode 100644 demos/src/toggle/index.html delete mode 100644 demos/src/toggle/main.ts delete mode 100644 demos/src/toolbar/app.component.ts delete mode 100644 demos/src/toolbar/index.html delete mode 100644 demos/src/toolbar/main.ts delete mode 100644 demos/tsconfig.json create mode 100644 scripts/demos/demos.shared.css create mode 100644 scripts/demos/demos.template.dev.html rename demos/src/alert/index.html => scripts/demos/demos.template.prod.html (53%) rename demos/src/action-sheet/main.ts => scripts/demos/entry.ts (100%) create mode 100644 scripts/gulp/tasks/demos.dev.ts create mode 100644 scripts/gulp/tasks/demos.prod.ts diff --git a/demos/package.json b/demos/package.json deleted file mode 100644 index 782ecfed5f..0000000000 --- a/demos/package.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "ionic-demos", - "private": true, - "version": "1.0.0", - "description": "ionic demos", - "author": "Ionic Team (http://ionic.io)", - "license": "MIT", - "dependencies": { - "@angular/common": "2.2.1", - "@angular/compiler": "2.2.1", - "@angular/compiler-cli": "2.2.1", - "@angular/core": "2.2.1", - "@angular/forms": "2.2.1", - "@angular/http": "2.2.1", - "@angular/platform-browser": "2.2.1", - "@angular/platform-browser-dynamic": "2.2.1", - "@angular/platform-server": "2.2.1", - "@ionic/storage": "^1.1.6", - "ionic-angular": "nightly", - "ionic-native": "2.0.3", - "ionicons": "3.0.0", - "rxjs": "5.0.0-beta.12", - "zone.js": "~0.6.26" - }, - "devDependencies": { - "typescript": "^2.0.3" - } -} diff --git a/demos/src/action-sheet/app.component.ts b/demos/src/action-sheet/app.component.ts deleted file mode 100644 index e1f9c5bf15..0000000000 --- a/demos/src/action-sheet/app.component.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { Component } from '@angular/core'; -import { ActionSheetController, Platform } from 'ionic-angular'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - constructor(public alertCtrl: ActionSheetController, public platform: Platform) { } - - present() { - let actionSheet = this.alertCtrl.create({ - title: 'Albums', - buttons: [ - { - text: 'Delete', - role: 'destructive', - icon: !this.platform.is('ios') ? 'trash' : null, - handler: () => { - console.log('Delete clicked'); - } - }, - { - text: 'Share', - icon: !this.platform.is('ios') ? 'share' : null, - handler: () => { - console.log('Share clicked'); - } - }, - { - text: 'Play', - icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null, - handler: () => { - console.log('Play clicked'); - } - }, - { - text: 'Favorite', - icon: !this.platform.is('ios') ? 'heart-outline' : null, - handler: () => { - console.log('Favorite clicked'); - } - }, - { - text: 'Cancel', - role: 'cancel', // will always sort to be on the bottom - icon: !this.platform.is('ios') ? 'close' : null, - handler: () => { - console.log('Cancel clicked'); - } - } - ] - }); - - actionSheet.present(); - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/action-sheet/app.module.ts b/demos/src/action-sheet/app.module.ts index a291ef08d7..e0ecc23020 100644 --- a/demos/src/action-sheet/app.module.ts +++ b/demos/src/action-sheet/app.module.ts @@ -1,6 +1,68 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { ActionSheetController, IonicApp, IonicModule, Platform } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + constructor(public alertCtrl: ActionSheetController, public platform: Platform) { } + + present() { + let actionSheet = this.alertCtrl.create({ + title: 'Albums', + buttons: [ + { + text: 'Delete', + role: 'destructive', + icon: !this.platform.is('ios') ? 'trash' : null, + handler: () => { + console.log('Delete clicked'); + } + }, + { + text: 'Share', + icon: !this.platform.is('ios') ? 'share' : null, + handler: () => { + console.log('Share clicked'); + } + }, + { + text: 'Play', + icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null, + handler: () => { + console.log('Play clicked'); + } + }, + { + text: 'Favorite', + icon: !this.platform.is('ios') ? 'heart-outline' : null, + handler: () => { + console.log('Favorite clicked'); + } + }, + { + text: 'Cancel', + role: 'cancel', // will always sort to be on the bottom + icon: !this.platform.is('ios') ? 'close' : null, + handler: () => { + console.log('Cancel clicked'); + } + } + ] + }); + + actionSheet.present(); + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} @NgModule({ declarations: [ diff --git a/demos/src/action-sheet/index.html b/demos/src/action-sheet/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/action-sheet/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/alert/app.component.ts b/demos/src/alert/app.component.ts deleted file mode 100644 index cb99e07772..0000000000 --- a/demos/src/alert/app.component.ts +++ /dev/null @@ -1,218 +0,0 @@ -import { Component } from '@angular/core'; -import { AlertController } from 'ionic-angular'; - - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - testRadioOpen = false; - testRadioResult: any; - testCheckboxOpen = false; - testCheckboxResult: any; - - constructor(public alertCtrl: AlertController) {} - - doAlert() { - let alert = this.alertCtrl.create({ - title: 'New Friend!', - subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!', - buttons: ['Ok'] - }); - - alert.present(); - } - - doConfirm() { - let alert = this.alertCtrl.create({ - title: 'Use this lightsaber?', - message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?', - buttons: [ - { - text: 'Disagree', - handler: () => { - console.log('Disagree clicked'); - } - }, - { - text: 'Agree', - handler: () => { - console.log('Agree clicked'); - } - } - ] - }); - - alert.present(); - } - - doPrompt() { - let alert = this.alertCtrl.create({ - title: 'Login', - message: 'Enter a name for this new album you\'re so keen on adding', - inputs: [ - { - name: 'title', - placeholder: 'Title' - }, - ], - buttons: [ - { - text: 'Cancel', - handler: (data: any) => { - console.log('Cancel clicked'); - } - }, - { - text: 'Save', - handler: (data: any) => { - console.log('Saved clicked'); - } - } - ] - }); - - alert.present(); - } - - doRadio() { - let alert = this.alertCtrl.create(); - alert.setTitle('Lightsaber color'); - - alert.addInput({ - type: 'radio', - label: 'Blue', - value: 'blue', - checked: true - }); - - alert.addInput({ - type: 'radio', - label: 'Green', - value: 'green' - }); - - alert.addInput({ - type: 'radio', - label: 'Red', - value: 'red' - }); - - alert.addInput({ - type: 'radio', - label: 'Yellow', - value: 'yellow' - }); - - alert.addInput({ - type: 'radio', - label: 'Purple', - value: 'purple' - }); - - alert.addInput({ - type: 'radio', - label: 'White', - value: 'white' - }); - - alert.addInput({ - type: 'radio', - label: 'Black', - value: 'black' - }); - - alert.addButton('Cancel'); - alert.addButton({ - text: 'Ok', - handler: (data: any) => { - console.log('Radio data:', data); - this.testRadioOpen = false; - this.testRadioResult = data; - } - }); - - alert.present(); - } - - doCheckbox() { - let alert = this.alertCtrl.create(); - alert.setTitle('Which planets have you visited?'); - - alert.addInput({ - type: 'checkbox', - label: 'Alderaan', - value: 'value1', - checked: true - }); - - alert.addInput({ - type: 'checkbox', - label: 'Bespin', - value: 'value2' - }); - - alert.addInput({ - type: 'checkbox', - label: 'Coruscant', - value: 'value3' - }); - - alert.addInput({ - type: 'checkbox', - label: 'Endor', - value: 'value4' - }); - - alert.addInput({ - type: 'checkbox', - label: 'Hoth', - value: 'value5' - }); - - alert.addInput({ - type: 'checkbox', - label: 'Jakku', - value: 'value6' - }); - - alert.addInput({ - type: 'checkbox', - label: 'Naboo', - value: 'value6' - }); - - alert.addInput({ - type: 'checkbox', - label: 'Takodana', - value: 'value6' - }); - - alert.addInput({ - type: 'checkbox', - label: 'Tatooine', - value: 'value6' - }); - - alert.addButton('Cancel'); - alert.addButton({ - text: 'Okay', - handler: (data: any) => { - console.log('Checkbox data:', data); - this.testCheckboxOpen = false; - this.testCheckboxResult = data; - } - }); - - alert.present(); - } - -} - - -@Component({ - template: `` -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/alert/app.module.ts b/demos/src/alert/app.module.ts index a291ef08d7..cfa3752f48 100644 --- a/demos/src/alert/app.module.ts +++ b/demos/src/alert/app.module.ts @@ -1,6 +1,220 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { AlertController, IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + testRadioOpen = false; + testRadioResult: any; + testCheckboxOpen = false; + testCheckboxResult: any; + + constructor(public alertCtrl: AlertController) {} + + doAlert() { + let alert = this.alertCtrl.create({ + title: 'New Friend!', + subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!', + buttons: ['Ok'] + }); + + alert.present(); + } + + doConfirm() { + let alert = this.alertCtrl.create({ + title: 'Use this lightsaber?', + message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?', + buttons: [ + { + text: 'Disagree', + handler: () => { + console.log('Disagree clicked'); + } + }, + { + text: 'Agree', + handler: () => { + console.log('Agree clicked'); + } + } + ] + }); + + alert.present(); + } + + doPrompt() { + let alert = this.alertCtrl.create({ + title: 'Login', + message: 'Enter a name for this new album you\'re so keen on adding', + inputs: [ + { + name: 'title', + placeholder: 'Title' + }, + ], + buttons: [ + { + text: 'Cancel', + handler: (data: any) => { + console.log('Cancel clicked'); + } + }, + { + text: 'Save', + handler: (data: any) => { + console.log('Saved clicked'); + } + } + ] + }); + + alert.present(); + } + + doRadio() { + let alert = this.alertCtrl.create(); + alert.setTitle('Lightsaber color'); + + alert.addInput({ + type: 'radio', + label: 'Blue', + value: 'blue', + checked: true + }); + + alert.addInput({ + type: 'radio', + label: 'Green', + value: 'green' + }); + + alert.addInput({ + type: 'radio', + label: 'Red', + value: 'red' + }); + + alert.addInput({ + type: 'radio', + label: 'Yellow', + value: 'yellow' + }); + + alert.addInput({ + type: 'radio', + label: 'Purple', + value: 'purple' + }); + + alert.addInput({ + type: 'radio', + label: 'White', + value: 'white' + }); + + alert.addInput({ + type: 'radio', + label: 'Black', + value: 'black' + }); + + alert.addButton('Cancel'); + alert.addButton({ + text: 'Ok', + handler: (data: any) => { + console.log('Radio data:', data); + this.testRadioOpen = false; + this.testRadioResult = data; + } + }); + + alert.present(); + } + + doCheckbox() { + let alert = this.alertCtrl.create(); + alert.setTitle('Which planets have you visited?'); + + alert.addInput({ + type: 'checkbox', + label: 'Alderaan', + value: 'value1', + checked: true + }); + + alert.addInput({ + type: 'checkbox', + label: 'Bespin', + value: 'value2' + }); + + alert.addInput({ + type: 'checkbox', + label: 'Coruscant', + value: 'value3' + }); + + alert.addInput({ + type: 'checkbox', + label: 'Endor', + value: 'value4' + }); + + alert.addInput({ + type: 'checkbox', + label: 'Hoth', + value: 'value5' + }); + + alert.addInput({ + type: 'checkbox', + label: 'Jakku', + value: 'value6' + }); + + alert.addInput({ + type: 'checkbox', + label: 'Naboo', + value: 'value6' + }); + + alert.addInput({ + type: 'checkbox', + label: 'Takodana', + value: 'value6' + }); + + alert.addInput({ + type: 'checkbox', + label: 'Tatooine', + value: 'value6' + }); + + alert.addButton('Cancel'); + alert.addButton({ + text: 'Okay', + handler: (data: any) => { + console.log('Checkbox data:', data); + this.testCheckboxOpen = false; + this.testCheckboxResult = data; + } + }); + + alert.present(); + } + +} + +@Component({ + template: `` +}) +export class ApiDemoApp { + root = ApiDemoPage; +} @NgModule({ declarations: [ diff --git a/demos/src/alert/main.ts b/demos/src/alert/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/alert/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/button/app.component.ts b/demos/src/button/app.component.ts deleted file mode 100644 index 6dc1507a19..0000000000 --- a/demos/src/button/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} \ No newline at end of file diff --git a/demos/src/button/app.module.ts b/demos/src/button/app.module.ts index a291ef08d7..14d8c783b5 100644 --- a/demos/src/button/app.module.ts +++ b/demos/src/button/app.module.ts @@ -1,6 +1,20 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage {} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/button/index.html b/demos/src/button/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/button/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/button/main.ts b/demos/src/button/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/button/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/checkbox/app.component.ts b/demos/src/checkbox/app.component.ts deleted file mode 100644 index 96d9603df8..0000000000 --- a/demos/src/checkbox/app.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component } from '@angular/core'; - - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - - data = { - jon: true, - daenerys: true, - arya: false, - tyroin: false, - sansa: true, - khal: false, - cersei: true, - stannis: true, - petyr: false, - hodor: true, - catelyn: true, - bronn: false - }; - -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/checkbox/app.module.ts b/demos/src/checkbox/app.module.ts index a291ef08d7..a341634d6a 100644 --- a/demos/src/checkbox/app.module.ts +++ b/demos/src/checkbox/app.module.ts @@ -1,6 +1,37 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + + data = { + jon: true, + daenerys: true, + arya: false, + tyroin: false, + sansa: true, + khal: false, + cersei: true, + stannis: true, + petyr: false, + hodor: true, + catelyn: true, + bronn: false + }; + +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/checkbox/index.html b/demos/src/checkbox/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/checkbox/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/checkbox/main.ts b/demos/src/checkbox/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/checkbox/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/chip/app.component.ts b/demos/src/chip/app.component.ts deleted file mode 100644 index 870f3161d8..0000000000 --- a/demos/src/chip/app.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - delete(chip: Element) { - chip.remove(); - } -} - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} - diff --git a/demos/src/chip/app.module.ts b/demos/src/chip/app.module.ts index a291ef08d7..66e91f9aab 100644 --- a/demos/src/chip/app.module.ts +++ b/demos/src/chip/app.module.ts @@ -1,6 +1,23 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + delete(chip: Element) { + chip.remove(); + } +} + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/chip/index.html b/demos/src/chip/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/chip/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/chip/main.ts b/demos/src/chip/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/chip/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/config/app.component.ts b/demos/src/config/app.component.ts deleted file mode 100644 index 60b5230143..0000000000 --- a/demos/src/config/app.component.ts +++ /dev/null @@ -1,143 +0,0 @@ -import { Component } from '@angular/core'; -import { Platform, NavController } from 'ionic-angular'; - -if (!window.localStorage) { - Object.defineProperty(window, 'localStorage', new (function () { - var aKeys = [], oStorage = {}; - Object.defineProperty(oStorage, 'getItem', { - value: function (sKey) { return sKey ? this[sKey] : null; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, 'key', { - value: function (nKeyId) { return aKeys[nKeyId]; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, 'setItem', { - value: function (sKey, sValue) { - if (!sKey) { return; } - document.cookie = encodeURI(sKey) + '=' + encodeURI(sValue) + '; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/'; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, 'length', { - get: function () { return aKeys.length; }, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, 'removeItem', { - value: function (sKey) { - if (!sKey) { return; } - document.cookie = encodeURI(sKey) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'; - }, - writable: false, - configurable: false, - enumerable: false - }); - this.get = function () { - var iThisIndx; - for (var sKey in oStorage) { - iThisIndx = aKeys.indexOf(sKey); - if (iThisIndx === -1) { - (oStorage as any).setItem(sKey, oStorage[sKey]); - } else { - aKeys.splice(iThisIndx, 1); - } - delete oStorage[sKey]; - } - for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { (oStorage as any).removeItem(aKeys[0]); } - for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { - aCouple = aCouples[nIdx].split(/\s*=\s*/); - if (aCouple.length > 1) { - oStorage[iKey = decodeURI(aCouple[0])] = decodeURI(aCouple[1]); - aKeys.push(iKey); - } - } - return oStorage; - }; - this.configurable = false; - this.enumerable = true; - })()); -} - -var CONFIG_DEMO = null; - -if (window.localStorage.getItem('configDemo')) { - CONFIG_DEMO = JSON.parse(window.localStorage.getItem('configDemo')); -} - -@Component({ - templateUrl: 'tabs.html' -}) -export class TabPage { - tabOne = ApiDemoPage; -} - - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - config: any; - initialConfig: any; - - constructor(public platform: Platform, public navCtrl: NavController) { - - if (window.localStorage.getItem('configDemo') !== null) { - this.config = JSON.parse(window.localStorage.getItem('configDemo')); - } else if (platform.is('ios')) { - this.config = { - 'backButtonIcon': 'ios-arrow-back', - 'iconMode': 'ios', - 'tabsPlacement': 'bottom' - }; - } else if (platform.is('windows')) { - this.config = { - 'backButtonIcon': 'ios-arrow-back', - 'iconMode': 'ios', - 'tabsPlacement': 'top' - }; - } else { - this.config = { - 'backButtonIcon': 'md-arrow-back', - 'iconMode': 'md', - 'tabsPlacement': 'bottom' - }; - } - - this.initialConfig = JSON.parse(JSON.stringify(this.config)); - } - - load() { - window.localStorage.setItem('configDemo', JSON.stringify(this.config)); - window.location.reload(); - } - - push() { - this.navCtrl.push(PushPage); - } -} - -@Component({ - templateUrl: 'push-page.html' -}) -export class PushPage { - constructor(public navCtrl: NavController) {} - - pop() { - this.navCtrl.pop(); - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = TabPage; -} diff --git a/demos/src/config/app.module.ts b/demos/src/config/app.module.ts index a10d8f4df2..17b5b6802c 100644 --- a/demos/src/config/app.module.ts +++ b/demos/src/config/app.module.ts @@ -1,6 +1,148 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage, PushPage, TabPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule, Platform, NavController } from '../'; + +if (!window.localStorage) { + Object.defineProperty(window, 'localStorage', new (function () { + var aKeys = [], oStorage = {}; + Object.defineProperty(oStorage, 'getItem', { + value: function (sKey) { return sKey ? this[sKey] : null; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, 'key', { + value: function (nKeyId) { return aKeys[nKeyId]; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, 'setItem', { + value: function (sKey, sValue) { + if (!sKey) { return; } + document.cookie = encodeURI(sKey) + '=' + encodeURI(sValue) + '; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/'; + }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, 'length', { + get: function () { return aKeys.length; }, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, 'removeItem', { + value: function (sKey) { + if (!sKey) { return; } + document.cookie = encodeURI(sKey) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'; + }, + writable: false, + configurable: false, + enumerable: false + }); + this.get = function () { + var iThisIndx; + for (var sKey in oStorage) { + iThisIndx = aKeys.indexOf(sKey); + if (iThisIndx === -1) { + (oStorage as any).setItem(sKey, oStorage[sKey]); + } else { + aKeys.splice(iThisIndx, 1); + } + delete oStorage[sKey]; + } + for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { (oStorage as any).removeItem(aKeys[0]); } + for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { + aCouple = aCouples[nIdx].split(/\s*=\s*/); + if (aCouple.length > 1) { + oStorage[iKey = decodeURI(aCouple[0])] = decodeURI(aCouple[1]); + aKeys.push(iKey); + } + } + return oStorage; + }; + this.configurable = false; + this.enumerable = true; + })()); +} + +var CONFIG_DEMO = null; + +if (window.localStorage.getItem('configDemo')) { + CONFIG_DEMO = JSON.parse(window.localStorage.getItem('configDemo')); +} + + +@Component({ + templateUrl: 'tabs.html' +}) +export class TabPage { + tabOne = ApiDemoPage; +} + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + config: any; + initialConfig: any; + + constructor(public platform: Platform, public navCtrl: NavController) { + + if (window.localStorage.getItem('configDemo') !== null) { + this.config = JSON.parse(window.localStorage.getItem('configDemo')); + } else if (platform.is('ios')) { + this.config = { + 'backButtonIcon': 'ios-arrow-back', + 'iconMode': 'ios', + 'tabsPlacement': 'bottom' + }; + } else if (platform.is('windows')) { + this.config = { + 'backButtonIcon': 'ios-arrow-back', + 'iconMode': 'ios', + 'tabsPlacement': 'top' + }; + } else { + this.config = { + 'backButtonIcon': 'md-arrow-back', + 'iconMode': 'md', + 'tabsPlacement': 'bottom' + }; + } + + this.initialConfig = JSON.parse(JSON.stringify(this.config)); + } + + load() { + window.localStorage.setItem('configDemo', JSON.stringify(this.config)); + window.location.reload(); + } + + push() { + this.navCtrl.push(PushPage); + } +} + +@Component({ + templateUrl: 'push-page.html' +}) +export class PushPage { + constructor(public navCtrl: NavController) {} + + pop() { + this.navCtrl.pop(); + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = TabPage; +} + @NgModule({ declarations: [ @@ -10,7 +152,7 @@ import { ApiDemoApp, ApiDemoPage, PushPage, TabPage } from './app.component'; TabPage ], imports: [ - IonicModule.forRoot(ApiDemoApp) + IonicModule.forRoot(ApiDemoApp, CONFIG_DEMO) ], bootstrap: [IonicApp], entryComponents: [ diff --git a/demos/src/config/index.html b/demos/src/config/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/config/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/config/main.ts b/demos/src/config/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/config/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/datetime/app.component.ts b/demos/src/datetime/app.component.ts deleted file mode 100644 index 81559c2ca9..0000000000 --- a/demos/src/datetime/app.component.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - wwwReleased = '1991'; - netscapeReleased = '1994-12-15T13:47:20.789'; - operaReleased = '1995-04-15'; - webkitReleased = '1998-11-04T11:06Z'; - firefoxReleased = '2002-09-23T15:03:46.789'; - chromeReleased = '2008-09-02'; - - tokyoTime: string; - parisTime: string; - madisonTime: string; - alertTime = '10:15'; - - operaShortDay = [ - 's\u00f8n', - 'man', - 'tir', - 'ons', - 'tor', - 'fre', - 'l\u00f8r' - ]; - - constructor() { - this.tokyoTime = this.calculateTime('+9'); - this.parisTime = this.calculateTime('+1'); - this.madisonTime = this.calculateTime('-6'); - - // If it is Daylight Savings Time - if (this.dst(new Date())) { - this.parisTime = this.calculateTime('+2'); - this.madisonTime = this.calculateTime('-5'); - } - } - - calculateTime(offset) { - // create Date object for current location - let d = new Date(); - - // create new Date object for different city - // using supplied offset - let nd = new Date(d.getTime() + (3600000 * offset)); - - return nd.toISOString(); - } - - // Determine if the client uses DST - stdTimezoneOffset(today) { - let jan = new Date(today.getFullYear(), 0, 1); - let jul = new Date(today.getFullYear(), 6, 1); - return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset()); - } - - dst(today) { - return today.getTimezoneOffset() < this.stdTimezoneOffset(today); - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/datetime/app.module.ts b/demos/src/datetime/app.module.ts index a291ef08d7..f17ce237dc 100644 --- a/demos/src/datetime/app.module.ts +++ b/demos/src/datetime/app.module.ts @@ -1,6 +1,76 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + wwwReleased = '1991'; + netscapeReleased = '1994-12-15T13:47:20.789'; + operaReleased = '1995-04-15'; + webkitReleased = '1998-11-04T11:06Z'; + firefoxReleased = '2002-09-23T15:03:46.789'; + chromeReleased = '2008-09-02'; + + tokyoTime: string; + parisTime: string; + madisonTime: string; + alertTime = '10:15'; + + operaShortDay = [ + 's\u00f8n', + 'man', + 'tir', + 'ons', + 'tor', + 'fre', + 'l\u00f8r' + ]; + + constructor() { + this.tokyoTime = this.calculateTime('+9'); + this.parisTime = this.calculateTime('+1'); + this.madisonTime = this.calculateTime('-6'); + + // If it is Daylight Savings Time + if (this.dst(new Date())) { + this.parisTime = this.calculateTime('+2'); + this.madisonTime = this.calculateTime('-5'); + } + } + + calculateTime(offset) { + // create Date object for current location + let d = new Date(); + + // create new Date object for different city + // using supplied offset + let nd = new Date(d.getTime() + (3600000 * offset)); + + return nd.toISOString(); + } + + // Determine if the client uses DST + stdTimezoneOffset(today) { + let jan = new Date(today.getFullYear(), 0, 1); + let jul = new Date(today.getFullYear(), 6, 1); + return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset()); + } + + dst(today) { + return today.getTimezoneOffset() < this.stdTimezoneOffset(today); + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/datetime/index.html b/demos/src/datetime/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/datetime/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/datetime/main.ts b/demos/src/datetime/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/datetime/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/events/app.component.ts b/demos/src/events/app.component.ts deleted file mode 100644 index a5e6f76f7d..0000000000 --- a/demos/src/events/app.component.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { Component, ViewChild } from '@angular/core'; -import { Events, Nav } from 'ionic-angular'; - -@Component({ - templateUrl: 'login.html' -}) -export class Login { - user = { - name: 'Administrator', - username: 'admin' - }; - - constructor(private events: Events) {} - - login() { - this.events.publish('user:login'); - } - -} - -@Component({ - templateUrl: 'logout.html' -}) -export class Logout { - constructor(private events: Events) {} - - logout() { - this.events.publish('user:logout'); - } -} - - -@Component({ - templateUrl: 'app.html' -}) -export class ApiDemoApp { - @ViewChild(Nav) nav: Nav; - - root = Login; - loggedIn = false; - - loggedInPages = [ - { title: 'Logout', component: Logout } - ]; - - loggedOutPages = [ - { title: 'Login', component: Login } - ]; - - constructor(private events: Events) { - this.listenToLoginEvents(); - } - - openPage(menu, page) { - // find the nav component and set what the root page should be - // reset the nav to remove previous pages and only have this page - // we wouldn't want the back button to show in this scenario - this.nav.setRoot(page.component); - } - - listenToLoginEvents() { - this.events.subscribe('user:login', () => { - this.loggedIn = true; - }); - - this.events.subscribe('user:logout', () => { - this.loggedIn = false; - }); - } -} diff --git a/demos/src/events/app.module.ts b/demos/src/events/app.module.ts index 3f2a8e0830..35042ad131 100644 --- a/demos/src/events/app.module.ts +++ b/demos/src/events/app.module.ts @@ -1,6 +1,75 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, Login, Logout } from './app.component'; +import { Component, NgModule, ViewChild } from '@angular/core'; +import { Events, IonicApp, IonicModule, Nav } from '../'; + + +@Component({ + templateUrl: 'login.html' +}) +export class Login { + user = { + name: 'Administrator', + username: 'admin' + }; + + constructor(private events: Events) {} + + login() { + this.events.publish('user:login'); + } + +} + +@Component({ + templateUrl: 'logout.html' +}) +export class Logout { + constructor(private events: Events) {} + + logout() { + this.events.publish('user:logout'); + } +} + + +@Component({ + templateUrl: 'app.html' +}) +export class ApiDemoApp { + @ViewChild(Nav) nav: Nav; + + root = Login; + loggedIn = false; + + loggedInPages = [ + { title: 'Logout', component: Logout } + ]; + + loggedOutPages = [ + { title: 'Login', component: Login } + ]; + + constructor(private events: Events) { + this.listenToLoginEvents(); + } + + openPage(menu, page) { + // find the nav component and set what the root page should be + // reset the nav to remove previous pages and only have this page + // we wouldn't want the back button to show in this scenario + this.nav.setRoot(page.component); + } + + listenToLoginEvents() { + this.events.subscribe('user:login', () => { + this.loggedIn = true; + }); + + this.events.subscribe('user:logout', () => { + this.loggedIn = false; + }); + } +} + @NgModule({ declarations: [ diff --git a/demos/src/events/index.html b/demos/src/events/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/events/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/events/main.ts b/demos/src/events/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/events/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/fab/app.component.ts b/demos/src/fab/app.component.ts deleted file mode 100644 index e27eabedf4..0000000000 --- a/demos/src/fab/app.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component } from '@angular/core'; -import { FabContainer } from 'ionic-angular'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - array: number[] = []; - - add() { - this.array.push(1); - } - - clickMainFAB() { - console.log('Clicked open social menu'); - } - - openSocial(network: string, fab: FabContainer) { - console.log('Share in ' + network); - fab.close(); - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/fab/app.module.ts b/demos/src/fab/app.module.ts index 2471429b6c..f7a81004a1 100644 --- a/demos/src/fab/app.module.ts +++ b/demos/src/fab/app.module.ts @@ -1,6 +1,35 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { FabContainer, IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + array: number[] = []; + + add() { + this.array.push(1); + } + + clickMainFAB() { + console.log('Clicked open social menu'); + } + + openSocial(network: string, fab: FabContainer) { + console.log('Share in ' + network); + fab.close(); + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/fab/main.ts b/demos/src/fab/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/fab/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/hide-when/app.component.ts b/demos/src/hide-when/app.component.ts deleted file mode 100644 index 5e716e3d84..0000000000 --- a/demos/src/hide-when/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/hide-when/app.module.ts b/demos/src/hide-when/app.module.ts deleted file mode 100644 index a291ef08d7..0000000000 --- a/demos/src/hide-when/app.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; - -@NgModule({ - declarations: [ - ApiDemoApp, - ApiDemoPage - ], - imports: [ - IonicModule.forRoot(ApiDemoApp) - ], - bootstrap: [IonicApp], - entryComponents: [ - ApiDemoPage - ] -}) -export class AppModule {} diff --git a/demos/src/hide-when/index.html b/demos/src/hide-when/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/hide-when/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/hide-when/main.ts b/demos/src/hide-when/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/hide-when/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/hide-when/page.html b/demos/src/hide-when/page.html deleted file mode 100644 index 70590aa843..0000000000 --- a/demos/src/hide-when/page.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - HideWhen - - - - - - - -
Hide Icon Per Platform
-

In this example we're using the hideWhen directive to decide whether to hide an icon based on the platform.

- - - - - - - - <ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon> - - - - - - - - <ion-icon name="logo-android" hideWhen="ios,windows"></ion-icon> - - - - - - - - <ion-icon name="logo-windows" hideWhen="ios,android"></ion-icon> - - - - - - - diff --git a/demos/src/icon/app.component.ts b/demos/src/icon/app.component.ts deleted file mode 100644 index 5e716e3d84..0000000000 --- a/demos/src/icon/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/icon/app.module.ts b/demos/src/icon/app.module.ts index a291ef08d7..14d8c783b5 100644 --- a/demos/src/icon/app.module.ts +++ b/demos/src/icon/app.module.ts @@ -1,6 +1,20 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage {} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/icon/index.html b/demos/src/icon/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/icon/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/icon/main.ts b/demos/src/icon/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/icon/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/infinite-scroll/app.component.ts b/demos/src/infinite-scroll/app.component.ts deleted file mode 100644 index 7df5efc3bc..0000000000 --- a/demos/src/infinite-scroll/app.component.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { Component, Injectable } from '@angular/core'; -import { InfiniteScroll } from 'ionic-angular'; - -/** - * Mock Data Access Object - **/ -@Injectable() -export class MockProvider { - - getData(): any[] { - // return mock data synchronously - let data = []; - for (var i = 0; i < 20; i++) { - data.push( this._getRandomData() ); - } - return data; - } - - getAsyncData(): Promise { - // async receive mock data - return new Promise(resolve => { - - setTimeout(() => { - resolve(this.getData()); - }, 1000); - - }); - } - - private _getRandomData() { - let i = Math.floor( Math.random() * this._data.length ); - return this._data[i]; - } - - private _data = [ - 'Fast Times at Ridgemont High', - 'Peggy Sue Got Married', - 'Raising Arizona', - 'Moonstruck', - 'Fire Birds', - 'Honeymoon in Vegas', - 'Amos & Andrew', - 'It Could Happen to You', - 'Trapped in Paradise', - 'Leaving Las Vegas', - 'The Rock', - 'Con Air', - 'Face/Off', - 'City of Angels', - 'Gone in Sixty Seconds', - 'The Family Man', - 'Windtalkers', - 'Matchstick Men', - 'National Treasure', - 'Ghost Rider', - 'Grindhouse', - 'Next', - 'Kick-Ass', - 'Drive Angry', - ]; - -} - - -@Component({ - templateUrl: 'page.html', - providers: [MockProvider] -}) -export class ApiDemoApp { - items: string[]; - - constructor(private mockProvider: MockProvider) { - this.items = mockProvider.getData(); - } - - doInfinite(infiniteScroll: InfiniteScroll) { - this.mockProvider.getAsyncData().then((newData) => { - for (var i = 0; i < newData.length; i++) { - this.items.push( newData[i] ); - } - - infiniteScroll.complete(); - - if (this.items.length > 90) { - infiniteScroll.enable(false); - } - }); - } - -} diff --git a/demos/src/infinite-scroll/app.module.ts b/demos/src/infinite-scroll/app.module.ts index 6465038926..ce018bb602 100644 --- a/demos/src/infinite-scroll/app.module.ts +++ b/demos/src/infinite-scroll/app.module.ts @@ -1,17 +1,117 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp } from './app.component'; +import { Component, Injectable, NgModule } from '@angular/core'; +import { InfiniteScroll, IonicApp, IonicModule } from '../'; + + +/** + * Mock Data Access Object + **/ +@Injectable() +export class MockProvider { + + getData(): any[] { + // return mock data synchronously + let data = []; + for (var i = 0; i < 20; i++) { + data.push( this._getRandomData() ); + } + return data; + } + + getAsyncData(): Promise { + // async receive mock data + return new Promise(resolve => { + + setTimeout(() => { + resolve(this.getData()); + }, 1000); + + }); + } + + private _getRandomData() { + let i = Math.floor( Math.random() * this._data.length ); + return this._data[i]; + } + + private _data = [ + 'Fast Times at Ridgemont High', + 'Peggy Sue Got Married', + 'Raising Arizona', + 'Moonstruck', + 'Fire Birds', + 'Honeymoon in Vegas', + 'Amos & Andrew', + 'It Could Happen to You', + 'Trapped in Paradise', + 'Leaving Las Vegas', + 'The Rock', + 'Con Air', + 'Face/Off', + 'City of Angels', + 'Gone in Sixty Seconds', + 'The Family Man', + 'Windtalkers', + 'Matchstick Men', + 'National Treasure', + 'Ghost Rider', + 'Grindhouse', + 'Next', + 'Kick-Ass', + 'Drive Angry', + ]; + +} + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + items: string[]; + + constructor(private mockProvider: MockProvider) { + this.items = mockProvider.getData(); + } + + doInfinite(infiniteScroll: InfiniteScroll) { + this.mockProvider.getAsyncData().then((newData) => { + for (var i = 0; i < newData.length; i++) { + this.items.push( newData[i] ); + } + + infiniteScroll.complete(); + + if (this.items.length > 90) { + infiniteScroll.enable(false); + } + }); + } + +} + +@Component({ + template: '' +}) +export class ApiDemoApp { + rootPage = ApiDemoPage; +} + @NgModule({ declarations: [ - ApiDemoApp + ApiDemoApp, + ApiDemoPage ], imports: [ IonicModule.forRoot(ApiDemoApp) ], bootstrap: [IonicApp], entryComponents: [ - ApiDemoApp + ApiDemoApp, + ApiDemoPage + ], + providers: [ + MockProvider ] }) export class AppModule {} diff --git a/demos/src/infinite-scroll/index.html b/demos/src/infinite-scroll/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/infinite-scroll/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/infinite-scroll/main.ts b/demos/src/infinite-scroll/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/infinite-scroll/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/input/app.component.ts b/demos/src/input/app.component.ts deleted file mode 100644 index 248e96fa2a..0000000000 --- a/demos/src/input/app.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component } from '@angular/core'; - - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/input/app.module.ts b/demos/src/input/app.module.ts index a291ef08d7..6854a76c55 100644 --- a/demos/src/input/app.module.ts +++ b/demos/src/input/app.module.ts @@ -1,6 +1,21 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage {} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + + @NgModule({ declarations: [ diff --git a/demos/src/input/index.html b/demos/src/input/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/input/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/input/main.ts b/demos/src/input/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/input/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/item-reorder/app.component.ts b/demos/src/item-reorder/app.component.ts deleted file mode 100644 index f7a76ec52e..0000000000 --- a/demos/src/item-reorder/app.component.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { Component,ViewEncapsulation } from '@angular/core'; -import { NavController, reorderArray } from 'ionic-angular'; - -@Component({ - templateUrl: 'page.html', - encapsulation: ViewEncapsulation.None -}) -export class ApiDemoPage { - songs: any[]; - editButton: string = 'Edit'; - editing: boolean = false; - - constructor(public navCtrl: NavController) { - this.songs = [ - { - title: 'Everything Beta', - band: 'Phoria', - album: 'Volition' - }, - { - title: 'Hello', - band: 'Adele', - album: '25' - }, - { - title: 'Bohemian Rhapsody', - band: 'Queen', - album: 'A Night at the Opera' - }, - { - title: 'Don\'t Stop Believin\'', - band: 'Journey', - album: 'Escape' - }, - { - title: 'Smells Like Teen Spirit', - band: 'Nirvana', - album: 'Nevermind' - }, - { - title: 'All You Need Is Love', - band: 'The Beatles', - album: 'Magical Mystery Tour' - }, - { - title: 'Hotel California', - band: 'The Eagles', - album: 'Hotel California' - }, - { - title: 'The Hand That Feeds', - band: 'Nine Inch Nails', - album: 'With Teeth' - }, - { - title: 'Who Are You', - band: 'The Who', - album: 'Who Are You' - }]; - } - - toggleEdit() { - this.editing = !this.editing; - if (this.editing) { - this.editButton = 'Done'; - } else { - this.editButton = 'Edit'; - } - } - - reorderData(indexes: any) { - this.songs = reorderArray(this.songs, indexes); - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/item-reorder/app.module.ts b/demos/src/item-reorder/app.module.ts index a291ef08d7..45f7fca68d 100644 --- a/demos/src/item-reorder/app.module.ts +++ b/demos/src/item-reorder/app.module.ts @@ -1,6 +1,87 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule, ViewEncapsulation } from '@angular/core'; +import { IonicApp, IonicModule, NavController, reorderArray } from '../'; + + +@Component({ + templateUrl: 'page.html', + encapsulation: ViewEncapsulation.None +}) +export class ApiDemoPage { + songs: any[]; + editButton: string = 'Edit'; + editing: boolean = false; + + constructor(public navCtrl: NavController) { + this.songs = [ + { + title: 'Everything Beta', + band: 'Phoria', + album: 'Volition' + }, + { + title: 'Hello', + band: 'Adele', + album: '25' + }, + { + title: 'Bohemian Rhapsody', + band: 'Queen', + album: 'A Night at the Opera' + }, + { + title: 'Don\'t Stop Believin\'', + band: 'Journey', + album: 'Escape' + }, + { + title: 'Smells Like Teen Spirit', + band: 'Nirvana', + album: 'Nevermind' + }, + { + title: 'All You Need Is Love', + band: 'The Beatles', + album: 'Magical Mystery Tour' + }, + { + title: 'Hotel California', + band: 'The Eagles', + album: 'Hotel California' + }, + { + title: 'The Hand That Feeds', + band: 'Nine Inch Nails', + album: 'With Teeth' + }, + { + title: 'Who Are You', + band: 'The Who', + album: 'Who Are You' + }]; + } + + toggleEdit() { + this.editing = !this.editing; + if (this.editing) { + this.editButton = 'Done'; + } else { + this.editButton = 'Edit'; + } + } + + reorderData(indexes: any) { + this.songs = reorderArray(this.songs, indexes); + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/item-reorder/index.html b/demos/src/item-reorder/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/item-reorder/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/item-reorder/main.ts b/demos/src/item-reorder/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/item-reorder/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/item-sliding/app.component.ts b/demos/src/item-sliding/app.component.ts deleted file mode 100644 index 3e2b41b179..0000000000 --- a/demos/src/item-sliding/app.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { ItemSliding, ToastController } from 'ionic-angular'; - - -@Component({ - templateUrl: 'page.html', - encapsulation: ViewEncapsulation.None -}) -export class ApiDemoPage { - chats: any[]; - logins: any[]; - - constructor(private toastCtrl: ToastController) { - this.chats = [ - { - img: './avatar-cher.png', - name: 'Cher', - message: 'Ugh. As if.', - time: '9:38 pm' - }, { - img: './avatar-dionne.png', - name: 'Dionne', - message: 'Mr. Hall was way harsh.', - time: '8:59 pm' - }, { - img: './avatar-murray.png', - name: 'Murray', - message: 'Excuse me, "Ms. Dione."', - time: 'Wed' - }]; - - this.logins = [ - { - icon: 'logo-twitter', - name: 'Twitter', - username: 'admin', - }, { - icon: 'logo-github', - name: 'GitHub', - username: 'admin37', - }, { - icon: 'logo-instagram', - name: 'Instagram', - username: 'imanadmin', - }, { - icon: 'logo-codepen', - name: 'Codepen', - username: 'administrator', - }]; - } - - more(item: ItemSliding) { - console.log('More'); - item.close(); - } - - delete(item: ItemSliding) { - console.log('Delete'); - item.close(); - } - - mute(item: ItemSliding) { - console.log('Mute'); - item.close(); - } - - archive(item: ItemSliding) { - this.expandAction(item, 'archiving', 'Chat was archived.'); - } - - download(item: ItemSliding) { - this.expandAction(item, 'downloading', 'Login was downloaded.'); - } - - expandAction(item: ItemSliding, action: string, text: string) { - // TODO item.setElementClass(action, true); - - setTimeout(() => { - const toast = this.toastCtrl.create({ - message: text - }); - toast.present(); - // TODO item.setElementClass(action, false); - item.close(); - - setTimeout(() => toast.dismiss(), 2000); - }, 1500); - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/item-sliding/app.module.ts b/demos/src/item-sliding/app.module.ts index a291ef08d7..167b068af0 100644 --- a/demos/src/item-sliding/app.module.ts +++ b/demos/src/item-sliding/app.module.ts @@ -1,6 +1,101 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule, ViewEncapsulation } from '@angular/core'; +import { IonicApp, IonicModule, ItemSliding, ToastController } from '../'; + + +@Component({ + templateUrl: 'page.html', + encapsulation: ViewEncapsulation.None +}) +export class ApiDemoPage { + chats: any[]; + logins: any[]; + + constructor(private toastCtrl: ToastController) { + this.chats = [ + { + img: './avatar-cher.png', + name: 'Cher', + message: 'Ugh. As if.', + time: '9:38 pm' + }, { + img: './avatar-dionne.png', + name: 'Dionne', + message: 'Mr. Hall was way harsh.', + time: '8:59 pm' + }, { + img: './avatar-murray.png', + name: 'Murray', + message: 'Excuse me, "Ms. Dione."', + time: 'Wed' + }]; + + this.logins = [ + { + icon: 'logo-twitter', + name: 'Twitter', + username: 'admin', + }, { + icon: 'logo-github', + name: 'GitHub', + username: 'admin37', + }, { + icon: 'logo-instagram', + name: 'Instagram', + username: 'imanadmin', + }, { + icon: 'logo-codepen', + name: 'Codepen', + username: 'administrator', + }]; + } + + more(item: ItemSliding) { + console.log('More'); + item.close(); + } + + delete(item: ItemSliding) { + console.log('Delete'); + item.close(); + } + + mute(item: ItemSliding) { + console.log('Mute'); + item.close(); + } + + archive(item: ItemSliding) { + this.expandAction(item, 'archiving', 'Chat was archived.'); + } + + download(item: ItemSliding) { + this.expandAction(item, 'downloading', 'Login was downloaded.'); + } + + expandAction(item: ItemSliding, action: string, text: string) { + // TODO item.setElementClass(action, true); + + setTimeout(() => { + const toast = this.toastCtrl.create({ + message: text + }); + toast.present(); + // TODO item.setElementClass(action, false); + item.close(); + + setTimeout(() => toast.dismiss(), 2000); + }, 1500); + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/item-sliding/index.html b/demos/src/item-sliding/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/item-sliding/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/item-sliding/main.ts b/demos/src/item-sliding/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/item-sliding/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/item/app.component.ts b/demos/src/item/app.component.ts deleted file mode 100644 index 248e96fa2a..0000000000 --- a/demos/src/item/app.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component } from '@angular/core'; - - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/item/app.module.ts b/demos/src/item/app.module.ts index a291ef08d7..14d8c783b5 100644 --- a/demos/src/item/app.module.ts +++ b/demos/src/item/app.module.ts @@ -1,6 +1,20 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage {} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/item/index.html b/demos/src/item/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/item/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/item/main.ts b/demos/src/item/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/item/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/label/app.component.ts b/demos/src/label/app.component.ts deleted file mode 100644 index 5e716e3d84..0000000000 --- a/demos/src/label/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/label/app.module.ts b/demos/src/label/app.module.ts index a291ef08d7..ed42627f38 100644 --- a/demos/src/label/app.module.ts +++ b/demos/src/label/app.module.ts @@ -1,6 +1,19 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage {} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} @NgModule({ declarations: [ diff --git a/demos/src/label/index.html b/demos/src/label/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/label/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/label/main.ts b/demos/src/label/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/label/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/list/app.component.ts b/demos/src/list/app.component.ts deleted file mode 100644 index 76a8f07066..0000000000 --- a/demos/src/list/app.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} - diff --git a/demos/src/list/app.module.ts b/demos/src/list/app.module.ts index a291ef08d7..6854a76c55 100644 --- a/demos/src/list/app.module.ts +++ b/demos/src/list/app.module.ts @@ -1,6 +1,21 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage {} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + + @NgModule({ declarations: [ diff --git a/demos/src/list/index.html b/demos/src/list/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/list/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/list/main.ts b/demos/src/list/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/list/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/loading/app.component.ts b/demos/src/loading/app.component.ts deleted file mode 100644 index 208eb78778..0000000000 --- a/demos/src/loading/app.component.ts +++ /dev/null @@ -1,130 +0,0 @@ -import { Component } from '@angular/core'; -import { LoadingController, NavController } from 'ionic-angular'; - -@Component({ - templateUrl: 'page.html', - styleUrls: ['style.css'] -}) -export class Page1 { - constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {} - - presentLoadingIos() { - let loading = this.loadingCtrl.create({ - spinner: 'ios', - content: 'This is the "ios" spinner. It will dismiss after 3 seconds.', - duration: 3000 - }); - - loading.present(); - } - - presentLoadingDots() { - let loading = this.loadingCtrl.create({ - spinner: 'dots', - content: 'This is the "dots" spinner. It will dismiss after 3 seconds.', - duration: 3000 - }); - - loading.present(); - } - - presentLoadingBubbles() { - let loading = this.loadingCtrl.create({ - spinner: 'bubbles', - content: 'This is the "bubbles" spinner. It will dismiss after 3 seconds.', - duration: 3000 - }); - - loading.present(); - } - - presentLoadingCircles() { - let loading = this.loadingCtrl.create({ - spinner: 'circles', - content: 'This is the "circles" spinner. It will dismiss after 3 seconds.', - duration: 3000 - }); - - loading.present(); - } - - presentLoadingCrescent() { - let loading = this.loadingCtrl.create({ - spinner: 'crescent', - content: 'This is the "crescent" spinner. It will dismiss after 3 seconds.', - duration: 3000 - }); - - loading.present(); - } - - presentLoadingDefault() { - let loading = this.loadingCtrl.create({ - content: 'This is the mode specific spinner. It will dismiss after 3 seconds.', - duration: 3000 - }); - - loading.present(); - } - - presentLoadingCustom() { - let loading = this.loadingCtrl.create({ - spinner: 'hide', - content: ` - -
This is a custom spinner. It will dismiss after 3 seconds.
`, - duration: 3000 - }); - - loading.present(); - } - - presentLoadingText() { - let loading = this.loadingCtrl.create({ - spinner: 'hide', - content: 'This has no spinner, only text. It will dismiss after 3 seconds.', - duration: 3000 - }); - - loading.present(); - } - - goToPage2() { - let loading = this.loadingCtrl.create({ - content: 'This will navigate to the next page and then dismiss after 3 seconds.' - }); - - loading.present(); - - setTimeout(() => { - this.navCtrl.push(Page2); - }, 1000); - - setTimeout(() => { - loading.dismiss(); - }, 4000); - } -} - - -@Component({ - template: ` - - - Page 2 - - - This is another page! - ` -}) -export class Page2 {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = Page1; -} diff --git a/demos/src/loading/app.module.ts b/demos/src/loading/app.module.ts index a5498c5378..a78c3da735 100644 --- a/demos/src/loading/app.module.ts +++ b/demos/src/loading/app.module.ts @@ -1,6 +1,134 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, Page1, Page2 } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule, LoadingController, NavController } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class Page1 { + constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {} + + presentLoadingIos() { + let loading = this.loadingCtrl.create({ + spinner: 'ios', + content: 'This is the "ios" spinner. It will dismiss after 3 seconds.', + duration: 3000 + }); + + loading.present(); + } + + presentLoadingDots() { + let loading = this.loadingCtrl.create({ + spinner: 'dots', + content: 'This is the "dots" spinner. It will dismiss after 3 seconds.', + duration: 3000 + }); + + loading.present(); + } + + presentLoadingBubbles() { + let loading = this.loadingCtrl.create({ + spinner: 'bubbles', + content: 'This is the "bubbles" spinner. It will dismiss after 3 seconds.', + duration: 3000 + }); + + loading.present(); + } + + presentLoadingCircles() { + let loading = this.loadingCtrl.create({ + spinner: 'circles', + content: 'This is the "circles" spinner. It will dismiss after 3 seconds.', + duration: 3000 + }); + + loading.present(); + } + + presentLoadingCrescent() { + let loading = this.loadingCtrl.create({ + spinner: 'crescent', + content: 'This is the "crescent" spinner. It will dismiss after 3 seconds.', + duration: 3000 + }); + + loading.present(); + } + + presentLoadingDefault() { + let loading = this.loadingCtrl.create({ + content: 'This is the mode specific spinner. It will dismiss after 3 seconds.', + duration: 3000 + }); + + loading.present(); + } + + presentLoadingCustom() { + let loading = this.loadingCtrl.create({ + spinner: 'hide', + content: ` + +
This is a custom spinner. It will dismiss after 3 seconds.
`, + duration: 3000 + }); + + loading.present(); + } + + presentLoadingText() { + let loading = this.loadingCtrl.create({ + spinner: 'hide', + content: 'This has no spinner, only text. It will dismiss after 3 seconds.', + duration: 3000 + }); + + loading.present(); + } + + goToPage2() { + let loading = this.loadingCtrl.create({ + content: 'This will navigate to the next page and then dismiss after 3 seconds.' + }); + + loading.present(); + + setTimeout(() => { + this.navCtrl.push(Page2); + }, 1000); + + setTimeout(() => { + loading.dismiss(); + }, 4000); + } +} + + +@Component({ + template: ` + + + Page 2 + + + This is another page! + ` +}) +export class Page2 {} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = Page1; +} + @NgModule({ declarations: [ diff --git a/demos/src/loading/index.html b/demos/src/loading/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/loading/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/loading/main.ts b/demos/src/loading/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/loading/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/loading/style.css b/demos/src/loading/style.css deleted file mode 100644 index 48888095ba..0000000000 --- a/demos/src/loading/style.css +++ /dev/null @@ -1,59 +0,0 @@ -.custom-spinner-container { - position: relative; - display: inline-block; - box-sizing: border-box; - width: 100%; - margin-bottom: 20px; -} - -.custom-spinner-box { - margin: 0 auto; - position: relative; - box-sizing: border-box; - border: 4px solid #000; - width: 60px; - height: 60px; - animation: spin 3s infinite linear; -} - -.custom-spinner-box:before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - box-sizing: border-box; - border: 4px solid #000; - width: 40px; - height: 40px; - animation: pulse 1.5s infinite ease; -} - -.wp .custom-spinner-box, -.wp .custom-spinner-box:before { - border-color: #fff; -} - -@-webkit-keyframes pulse { - 50% { - border-width: 20px; - } -} -@keyframes pulse { - 50% { - border-width: 20px; - } -} - -@-webkit-keyframes spin { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes spin { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} diff --git a/demos/src/menu/app.component.ts b/demos/src/menu/app.component.ts deleted file mode 100644 index 072c93a16e..0000000000 --- a/demos/src/menu/app.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component } from '@angular/core'; - -import { MenuController } from 'ionic-angular'; - - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - activeMenu: string; - - constructor(public menu: MenuController) { - this.menu1Active(); - } - menu1Active() { - this.activeMenu = 'menu1'; - this.menu.enable(true, 'menu1'); - this.menu.enable(false, 'menu2'); - } - menu2Active() { - this.activeMenu = 'menu2'; - this.menu.enable(false, 'menu1'); - this.menu.enable(true, 'menu2'); - } -} - - -@Component({ - templateUrl: 'app.html' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/menu/app.module.ts b/demos/src/menu/app.module.ts index a291ef08d7..baf9b7699b 100644 --- a/demos/src/menu/app.module.ts +++ b/demos/src/menu/app.module.ts @@ -1,6 +1,36 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule, MenuController } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + activeMenu: string; + + constructor(public menu: MenuController) { + this.menu1Active(); + } + menu1Active() { + this.activeMenu = 'menu1'; + this.menu.enable(true, 'menu1'); + this.menu.enable(false, 'menu2'); + } + menu2Active() { + this.activeMenu = 'menu2'; + this.menu.enable(false, 'menu1'); + this.menu.enable(true, 'menu2'); + } +} + + +@Component({ + templateUrl: 'app.html' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/menu/index.html b/demos/src/menu/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/menu/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/menu/main.ts b/demos/src/menu/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/menu/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/modal/app.component.ts b/demos/src/modal/app.component.ts deleted file mode 100644 index e4922a6542..0000000000 --- a/demos/src/modal/app.component.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { Component } from '@angular/core'; - -import { ModalController, NavParams, ViewController } from 'ionic-angular'; - - -@Component({ - templateUrl: 'page.html' -}) -export class ModalFirstPage { - myParam = ''; - - constructor(public modalCtrl: ModalController) {} - - openBasicModal() { - let myModal = this.modalCtrl.create(ModalContentPage); - myModal.present(); - } - openModalWithParams() { - let myModal = this.modalCtrl.create(ModalContentPage, { 'myParam': this.myParam }); - myModal.present(); - } -} - - -@Component({ - templateUrl: 'modal-content.html' -}) -export class ModalContentPage { - myParam: string; - - constructor( - public viewCtrl: ViewController, - params: NavParams - ) { - this.myParam = params.get('myParam'); - } - - dismiss() { - this.viewCtrl.dismiss(); - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ModalFirstPage; -} diff --git a/demos/src/modal/app.module.ts b/demos/src/modal/app.module.ts index 1e873bf41c..3f292db77d 100644 --- a/demos/src/modal/app.module.ts +++ b/demos/src/modal/app.module.ts @@ -1,6 +1,52 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ModalContentPage, ModalFirstPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule, ModalController, NavParams, ViewController } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ModalFirstPage { + myParam = ''; + + constructor(public modalCtrl: ModalController) {} + + openBasicModal() { + let myModal = this.modalCtrl.create(ModalContentPage); + myModal.present(); + } + openModalWithParams() { + let myModal = this.modalCtrl.create(ModalContentPage, { 'myParam': this.myParam }); + myModal.present(); + } +} + + +@Component({ + templateUrl: 'modal-content.html' +}) +export class ModalContentPage { + myParam: string; + + constructor( + public viewCtrl: ViewController, + params: NavParams + ) { + this.myParam = params.get('myParam'); + } + + dismiss() { + this.viewCtrl.dismiss(); + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ModalFirstPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/modal/index.html b/demos/src/modal/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/modal/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/modal/main.ts b/demos/src/modal/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/modal/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/nav-params/app.component.ts b/demos/src/nav-params/app.component.ts deleted file mode 100644 index 0b82fbab9a..0000000000 --- a/demos/src/nav-params/app.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Component } from '@angular/core'; -import { NavController, NavParams } from 'ionic-angular'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - myParam: string = ''; - - constructor(public navCtrl: NavController) {} - - pushParams() { - this.navCtrl.push(PushPage, { 'myParam': this.myParam }); - } -} - -@Component({ - templateUrl: 'push-page.html' -}) -export class PushPage { - myParam: string; - - constructor(params: NavParams) { - this.myParam = params.get('myParam'); - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} - diff --git a/demos/src/nav-params/app.module.ts b/demos/src/nav-params/app.module.ts index 0f0fe6b73a..5590b959ff 100644 --- a/demos/src/nav-params/app.module.ts +++ b/demos/src/nav-params/app.module.ts @@ -1,6 +1,40 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage, PushPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule, NavController, NavParams } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + myParam: string = ''; + + constructor(public navCtrl: NavController) {} + + pushParams() { + this.navCtrl.push(PushPage, { 'myParam': this.myParam }); + } +} + +@Component({ + templateUrl: 'push-page.html' +}) +export class PushPage { + myParam: string; + + constructor(params: NavParams) { + this.myParam = params.get('myParam'); + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + + @NgModule({ declarations: [ diff --git a/demos/src/nav-params/index.html b/demos/src/nav-params/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/nav-params/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/nav-params/main.ts b/demos/src/nav-params/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/nav-params/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/navbar/app.component.ts b/demos/src/navbar/app.component.ts deleted file mode 100644 index eeaf4cf051..0000000000 --- a/demos/src/navbar/app.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component } from '@angular/core'; - -// Use the toolbar demo but pass in the demo name to change the title -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - demo = 'Navbar'; - favorites = 'recent'; - apps = 'free'; -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/navbar/app.module.ts b/demos/src/navbar/app.module.ts index a291ef08d7..35e02be3bf 100644 --- a/demos/src/navbar/app.module.ts +++ b/demos/src/navbar/app.module.ts @@ -1,6 +1,24 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +// Use the toolbar demo but pass in the demo name to change the title +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + demo = 'Navbar'; + favorites = 'recent'; + apps = 'free'; +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} @NgModule({ declarations: [ diff --git a/demos/src/navbar/index.html b/demos/src/navbar/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/navbar/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/navbar/main.ts b/demos/src/navbar/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/navbar/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/navigation/app.component.ts b/demos/src/navigation/app.component.ts deleted file mode 100644 index c5fde1fc9f..0000000000 --- a/demos/src/navigation/app.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Component } from '@angular/core'; -import { NavController } from 'ionic-angular'; - -let pageNum = 2; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - constructor(public navCtrl: NavController) {} - - push() { - this.navCtrl.push(PushPage); - } -} - -@Component({ - templateUrl: 'push-page.html' -}) -export class PushPage { - pageNum = pageNum; - - constructor(public navCtrl: NavController) {} - - push() { - pageNum++; - this.navCtrl.push(PushPage); - } - - pop() { - if (pageNum > 2) { - pageNum--; - } - this.navCtrl.pop(); - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/navigation/app.module.ts b/demos/src/navigation/app.module.ts index 0f0fe6b73a..d43fe4a514 100644 --- a/demos/src/navigation/app.module.ts +++ b/demos/src/navigation/app.module.ts @@ -1,6 +1,49 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage, PushPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule, NavController } from '../'; + + +let pageNum = 2; + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + constructor(public navCtrl: NavController) {} + + push() { + this.navCtrl.push(PushPage); + } +} + +@Component({ + templateUrl: 'push-page.html' +}) +export class PushPage { + pageNum = pageNum; + + constructor(public navCtrl: NavController) {} + + push() { + pageNum++; + this.navCtrl.push(PushPage); + } + + pop() { + if (pageNum > 2) { + pageNum--; + } + this.navCtrl.pop(); + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/navigation/index.html b/demos/src/navigation/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/navigation/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/navigation/main.ts b/demos/src/navigation/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/navigation/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/platform/app.component.ts b/demos/src/platform/app.component.ts deleted file mode 100644 index 814fa29f45..0000000000 --- a/demos/src/platform/app.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component } from '@angular/core'; -import { Platform } from 'ionic-angular'; - - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - isIos: boolean; - isAndroid: boolean; - isWindows: boolean; - - constructor(platform: Platform) { - this.isIos = platform.is('ios'); - this.isAndroid = platform.is('android'); - this.isWindows = platform.is('windows'); - } -} - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/platform/app.module.ts b/demos/src/platform/app.module.ts index a291ef08d7..c265b2d617 100644 --- a/demos/src/platform/app.module.ts +++ b/demos/src/platform/app.module.ts @@ -1,6 +1,29 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule, Platform } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + isIos: boolean; + isAndroid: boolean; + isWindows: boolean; + + constructor(platform: Platform) { + this.isIos = platform.is('ios'); + this.isAndroid = platform.is('android'); + this.isWindows = platform.is('windows'); + } +} + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/platform/index.html b/demos/src/platform/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/platform/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/platform/main.ts b/demos/src/platform/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/platform/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/popover/app.component.ts b/demos/src/popover/app.component.ts deleted file mode 100644 index f401518131..0000000000 --- a/demos/src/popover/app.component.ts +++ /dev/null @@ -1,161 +0,0 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; -import { NavParams, PopoverController } from 'ionic-angular'; - -@Component({ - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - Athelas - - - - Charter - - - - Iowan - - - - Palatino - - - - San Francisco - - - - Seravek - - - - Times New Roman - - - - `, -}) -export class PopoverRadioPage { - background: string; - contentEle: any; - textEle: any; - fontFamily: string; - - colors: any = { - 'white': { - 'bg': 'rgb(255, 255, 255)', - 'fg': 'rgb(0, 0, 0)' - }, - 'tan': { - 'bg': 'rgb(249, 241, 228)', - 'fg': 'rgb(0, 0, 0)' - }, - 'grey': { - 'bg': 'rgb(76, 75, 80)', - 'fg': 'rgb(255, 255, 255)' - }, - 'black': { - 'bg': 'rgb(0, 0, 0)', - 'fg': 'rgb(255, 255, 255)' - }, - }; - - constructor(private navParams: NavParams) { - - } - - ngOnInit() { - if (this.navParams.data) { - this.contentEle = this.navParams.data.contentEle; - this.textEle = this.navParams.data.textEle; - - this.background = this.getColorName(this.contentEle.style.backgroundColor); - this.setFontFamily(); - } - } - - getColorName(background: any) { - let colorName = 'white'; - - if (!background) return 'white'; - - for (var key in this.colors) { - if (this.colors[key].bg === background) { - colorName = key; - } - } - - return colorName; - } - - setFontFamily() { - if (this.textEle.style.fontFamily) { - this.fontFamily = this.textEle.style.fontFamily.replace(/'/g, ''); - } - } - - changeBackground(color: any) { - this.background = color; - this.contentEle.style.backgroundColor = this.colors[color].bg; - this.textEle.style.color = this.colors[color].fg; - } - - changeFontSize(direction: string) { - this.textEle.style.fontSize = direction; - } - - changeFontFamily() { - if (this.fontFamily) this.textEle.style.fontFamily = this.fontFamily; - } -} - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef; - @ViewChild('popoverText', {read: ElementRef}) text: ElementRef; - - constructor(private popoverCtrl: PopoverController) {} - - presentRadioPopover(ev: UIEvent) { - let popover = this.popoverCtrl.create(PopoverRadioPage, { - contentEle: this.content.nativeElement, - textEle: this.text.nativeElement - }); - - popover.present({ - ev: ev - }); - } - -} - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/popover/app.module.ts b/demos/src/popover/app.module.ts index 8ba00c8bef..ce8dd3dea3 100644 --- a/demos/src/popover/app.module.ts +++ b/demos/src/popover/app.module.ts @@ -1,6 +1,167 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage, PopoverRadioPage } from './app.component'; +import { Component, ElementRef, NgModule, ViewChild } from '@angular/core'; +import { IonicApp, IonicModule, NavParams, PopoverController } from '../'; + + +@Component({ + selector: 'page-api-radio-popover', + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + Athelas + + + + Charter + + + + Iowan + + + + Palatino + + + + San Francisco + + + + Seravek + + + + Times New Roman + + + + `, +}) +export class PopoverRadioPage { + background: string; + contentEle: any; + textEle: any; + fontFamily: string; + + colors: any = { + 'white': { + 'bg': 'rgb(255, 255, 255)', + 'fg': 'rgb(0, 0, 0)' + }, + 'tan': { + 'bg': 'rgb(249, 241, 228)', + 'fg': 'rgb(0, 0, 0)' + }, + 'grey': { + 'bg': 'rgb(76, 75, 80)', + 'fg': 'rgb(255, 255, 255)' + }, + 'black': { + 'bg': 'rgb(0, 0, 0)', + 'fg': 'rgb(255, 255, 255)' + }, + }; + + constructor(private navParams: NavParams) { + + } + + ngOnInit() { + if (this.navParams.data) { + this.contentEle = this.navParams.data.contentEle; + this.textEle = this.navParams.data.textEle; + + this.background = this.getColorName(this.contentEle.style.backgroundColor); + this.setFontFamily(); + } + } + + getColorName(background: any) { + let colorName = 'white'; + + if (!background) return 'white'; + + for (var key in this.colors) { + if (this.colors[key].bg === background) { + colorName = key; + } + } + + return colorName; + } + + setFontFamily() { + if (this.textEle.style.fontFamily) { + this.fontFamily = this.textEle.style.fontFamily.replace(/'/g, ''); + } + } + + changeBackground(color: any) { + this.background = color; + this.contentEle.style.backgroundColor = this.colors[color].bg; + this.textEle.style.color = this.colors[color].fg; + } + + changeFontSize(direction: string) { + this.textEle.style.fontSize = direction; + } + + changeFontFamily() { + if (this.fontFamily) this.textEle.style.fontFamily = this.fontFamily; + } +} + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef; + @ViewChild('popoverText', {read: ElementRef}) text: ElementRef; + + constructor(private popoverCtrl: PopoverController) {} + + presentRadioPopover(ev: UIEvent) { + let popover = this.popoverCtrl.create(PopoverRadioPage, { + contentEle: this.content.nativeElement, + textEle: this.text.nativeElement + }); + + popover.present({ + ev: ev + }); + } + +} + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/popover/index.html b/demos/src/popover/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/popover/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/popover/main.ts b/demos/src/popover/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/popover/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/popover/page.html b/demos/src/popover/page.html index 9cfb39d4c2..fc628d80f6 100644 --- a/demos/src/popover/page.html +++ b/demos/src/popover/page.html @@ -3,7 +3,7 @@ Popover - @@ -14,7 +14,7 @@ -
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum in purus mollis dictum eget vitae purus. Nulla ultrices est odio, a maximus velit pretium ac. Donec vel elementum mi. Proin elementum pulvinar neque, in lacinia nibh tempus auctor. Nam sapien velit, commodo ac nibh a, maximus ullamcorper nunc. Integer luctus tortor dignissim, dictum neque at, scelerisque purus. Vivamus nec erat vel magna posuere euismod. Sed ac augue eu tellus tincidunt fermentum eget sit amet nunc. Donec sit amet mi libero. Cras nunc arcu, ultrices nec sapien eu, convallis posuere libero. Pellentesque vulputate lacus eros, at lobortis lorem egestas et. Vestibulum tempus quam in efficitur lobortis. Maecenas consectetur consequat sem pharetra aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Mauris ac ligula elit. Nulla pulvinar eget leo ut aliquet. Praesent sit amet luctus quam. Nam fringilla iaculis mi, ut maximus mauris molestie feugiat. Curabitur nec scelerisque elit. Nunc eu odio facilisis, tempor enim eget, venenatis sem. Sed vitae lorem vehicula, auctor orci ultrices, finibus mauris. Donec vitae pulvinar diam. Nulla luctus congue quam, sed lacinia arcu dictum a.
diff --git a/demos/src/popover/style.css b/demos/src/popover/style.css deleted file mode 100644 index 675528b09e..0000000000 --- a/demos/src/popover/style.css +++ /dev/null @@ -1,122 +0,0 @@ -.text-to-change div { - margin: 10px auto; -} - -ion-row, -ion-col { - padding: 0; -} - -.text-button { - padding-left: 0; - text-align: center; - min-height: 20px; - line-height: 18px; -} - -.text-button .item-inner { - padding-right: 0; -} - -.text-smaller { - font-size: 12px; -} - -.ios .text-smaller { - border-right: 1px solid #c8c7cc; -} - -.md .text-smaller { - border-right: 1px solid #dedede; -} - -.text-larger { - font-size: 16px; -} - -.row-dots { - text-align: center; -} - -.ios .row-dots { - border-bottom: 1px solid #c8c7cc; -} - -.md .row-dots { - border-bottom: 1px solid #dedede; -} - -.ios .dot { - border: 1px solid #c8c7cc; -} - -.md .dot { - border: 1px solid #dedede; -} - -.wp .dot { - border: 2px solid #ccc; -} - -.hairlines .text-smaller, -.hairlines .row-dots, -.hairlines .dot { - border-width: 0.55px; -} - -.row-dots .dot { - height: 30px; - width: 30px; - border-radius: 50%; - margin: 10px auto; - position: relative; -} - -.dot-white { - background-color: rgb(255,255,255); -} - -.dot-tan { - background-color: rgb(249,241,228); -} - -.dot-grey { - background-color: rgb(76,75,80); -} - -.dot-black { - background-color: rgb(0,0,0); -} - -.dot.selected { - border-width: 2px; - border-color: #327eff; -} - -.text-athelas { - font-family: "Athelas"; -} - -.text-charter { - font-family: "Charter"; -} - -.text-iowan { - font-family: "Iowan"; -} - -.text-palatino { - font-family: "Palatino"; -} - -.text-san-francisco { - font-family: "San Francisco"; -} - -.text-seravek { - font-family: "Seravek"; -} - -.text-times-new-roman { - font-family: "Times New Roman"; -} diff --git a/demos/src/radio/app.component.ts b/demos/src/radio/app.component.ts deleted file mode 100644 index 7d68954d34..0000000000 --- a/demos/src/radio/app.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component } from '@angular/core'; - - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - isDisabled = true; -} - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/radio/app.module.ts b/demos/src/radio/app.module.ts index a291ef08d7..6e8958fffb 100644 --- a/demos/src/radio/app.module.ts +++ b/demos/src/radio/app.module.ts @@ -1,6 +1,21 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + isDisabled = true; +} + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/radio/index.html b/demos/src/radio/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/radio/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/radio/main.ts b/demos/src/radio/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/radio/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/range/app.component.ts b/demos/src/range/app.component.ts deleted file mode 100644 index 2a21c4269a..0000000000 --- a/demos/src/range/app.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - brightness: number = 20; - saturation: number = 0; - warmth: number = 1300; - structure: any = {lower: 33, upper: 60}; - - onChange(ev) { - console.log('Changed', ev); - } -} - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/range/app.module.ts b/demos/src/range/app.module.ts index a291ef08d7..14ad535a98 100644 --- a/demos/src/range/app.module.ts +++ b/demos/src/range/app.module.ts @@ -1,6 +1,28 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + brightness: number = 20; + saturation: number = 0; + warmth: number = 1300; + structure: any = {lower: 33, upper: 60}; + + onChange(ev) { + console.log('Changed', ev); + } +} + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/range/index.html b/demos/src/range/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/range/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/range/main.ts b/demos/src/range/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/range/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/refresher/app.component.ts b/demos/src/refresher/app.component.ts deleted file mode 100644 index 4aab873f70..0000000000 --- a/demos/src/refresher/app.component.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { Component, Injectable } from '@angular/core'; - -import { Refresher } from 'ionic-angular'; - - -/** - * Mock Data Access Object - **/ -@Injectable() -export class MockProvider { - - getData(): any[] { - // return mock data synchronously - let data = []; - for (var i = 0; i < 3; i++) { - data.push( this._getRandomData() ); - } - return data; - } - - getAsyncData(): Promise { - // async receive mock data - return new Promise(resolve => { - - setTimeout(() => { - resolve(this.getData()); - }, 1000); - - }); - } - - private _getRandomData() { - let i = Math.floor( Math.random() * this._data.length ); - return this._data[i]; - } - - private _data = [ - 'Fast Times at Ridgemont High', - 'Peggy Sue Got Married', - 'Raising Arizona', - 'Moonstruck', - 'Fire Birds', - 'Honeymoon in Vegas', - 'Amos & Andrew', - 'It Could Happen to You', - 'Trapped in Paradise', - 'Leaving Las Vegas', - 'The Rock', - 'Con Air', - 'Face/Off', - 'City of Angels', - 'Gone in Sixty Seconds', - 'The Family Man', - 'Windtalkers', - 'Matchstick Men', - 'National Treasure', - 'Ghost Rider', - 'Grindhouse', - 'Next', - 'Kick-Ass', - 'Drive Angry', - ]; - -} - - -@Component({ - templateUrl: 'page.html', - providers: [MockProvider] -}) -export class ApiDemoPage { - items: string[]; - - constructor(private mockProvider: MockProvider) { - this.items = mockProvider.getData(); - } - - doRefresh(refresher: Refresher) { - console.log('DOREFRESH', refresher); - - this.mockProvider.getAsyncData().then((newData) => { - for (var i = 0; i < newData.length; i++) { - this.items.unshift( newData[i] ); - } - - refresher.complete(); - }); - } - - doPulling(refresher: Refresher) { - console.log('DOPULLING', refresher.progress); - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/refresher/app.module.ts b/demos/src/refresher/app.module.ts index a291ef08d7..6e83d52691 100644 --- a/demos/src/refresher/app.module.ts +++ b/demos/src/refresher/app.module.ts @@ -1,6 +1,104 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, Injectable, NgModule } from '@angular/core'; +import { IonicApp, IonicModule, Refresher } from '../'; + + +/** + * Mock Data Access Object + **/ +@Injectable() +export class MockProvider { + + getData(): any[] { + // return mock data synchronously + let data = []; + for (var i = 0; i < 3; i++) { + data.push( this._getRandomData() ); + } + return data; + } + + getAsyncData(): Promise { + // async receive mock data + return new Promise(resolve => { + + setTimeout(() => { + resolve(this.getData()); + }, 1000); + + }); + } + + private _getRandomData() { + let i = Math.floor( Math.random() * this._data.length ); + return this._data[i]; + } + + private _data = [ + 'Fast Times at Ridgemont High', + 'Peggy Sue Got Married', + 'Raising Arizona', + 'Moonstruck', + 'Fire Birds', + 'Honeymoon in Vegas', + 'Amos & Andrew', + 'It Could Happen to You', + 'Trapped in Paradise', + 'Leaving Las Vegas', + 'The Rock', + 'Con Air', + 'Face/Off', + 'City of Angels', + 'Gone in Sixty Seconds', + 'The Family Man', + 'Windtalkers', + 'Matchstick Men', + 'National Treasure', + 'Ghost Rider', + 'Grindhouse', + 'Next', + 'Kick-Ass', + 'Drive Angry', + ]; + +} + + +@Component({ + templateUrl: 'page.html', + providers: [MockProvider] +}) +export class ApiDemoPage { + items: string[]; + + constructor(private mockProvider: MockProvider) { + this.items = mockProvider.getData(); + } + + doRefresh(refresher: Refresher) { + console.log('DOREFRESH', refresher); + + this.mockProvider.getAsyncData().then((newData) => { + for (var i = 0; i < newData.length; i++) { + this.items.unshift( newData[i] ); + } + + refresher.complete(); + }); + } + + doPulling(refresher: Refresher) { + console.log('DOPULLING', refresher.progress); + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/refresher/index.html b/demos/src/refresher/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/refresher/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/refresher/main.ts b/demos/src/refresher/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/refresher/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/scroll/app.component.ts b/demos/src/scroll/app.component.ts deleted file mode 100644 index 76a8f07066..0000000000 --- a/demos/src/scroll/app.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} - diff --git a/demos/src/scroll/app.module.ts b/demos/src/scroll/app.module.ts index a291ef08d7..6854a76c55 100644 --- a/demos/src/scroll/app.module.ts +++ b/demos/src/scroll/app.module.ts @@ -1,6 +1,21 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage {} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + + @NgModule({ declarations: [ diff --git a/demos/src/scroll/index.html b/demos/src/scroll/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/scroll/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/scroll/main.ts b/demos/src/scroll/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/scroll/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/scrollbar-fix.css b/demos/src/scrollbar-fix.css deleted file mode 100644 index abbe7521c2..0000000000 --- a/demos/src/scrollbar-fix.css +++ /dev/null @@ -1,6 +0,0 @@ -body.has-scrollbar .scroll-content { - margin-right: -15px; -} -body.has-scrollbar ion-menu .scroll-content { - margin-right: 0; -} \ No newline at end of file diff --git a/demos/src/searchbar/app.component.ts b/demos/src/searchbar/app.component.ts deleted file mode 100644 index fbc0efd51b..0000000000 --- a/demos/src/searchbar/app.component.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - items: Array; - - ngOnInit() { - this.setItems(); - } - - setItems() { - this.items = ['Orange', 'Banana', 'Pear', 'Tomato', 'Grape', 'Apple', 'Cherries', 'Cranberries', 'Raspberries', 'Strawberries', 'Watermelon']; - } - - filterItems(ev) { - this.setItems(); - let val = ev.target.value; - - if (val && val.trim() !== '') { - this.items = this.items.filter(function(item) { - return item.toLowerCase().includes(val.toLowerCase()); - }); - } - } -} - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/searchbar/app.module.ts b/demos/src/searchbar/app.module.ts index a291ef08d7..92b17b8f64 100644 --- a/demos/src/searchbar/app.module.ts +++ b/demos/src/searchbar/app.module.ts @@ -1,6 +1,40 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + items: Array; + + ngOnInit() { + this.setItems(); + } + + setItems() { + this.items = ['Orange', 'Banana', 'Pear', 'Tomato', 'Grape', 'Apple', 'Cherries', 'Cranberries', 'Raspberries', 'Strawberries', 'Watermelon']; + } + + filterItems(ev) { + this.setItems(); + let val = ev.target.value; + + if (val && val.trim() !== '') { + this.items = this.items.filter(function(item) { + return item.toLowerCase().includes(val.toLowerCase()); + }); + } + } +} + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/searchbar/index.html b/demos/src/searchbar/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/searchbar/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/searchbar/main.ts b/demos/src/searchbar/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/searchbar/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/segment/app.component.ts b/demos/src/segment/app.component.ts deleted file mode 100644 index 1c810291bf..0000000000 --- a/demos/src/segment/app.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - appType = 'Paid'; - safari = 'Shared Links'; - weather = 'sunny'; - - apps = { - 'Paid': [ - { - name: 'Monopoly', - price: '$0.99' - }, - { - name: 'Angry Birds', - price: '$2.99' - } - ], - 'Free': [ - { - name: 'Snapchat', - price: 'GET' - }, - { - name: 'Instagram', - price: 'OPEN' - } - ], - 'Top': [ - { - name: 'Spotify', - price: 'OPEN' - }, - { - name: 'Pandora', - price: 'GET' - } - ] - }; - - items = { - 'Bookmarks': [ - { - name: 'Favorites', - icon: 'ios-star-outline' - }, - { - name: 'History', - icon: 'ios-clock-outline' - } - ], - 'Reading List': [ - { - name: 'Terms of Service', - icon: 'create' - }, - { - name: 'User Guide', - icon: 'book' - } - ], - 'Shared Links': [ - { - name: 'Ionic Framework', - icon: 'ionic' - }, - { - name: 'Learn Angular', - icon: 'logo-angular' - } - ] - }; - - getItems(type) { - return this.apps[type]; - } - - getSafariItems(type) { - return this.items[type]; - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/segment/app.module.ts b/demos/src/segment/app.module.ts index a291ef08d7..15c7ca41e4 100644 --- a/demos/src/segment/app.module.ts +++ b/demos/src/segment/app.module.ts @@ -1,6 +1,98 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + appType = 'Paid'; + safari = 'Shared Links'; + weather = 'sunny'; + + apps = { + 'Paid': [ + { + name: 'Monopoly', + price: '$0.99' + }, + { + name: 'Angry Birds', + price: '$2.99' + } + ], + 'Free': [ + { + name: 'Snapchat', + price: 'GET' + }, + { + name: 'Instagram', + price: 'OPEN' + } + ], + 'Top': [ + { + name: 'Spotify', + price: 'OPEN' + }, + { + name: 'Pandora', + price: 'GET' + } + ] + }; + + items = { + 'Bookmarks': [ + { + name: 'Favorites', + icon: 'ios-star-outline' + }, + { + name: 'History', + icon: 'ios-clock-outline' + } + ], + 'Reading List': [ + { + name: 'Terms of Service', + icon: 'create' + }, + { + name: 'User Guide', + icon: 'book' + } + ], + 'Shared Links': [ + { + name: 'Ionic Framework', + icon: 'ionic' + }, + { + name: 'Learn Angular', + icon: 'logo-angular' + } + ] + }; + + getItems(type) { + return this.apps[type]; + } + + getSafariItems(type) { + return this.items[type]; + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/segment/index.html b/demos/src/segment/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/segment/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/segment/main.ts b/demos/src/segment/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/segment/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/select/app.component.ts b/demos/src/select/app.component.ts deleted file mode 100644 index 5187ee51e7..0000000000 --- a/demos/src/select/app.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - gender: string; - gaming: string; - toppings: Array; - petAlertOpts; - petData; - pets: Array; - notifications: string = 'mute_1'; - rating: number = 2; - - constructor() { - this.gender = 'f'; - this.gaming = 'n64'; - - this.petAlertOpts = { - title: 'Like Pets?', - subTitle: 'Select your favorite' - }; - - this.toppings = ['bacon', 'xcheese']; - - this.petData = [ - { text: 'Bird', value: 'bird' }, - { text: 'Cat', value: 'cat' }, - { text: 'Dog', value: 'dog' }, - { text: 'Honey Badger', value: 'honeybadger' }, - ]; - - this.pets = ['cat', 'dog']; - } - - monthChange(val) { - console.log('Month Change:', val); - } - - yearChange(val) { - console.log('Year Change:', val); - } -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/select/app.module.ts b/demos/src/select/app.module.ts index a291ef08d7..64472912a4 100644 --- a/demos/src/select/app.module.ts +++ b/demos/src/select/app.module.ts @@ -1,6 +1,58 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + gender: string; + gaming: string; + toppings: Array; + petAlertOpts; + petData; + pets: Array; + notifications: string = 'mute_1'; + rating: number = 2; + + constructor() { + this.gender = 'f'; + this.gaming = 'n64'; + + this.petAlertOpts = { + title: 'Like Pets?', + subTitle: 'Select your favorite' + }; + + this.toppings = ['bacon', 'xcheese']; + + this.petData = [ + { text: 'Bird', value: 'bird' }, + { text: 'Cat', value: 'cat' }, + { text: 'Dog', value: 'dog' }, + { text: 'Honey Badger', value: 'honeybadger' }, + ]; + + this.pets = ['cat', 'dog']; + } + + monthChange(val) { + console.log('Month Change:', val); + } + + yearChange(val) { + console.log('Year Change:', val); + } +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/select/index.html b/demos/src/select/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/select/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/select/main.ts b/demos/src/select/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/select/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/show-when/app.component.ts b/demos/src/show-when/app.component.ts deleted file mode 100644 index 5e716e3d84..0000000000 --- a/demos/src/show-when/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/show-when/app.module.ts b/demos/src/show-when/app.module.ts index a291ef08d7..14d8c783b5 100644 --- a/demos/src/show-when/app.module.ts +++ b/demos/src/show-when/app.module.ts @@ -1,6 +1,20 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage {} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/show-when/index.html b/demos/src/show-when/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/show-when/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/show-when/main.ts b/demos/src/show-when/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/show-when/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/slides/app.component.ts b/demos/src/slides/app.component.ts deleted file mode 100644 index 5e716e3d84..0000000000 --- a/demos/src/slides/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/slides/app.module.ts b/demos/src/slides/app.module.ts index a291ef08d7..14d8c783b5 100644 --- a/demos/src/slides/app.module.ts +++ b/demos/src/slides/app.module.ts @@ -1,6 +1,20 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage {} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/slides/index.html b/demos/src/slides/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/slides/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/slides/main.ts b/demos/src/slides/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/slides/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/tabs/app.component.ts b/demos/src/tabs/app.component.ts deleted file mode 100644 index ebbbe7044f..0000000000 --- a/demos/src/tabs/app.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component, ViewEncapsulation } from '@angular/core'; - -@Component({ - template: '
johnny utah
', - selector: 'tab-page' -}) -export class TabPage {} - - -@Component({ - templateUrl: 'page.html', - selector: 'api-demo-page', - encapsulation: ViewEncapsulation.None, - styles: [ - ` - ion-tabs { - margin-bottom: 20px; - } - `, - ` - ion-tabs, - ion-tabs .tabbar { - position: relative; - top: auto; - height: auto; - visibility: visible; - opacity: 1; - } - ` - ] -}) -export class ApiDemoPage { - root = TabPage; -} - - -@Component({ - template: '', - selector: 'api-demo-app' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/tabs/app.module.ts b/demos/src/tabs/app.module.ts index 43bbbb6550..fff466febf 100644 --- a/demos/src/tabs/app.module.ts +++ b/demos/src/tabs/app.module.ts @@ -1,6 +1,49 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage, TabPage } from './app.component'; +import { Component, NgModule, ViewEncapsulation } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + template: '
johnny utah
', + selector: 'tab-page' +}) +export class TabPage {} + + +@Component({ + templateUrl: 'page.html', + selector: 'api-demo-page', + encapsulation: ViewEncapsulation.None, + styles: [ + ` + ion-tabs { + margin-bottom: 20px; + } + `, + ` + ion-tabs, + ion-tabs .tabbar { + position: relative; + top: auto; + height: auto; + visibility: visible; + opacity: 1; + } + ` + ] +}) +export class ApiDemoPage { + root = TabPage; +} + + +@Component({ + template: '', + selector: 'api-demo-app' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/tabs/index.html b/demos/src/tabs/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/tabs/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/tabs/main.ts b/demos/src/tabs/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/tabs/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/tabs/page.html b/demos/src/tabs/page.html index e81bd7fa9f..3fd33310a3 100644 --- a/demos/src/tabs/page.html +++ b/demos/src/tabs/page.html @@ -9,7 +9,7 @@ - + @@ -17,7 +17,7 @@ - + @@ -25,7 +25,7 @@ - + @@ -33,7 +33,7 @@ - + @@ -41,7 +41,7 @@ - + @@ -49,7 +49,7 @@ - + @@ -57,7 +57,7 @@ - + @@ -65,7 +65,7 @@ - + diff --git a/demos/src/tabs/style.css b/demos/src/tabs/style.css deleted file mode 100644 index 744f131bdd..0000000000 --- a/demos/src/tabs/style.css +++ /dev/null @@ -1,14 +0,0 @@ - ion-tabs:first-child { - margin-top: 60px; - } - ion-tabs { - margin-bottom: 20px; - } - ion-tabs, - ion-tabs .tabbar { - position: relative; - top: auto; - height: auto; - visibility: visible; - opacity: 1; - } diff --git a/demos/src/textarea/app.component.ts b/demos/src/textarea/app.component.ts deleted file mode 100644 index 5e716e3d84..0000000000 --- a/demos/src/textarea/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage {} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/textarea/app.module.ts b/demos/src/textarea/app.module.ts index 389df905ce..0131529ea6 100644 --- a/demos/src/textarea/app.module.ts +++ b/demos/src/textarea/app.module.ts @@ -1,6 +1,21 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage {} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + + @NgModule({ declarations: [ diff --git a/demos/src/textarea/index.html b/demos/src/textarea/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/textarea/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/textarea/main.ts b/demos/src/textarea/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/textarea/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/title/app.component.ts b/demos/src/title/app.component.ts deleted file mode 100644 index 444d82fc34..0000000000 --- a/demos/src/title/app.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component } from '@angular/core'; - -// Use the toolbar demo but pass in the demo name to change the title -// this will also hide some of the toolbars that don't use `ion-title` -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - demo = 'Title'; - favorites = 'recent'; - apps = 'free'; -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/title/app.module.ts b/demos/src/title/app.module.ts index 389df905ce..1c66c65bee 100644 --- a/demos/src/title/app.module.ts +++ b/demos/src/title/app.module.ts @@ -1,6 +1,26 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +// Use the toolbar demo but pass in the demo name to change the title +// this will also hide some of the toolbars that don't use `ion-title` +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + demo = 'Title'; + favorites = 'recent'; + apps = 'free'; +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/title/index.html b/demos/src/title/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/title/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/title/main.ts b/demos/src/title/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/title/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/toast/app.component.ts b/demos/src/toast/app.component.ts deleted file mode 100644 index d0d1367598..0000000000 --- a/demos/src/toast/app.component.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { Component } from '@angular/core'; -import { ToastController } from 'ionic-angular'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - constructor(private toastCtrl: ToastController) { } - - showToast(position: string) { - const toast = this.toastCtrl.create({ - message: 'User was created successfully', - position: position, - duration: 3000 - }); - - toast.onDidDismiss(this.dismissHandler); - toast.present(); - } - - showLongToast() { - const toast = this.toastCtrl.create({ - message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', - duration: 3000 - }); - - toast.onDidDismiss(this.dismissHandler); - toast.present(); - } - - showDismissDurationToast() { - const toast = this.toastCtrl.create({ - message: 'I am dismissed after 1.5 seconds', - duration: 1500 - }); - toast.onDidDismiss(this.dismissHandler); - toast.present(); - } - - showToastWithCloseButton() { - const toast = this.toastCtrl.create({ - message: 'Your internet connection appears to be offline. Data integrity is not guaranteed.', - showCloseButton: true, - closeButtonText: 'Ok' - }); - toast.onDidDismiss(this.dismissHandler); - toast.present(); - } - - private dismissHandler() { - console.info('Toast onDidDismiss()'); - } - -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/toast/app.module.ts b/demos/src/toast/app.module.ts index 389df905ce..19f2632cca 100644 --- a/demos/src/toast/app.module.ts +++ b/demos/src/toast/app.module.ts @@ -1,6 +1,67 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule, ToastController } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + constructor(private toastCtrl: ToastController) { } + + showToast(position: string) { + const toast = this.toastCtrl.create({ + message: 'User was created successfully', + position: position, + duration: 3000 + }); + + toast.onDidDismiss(this.dismissHandler); + toast.present(); + } + + showLongToast() { + const toast = this.toastCtrl.create({ + message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', + duration: 3000 + }); + + toast.onDidDismiss(this.dismissHandler); + toast.present(); + } + + showDismissDurationToast() { + const toast = this.toastCtrl.create({ + message: 'I am dismissed after 1.5 seconds', + duration: 1500 + }); + toast.onDidDismiss(this.dismissHandler); + toast.present(); + } + + showToastWithCloseButton() { + const toast = this.toastCtrl.create({ + message: 'Your internet connection appears to be offline. Data integrity is not guaranteed.', + showCloseButton: true, + closeButtonText: 'Ok' + }); + toast.onDidDismiss(this.dismissHandler); + toast.present(); + } + + private dismissHandler() { + console.info('Toast onDidDismiss()'); + } + +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/toast/index.html b/demos/src/toast/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/toast/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/toast/main.ts b/demos/src/toast/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/toast/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/toggle/app.component.ts b/demos/src/toggle/app.component.ts deleted file mode 100644 index aee8b3ddb2..0000000000 --- a/demos/src/toggle/app.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - data = { - frodo: true, - sam: false, - eowyn: true, - legolas: true, - gimli: false, - saruman: true, - gandalf: true, - arwen: false, - boromir: false, - gollum: true, - galadriel: false - }; -} - - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/toggle/app.module.ts b/demos/src/toggle/app.module.ts index 389df905ce..9c61a43ea8 100644 --- a/demos/src/toggle/app.module.ts +++ b/demos/src/toggle/app.module.ts @@ -1,6 +1,34 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + data = { + frodo: true, + sam: false, + eowyn: true, + legolas: true, + gimli: false, + saruman: true, + gandalf: true, + arwen: false, + boromir: false, + gollum: true, + galadriel: false + }; +} + + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/toggle/index.html b/demos/src/toggle/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/toggle/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/toggle/main.ts b/demos/src/toggle/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/toggle/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/src/toolbar/app.component.ts b/demos/src/toolbar/app.component.ts deleted file mode 100644 index e086c36e4a..0000000000 --- a/demos/src/toolbar/app.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'page.html' -}) -export class ApiDemoPage { - demo = 'Toolbar'; - favorites = 'recent'; - apps = 'free'; -} - -@Component({ - template: '' -}) -export class ApiDemoApp { - root = ApiDemoPage; -} diff --git a/demos/src/toolbar/app.module.ts b/demos/src/toolbar/app.module.ts index 389df905ce..f50cb7e1fa 100644 --- a/demos/src/toolbar/app.module.ts +++ b/demos/src/toolbar/app.module.ts @@ -1,6 +1,23 @@ -import { NgModule } from '@angular/core'; -import { IonicApp, IonicModule } from 'ionic-angular'; -import { ApiDemoApp, ApiDemoPage } from './app.component'; +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../'; + + +@Component({ + templateUrl: 'page.html' +}) +export class ApiDemoPage { + demo = 'Toolbar'; + favorites = 'recent'; + apps = 'free'; +} + +@Component({ + template: '' +}) +export class ApiDemoApp { + root = ApiDemoPage; +} + @NgModule({ declarations: [ diff --git a/demos/src/toolbar/index.html b/demos/src/toolbar/index.html deleted file mode 100644 index 7780eb1108..0000000000 --- a/demos/src/toolbar/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Demo - - - - - - - - - - - - - - diff --git a/demos/src/toolbar/main.ts b/demos/src/toolbar/main.ts deleted file mode 100644 index 3129863a84..0000000000 --- a/demos/src/toolbar/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { platformBrowser } from '@angular/platform-browser'; -import { enableProdMode } from '@angular/core'; -import { AppModuleNgFactory } from './app.module.ngfactory'; - -enableProdMode(); -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/demos/tsconfig.json b/demos/tsconfig.json deleted file mode 100644 index d4d4333dd2..0000000000 --- a/demos/tsconfig.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "compilerOptions": { - "allowUnreachableCode": false, - "declaration": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": ["dom", "es2015"], - "module": "es2015", - "moduleResolution": "node", - "noImplicitAny": false, - "removeComments": true, - "target": "es5", - "types": ["jasmine"] - }, - "include": [ - "./src/**/app.module.ts", - "./src/**/main.ts" - ], - "compileOnSave": false, - "buildOnSave": false, - "atom": { - "rewriteTsconfig": false - } -} diff --git a/scripts/README.md b/scripts/README.md index 395483fe4a..afe189ddcc 100644 --- a/scripts/README.md +++ b/scripts/README.md @@ -42,9 +42,19 @@ The following commands take longer to run because they use AoT compilation. They ### Building & Running API Demos +#### Development + 1. Run `gulp demos` or `gulp demos.watch` to watch for changes. 2. Navigate to `http://localhost:8000/dist/demos` +#### Validation + +The following commands take longer to run because they use AoT compilation. They should really only be used to validate that our components work with AoT, and fix them if not. + +1. Run `gulp demos.prod` to bundle all demos tests, or pass a folder for a specific test. For example, `gulp demos.prod --f=alert` will build the test in `demos/alert/`. +2. Run `gulp demos.watchProd` with a folder passed to watch a test. For example, `gulp demos.watchProd --f=select` will watch the test in `demos/select/`. +3. Navigate to `http://localhost:8000/dist/demos` + ### Building API Docs diff --git a/scripts/demos/demos.shared.css b/scripts/demos/demos.shared.css new file mode 100644 index 0000000000..5c3217923e --- /dev/null +++ b/scripts/demos/demos.shared.css @@ -0,0 +1,241 @@ +/* + Scrollbar +*/ + +body.has-scrollbar .scroll-content { + margin-right: -15px; +} +body.has-scrollbar ion-menu .scroll-content { + margin-right: 0; +} + +/* + Popover +*/ + +page-api-radio-popover ion-row, +page-api-radio-popover ion-col { + padding: 0; +} + +.popover-text-button { + padding-left: 0; + text-align: center; + min-height: 20px; + line-height: 18px; +} + +.popover-text-button .item-inner { + padding-right: 0; +} + +.popover-text-smaller { + font-size: 12px; +} + +.popover-text-larger { + font-size: 16px; +} + +.popover-row-dots { + text-align: center; +} + +.popover-dot { + height: 30px; + width: 30px; + border-radius: 50%; + margin: 10px auto; + position: relative; +} + +.popover-dot-white { + background-color: rgb(255,255,255); +} + +.popover-dot-tan { + background-color: rgb(249,241,228); +} + +.popover-dot-grey { + background-color: rgb(76,75,80); +} + +.popover-dot-black { + background-color: rgb(0,0,0); +} + +.ios .popover-dot.selected, +.md .popover-dot.selected, +.wp .popover-dot.selected { + border-width: 2px; + border-color: #327eff; +} + +.popover-text-athelas { + font-family: "Athelas"; +} + +.popover-text-charter { + font-family: "Charter"; +} + +.popover-text-iowan { + font-family: "Iowan"; +} + +.popover-text-palatino { + font-family: "Palatino"; +} + +.popover-text-san-francisco { + font-family: "San Francisco"; +} + +.popover-text-seravek { + font-family: "Seravek"; +} + +.popover-text-times-new-roman { + font-family: "Times New Roman"; +} + +/* + iOS Popover +*/ + +.ios .popover-text-smaller { + border-right: 1px solid #c8c7cc; +} + +.ios .popover-row-dots { + border-bottom: 1px solid #c8c7cc; +} + +.ios .popover-dot { + border: 1px solid #c8c7cc; +} + +.hairlines .popover-text-smaller, +.hairlines .popover-row-dots, +.hairlines .popover-dot { + border-width: 0.55px; +} + +/* + Material Design Popover +*/ + +.md .popover-text-smaller { + border-right: 1px solid #dedede; +} + +.md .popover-row-dots { + border-bottom: 1px solid #dedede; +} + +.md .popover-dot { + border: 1px solid #dedede; +} + +/* + Windows Popover +*/ + +.wp .popover-dot { + border: 2px solid #ccc; +} + +/* + Loading Custom Component +*/ + +.loading-custom-spinner-container { + position: relative; + display: inline-block; + box-sizing: border-box; + width: 100%; + margin-bottom: 20px; +} + +.loading-custom-spinner-box { + margin: 0 auto; + position: relative; + box-sizing: border-box; + border: 4px solid #000; + width: 60px; + height: 60px; + animation: spin 3s infinite linear; +} + +.loading-custom-spinner-box:before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-sizing: border-box; + border: 4px solid #000; + width: 40px; + height: 40px; + animation: pulse 1.5s infinite ease; +} + +/* + Windows Loading Custom Component +*/ + +.wp .loading-custom-spinner-box, +.wp .loading-custom-spinner-box:before { + border-color: #fff; +} + +/* + Loading Custom Component Keyframes +*/ + +@-webkit-keyframes pulse { + 50% { + border-width: 20px; + } +} +@keyframes pulse { + 50% { + border-width: 20px; + } +} + +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +/* + Tabs Only +*/ + +ion-tabs[tabs-only]:first-child { + margin-top: 20px; +} + +ion-tabs[tabs-only] { + margin-bottom: 20px; + contain: none; +} + +ion-tabs[tabs-only], +ion-tabs[tabs-only] .tabbar { + position: relative; + top: auto; + height: auto; + visibility: visible; + opacity: 1; +} \ No newline at end of file diff --git a/scripts/demos/demos.template.dev.html b/scripts/demos/demos.template.dev.html new file mode 100644 index 0000000000..0270459612 --- /dev/null +++ b/scripts/demos/demos.template.dev.html @@ -0,0 +1,57 @@ + + + + + Ionic E2E + + + + + + + + + + + + + + + + + + + + + + diff --git a/demos/src/alert/index.html b/scripts/demos/demos.template.prod.html similarity index 53% rename from demos/src/alert/index.html rename to scripts/demos/demos.template.prod.html index 7780eb1108..a4fb38890b 100644 --- a/demos/src/alert/index.html +++ b/scripts/demos/demos.template.prod.html @@ -1,18 +1,19 @@ - Demo + Ionic E2E - - + + + - - - + + + diff --git a/demos/src/action-sheet/main.ts b/scripts/demos/entry.ts similarity index 100% rename from demos/src/action-sheet/main.ts rename to scripts/demos/entry.ts diff --git a/scripts/docs/deploy.sh b/scripts/docs/deploy.sh index 670f26b698..d8e4be7f29 100755 --- a/scripts/docs/deploy.sh +++ b/scripts/docs/deploy.sh @@ -20,7 +20,7 @@ function run { VERSION=$(readJsonProp "package.json" "version") #compile API Demos - #./node_modules/.bin/gulp docs.demos --production=true + ./node_modules/.bin/gulp docs.demos --production=true # if release, copy old version to seperate folder and blow out docs root api if $IS_RELEASE; then diff --git a/scripts/gulp/constants.ts b/scripts/gulp/constants.ts index 362feb7fad..5ba3feb6b9 100644 --- a/scripts/gulp/constants.ts +++ b/scripts/gulp/constants.ts @@ -23,6 +23,8 @@ export const PROJECT_ROOT = join(__dirname, '../..'); export const DEMOS_ROOT = join(PROJECT_ROOT, DEMOS_NAME); export const DEMOS_SRC_ROOT = join(DEMOS_ROOT, SRC_NAME); export const DIST_ROOT = join(PROJECT_ROOT, DIST_NAME); +export const DIST_DEMOS_ROOT = join(DIST_ROOT, DEMOS_NAME); +export const DIST_DEMOS_COMPONENTS_ROOT = join(DIST_DEMOS_ROOT, COMPONENTS_NAME); export const DIST_E2E_ROOT = join(DIST_ROOT, E2E_NAME); export const DIST_E2E_COMPONENTS_ROOT = join(DIST_E2E_ROOT, COMPONENTS_NAME); export const DIST_BUILD_ROOT = join(DIST_ROOT, PACKAGE_NAME); diff --git a/scripts/gulp/gulpfile.ts b/scripts/gulp/gulpfile.ts index 4de2823166..f5a0716ed0 100644 --- a/scripts/gulp/gulpfile.ts +++ b/scripts/gulp/gulpfile.ts @@ -2,6 +2,8 @@ import './tasks/build'; import './tasks/clean'; import './tasks/default'; import './tasks/demos'; +import './tasks/demos.dev'; +import './tasks/demos.prod'; import './tasks/docs'; import './tasks/e2e'; import './tasks/e2e.dev'; diff --git a/scripts/gulp/tasks/demos.dev.ts b/scripts/gulp/tasks/demos.dev.ts new file mode 100644 index 0000000000..a626a53224 --- /dev/null +++ b/scripts/gulp/tasks/demos.dev.ts @@ -0,0 +1,187 @@ +import { readFileSync } from 'fs'; +import { dirname, join } from 'path'; + +import { dest, src, start, task } from 'gulp'; +import * as babel from 'gulp-babel'; +import * as cache from 'gulp-cached'; +import * as concat from 'gulp-concat'; +import * as connect from 'gulp-connect'; +import * as gulpif from 'gulp-if'; +import * as remember from 'gulp-remember'; +import * as tsc from 'gulp-typescript'; +import * as watch from 'gulp-watch'; +import { template } from 'lodash'; +import * as merge from 'merge2'; +import * as runSequence from 'run-sequence'; +import { obj } from 'through2'; +import * as VinylFile from 'vinyl'; + +import { DEMOS_NAME, DIST_DEMOS_ROOT, DIST_NAME, ES5, ES_2015, SCRIPTS_ROOT } from '../constants'; + +const buildConfig = require('../../build/config'); + +/** + * Builds Ionic demos tests to dist/demos and creates the necessary files for tests + * to run. + */ +task('demos', demosBuild); + +function demosBuild(done: (err: any) => void) { + runSequence( + 'demos.clean', + 'demos.build', + 'demos.polyfill', + 'demos.copyExternalDependencies', + 'demos.sass', + 'demos.fonts', + 'demos.bundle', + done); +} + +/** + * Builds Ionic demos tests to dist/demos. + */ +task('demos.build', function () { + var indexTemplate = template( + readFileSync(`${SCRIPTS_ROOT}/${DEMOS_NAME}/demos.template.dev.html`).toString() + )({ + buildConfig: buildConfig + }); + + // Get each test folder with src + var tsResult = src([ + 'demos/src/*/**/*.ts' + ]) + .pipe(cache('demos.ts')) + .pipe(tsc(getTscOptions(), undefined, tscReporter)) + .on('error', function (error) { + console.log(error.message); + }) + .pipe(gulpif(/app.module.js$/, createIndexHTML())); + + var testFiles = src([ + 'demos/src/*/**/*', + '!demos/src/*/**/*.ts' + ]) + .pipe(cache('demos.files')); + + return merge([ + tsResult, + testFiles + ]) + .pipe(dest(DIST_DEMOS_ROOT)) + .pipe(connect.reload()); + + function createIndexHTML() { + return obj(function (file, enc, next) { + this.push(new VinylFile({ + base: file.base, + contents: new Buffer(indexTemplate), + path: join(dirname(file.path), 'index.html'), + })); + next(null, file); + }); + } +}); + +/** + * Creates SystemJS bundle from Ionic source files. + */ +task('demos.bundle', function () { + var tsResult = tsCompile(getTscOptions('es6'), 'system') + .pipe(babel(babelOptions)); + + var swiper = src('src/components/slides/swiper-widget.system.js'); + + return merge([tsResult, swiper]) + .pipe(remember('system')) + .pipe(concat('ionic.system.js')) + .pipe(dest(`${DIST_NAME}/bundles`)) + .pipe(connect.reload()); +}); + +function tsCompile(options, cacheName) { + return src([ + 'typings/main.d.ts', + 'src/**/*.ts', + '!src/**/*.d.ts', + '!src/components/*/test/**/*', + '!src/util/test/*', + '!src/config/test/*', + '!src/platform/test/*', + '!src/**/*.spec.ts' + ]) + .pipe(cache(cacheName, { optimizeMemory: true })) + .pipe(tsc(options, undefined, tscReporter)); +} + +function getTscOptions(name?: string) { + var opts = { + emitDecoratorMetadata: true, + experimentalDecorators: true, + target: ES5, + module: 'commonjs', + isolatedModules: true, + typescript: require('typescript'), + declaration: false + }; + + if (name === 'typecheck') { + opts.declaration = true; + delete opts.isolatedModules; + } else if (name === 'es6') { + opts.target = 'es6'; + delete opts.module; + } + return opts; +} + +var tscReporter = { + error: function (error) { + console.error(error.message); + } +}; + +// We use Babel to easily create named System.register modules +// See: https://github.com/Microsoft/TypeScript/issues/4801 +// and https://github.com/ivogabe/gulp-typescript/issues/211 +const babelOptions = { + moduleIds: true, + getModuleId: function (name) { + return 'ionic-angular/' + name; + }, + plugins: ['transform-es2015-modules-systemjs'], + presets: [ES_2015] +}; + +/** + * Builds demos tests to dist/demos and watches for changes. Runs 'demos.bundle' or + * 'sass' on Ionic source changes and 'demos.build' for demos test changes. + */ +task('demos.watch', ['demos'], function () { + watchTask('demos.bundle'); + + watch('demos/src/**/*', function (file) { + start('demos.build'); + }); +}); + +function watchTask(task) { + watch([ + 'src/**/*.ts', + '!src/components/*/test/**/*', + '!src/util/test/*' + ], + function (file) { + if (file.event !== 'unlink') { + start(task); + } + } + ); + + watch('src/**/*.scss', function () { + start('demos.sass'); + }); + + start('demos.serve'); +} diff --git a/scripts/gulp/tasks/demos.prod.ts b/scripts/gulp/tasks/demos.prod.ts new file mode 100644 index 0000000000..bd42a82caa --- /dev/null +++ b/scripts/gulp/tasks/demos.prod.ts @@ -0,0 +1,242 @@ +import { accessSync, F_OK, readFileSync, writeFileSync } from 'fs'; +import { dirname, join } from 'path'; + +import * as glob from 'glob'; +import { dest, src, start, task } from 'gulp'; +import * as gulpif from 'gulp-if'; +import * as watch from 'gulp-watch'; +import * as rollup from 'rollup'; +import * as nodeResolve from 'rollup-plugin-node-resolve'; +import * as commonjs from 'rollup-plugin-commonjs'; +import * as runSequence from 'run-sequence'; +import { obj } from 'through2'; +import * as VinylFile from 'vinyl'; +import { argv } from 'yargs'; + +import { DEMOS_SRC_ROOT, DIST_DEMOS_COMPONENTS_ROOT, DIST_DEMOS_ROOT, DIST_NAME, DEMOS_NAME, ES5, ES_2015, LOCAL_SERVER_PORT, PROJECT_ROOT, SCRIPTS_ROOT, SRC_COMPONENTS_ROOT, SRC_ROOT } from '../constants'; +import { createTempTsConfig, deleteFiles, runNgc } from '../util'; + +task('demos.prod', demosBuild); + +function demosBuild(done: (err: any) => void) { + runSequence( + 'demos.clean', + 'demos.polyfill', + 'demos.copySource', + 'demos.compileTests', + 'demos.copyExternalDependencies', + 'demos.sass', + 'demos.fonts', + 'demos.bundleProd', + done); +} + +task('demos.copySource', (done: Function) => { + const stream = src([`${SRC_ROOT}/**/*`, `!${SRC_ROOT}/components/*/test{,/**/*}`, `${DEMOS_SRC_ROOT}/**/*`]) + .pipe(gulpif(/app.module.ts$/, createIndexHTML())) + .pipe(dest(DIST_DEMOS_ROOT)); + + stream.on('end', done); + + function createIndexHTML() { + const indexTemplate = readFileSync(`${SCRIPTS_ROOT}/${DEMOS_NAME}/demos.template.prod.html`); + const indexTs = readFileSync(`${SCRIPTS_ROOT}/${DEMOS_NAME}/entry.ts`); + + return obj(function (file, enc, next) { + this.push(new VinylFile({ + base: file.base, + contents: new Buffer(indexTemplate), + path: join(dirname(file.path), 'index.html'), + })); + this.push(new VinylFile({ + base: file.base, + contents: new Buffer(indexTs), + path: join(dirname(file.path), 'entry.ts'), + })); + next(null, file); + }); + } +}); + +task('demos.compileTests', (done: Function) => { + let folderInfo = getFolderInfo(); + buildDemoTests(folderInfo, done); +}); + +function buildDemoTests(folderInfo: any, done: Function) { + let includeGlob = ['./*/app.module.ts', './*/entry.ts']; + if (folderInfo.componentName && folderInfo.componentTest) { + includeGlob = [ + `./${folderInfo.componentName}/app.module.ts`, + `./${folderInfo.componentName}/entry.ts`, + ]; + } + + createTempTsConfig(includeGlob, ES5, ES_2015, `${DIST_DEMOS_ROOT}/tsconfig.json`); + runNgc(`${DIST_DEMOS_ROOT}/tsconfig.json`, (err) => { + if (err) { + done(err); + return; + } + // clean up any .ts files that remain + deleteFiles([`${DIST_DEMOS_ROOT}/**/*.ts`, `!${DIST_DEMOS_ROOT}/**/*.ngfactory.ts`, `!${DIST_DEMOS_ROOT}/**/*.d.ts`], done); + }); +} + +task('demos.bundleProd', (done) => { + let includeGlob = `${DIST_DEMOS_ROOT}/*/entry.js`; + let folderInfo = getFolderInfo(); + if (folderInfo.componentName && folderInfo.componentTest) { + includeGlob = `${DIST_DEMOS_ROOT}/${folderInfo.componentName}/entry.js`; + } + glob(includeGlob, {}, function (er, files) { + var directories = files.map(function (file) { + return dirname(file); + }); + + let indexFileContents = directories.map(function (dir) { + let testName = dir.replace(`${DIST_DEMOS_ROOT}/`, ''); + let fileName = dir.replace(`${PROJECT_ROOT}`, ''); + return `

${testName}

`; + }, []); + + writeFileSync(`${DIST_DEMOS_ROOT}/index.html`, + '\n' + + indexFileContents.join('\n') + + '' + ); + + createBundles(files).then(() => { + done(); + }).catch(err => { + done(err); + }); + }); +}); + +function createBundles(files: string[]) { + let start; + if (!files) { + return Promise.reject(new Error('list of files is null')); + } else if (files.length === 0) { + return Promise.resolve(); + } else { + const outputFileName = join(dirname(files[0]), 'app.bundle.js'); + start = Date.now(); + return bundle(files[0], outputFileName).then(() => { + const end = Date.now(); + const seconds = (end - start) / 1000; + console.log(`Took ${seconds} seconds to process ${files[0]}`); + const remainingFiles = files.concat(); + remainingFiles.shift(); + return createBundles(remainingFiles); + }).catch(err => { + return Promise.reject(err); + }); + } +} + +function bundle(inputFile: string, outputFile: string): Promise { + console.log(`Starting rollup on ${inputFile} ... writing to ${outputFile}`); + return rollup.rollup({ + entry: inputFile, + plugins: [ + commonjs(), + nodeResolve({ + module: true, + jsnext: true, + main: true, + extensions: ['.js'] + }) + ] + }).then(bundle => { + return bundle.write({ + format: 'iife', + dest: outputFile, + }); + }); +} + +task('demos.watchProd', ['demos.copyExternalDependencies', 'demos.sass', 'demos.fonts'], (done: Function) => { + const folderInfo = getFolderInfo(); + let demoTestPath = DEMOS_SRC_ROOT; + + if (folderInfo.componentName && folderInfo.componentTest) { + demoTestPath = join(DEMOS_SRC_ROOT, folderInfo.componentName, 'app.module.ts'); + } + + try { + accessSync(demoTestPath, F_OK); + } catch (e) { + done(new Error(`Could not find demos test: ${demoTestPath}`)); + return; + } + + if (demosComponentsExists()) { + // already generated the demos directory + demosWatch(folderInfo.componentName, folderInfo.componentTest); + + } else { + // generate the demos directory + console.log('Generated demos builds first...'); + demosBuild(() => { + demosWatch(folderInfo.componentName, folderInfo.componentTest); + }); + } +}); + +function demosWatch(componentName: string, componentTest: string) { + // If any tests change within components then run demos.resources. + watch([ + 'demos/src/**/*' + ], + function (file) { + console.log('start demos.resources - ' + JSON.stringify(file.history, null, 2)); + start('demos.copyAndCompile'); + }); + + // If any src files change except for tests then transpile only the source ionic files + watch([ + 'src/**/*.ts', + '!src/components/*/test/**/*', + '!src/util/test/*' + ], + function (file) { + console.log('start demos.ngcSource - ' + JSON.stringify(file.history, null, 2)); + start('demos.copyAndCompile'); + }); + + // If any scss files change then recompile all sass + watch(['src/**/*.scss'], (file) => { + console.log('start sass - ' + JSON.stringify(file.history, null, 2)); + start('demos.sass'); + }); + + console.log(`http://localhost:${LOCAL_SERVER_PORT}/${DIST_NAME}/${DEMOS_NAME}/${componentName}`); + + start('demos.serve'); +} + +function demosComponentsExists(): boolean { + try { + accessSync(DIST_DEMOS_COMPONENTS_ROOT, F_OK); + } catch (e) { + return false; + } + return true; +} + +function getFolderInfo() { + let componentName: string = null; + let componentTest: string = null; + const folder: string = argv.folder || argv.f; + if (folder && folder.length) { + const folderSplit = folder.split('/'); + componentName = folderSplit[0]; + componentTest = (folderSplit.length > 1 ? folderSplit[1] : 'basic'); + } + return { + componentName: componentName, + componentTest: componentTest + }; +} \ No newline at end of file diff --git a/scripts/gulp/tasks/demos.ts b/scripts/gulp/tasks/demos.ts index 0bca04aac3..3fd7fd93c0 100644 --- a/scripts/gulp/tasks/demos.ts +++ b/scripts/gulp/tasks/demos.ts @@ -1,165 +1,55 @@ -import { exec } from 'child_process'; -import { dirname, join } from 'path'; +import { dest, src, task } from 'gulp'; +import * as connect from 'gulp-connect'; +import * as del from 'del'; +import * as runSequence from 'run-sequence'; -import * as glob from 'glob'; -import { task } from 'gulp'; -import * as rollup from 'rollup'; -import * as nodeResolve from 'rollup-plugin-node-resolve'; -import * as commonjs from 'rollup-plugin-commonjs'; - -import { DEMOS_ROOT, DEMOS_SRC_ROOT} from '../constants'; -import { compileSass, copyFonts, createTimestamp, deleteFiles, runNgc, setSassIonicVersion, writePolyfills } from '../util'; - -function doNpmInstall() { - return new Promise((resolve, reject) => { - // navigate to the demos directly - try { - process.chdir('./demos'); - console.log('starting npm install ...'); - exec('npm install', function(err, stdout, stderr) { - process.chdir('..'); - console.log(stdout); - console.log(stderr); - if (err) { - reject(err); - } else { - resolve(); - } - }); - } catch (ex) { - reject(ex); - } - }); -} - -function generatePolyfills() { - return writePolyfills(join(DEMOS_ROOT, 'polyfills')); -} - -function compileTests() { - console.log('Starting to compile tests defined via tsconfig ...'); - return new Promise((resolve, reject) => { - runNgc(`${DEMOS_ROOT}/tsconfig.json`, (err) => { - if (err) { - reject(err); - } else { - resolve(); - } - }); - }); -} - -function rollupTests() { - return new Promise((resolve, reject) => { - glob(`${DEMOS_SRC_ROOT}/**/main.js`, null, (err: Error, files: string[]) => { - if (err) { - reject(err); - } else { - recursiveRollupHelper(files).then(() => { - resolve(); - }).catch(err => { - reject(err); - }); - } - }); - }); -} - -function recursiveRollupHelper(files: string[]) { - let start; - if (!files) { - return Promise.reject(new Error('list of files is null')); - } else if ( files.length === 0) { - return Promise.resolve(); - } else { - const outputFileName = join(dirname(files[0]), 'main.bundle.js'); - start = Date.now(); - return bundle(files[0], outputFileName).then(() => { - const end = Date.now(); - const seconds = (end - start) / 1000; - console.log(`Took ${seconds} seconds to process ${files[0]}`); - const remainingFiles = files.concat(); - remainingFiles.shift(); - return recursiveRollupHelper(remainingFiles); - }).catch(err => { - return Promise.reject(err); - }); - } -} - -function bundle(inputFile: string, outputFile: string): Promise { - console.log(`Starting rollup on ${inputFile} ... writing to ${outputFile}`); - return rollup.rollup({ - entry: inputFile, - plugins: [ - commonjs(), - nodeResolve({ - module: true, - jsnext: true, - main: true, - extensions: ['.js'] - }) - ] - }).then(bundle => { - return bundle.write({ - format: 'iife', - dest: outputFile, - }); - }); -} - - -function buildDemos(done: Function) { - doNpmInstall() - .then(() => { - return compileTests(); - }).then(() => { - return rollupTests(); - }).then(() => { - done(); - }).catch(err => { - console.log('ERRROR: ', err.message); - done(err); - }); -} - -function cleanDemos(done: Function) { - deleteFiles([`${DEMOS_SRC_ROOT}/**/*.js`, - `${DEMOS_SRC_ROOT}/**/*.js.map`, - `${DEMOS_SRC_ROOT}/**/*.d.ts`, - `${DEMOS_SRC_ROOT}/**/*.ngfactory.ts`, - `${DEMOS_SRC_ROOT}/**/*.metadata.json`, - `${DEMOS_ROOT}/css`, - `${DEMOS_ROOT}/fonts`, - `${DEMOS_ROOT}/polyfills`, - `!${DEMOS_SRC_ROOT}/scrollbar-fix.css`, - `!${DEMOS_SRC_ROOT}/scrollbar-fix.js`, - ], done); -} - -task('demos.build', ['demos.sass', 'demos.fonts', 'demos.polyfills'], (done: Function) => { - buildDemos(done); -}); +import { DEMOS_NAME, DIST_DEMOS_ROOT, LOCAL_SERVER_PORT, SCRIPTS_ROOT } from '../constants'; +import { compileSass, copyFonts, createTimestamp, setSassIonicVersion, writePolyfills } from '../util'; task('demos.clean', (done: Function) => { - cleanDemos(done); + del([`${DIST_DEMOS_ROOT}/**`]).then(() => { + done(); + }).catch(err => { + done(err); + }); }); +task('demos.polyfill', (done: Function) => { + writePolyfills(`${DIST_DEMOS_ROOT}/polyfills`).then(() => { + done(); + }).catch(err => { + done(err); + }); +}); + +task('demos.copyAndCompile', (done: (err: any) => void) => { + runSequence( + 'demos.copySource', + 'demos.compileTests', + 'demos.bundle', + done); +}); + +task('demos.copyExternalDependencies', () => { + src([`${SCRIPTS_ROOT}/${DEMOS_NAME}/*.css`]).pipe(dest(`${DIST_DEMOS_ROOT}/css`)); +}); task('demos.sass', () => { // ensure there is a version.scss file setSassIonicVersion(`E2E-${createTimestamp()}`); - return compileSass(`${DEMOS_ROOT}/css`); + return compileSass(`${DIST_DEMOS_ROOT}/css`); }); task('demos.fonts', () => { - return copyFonts(`${DEMOS_ROOT}/fonts`); + return copyFonts(`${DIST_DEMOS_ROOT}/fonts`); }); -task('demos.polyfills', (done: Function) => { - generatePolyfills().then(() => { - done(); - }).catch(err => { - done(err); +task('demos.serve', function() { + connect.server({ + root: './', + port: LOCAL_SERVER_PORT, + livereload: { + port: 35700 + } }); -}); +}); \ No newline at end of file diff --git a/scripts/gulp/tasks/docs.ts b/scripts/gulp/tasks/docs.ts index 78e02f5605..3b8d7acc4f 100644 --- a/scripts/gulp/tasks/docs.ts +++ b/scripts/gulp/tasks/docs.ts @@ -9,7 +9,7 @@ import * as mkdirp from 'mkdirp'; import { valid }from 'semver'; import { argv } from 'yargs'; -import { DEMOS_ROOT } from '../constants'; +import { DIST_DEMOS_ROOT } from '../constants'; task('docs', ['docs.dgeni', 'docs.demos', 'docs.sassVariables']); @@ -30,7 +30,7 @@ task('docs.dgeni', () => { } }); -task('docs.demos', ['demos.build'], (done: Function) => { +task('docs.demos', ['demos.prod'], (done: Function) => { const config = require('../../config.json'); const outputDir = join(config.docsDest, 'demos'); let promises = []; @@ -47,7 +47,7 @@ task('docs.demos', ['demos.build'], (done: Function) => { function copyDemoCss(outputDir: string) { return new Promise((resolve, reject) => { - const stream = src(`${DEMOS_ROOT}/css/*`).pipe(dest(outputDir)); + const stream = src(`${DIST_DEMOS_ROOT}/css/*`).pipe(dest(outputDir)); stream.on('end', () => { resolve(); }); @@ -56,7 +56,7 @@ function copyDemoCss(outputDir: string) { function copyDemoFonts(outputDir: string) { return new Promise((resolve, reject) => { - const stream = src(`${DEMOS_ROOT}/fonts/*`).pipe(dest(outputDir)); + const stream = src(`${DIST_DEMOS_ROOT}/fonts/*`).pipe(dest(outputDir)); stream.on('end', () => { resolve(); }); @@ -65,7 +65,7 @@ function copyDemoFonts(outputDir: string) { function copyDemoPolyfills(outputDir: string) { return new Promise((resolve, reject) => { - const stream = src(`${DEMOS_ROOT}/polyfills/*`).pipe(dest(outputDir)); + const stream = src(`${DIST_DEMOS_ROOT}/polyfills/*`).pipe(dest(outputDir)); stream.on('end', () => { resolve(); }); @@ -75,8 +75,7 @@ function copyDemoPolyfills(outputDir: string) { function copyDemoContent(outputDir: string) { return new Promise((resolve, reject) => { const stream = src([ - `${DEMOS_ROOT}/src/**/*`, - `${DEMOS_ROOT}/src/scrollbar-fix.*` + `${DIST_DEMOS_ROOT}/**/*` ]).pipe(dest(outputDir)); stream.on('end', () => { resolve();