From dcebbeaf56c2cc0d9e76527a68872eefca2f2ddc Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Thu, 8 Oct 2015 10:01:13 -0500 Subject: [PATCH 01/17] refactor(demos): give each component section its own view --- .../actionSheet/actionSheet.html | 9 + .../component-docs/actionSheet/actionSheet.ts | 64 ++++++ demos/component-docs/buttons/block.html | 26 +++ demos/component-docs/buttons/buttons.html | 27 +++ demos/component-docs/buttons/buttons.ts | 73 +++++++ demos/component-docs/buttons/fab.html | 15 ++ demos/component-docs/buttons/full.html | 29 +++ demos/component-docs/buttons/icons.html | 44 +++++ demos/component-docs/buttons/outline.html | 29 +++ demos/component-docs/buttons/round.html | 29 +++ demos/component-docs/buttons/sizes.html | 29 +++ demos/component-docs/cards/cards.html | 62 ++++++ demos/component-docs/cards/cards.ts | 10 + demos/component-docs/forms/forms.html | 23 +++ demos/component-docs/forms/forms.ts | 25 +++ demos/component-docs/helpers.ts | 51 ++++- demos/component-docs/icons/icons.html | 78 ++++++++ demos/component-docs/icons/icons.ts | 10 + demos/component-docs/index.ts | 185 ++---------------- demos/component-docs/lists/lists.html | 58 ++++++ demos/component-docs/lists/lists.ts | 10 + demos/component-docs/menus/menus.html | 12 ++ demos/component-docs/menus/menus.ts | 10 + demos/component-docs/modal.html | 1 - demos/component-docs/modal.ts | 46 ----- .../component-docs/modals/modals-content.html | 13 ++ demos/component-docs/modals/modals.html | 14 ++ demos/component-docs/modals/modals.ts | 80 ++++++++ demos/component-docs/navigation.html | 8 - .../navigation/navigation-details.html | 8 + .../component-docs/navigation/navigation.html | 30 +++ .../{ => navigation}/navigation.ts | 30 +-- demos/component-docs/popups/popups.html | 10 + demos/component-docs/popups/popups.ts | 16 ++ demos/component-docs/slides/slides.html | 24 +++ demos/component-docs/slides/slides.ts | 10 + demos/component-docs/tabs.ts | 35 ---- demos/component-docs/{ => tabs}/tabs.html | 2 +- demos/component-docs/tabs/tabs.ts | 22 +++ gulpfile.js | 4 +- 40 files changed, 985 insertions(+), 276 deletions(-) create mode 100644 demos/component-docs/actionSheet/actionSheet.html create mode 100644 demos/component-docs/actionSheet/actionSheet.ts create mode 100644 demos/component-docs/buttons/block.html create mode 100644 demos/component-docs/buttons/buttons.html create mode 100644 demos/component-docs/buttons/buttons.ts create mode 100644 demos/component-docs/buttons/fab.html create mode 100644 demos/component-docs/buttons/full.html create mode 100644 demos/component-docs/buttons/icons.html create mode 100644 demos/component-docs/buttons/outline.html create mode 100644 demos/component-docs/buttons/round.html create mode 100644 demos/component-docs/buttons/sizes.html create mode 100644 demos/component-docs/cards/cards.html create mode 100644 demos/component-docs/cards/cards.ts create mode 100644 demos/component-docs/forms/forms.html create mode 100644 demos/component-docs/forms/forms.ts create mode 100644 demos/component-docs/icons/icons.html create mode 100644 demos/component-docs/icons/icons.ts create mode 100644 demos/component-docs/lists/lists.html create mode 100644 demos/component-docs/lists/lists.ts create mode 100644 demos/component-docs/menus/menus.html create mode 100644 demos/component-docs/menus/menus.ts delete mode 100644 demos/component-docs/modal.html delete mode 100644 demos/component-docs/modal.ts create mode 100644 demos/component-docs/modals/modals-content.html create mode 100644 demos/component-docs/modals/modals.html create mode 100644 demos/component-docs/modals/modals.ts delete mode 100644 demos/component-docs/navigation.html create mode 100644 demos/component-docs/navigation/navigation-details.html create mode 100644 demos/component-docs/navigation/navigation.html rename demos/component-docs/{ => navigation}/navigation.ts (72%) create mode 100644 demos/component-docs/popups/popups.html create mode 100644 demos/component-docs/popups/popups.ts create mode 100644 demos/component-docs/slides/slides.html create mode 100644 demos/component-docs/slides/slides.ts delete mode 100644 demos/component-docs/tabs.ts rename demos/component-docs/{ => tabs}/tabs.html (82%) create mode 100644 demos/component-docs/tabs/tabs.ts diff --git a/demos/component-docs/actionSheet/actionSheet.html b/demos/component-docs/actionSheet/actionSheet.html new file mode 100644 index 0000000000..3a4444307f --- /dev/null +++ b/demos/component-docs/actionSheet/actionSheet.html @@ -0,0 +1,9 @@ + + Action Sheet + + + + + diff --git a/demos/component-docs/actionSheet/actionSheet.ts b/demos/component-docs/actionSheet/actionSheet.ts new file mode 100644 index 0000000000..749cc8f51b --- /dev/null +++ b/demos/component-docs/actionSheet/actionSheet.ts @@ -0,0 +1,64 @@ +import {IonicPlatform, IonicView, ActionSheet} from 'ionic/ionic'; + +@IonicView({ + templateUrl: 'actionSheet/actionSheet.html', +}) +export class ActionSheetPage { + + constructor(actionSheet: ActionSheet, platform: IonicPlatform) { + this.actionSheet = actionSheet; + this.platform = platform; + } + + openMenu() { + if (this.platform.is('android')) { + var androidSheet = { + + buttons: [ + { text: 'Share', icon: 'share' }, + { text: 'Play', icon: 'arrow-dropright-circle'}, + { text: 'Favorite', icon: 'ion-md-heart-outline'} + ], + destructiveText: 'Delete', + titleText: 'Purchased', + cancelText: 'Cancel', + cancel: function() { + console.log('Canceled'); + }, + destructiveButtonClicked: () => { + console.log('Destructive clicked'); + }, + buttonClicked: function(index) { + console.log('Button clicked', index); + if (index == 1) { return false; } + return true; + } + }; + } + + this.actionSheet.open(androidSheet || { + buttons: [ + { text: 'Share This' }, + { text: 'Move' } + ], + destructiveText: 'Delete', + titleText: 'You Opened Action Sheet', + cancelText: 'Cancel', + cancel: function() { + console.log('Canceled'); + }, + destructiveButtonClicked: () => { + console.log('Destructive clicked'); + }, + buttonClicked: function(index) { + console.log('Button clicked', index); + if (index == 1) { return false; } + return true; + } + + }).then(actionSheetRef => { + this.actionSheetRef = actionSheetRef; + }); + } + +} \ No newline at end of file diff --git a/demos/component-docs/buttons/block.html b/demos/component-docs/buttons/block.html new file mode 100644 index 0000000000..f5177f5944 --- /dev/null +++ b/demos/component-docs/buttons/block.html @@ -0,0 +1,26 @@ + + Block Buttons + + + +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ + diff --git a/demos/component-docs/buttons/buttons.html b/demos/component-docs/buttons/buttons.html new file mode 100644 index 0000000000..56c7b8a8b3 --- /dev/null +++ b/demos/component-docs/buttons/buttons.html @@ -0,0 +1,27 @@ + + Buttons + + + +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ + + diff --git a/demos/component-docs/buttons/buttons.ts b/demos/component-docs/buttons/buttons.ts new file mode 100644 index 0000000000..fb1880085a --- /dev/null +++ b/demos/component-docs/buttons/buttons.ts @@ -0,0 +1,73 @@ +import {IonicPlatform, IonicView} from 'ionic/ionic'; + +@IonicView({ + templateUrl: 'buttons/buttons.html', +}) +export class ButtonsPage { + constructor() { + + } +} + +@IonicView({ + templateUrl: 'buttons/block.html', +}) +export class BlockButtonsPage { + constructor() { + + } +} + +@IonicView({ + templateUrl: 'buttons/full.html', +}) +export class FullButtonsPage { + constructor() { + + } +} + +@IonicView({ + templateUrl: 'buttons/outline.html', +}) +export class OutlineButtonsPage { + constructor() { + + } +} + +@IonicView({ + templateUrl: 'buttons/round.html', +}) +export class RoundButtonsPage { + constructor() { + + } +} + +@IonicView({ + templateUrl: 'buttons/fab.html', +}) +export class FabPage { + constructor() { + + } +} + +@IonicView({ + templateUrl: 'buttons/sizes.html', +}) +export class ButtonSizesPage { + constructor() { + + } +} + +@IonicView({ + templateUrl: 'buttons/icons.html', +}) +export class IconButtonsPage { + constructor() { + + } +} \ No newline at end of file diff --git a/demos/component-docs/buttons/fab.html b/demos/component-docs/buttons/fab.html new file mode 100644 index 0000000000..15b7396b66 --- /dev/null +++ b/demos/component-docs/buttons/fab.html @@ -0,0 +1,15 @@ + + Floating Action Buttons + + + +

+ +

+ + + + + diff --git a/demos/component-docs/buttons/full.html b/demos/component-docs/buttons/full.html new file mode 100644 index 0000000000..8c4efb0a51 --- /dev/null +++ b/demos/component-docs/buttons/full.html @@ -0,0 +1,29 @@ + + Full Buttons + + + +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ + + + + diff --git a/demos/component-docs/buttons/icons.html b/demos/component-docs/buttons/icons.html new file mode 100644 index 0000000000..fcdf5ba799 --- /dev/null +++ b/demos/component-docs/buttons/icons.html @@ -0,0 +1,44 @@ + + + Icon Buttons + + + +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ + + + + + diff --git a/demos/component-docs/buttons/outline.html b/demos/component-docs/buttons/outline.html new file mode 100644 index 0000000000..9413d1aff9 --- /dev/null +++ b/demos/component-docs/buttons/outline.html @@ -0,0 +1,29 @@ + + Outline Buttons + + + +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ + + + + diff --git a/demos/component-docs/buttons/round.html b/demos/component-docs/buttons/round.html new file mode 100644 index 0000000000..61be74abbb --- /dev/null +++ b/demos/component-docs/buttons/round.html @@ -0,0 +1,29 @@ + + Round Buttons + + + +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ + + + + diff --git a/demos/component-docs/buttons/sizes.html b/demos/component-docs/buttons/sizes.html new file mode 100644 index 0000000000..b1d996a92d --- /dev/null +++ b/demos/component-docs/buttons/sizes.html @@ -0,0 +1,29 @@ + + Button Sizes + + + +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ + + + + diff --git a/demos/component-docs/cards/cards.html b/demos/component-docs/cards/cards.html new file mode 100644 index 0000000000..f0de786baa --- /dev/null +++ b/demos/component-docs/cards/cards.html @@ -0,0 +1,62 @@ + + + Cards + + + + + + + Menu + + + + + + Home + + + + + Friends + + + + + + + + + + + + + + + Schedule + + + + + + + + + + Trophies + + + + + + + + + + diff --git a/demos/component-docs/cards/cards.ts b/demos/component-docs/cards/cards.ts new file mode 100644 index 0000000000..c48f892ab9 --- /dev/null +++ b/demos/component-docs/cards/cards.ts @@ -0,0 +1,10 @@ +import {IonicPlatform, IonicView} from 'ionic/ionic'; + +@IonicView({ + templateUrl: 'cards/cards.html', +}) +export class CardsPage { + constructor() { + + } +} \ No newline at end of file diff --git a/demos/component-docs/forms/forms.html b/demos/component-docs/forms/forms.html new file mode 100644 index 0000000000..aa18cfbe9a --- /dev/null +++ b/demos/component-docs/forms/forms.html @@ -0,0 +1,23 @@ + + Forms + + + +
+ + + + + + + + +
+ +
+
+ + + + + diff --git a/demos/component-docs/forms/forms.ts b/demos/component-docs/forms/forms.ts new file mode 100644 index 0000000000..37a03c6ac5 --- /dev/null +++ b/demos/component-docs/forms/forms.ts @@ -0,0 +1,25 @@ +import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms'; +import {IonicView} from 'ionic/ionic'; + + +@IonicView({ + templateUrl: 'forms/forms.html', + bindings: [FormBuilder] +}) +export class FormsPage { + + constructor() { + this.form = new ControlGroup({ + firstName: new Control("", Validators.required), + lastName: new Control("", Validators.required) + }); + } + + processForm(event) { + // TODO: display input in a popup + console.log(event); + } + + +} + diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts index 1f0bd7a166..e65f250883 100644 --- a/demos/component-docs/helpers.ts +++ b/demos/component-docs/helpers.ts @@ -1,3 +1,52 @@ +import {ActionSheetPage} from 'actionSheet/actionSheet'; + +import {ButtonsPage, + BlockButtonsPage, + FullButtonsPage, + OutlineButtonsPage, + RoundButtonsPage, + FabPage, + ButtonSizesPage, + IconButtonsPage} from 'buttons/buttons'; + +import {CardsPage} from 'cards/cards'; +import {FormsPage} from 'forms/forms'; +import {IconsPage} from 'icons/icons'; +import {ListsPage} from 'lists/lists'; +import {MenusPage} from 'menus/menus'; +import {ModalsPage} from 'modals/modals'; +import {NavigationPage} from 'navigation/navigation'; +import {PopupsPage} from 'popups/popups'; +import {SlidesPage} from 'slides/slides'; +import {TabsPage} from 'tabs/tabs'; + + export function toTitleCase(str) { return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); -} \ No newline at end of file +} + +export function getPageFor(hash) { + return { + 'action-sheets': ActionSheetPage, + 'buttons': ButtonsPage, + 'block-buttons': BlockButtonsPage, + 'full-buttons': FullButtonsPage, + 'outline-buttons': OutlineButtonsPage, + 'round-buttons': RoundButtonsPage, + 'floating-action-buttons': FabPage, + 'button-sizes': ButtonSizesPage, + 'icon-buttons': IconButtonsPage, + 'cards': CardsPage, + 'forms': FormsPage, + 'icons': IconsPage, + 'lists': ListsPage, + 'menus': MenusPage, + 'modals': ModalsPage, + 'navigation': NavigationPage, + 'popups': PopupsPage, + 'slides': SlidesPage, + 'tabs': TabsPage + }[hash] +} + + diff --git a/demos/component-docs/icons/icons.html b/demos/component-docs/icons/icons.html new file mode 100644 index 0000000000..f328076f9d --- /dev/null +++ b/demos/component-docs/icons/icons.html @@ -0,0 +1,78 @@ + + + Icons + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/demos/component-docs/icons/icons.ts b/demos/component-docs/icons/icons.ts new file mode 100644 index 0000000000..02ca95dbe2 --- /dev/null +++ b/demos/component-docs/icons/icons.ts @@ -0,0 +1,10 @@ +import {IonicPlatform, IonicView} from 'ionic/ionic'; + +@IonicView({ + templateUrl: 'icons/icons.html', +}) +export class IconsPage { + constructor() { + + } +} \ No newline at end of file diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts index 46226cc577..bc867c01b8 100644 --- a/demos/component-docs/index.ts +++ b/demos/component-docs/index.ts @@ -1,186 +1,33 @@ -import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms'; -import {App, IonicApp, IonicPlatform, ActionSheet, NavController, NavParams} from 'ionic/ionic'; -import {Popup, Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic'; -import {NavigationDetailsPage} from 'navigation'; - -import {TabsPage} from 'tabs'; -import {DemoModal} from 'modal'; +import {App, IonicApp, IonicPlatform, ActionSheet} from 'ionic/ionic'; +import {IonicView, IonicConfig, Events} from 'ionic/ionic'; +import {ActionSheetPage} from 'actionSheet/actionSheet'; import * as helpers from 'helpers'; -@IonicView({ - templateUrl: 'main.html', - bindings: [FormBuilder] +@App({ + template: '' }) -export class MainPage { +class DemoApp { - component: any = { title: 'Action Sheets' }; + constructor(app: IonicApp) { + this.app = app; + this.rootPage = ActionSheetPage; - constructor(app: IonicApp, - nav: NavController, - actionSheet: ActionSheet, - params: NavParams, - popup: Popup, - platform: IonicPlatform, - modal: Modal, - events: Events) { - this.params = params; - this.nav = nav; - this.platform = platform; - this.modal = modal; - this.popup = popup; - this.actionSheet = actionSheet; - this.navDetailsPage = NavigationDetailsPage; - this.demoModal = DemoModal; - this.form = new ControlGroup({ - firstName: new Control("", Validators.required), - lastName: new Control("", Validators.required) - }); - - if (params.data.location) { this.component.title = params.data.location; } - else if (window.location.hash) { this.component.title = window.location.hash; } + // if (params.data.location) { this.nextPage = helpers.getPageFor(params.data.location); } + // else if (window.location.hash) { this.nextPage = helpers.getPageFor(window.location.hash); } + // else { this.nextPage = helpers.getPageFor('action-sheet'); } window.addEventListener('message', (e) => { zone.run(() => { if (e.data) { var data = JSON.parse(e.data); - this.component.title = helpers.toTitleCase(data.hash.replace(/-/g, ' ')); - if (this.component.title === 'Tabs') { - this.nav.setRoot(TabsPage); - } + this.nextPage = helpers.getPageFor(data.hash); + this.title = helpers.toTitleCase(data.hash.replace(/-/g, ' ')); + let nav = this.app.getComponent('nav'); + nav.setRoot(this.nextPage); } }); }); - events.subscribe('page:locationChange', (data) => { - this.component.title = data[0].componentName; - }); - } - - // ************************** - // Action Sheets - // ************************** - openMenu() { - if (this.platform.is('android')) { - var androidSheet = { - - buttons: [ - { text: 'Share', icon: 'share' }, - { text: 'Play', icon: 'arrow-dropright-circle'}, - { text: 'Favorite', icon: 'ion-md-heart-outline'} - ], - destructiveText: 'Delete', - titleText: 'Purchased', - cancelText: 'Cancel', - cancel: function() { - console.log('Canceled'); - }, - destructiveButtonClicked: () => { - console.log('Destructive clicked'); - }, - buttonClicked: function(index) { - console.log('Button clicked', index); - if (index == 1) { return false; } - return true; - } - }; - } - - this.actionSheet.open(androidSheet || { - buttons: [ - { text: 'Share This' }, - { text: 'Move' } - ], - destructiveText: 'Delete', - titleText: 'You Opened Action Sheet', - cancelText: 'Cancel', - cancel: function() { - console.log('Canceled'); - }, - destructiveButtonClicked: () => { - console.log('Destructive clicked'); - }, - buttonClicked: function(index) { - console.log('Button clicked', index); - if (index == 1) { return false; } - return true; - } - - }).then(actionSheetRef => { - this.actionSheetRef = actionSheetRef; - }); - } - - // ************************** - // Navigation - // ************************** - openNavDetailsPage(item) { - this.nav.push(NavigationDetailsPage, { name: item }); - } - - - // ************************** - // Modal - // ************************** - openModal() { - this.modal.open(this.demoModal, { - handle: 'my-awesome-modal', - enterAnimation: 'my-fade-in', - leaveAnimation: 'my-fade-out' - }); - } - - // ************************** - // Popup - // ************************** - showPopup() { - this.popup.alert("Popup Title").then(() => { - }); - } - - - // ************************** - // Form - // ************************** - processForm(event) { - // TODO: display input in a popup - console.log(event); - } - -} - -class FadeIn extends Animation { - constructor(element) { - super(element); - this - .easing('ease') - .duration(450) - .fadeIn(); } } - -Animation.register('my-fade-in', FadeIn); - -class FadeOut extends Animation { - constructor(element) { - super(element); - this - .easing('ease') - .duration(250) - .fadeOut(); - } -} - -Animation.register('my-fade-out', FadeOut); - - -@App({ - template: '' -}) -class DemoApp { - - constructor() { - this.rootPage = MainPage; - } - -} diff --git a/demos/component-docs/lists/lists.html b/demos/component-docs/lists/lists.html new file mode 100644 index 0000000000..b8dc74a791 --- /dev/null +++ b/demos/component-docs/lists/lists.html @@ -0,0 +1,58 @@ + + + Lists + + + + + + + Classes + + + + + Dark Arts + + + + + Astronomy + + + + + Potions + + + + + Charms + + + + + + + + + Menu + + + + + Invisibility Cloak + + + + + Call Ron + Maybe later + + + + + + + + diff --git a/demos/component-docs/lists/lists.ts b/demos/component-docs/lists/lists.ts new file mode 100644 index 0000000000..66e78d0bfd --- /dev/null +++ b/demos/component-docs/lists/lists.ts @@ -0,0 +1,10 @@ +import {IonicPlatform, IonicView} from 'ionic/ionic'; + +@IonicView({ + templateUrl: 'lists/lists.html', +}) +export class ListsPage { + constructor() { + + } +} \ No newline at end of file diff --git a/demos/component-docs/menus/menus.html b/demos/component-docs/menus/menus.html new file mode 100644 index 0000000000..51705e2f64 --- /dev/null +++ b/demos/component-docs/menus/menus.html @@ -0,0 +1,12 @@ + + + Menus + + + + TODO + + + + + diff --git a/demos/component-docs/menus/menus.ts b/demos/component-docs/menus/menus.ts new file mode 100644 index 0000000000..bf6cbfa992 --- /dev/null +++ b/demos/component-docs/menus/menus.ts @@ -0,0 +1,10 @@ +import {IonicPlatform, IonicView} from 'ionic/ionic'; + +@IonicView({ + templateUrl: 'menus/menus.html', +}) +export class MenusPage { + constructor() { + + } +} \ No newline at end of file diff --git a/demos/component-docs/modal.html b/demos/component-docs/modal.html deleted file mode 100644 index dc34228232..0000000000 --- a/demos/component-docs/modal.html +++ /dev/null @@ -1 +0,0 @@ -

TODO

diff --git a/demos/component-docs/modal.ts b/demos/component-docs/modal.ts deleted file mode 100644 index 94089f578e..0000000000 --- a/demos/component-docs/modal.ts +++ /dev/null @@ -1,46 +0,0 @@ -import {App, IonicApp, Modal, NavController, IonicView, Events} from 'ionic/ionic'; -import * as helpers from 'helpers'; - -@IonicView({ - templateUrl: 'modal.html' -}) -class ModalFirstPage { - - constructor( - nav: NavController, - modal: Modal, - events: Events - ) { - this.nav = nav; - this.modal = modal; - window.onmessage = (e) => { - zone.run(() => { - if (e.data) { - var data = JSON.parse(e.data); - var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' ')); - events.publish('page:locationChange', { componentName: componentTitle }); - this.closeModal(); - } - }); - }; - } - - closeModal() { - let modal = this.modal.get(); - if (modal) { - modal.close(); - } - } - -} - -@IonicView({ - template: '' -}) -export class DemoModal { - constructor() { - this.rootView = ModalFirstPage; - } -} - - diff --git a/demos/component-docs/modals/modals-content.html b/demos/component-docs/modals/modals-content.html new file mode 100644 index 0000000000..8d9c8d52d0 --- /dev/null +++ b/demos/component-docs/modals/modals-content.html @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/demos/component-docs/modals/modals.html b/demos/component-docs/modals/modals.html new file mode 100644 index 0000000000..572380a046 --- /dev/null +++ b/demos/component-docs/modals/modals.html @@ -0,0 +1,14 @@ + + + Modals + + + + + + + + + diff --git a/demos/component-docs/modals/modals.ts b/demos/component-docs/modals/modals.ts new file mode 100644 index 0000000000..4234adf900 --- /dev/null +++ b/demos/component-docs/modals/modals.ts @@ -0,0 +1,80 @@ +import {App, IonicApp, Animation, Modal, NavController, IonicView, Events} from 'ionic/ionic'; +import * as helpers from 'helpers'; + + +@IonicView({ + templateUrl: 'modals/modals.html' +}) +class ModalsFirstPage { + + constructor( + nav: NavController, + modal: Modal, + events: Events + ) { + this.nav = nav; + this.modal = modal; + } + + openModal() { + this.modal.open(ModalsContentPage, { + handle: 'my-awesome-modal', + enterAnimation: 'my-fade-in', + leaveAnimation: 'my-fade-out' + }); + } + +} + +@IonicView({ + templateUrl: 'modals/modals-content.html' +}) +class ModalsContentPage { + + constructor( + modal: Modal, + events: Events + ) { + this.modal = modal; + } + + closeModal() { + let modal = this.modal.get(); + if (modal) { + modal.close(); + } + } +} + +@IonicView({ + template: '' +}) +export class ModalsPage { + constructor() { + this.rootView = ModalsFirstPage; + } +} + +class FadeIn extends Animation { + constructor(element) { + super(element); + this + .easing('ease') + .duration(450) + .fadeIn(); + } +} + +Animation.register('my-fade-in', FadeIn); + +class FadeOut extends Animation { + constructor(element) { + super(element); + this + .easing('ease') + .duration(250) + .fadeOut(); + } +} + +Animation.register('my-fade-out', FadeOut); diff --git a/demos/component-docs/navigation.html b/demos/component-docs/navigation.html deleted file mode 100644 index 5d734ef310..0000000000 --- a/demos/component-docs/navigation.html +++ /dev/null @@ -1,8 +0,0 @@ - - - {{ selection.title }} - - - -{{ selection.content }} - \ No newline at end of file diff --git a/demos/component-docs/navigation/navigation-details.html b/demos/component-docs/navigation/navigation-details.html new file mode 100644 index 0000000000..d278f76b49 --- /dev/null +++ b/demos/component-docs/navigation/navigation-details.html @@ -0,0 +1,8 @@ + + + {{selection.title}} + + + + {{selection.content}} + \ No newline at end of file diff --git a/demos/component-docs/navigation/navigation.html b/demos/component-docs/navigation/navigation.html new file mode 100644 index 0000000000..3263158fdf --- /dev/null +++ b/demos/component-docs/navigation/navigation.html @@ -0,0 +1,30 @@ + + + Navigation + + + + + + + + Angular + + + + + CSS3 + + + + + + + + \ No newline at end of file diff --git a/demos/component-docs/navigation.ts b/demos/component-docs/navigation/navigation.ts similarity index 72% rename from demos/component-docs/navigation.ts rename to demos/component-docs/navigation/navigation.ts index 60f6a8b36c..5c5f5250e2 100644 --- a/demos/component-docs/navigation.ts +++ b/demos/component-docs/navigation/navigation.ts @@ -3,9 +3,9 @@ import {IonicView, Events} from 'ionic/ionic'; import * as helpers from 'helpers'; @IonicView({ - templateUrl: 'navigation.html' + templateUrl: 'navigation/navigation-details.html' }) -export class NavigationDetailsPage { +class NavigationDetailsPage { constructor(nav: NavController, params: NavParams, events: Events) { this.nav = nav; this.selection = { title: params.data.name }; @@ -23,16 +23,20 @@ export class NavigationDetailsPage { }; this.selection['content'] = navData[this.selection.title]; this.selection['icon'] = navIcons[this.selection.title]; - window.onmessage = (e) => { - zone.run(() => { - if (e.data) { - var data = JSON.parse(e.data); - var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' ')); - events.publish('page:locationChange', { componentName: componentTitle }); - this.nav.pop(); - } - }); - }; - } +} + +@IonicView({ + templateUrl: 'navigation/navigation.html', +}) +export class NavigationPage { + + constructor(nav: NavController) { + this.nav = nav; + } + + openNavDetailsPage(item) { + this.nav.push(NavigationDetailsPage, { name: item }); + } + } \ No newline at end of file diff --git a/demos/component-docs/popups/popups.html b/demos/component-docs/popups/popups.html new file mode 100644 index 0000000000..1398388f0b --- /dev/null +++ b/demos/component-docs/popups/popups.html @@ -0,0 +1,10 @@ + + + Popups + + + + + diff --git a/demos/component-docs/popups/popups.ts b/demos/component-docs/popups/popups.ts new file mode 100644 index 0000000000..609975601b --- /dev/null +++ b/demos/component-docs/popups/popups.ts @@ -0,0 +1,16 @@ +import {IonicPlatform, IonicView, Popup} from 'ionic/ionic'; + +@IonicView({ + templateUrl: 'popups/popups.html', +}) +export class PopupsPage { + + constructor(popup: Popup) { + this.popup = popup; + } + + showPopup() { + this.popup.alert("Popup Title").then(() => { + }); + } +} \ No newline at end of file diff --git a/demos/component-docs/slides/slides.html b/demos/component-docs/slides/slides.html new file mode 100644 index 0000000000..08d81d2e51 --- /dev/null +++ b/demos/component-docs/slides/slides.html @@ -0,0 +1,24 @@ + + + Slides + + + + + +
+ Slide 1 +
+ + +
+ Slide 2 +
+ + +
+ Slide 3 +
+ + + diff --git a/demos/component-docs/slides/slides.ts b/demos/component-docs/slides/slides.ts new file mode 100644 index 0000000000..dfaf615154 --- /dev/null +++ b/demos/component-docs/slides/slides.ts @@ -0,0 +1,10 @@ +import {IonicPlatform, IonicView} from 'ionic/ionic'; + +@IonicView({ + templateUrl: 'slides/slides.html', +}) +export class SlidesPage { + constructor() { + + } +} \ No newline at end of file diff --git a/demos/component-docs/tabs.ts b/demos/component-docs/tabs.ts deleted file mode 100644 index 357ab55d72..0000000000 --- a/demos/component-docs/tabs.ts +++ /dev/null @@ -1,35 +0,0 @@ -import {NavController, NavParams} from 'ionic/ionic'; -import {IonicView, ViewController, Events} from 'ionic/ionic'; -import {MainPage} from 'index'; -import * as helpers from 'helpers'; - -@IonicView({ - template: 'Hello 1', -}) -class TabOneCtrl { - constructor(nav: NavController, view: ViewController) { - this.nav = nav; - this.view = view; - } -} - -@IonicView({ - templateUrl: 'tabs.html' -}) -export class TabsPage { - constructor(nav: NavController, params: NavParams, events: Events) { - this.nav = nav; - this.TabOneRoot = TabOneCtrl; - window.onmessage = (e) => { - zone.run(() => { - if (e.data) { - var data = JSON.parse(e.data); - var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' ')); - this.nav.setRoot(MainPage, {location: componentTitle}); - events.publish('page:locationChange', { componentName: componentTitle }); - } - }); - }; - - } -} \ No newline at end of file diff --git a/demos/component-docs/tabs.html b/demos/component-docs/tabs/tabs.html similarity index 82% rename from demos/component-docs/tabs.html rename to demos/component-docs/tabs/tabs.html index c6566ddd7f..f69ce0c9d0 100644 --- a/demos/component-docs/tabs.html +++ b/demos/component-docs/tabs/tabs.html @@ -4,7 +4,7 @@ - + diff --git a/demos/component-docs/tabs/tabs.ts b/demos/component-docs/tabs/tabs.ts new file mode 100644 index 0000000000..22e1a53966 --- /dev/null +++ b/demos/component-docs/tabs/tabs.ts @@ -0,0 +1,22 @@ +import {NavController, NavParams} from 'ionic/ionic'; +import {IonicView, ViewController} from 'ionic/ionic'; +import * as helpers from 'helpers'; + +@IonicView({ + template: 'Hello 1', +}) +class TabOneCtrl { + constructor(nav: NavController, view: ViewController) { + this.nav = nav; + this.view = view; + } +} + +@IonicView({ + templateUrl: 'tabs.html' +}) +export class TabsPage { + constructor(nav: NavController, params: NavParams) { + this.nav = nav; + } +} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 808c405ff8..5333b45dde 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -416,8 +416,8 @@ gulp.task('demos', function(){ gulp.task('demos:all', ['demos'], function() { return gulp - .src('dist/demos/component-docs/*') - .pipe(gulp.dest('dist/ionic-site/docs/v2/components/demo/')) + .src('dist/demos/component-docs/**/*') + .pipe(gulp.dest('dist/ionic-site/docs/v2/components/demo/')) }); gulp.task('publish', function(done) { From a92ea015bd96049e3332a8c184a0e14a20d62141 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Thu, 8 Oct 2015 11:06:11 -0500 Subject: [PATCH 02/17] docs(demos): directly load a page when parent window has url hash --- demos/component-docs/index.ts | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts index bc867c01b8..4a3d936416 100644 --- a/demos/component-docs/index.ts +++ b/demos/component-docs/index.ts @@ -9,24 +9,28 @@ import * as helpers from 'helpers'; }) class DemoApp { - constructor(app: IonicApp) { + rootPage: any; + + constructor(app: IonicApp, platform: IonicPlatform) { this.app = app; - this.rootPage = ActionSheetPage; + this.platform = platform; - // if (params.data.location) { this.nextPage = helpers.getPageFor(params.data.location); } - // else if (window.location.hash) { this.nextPage = helpers.getPageFor(window.location.hash); } - // else { this.nextPage = helpers.getPageFor('action-sheet'); } - - window.addEventListener('message', (e) => { - zone.run(() => { - if (e.data) { - var data = JSON.parse(e.data); - this.nextPage = helpers.getPageFor(data.hash); - this.title = helpers.toTitleCase(data.hash.replace(/-/g, ' ')); - let nav = this.app.getComponent('nav'); - nav.setRoot(this.nextPage); - } + this.platform.ready().then( () => { + window.addEventListener('message', (e) => { + zone.run(() => { + if (e.data) { + var data = JSON.parse(e.data); + if (data.hash) { + this.nextPage = helpers.getPageFor(data.hash.replace('#', '')); + } else { + this.nextPage = ActionSheetPage; + } + let nav = this.app.getComponent('nav'); + nav.setRoot(this.nextPage); + } + }); }); + window.parent.postMessage(this.platform.is('ios')? "ios":"android", "*"); }); } From 3203fa16a1b3350f7a4432afbc59b61779021581 Mon Sep 17 00:00:00 2001 From: Tim Lancina Date: Thu, 8 Oct 2015 12:28:59 -0500 Subject: [PATCH 03/17] use angular2/test_lib for tests --- scripts/karma/karma.conf.js | 1 + scripts/karma/test-main.js | 30 +++++++++++++++++------------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/scripts/karma/karma.conf.js b/scripts/karma/karma.conf.js index d05990d431..ac5855f203 100644 --- a/scripts/karma/karma.conf.js +++ b/scripts/karma/karma.conf.js @@ -8,6 +8,7 @@ module.exports = function(config) { frameworks: ['jasmine'], files: buildConfig.scripts.concat([ + 'node_modules/angular2/bundles/test_lib.dev.js', 'dist/tests/**/*.spec.js', 'scripts/karma/test-main.js' ]), diff --git a/scripts/karma/test-main.js b/scripts/karma/test-main.js index c0deefdd35..de357b69bb 100644 --- a/scripts/karma/test-main.js +++ b/scripts/karma/test-main.js @@ -4,19 +4,23 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 50; // we will call `__karma__.start()` later, once all the specs are loaded. __karma__.loaded = function() {}; -Promise.all( - Object.keys(window.__karma__.files) // All files served by Karma. - .filter(onlySpecFiles) - .map(window.file2moduleName) // Normalize paths to module names. - .map(function(path) { - return System.import(path).then(function(module) { - if (module.hasOwnProperty('run')) { - module.run(); - } else { - console.warn('WARNING: Module ' + path + ' does not implement a run() method. No tests run.'); - } - }); - })) +System.import('angular2/src/core/dom/browser_adapter').then(function(browser_adapter) { + browser_adapter.BrowserDomAdapter.makeCurrent(); +}).then(function() { + return Promise.all( + Object.keys(window.__karma__.files) // All files served by Karma. + .filter(onlySpecFiles) + .map(window.file2moduleName) // Normalize paths to module names. + .map(function(path) { + return System.import(path).then(function(module) { + if (module.hasOwnProperty('run')) { + module.run(); + } else { + console.warn('WARNING: Module ' + path + ' does not implement a run() method. No tests run.'); + } + }); + })) +}) .then(function() { __karma__.start(); }, function(error) { From a1155b4663b13be238b2aa6ab9e5e16102747194 Mon Sep 17 00:00:00 2001 From: Tim Lancina Date: Thu, 8 Oct 2015 12:29:41 -0500 Subject: [PATCH 04/17] update nav-controller tests to angular test methods --- .../nav/test/nav-controller.spec.ts | 82 ++++++++++++++----- ionic/components/nav/view-controller.ts | 2 +- 2 files changed, 62 insertions(+), 22 deletions(-) diff --git a/ionic/components/nav/test/nav-controller.spec.ts b/ionic/components/nav/test/nav-controller.spec.ts index 2a41a025ae..70c965074e 100644 --- a/ionic/components/nav/test/nav-controller.spec.ts +++ b/ionic/components/nav/test/nav-controller.spec.ts @@ -1,42 +1,76 @@ +import { + ddescribe, + describe, + xdescribe, + it, + iit, + xit, + expect, + beforeEach, + afterEach, + AsyncTestCompleter, + inject, + beforeEachBindings +} from 'angular2/test'; + +import {Compiler} from 'angular2/angular2'; + import { NavController, IonicConfig, + Page, ViewController } from 'ionic/ionic'; + +@Page({ + template: '' +}) +class SomePage {} + export function run() { - describe("NavController", function(){ - beforeEach( function(){ - this.nav = new NavController(null, null, new IonicConfig(), null, null, null, null, null); + describe("NavController", () => { + let nav; + + beforeEach(inject([Compiler], compiler => { + nav = new NavController(null, null, new IonicConfig(), null, compiler, null, null, null); + })); + + it('should exist', () => { + expect(nav).not.toBeUndefined(); }); - it('should exist', function(){ - expect(this.nav).not.toBeUndefined(); - }); - - describe("getActive", function(){ - it('should return null if there is no active view', function(){ - var active = this.nav.getActive(); + describe("getActive", () => { + it('should return null if there is no active view', () => { + var active = nav.getActive(); expect(active).toBe(null); }); - it('should return the first active page', function(){ + it('should return the first active page', () => { let activeView = new ViewController(); activeView.state = 1; // ACTIVE_STATE - this.nav.add(activeView); - var active = this.nav.getActive(); + nav.add(activeView); + var active = nav.getActive(); + + expect(active).toBe(activeView); + + let secondActiveView = new ViewController(); + secondActiveView.state = 1; // ACTIVE_STATE + + nav.add(secondActiveView); + active = nav.getActive(); expect(active).toBe(activeView); }); }); - describe("push", function(){ - it('should return a rejected Promise if componentType is falsy', function(done){ + describe("push", () => { + it('should return a rejected Promise if componentType is falsy', done => { let s = jasmine.createSpy('success'); let f = jasmine.createSpy('fail'); - let promise = this.nav.push(undefined, {}, {}); + let promise = nav.push(undefined, {}, {}); promise.then(s, f).then(() => { expect(s).not.toHaveBeenCalled(); @@ -45,20 +79,26 @@ export function run() { }); }); - it('should throw an error if componentType truthy, but is not a function', function(){ - let push = () => this.nav.push({}, {}, {}); + it('should throw an error if componentType truthy, but is not a function', () => { + let push = () => nav.push({}, {}, {}); expect(push).toThrow(); - push = () => this.nav.push("string", {}, {}); + push = () => nav.push("string", {}, {}); expect(push).toThrow(); - push = () => this.nav.push(42, {}, {}); + push = () => nav.push(42, {}, {}); expect(push).toThrow(); - push = () => this.nav.push(true, {}, {}); + push = () => nav.push(true, {}, {}); expect(push).toThrow(); }); + it('be successful', () => { + expect(SomePage).toBeDefined(); + + nav.push(SomePage, {}, {}); + }); + }) }); diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index 7169e22e39..38707e2bc6 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -36,7 +36,7 @@ export class ViewController { return done(); } - // compile the componenet and create a ProtoViewRef + // compile the component and create a ProtoViewRef navCtrl.compileView(this.componentType).then(hostProtoViewRef => { // get the pane the NavController wants to use From b07a3760e5ebdd80a9c00b2ebb29a09663edc23d Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 8 Oct 2015 14:04:18 -0400 Subject: [PATCH 05/17] refactor(search-bar): Added JS to calculate the margin of the iOS cancel button References #247 --- ionic/components/search-bar/modes/ios.scss | 19 +++++-------------- ionic/components/search-bar/modes/md.scss | 4 ++++ ionic/components/search-bar/search-bar.ts | 18 ++++++++++++++++++ .../search-bar/test/floating/main.html | 2 ++ 4 files changed, 29 insertions(+), 14 deletions(-) diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss index 2e702ce67a..c7f9d10922 100644 --- a/ionic/components/search-bar/modes/ios.scss +++ b/ionic/components/search-bar/modes/ios.scss @@ -15,8 +15,9 @@ $search-bar-ios-input-height: 28px !default; $search-bar-ios-input-placeholder-color: #9D9D9D !default; $search-bar-ios-input-text-color: #000 !default; $search-bar-ios-input-background-color: #FFFFFF !default; -$search-bar-ios-input-transition: all 0.3s linear !default; -//cubic-bezier(.25, .45, .05, 1) +$search-bar-ios-input-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default; +$search-bar-ios-cancel-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default; + $search-bar-ios-input-close-icon-color: #8F8E94 !default; $search-bar-ios-input-close-icon-svg: "" !default; $search-bar-ios-input-close-icon-size: 17px !default; @@ -88,19 +89,9 @@ $search-bar-ios-input-close-icon-size: 17px !default; .search-bar-cancel { @extend button[clear]; - // transition: all 2s cubic-bezier(.25, .45, .05, 1); - transition: $search-bar-ios-input-transition; - transition-duration: 3s !important; - margin-right: calc(-100%); - // transform: translate3d(100px,0,0); - // max-width: 0; - min-height: 0; -} - -.search-bar-cancel.left-align { - max-width: initial; - margin-right: 0; + transition: $search-bar-ios-cancel-transition; padding-left: 8px; + min-height: 0; padding-right: 0; } diff --git a/ionic/components/search-bar/modes/md.scss b/ionic/components/search-bar/modes/md.scss index 4605baf186..84a1c244bd 100644 --- a/ionic/components/search-bar/modes/md.scss +++ b/ionic/components/search-bar/modes/md.scss @@ -69,3 +69,7 @@ $search-bar-md-input-close-icon-size: 22px !default; right: 13px; top: 13px; } + +.search-bar-cancel { + display: none; +} diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts index 7bc2933142..766fe60c6d 100644 --- a/ionic/components/search-bar/search-bar.ts +++ b/ionic/components/search-bar/search-bar.ts @@ -74,6 +74,16 @@ export class SearchBar extends Ion { this.query = ''; } + // Add the margin for iOS + afterViewInit() { + this.cancelButton = this.elementRef.nativeElement.querySelector('.search-bar-cancel'); + + if (this.cancelButton) { + this.cancelWidth = this.cancelButton.offsetWidth; + this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px"; + } + } + /** * Much like ngModel, this is called from our valueAccessor for the attached * ControlDirective to update the value internally. @@ -99,10 +109,18 @@ export class SearchBar extends Ion { inputFocused() { this.isFocused = true; this.shouldLeftAlign = true; + + if (this.cancelButton) { + this.cancelButton.style.marginRight = "0px"; + } } inputBlurred() { this.isFocused = false; this.shouldLeftAlign = this.value.trim() != ''; + + if (this.cancelButton) { + this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px"; + } } clearInput() { diff --git a/ionic/components/search-bar/test/floating/main.html b/ionic/components/search-bar/test/floating/main.html index da43d4f498..9d04b18b29 100644 --- a/ionic/components/search-bar/test/floating/main.html +++ b/ionic/components/search-bar/test/floating/main.html @@ -13,6 +13,8 @@ + + From 8665f65cf044112c281169851f040db4e9d389c1 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Thu, 8 Oct 2015 11:17:07 -0500 Subject: [PATCH 06/17] remove padding from demo --- demos/component-docs/icons/icons.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/component-docs/icons/icons.html b/demos/component-docs/icons/icons.html index f328076f9d..9090fea137 100644 --- a/demos/component-docs/icons/icons.html +++ b/demos/component-docs/icons/icons.html @@ -3,7 +3,7 @@ Icons - + From 1016af0c2ad680038bc169e326f3e7df4004ed26 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Thu, 8 Oct 2015 11:31:34 -0500 Subject: [PATCH 07/17] docs(demos): add menu demo --- demos/component-docs/menus/menu-events.html | 15 +++++ demos/component-docs/menus/menu-friends.html | 15 +++++ demos/component-docs/menus/menu-home.html | 16 ++++++ demos/component-docs/menus/menu-places.html | 0 demos/component-docs/menus/menus.html | 24 ++++++-- demos/component-docs/menus/menus.ts | 58 ++++++++++++++++++-- 6 files changed, 117 insertions(+), 11 deletions(-) create mode 100644 demos/component-docs/menus/menu-events.html create mode 100644 demos/component-docs/menus/menu-friends.html create mode 100644 demos/component-docs/menus/menu-home.html create mode 100644 demos/component-docs/menus/menu-places.html diff --git a/demos/component-docs/menus/menu-events.html b/demos/component-docs/menus/menu-events.html new file mode 100644 index 0000000000..d95d163938 --- /dev/null +++ b/demos/component-docs/menus/menu-events.html @@ -0,0 +1,15 @@ + + + + + + + + Events + + + + + + + diff --git a/demos/component-docs/menus/menu-friends.html b/demos/component-docs/menus/menu-friends.html new file mode 100644 index 0000000000..10a030378b --- /dev/null +++ b/demos/component-docs/menus/menu-friends.html @@ -0,0 +1,15 @@ + + + + + + + + Friends + + + + + + + diff --git a/demos/component-docs/menus/menu-home.html b/demos/component-docs/menus/menu-home.html new file mode 100644 index 0000000000..4696694445 --- /dev/null +++ b/demos/component-docs/menus/menu-home.html @@ -0,0 +1,16 @@ + + + + + + + + Menus + + + + + + + + diff --git a/demos/component-docs/menus/menu-places.html b/demos/component-docs/menus/menu-places.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/component-docs/menus/menus.html b/demos/component-docs/menus/menus.html index 51705e2f64..999f6b0ade 100644 --- a/demos/component-docs/menus/menus.html +++ b/demos/component-docs/menus/menus.html @@ -1,12 +1,24 @@ + - - Menus - + + Menu + - - TODO - + + + + + + + + + + diff --git a/demos/component-docs/menus/menus.ts b/demos/component-docs/menus/menus.ts index bf6cbfa992..0294b6b4d9 100644 --- a/demos/component-docs/menus/menus.ts +++ b/demos/component-docs/menus/menus.ts @@ -1,10 +1,58 @@ -import {IonicPlatform, IonicView} from 'ionic/ionic'; +import {App, IonicApp, IonicView, NavController, NavParams} from 'ionic/ionic'; +import {IonicView, Events} from 'ionic/ionic'; +import * as helpers from 'helpers'; @IonicView({ - templateUrl: 'menus/menus.html', + templateUrl: 'menus/menu-home.html' +}) +class PageOne{ + constructor(nav: NavController, events: Events) { + this.nav = nav; + this.events = events; + } +} + +@IonicView({ + templateUrl: 'menus/menu-friends.html' +}) +class PageTwo{ +} + +@IonicView({ + templateUrl: 'menus/menu-events.html' +}) +class PageThree{ +} + +@IonicView({ + templateUrl: 'menus/menus.html' }) export class MenusPage { - constructor() { - } -} \ No newline at end of file + constructor(app: IonicApp, events: Events, nav: NavController) { + this.nav = nav; + this.app = app; + this.rootView = PageOne; + this.pages = [ + { title: 'Home', component: PageOne }, + { title: 'Friends', component: PageTwo }, + { title: 'Events', component: PageThree } + ]; + + } + + onViewWillUnload() { + } + + openPage(menu, page) { + // close the menu when clicking a link from the menu + menu.close(); + + // Reset the content nav to have just this page + // we wouldn't want the back button to show in this scenario + // let nav = this.app.getComponent('nav'); + this.nav.setRoot(page.component); + } +} + + From 0171f84cc1a81872f0c6a4f659401d1b069e9e17 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Thu, 8 Oct 2015 14:12:54 -0500 Subject: [PATCH 08/17] docs(demos): use Page instead of IonicView --- .../component-docs/actionSheet/actionSheet.ts | 4 ++-- demos/component-docs/buttons/buttons.ts | 18 +++++++++--------- demos/component-docs/cards/cards.ts | 4 ++-- demos/component-docs/forms/forms.ts | 6 +++--- demos/component-docs/icons/icons.ts | 4 ++-- demos/component-docs/index.ts | 2 +- demos/component-docs/lists/lists.ts | 4 ++-- demos/component-docs/menus/menus.ts | 12 ++++++------ demos/component-docs/modals/modals.ts | 8 ++++---- demos/component-docs/navigation/navigation.ts | 6 +++--- demos/component-docs/popups/popups.ts | 4 ++-- demos/component-docs/slides/slides.ts | 4 ++-- demos/component-docs/tabs/tabs.ts | 6 +++--- 13 files changed, 41 insertions(+), 41 deletions(-) diff --git a/demos/component-docs/actionSheet/actionSheet.ts b/demos/component-docs/actionSheet/actionSheet.ts index 749cc8f51b..83ef677164 100644 --- a/demos/component-docs/actionSheet/actionSheet.ts +++ b/demos/component-docs/actionSheet/actionSheet.ts @@ -1,6 +1,6 @@ -import {IonicPlatform, IonicView, ActionSheet} from 'ionic/ionic'; +import {IonicPlatform, Page, ActionSheet} from 'ionic/ionic'; -@IonicView({ +@Page({ templateUrl: 'actionSheet/actionSheet.html', }) export class ActionSheetPage { diff --git a/demos/component-docs/buttons/buttons.ts b/demos/component-docs/buttons/buttons.ts index fb1880085a..dcf0084f9a 100644 --- a/demos/component-docs/buttons/buttons.ts +++ b/demos/component-docs/buttons/buttons.ts @@ -1,6 +1,6 @@ -import {IonicPlatform, IonicView} from 'ionic/ionic'; +import {IonicPlatform, Page} from 'ionic/ionic'; -@IonicView({ +@Page({ templateUrl: 'buttons/buttons.html', }) export class ButtonsPage { @@ -9,7 +9,7 @@ export class ButtonsPage { } } -@IonicView({ +@Page({ templateUrl: 'buttons/block.html', }) export class BlockButtonsPage { @@ -18,7 +18,7 @@ export class BlockButtonsPage { } } -@IonicView({ +@Page({ templateUrl: 'buttons/full.html', }) export class FullButtonsPage { @@ -27,7 +27,7 @@ export class FullButtonsPage { } } -@IonicView({ +@Page({ templateUrl: 'buttons/outline.html', }) export class OutlineButtonsPage { @@ -36,7 +36,7 @@ export class OutlineButtonsPage { } } -@IonicView({ +@Page({ templateUrl: 'buttons/round.html', }) export class RoundButtonsPage { @@ -45,7 +45,7 @@ export class RoundButtonsPage { } } -@IonicView({ +@Page({ templateUrl: 'buttons/fab.html', }) export class FabPage { @@ -54,7 +54,7 @@ export class FabPage { } } -@IonicView({ +@Page({ templateUrl: 'buttons/sizes.html', }) export class ButtonSizesPage { @@ -63,7 +63,7 @@ export class ButtonSizesPage { } } -@IonicView({ +@Page({ templateUrl: 'buttons/icons.html', }) export class IconButtonsPage { diff --git a/demos/component-docs/cards/cards.ts b/demos/component-docs/cards/cards.ts index c48f892ab9..03fb88e988 100644 --- a/demos/component-docs/cards/cards.ts +++ b/demos/component-docs/cards/cards.ts @@ -1,6 +1,6 @@ -import {IonicPlatform, IonicView} from 'ionic/ionic'; +import {IonicPlatform, Page} from 'ionic/ionic'; -@IonicView({ +@Page({ templateUrl: 'cards/cards.html', }) export class CardsPage { diff --git a/demos/component-docs/forms/forms.ts b/demos/component-docs/forms/forms.ts index 37a03c6ac5..78dda384ca 100644 --- a/demos/component-docs/forms/forms.ts +++ b/demos/component-docs/forms/forms.ts @@ -1,8 +1,8 @@ -import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms'; -import {IonicView} from 'ionic/ionic'; +import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; +import {Page} from 'ionic/ionic'; -@IonicView({ +@Page({ templateUrl: 'forms/forms.html', bindings: [FormBuilder] }) diff --git a/demos/component-docs/icons/icons.ts b/demos/component-docs/icons/icons.ts index 02ca95dbe2..830b067e9c 100644 --- a/demos/component-docs/icons/icons.ts +++ b/demos/component-docs/icons/icons.ts @@ -1,6 +1,6 @@ -import {IonicPlatform, IonicView} from 'ionic/ionic'; +import {IonicPlatform, Page} from 'ionic/ionic'; -@IonicView({ +@Page({ templateUrl: 'icons/icons.html', }) export class IconsPage { diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts index 4a3d936416..328ce94004 100644 --- a/demos/component-docs/index.ts +++ b/demos/component-docs/index.ts @@ -1,5 +1,5 @@ import {App, IonicApp, IonicPlatform, ActionSheet} from 'ionic/ionic'; -import {IonicView, IonicConfig, Events} from 'ionic/ionic'; +import {Page, IonicConfig, Events} from 'ionic/ionic'; import {ActionSheetPage} from 'actionSheet/actionSheet'; import * as helpers from 'helpers'; diff --git a/demos/component-docs/lists/lists.ts b/demos/component-docs/lists/lists.ts index 66e78d0bfd..a4426af62e 100644 --- a/demos/component-docs/lists/lists.ts +++ b/demos/component-docs/lists/lists.ts @@ -1,6 +1,6 @@ -import {IonicPlatform, IonicView} from 'ionic/ionic'; +import {IonicPlatform, Page} from 'ionic/ionic'; -@IonicView({ +@Page({ templateUrl: 'lists/lists.html', }) export class ListsPage { diff --git a/demos/component-docs/menus/menus.ts b/demos/component-docs/menus/menus.ts index 0294b6b4d9..bd3a7c7845 100644 --- a/demos/component-docs/menus/menus.ts +++ b/demos/component-docs/menus/menus.ts @@ -1,8 +1,8 @@ -import {App, IonicApp, IonicView, NavController, NavParams} from 'ionic/ionic'; -import {IonicView, Events} from 'ionic/ionic'; +import {App, IonicApp, Page, NavController, NavParams} from 'ionic/ionic'; +import {Page, Events} from 'ionic/ionic'; import * as helpers from 'helpers'; -@IonicView({ +@Page({ templateUrl: 'menus/menu-home.html' }) class PageOne{ @@ -12,19 +12,19 @@ class PageOne{ } } -@IonicView({ +@Page({ templateUrl: 'menus/menu-friends.html' }) class PageTwo{ } -@IonicView({ +@Page({ templateUrl: 'menus/menu-events.html' }) class PageThree{ } -@IonicView({ +@Page({ templateUrl: 'menus/menus.html' }) export class MenusPage { diff --git a/demos/component-docs/modals/modals.ts b/demos/component-docs/modals/modals.ts index 4234adf900..2c7c0b86f2 100644 --- a/demos/component-docs/modals/modals.ts +++ b/demos/component-docs/modals/modals.ts @@ -1,8 +1,8 @@ -import {App, IonicApp, Animation, Modal, NavController, IonicView, Events} from 'ionic/ionic'; +import {App, IonicApp, Animation, Modal, NavController, Page, Events} from 'ionic/ionic'; import * as helpers from 'helpers'; -@IonicView({ +@Page({ templateUrl: 'modals/modals.html' }) class ModalsFirstPage { @@ -26,7 +26,7 @@ class ModalsFirstPage { } -@IonicView({ +@Page({ templateUrl: 'modals/modals-content.html' }) class ModalsContentPage { @@ -46,7 +46,7 @@ class ModalsContentPage { } } -@IonicView({ +@Page({ template: '' }) export class ModalsPage { diff --git a/demos/component-docs/navigation/navigation.ts b/demos/component-docs/navigation/navigation.ts index 5c5f5250e2..be2bca4162 100644 --- a/demos/component-docs/navigation/navigation.ts +++ b/demos/component-docs/navigation/navigation.ts @@ -1,8 +1,8 @@ import {NavController, NavParams} from 'ionic/ionic'; -import {IonicView, Events} from 'ionic/ionic'; +import {Page, Events} from 'ionic/ionic'; import * as helpers from 'helpers'; -@IonicView({ +@Page({ templateUrl: 'navigation/navigation-details.html' }) class NavigationDetailsPage { @@ -26,7 +26,7 @@ class NavigationDetailsPage { } } -@IonicView({ +@Page({ templateUrl: 'navigation/navigation.html', }) export class NavigationPage { diff --git a/demos/component-docs/popups/popups.ts b/demos/component-docs/popups/popups.ts index 609975601b..8744fbb3c0 100644 --- a/demos/component-docs/popups/popups.ts +++ b/demos/component-docs/popups/popups.ts @@ -1,6 +1,6 @@ -import {IonicPlatform, IonicView, Popup} from 'ionic/ionic'; +import {IonicPlatform, Page, Popup} from 'ionic/ionic'; -@IonicView({ +@Page({ templateUrl: 'popups/popups.html', }) export class PopupsPage { diff --git a/demos/component-docs/slides/slides.ts b/demos/component-docs/slides/slides.ts index dfaf615154..d817c341c9 100644 --- a/demos/component-docs/slides/slides.ts +++ b/demos/component-docs/slides/slides.ts @@ -1,6 +1,6 @@ -import {IonicPlatform, IonicView} from 'ionic/ionic'; +import {IonicPlatform, Page} from 'ionic/ionic'; -@IonicView({ +@Page({ templateUrl: 'slides/slides.html', }) export class SlidesPage { diff --git a/demos/component-docs/tabs/tabs.ts b/demos/component-docs/tabs/tabs.ts index 22e1a53966..e69eae67cd 100644 --- a/demos/component-docs/tabs/tabs.ts +++ b/demos/component-docs/tabs/tabs.ts @@ -1,8 +1,8 @@ import {NavController, NavParams} from 'ionic/ionic'; -import {IonicView, ViewController} from 'ionic/ionic'; +import {Page, ViewController} from 'ionic/ionic'; import * as helpers from 'helpers'; -@IonicView({ +@Page({ template: 'Hello 1', }) class TabOneCtrl { @@ -12,7 +12,7 @@ class TabOneCtrl { } } -@IonicView({ +@Page({ templateUrl: 'tabs.html' }) export class TabsPage { From c2d56d86230c9b5a538df11dfbb9fb06ef52e04c Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 8 Oct 2015 15:15:20 -0400 Subject: [PATCH 09/17] refactor(padding): changed padding to attributes Updated demos. Closes #266 --- demos/component-docs/actionSheet/actionSheet.html | 2 +- demos/component-docs/buttons/block.html | 3 +-- demos/component-docs/buttons/buttons.html | 4 +--- demos/component-docs/buttons/icons.html | 6 +----- demos/component-docs/buttons/outline.html | 6 +----- demos/component-docs/buttons/round.html | 6 +----- demos/component-docs/buttons/sizes.html | 6 +----- demos/component-docs/forms/forms.html | 6 +----- demos/component-docs/icons/icons.html | 6 +----- demos/component-docs/main.html | 8 ++++---- demos/component-docs/menus/menus.html | 6 +----- demos/component-docs/modals/modals.html | 6 +----- demos/component-docs/popups/popups.html | 2 +- ionic/components/button/button.scss | 4 ++-- ionic/components/content/content.scss | 14 ++++++-------- ionic/components/content/modes/md.scss | 14 ++++++-------- 16 files changed, 30 insertions(+), 69 deletions(-) diff --git a/demos/component-docs/actionSheet/actionSheet.html b/demos/component-docs/actionSheet/actionSheet.html index 3a4444307f..8d6d280d64 100644 --- a/demos/component-docs/actionSheet/actionSheet.html +++ b/demos/component-docs/actionSheet/actionSheet.html @@ -2,7 +2,7 @@ Action Sheet - + diff --git a/demos/component-docs/buttons/block.html b/demos/component-docs/buttons/block.html index f5177f5944..75bda108b3 100644 --- a/demos/component-docs/buttons/block.html +++ b/demos/component-docs/buttons/block.html @@ -2,7 +2,7 @@ Block Buttons - +

@@ -23,4 +23,3 @@

- diff --git a/demos/component-docs/buttons/buttons.html b/demos/component-docs/buttons/buttons.html index 56c7b8a8b3..bb2582ec93 100644 --- a/demos/component-docs/buttons/buttons.html +++ b/demos/component-docs/buttons/buttons.html @@ -2,7 +2,7 @@ Buttons - +

@@ -23,5 +23,3 @@

- - diff --git a/demos/component-docs/buttons/icons.html b/demos/component-docs/buttons/icons.html index fcdf5ba799..5a86bcb036 100644 --- a/demos/component-docs/buttons/icons.html +++ b/demos/component-docs/buttons/icons.html @@ -3,7 +3,7 @@ Icon Buttons - +

@@ -23,7 +23,3 @@

- - - - diff --git a/demos/component-docs/buttons/round.html b/demos/component-docs/buttons/round.html index 61be74abbb..bb1bbaf3e2 100644 --- a/demos/component-docs/buttons/round.html +++ b/demos/component-docs/buttons/round.html @@ -2,7 +2,7 @@ Round Buttons - +

@@ -23,7 +23,3 @@

- - - - diff --git a/demos/component-docs/buttons/sizes.html b/demos/component-docs/buttons/sizes.html index b1d996a92d..bf1cf01908 100644 --- a/demos/component-docs/buttons/sizes.html +++ b/demos/component-docs/buttons/sizes.html @@ -2,7 +2,7 @@ Button Sizes - +

@@ -23,7 +23,3 @@

- - - - diff --git a/demos/component-docs/forms/forms.html b/demos/component-docs/forms/forms.html index aa18cfbe9a..3a2ac65291 100644 --- a/demos/component-docs/forms/forms.html +++ b/demos/component-docs/forms/forms.html @@ -12,12 +12,8 @@ -
+
- - - - diff --git a/demos/component-docs/icons/icons.html b/demos/component-docs/icons/icons.html index f328076f9d..bb034e3479 100644 --- a/demos/component-docs/icons/icons.html +++ b/demos/component-docs/icons/icons.html @@ -3,7 +3,7 @@ Icons - + @@ -72,7 +72,3 @@ - - - - diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html index 607d451811..b183b3c6c4 100644 --- a/demos/component-docs/main.html +++ b/demos/component-docs/main.html @@ -123,7 +123,7 @@

- +
@@ -158,7 +158,7 @@

- +
@@ -220,7 +220,7 @@

- +
@@ -476,7 +476,7 @@ -
+
diff --git a/demos/component-docs/menus/menus.html b/demos/component-docs/menus/menus.html index 51705e2f64..6adb99d5e6 100644 --- a/demos/component-docs/menus/menus.html +++ b/demos/component-docs/menus/menus.html @@ -3,10 +3,6 @@ Menus - + TODO - - - - diff --git a/demos/component-docs/modals/modals.html b/demos/component-docs/modals/modals.html index 572380a046..d24cbb9ab1 100644 --- a/demos/component-docs/modals/modals.html +++ b/demos/component-docs/modals/modals.html @@ -3,12 +3,8 @@ Modals - + - - - - diff --git a/demos/component-docs/popups/popups.html b/demos/component-docs/popups/popups.html index 1398388f0b..3babd71e5f 100644 --- a/demos/component-docs/popups/popups.html +++ b/demos/component-docs/popups/popups.html @@ -3,7 +3,7 @@ Popups - + diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index a89c8b3f2a..eeb28cb16d 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -121,8 +121,8 @@ a[button] { text-decoration: none; } -.padding > button[block]:first-child, -.padding > [button][block]:first-child { +[padding] > button[block]:first-child, +[padding] > [button][block]:first-child { margin-top: 0; } diff --git a/ionic/components/content/content.scss b/ionic/components/content/content.scss index 35c1f0278a..e6b71c8744 100644 --- a/ionic/components/content/content.scss +++ b/ionic/components/content/content.scss @@ -33,35 +33,33 @@ scroll-content { $content-padding: 16px !default; -.padding, [padding], -.padding > scroll-content, [padding] > scroll-content { padding: $content-padding; } -.padding-top { +[padding-top] { padding-top: $content-padding; } -.padding-right { +[padding-right] { padding-right: $content-padding; } -.padding-bottom { +[padding-bottom] { padding-bottom: $content-padding; } -.padding-left { +[padding-left] { padding-left: $content-padding; } -.padding-vertical { +[padding-vertical] { padding-top: $content-padding; padding-bottom: $content-padding; } -.padding-horizontal { +[padding-horizontal] { padding-right: $content-padding; padding-left: $content-padding; } diff --git a/ionic/components/content/modes/md.scss b/ionic/components/content/modes/md.scss index 64e33ab07b..e45f52027c 100644 --- a/ionic/components/content/modes/md.scss +++ b/ionic/components/content/modes/md.scss @@ -5,35 +5,33 @@ $content-padding-md: 16px !default; -.padding, [padding], -.padding > scroll-content, [padding] > scroll-content { padding: $content-padding-md; } -.padding-top { +[padding-top] { padding-top: $content-padding-md; } -.padding-right { +[padding-right] { padding-right: $content-padding-md; } -.padding-bottom { +[padding-bottom] { padding-bottom: $content-padding-md; } -.padding-left { +[padding-left] { padding-left: $content-padding-md; } -.padding-vertical { +[padding-vertical] { padding-top: $content-padding-md; padding-bottom: $content-padding-md; } -.padding-horizontal { +[padding-horizontal] { padding-right: $content-padding-md; padding-left: $content-padding-md; } From 3559eb04fbb27f55a831075c9e51531461e4d3c5 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Thu, 8 Oct 2015 14:28:55 -0500 Subject: [PATCH 10/17] fix(demos): fix icon, modals --- demos/component-docs/icons/icons.html | 2 +- demos/component-docs/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/demos/component-docs/icons/icons.html b/demos/component-docs/icons/icons.html index bb034e3479..67b4570a41 100644 --- a/demos/component-docs/icons/icons.html +++ b/demos/component-docs/icons/icons.html @@ -67,7 +67,7 @@ - + diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts index 328ce94004..a4a054f8b9 100644 --- a/demos/component-docs/index.ts +++ b/demos/component-docs/index.ts @@ -5,7 +5,7 @@ import * as helpers from 'helpers'; @App({ - template: '' + template: '' }) class DemoApp { From 52bcc24901cbf567a80c3dbbd6a1ff01acc6d19c Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Thu, 8 Oct 2015 14:55:36 -0500 Subject: [PATCH 11/17] docs(demos): actionsheet style and content --- demos/component-docs/actionSheet/actionSheet.ts | 9 +++++---- demos/component-docs/app.css | 10 ++++++++++ 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/demos/component-docs/actionSheet/actionSheet.ts b/demos/component-docs/actionSheet/actionSheet.ts index 83ef677164..be3b284c63 100644 --- a/demos/component-docs/actionSheet/actionSheet.ts +++ b/demos/component-docs/actionSheet/actionSheet.ts @@ -20,7 +20,7 @@ export class ActionSheetPage { { text: 'Favorite', icon: 'ion-md-heart-outline'} ], destructiveText: 'Delete', - titleText: 'Purchased', + titleText: 'Albums', cancelText: 'Cancel', cancel: function() { console.log('Canceled'); @@ -38,11 +38,12 @@ export class ActionSheetPage { this.actionSheet.open(androidSheet || { buttons: [ - { text: 'Share This' }, - { text: 'Move' } + { text: 'Share'}, + { text: 'Play'}, + { text: 'Favorite'} ], destructiveText: 'Delete', - titleText: 'You Opened Action Sheet', + titleText: 'Albums', cancelText: 'Cancel', cancel: function() { console.log('Canceled'); diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css index 0c961e226d..1768e2be98 100644 --- a/demos/component-docs/app.css +++ b/demos/component-docs/app.css @@ -83,3 +83,13 @@ scroll-content { color: #31D55F; } +.md .action-sheet-destructive { + border-top: 1px solid rgba(204, 204, 204, 0.32); + margin-top: 8px; + padding-top: 4px; +} + +.md .action-sheet-cancel icon, .md .action-sheet-destructive icon { + color: #757575; +} + From b9ae06d442f3923e344ae1bc5e63558cd0f43b41 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 8 Oct 2015 15:50:27 -0500 Subject: [PATCH 12/17] refactor(input): improve focus handling, alpha39 fixes --- ionic/components.ts | 2 +- ionic/components/checkbox/checkbox.ts | 29 ++- ionic/components/form/focus-holder.ts | 96 --------- ionic/components/form/form.ts | 235 ++++++++++++++++++++++ ionic/components/form/input.ts | 87 -------- ionic/components/switch/switch.ts | 33 ++- ionic/components/text-input/text-input.ts | 113 ++++++----- ionic/config/bootstrap.ts | 6 +- ionic/ionic.ts | 1 - ionic/util/dom.ts | 6 +- ionic/util/focus.ts | 43 ---- 11 files changed, 329 insertions(+), 322 deletions(-) delete mode 100644 ionic/components/form/focus-holder.ts create mode 100644 ionic/components/form/form.ts delete mode 100644 ionic/components/form/input.ts delete mode 100644 ionic/util/focus.ts diff --git a/ionic/components.ts b/ionic/components.ts index a4ff6ecc97..cde02aa715 100644 --- a/ionic/components.ts +++ b/ionic/components.ts @@ -6,7 +6,7 @@ export * from 'ionic/components/blur/blur' export * from 'ionic/components/button/button' export * from 'ionic/components/checkbox/checkbox' export * from 'ionic/components/content/content' -export * from 'ionic/components/form/input' +export * from 'ionic/components/form/form' export * from 'ionic/components/icon/icon' export * from 'ionic/components/item/item' export * from 'ionic/components/item/item-group' diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index d9814214d5..de763f43de 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -1,8 +1,7 @@ -import {Component, View, Directive, ElementRef, Optional, NgControl} from 'angular2/angular2'; +import {Component, View, Directive, Optional, NgControl} from 'angular2/angular2'; import {Ion} from '../ion'; -import {IonInput} from '../form/input'; -import {IonicConfig} from '../../config/config'; +import {IonicForm} from '../form/form'; /** * The checkbox is no different than the HTML checkbox input, except it's styled differently @@ -44,21 +43,14 @@ import {IonicConfig} from '../../config/config'; '' + '' }) -export class Checkbox extends Ion { - /** - * TODO - * @param {ElementRef} elementRef TODO - * @param {IonicConfig} ionicConfig TODO - * @param {NgControl=} ngControl TODO - */ +export class Checkbox { + constructor( - elementRef: ElementRef, - config: IonicConfig, + form: IonicForm, @Optional() ngControl: NgControl ) { - super(elementRef, config); - this.tabIndex = 0; - this.id = IonInput.nextId(); + this.form = form; + form.register(this); this.onChange = (_) => {}; this.onTouched = (_) => {}; @@ -72,8 +64,7 @@ export class Checkbox extends Ion { * TODO */ onInit() { - super.onInit(); - this.labelId = 'label-' + this.id; + this.labelId = 'label-' + this.inputId; } /** @@ -121,4 +112,8 @@ export class Checkbox extends Ion { * @param {Function} fn onTouched event handler. */ registerOnTouched(fn) { this.onTouched = fn; } + + onDestroy() { + this.form.deregister(this); + } } diff --git a/ionic/components/form/focus-holder.ts b/ionic/components/form/focus-holder.ts deleted file mode 100644 index e93124adc1..0000000000 --- a/ionic/components/form/focus-holder.ts +++ /dev/null @@ -1,96 +0,0 @@ -import {Component, Directive, View, Host, Attribute, ElementRef, forwardRef} from 'angular2/angular2'; - -import {IonicConfig} from '../../config/config'; -import {IonInput} from './input'; - -/** - * TODO - */ -@Component({ - selector: 'focus-holder' -}) -@View({ - template: '', - directives: [forwardRef(() => FocusInput)] -}) -export class FocusHolder { - /** - * TODO - */ - constructor() { - this.i = []; - } - - /** - * TODO - * @param {TODO} inputType TODO - */ - setFocusHolder(inputType) { - this.i[2].type = inputType; - this.i[2].setFocus(); - } - - /** - * TODO - * @param {TODO} tabIndex TODO - */ - receivedFocus(tabIndex) { - if (tabIndex === '999') { - // focus on the previous input - IonInput.focusPrevious(); - - } else if (tabIndex === '1001') { - // focus on the next input - IonInput.focusNext(); - } - } - - /** - * TODO - * @param {TODO} input TODO - */ - register(input) { - this.i.push(input); - } -} - - -@Directive({ - selector: 'input', - host: { - '[type]': 'type', - '(focus)': 'holder.receivedFocus(tabindex)', - '(keydown)': 'keydown($event)' - } -}) -class FocusInput { - constructor( - elementRef: ElementRef, - @Host() holder: FocusHolder, - @Attribute('tabindex') tabindex: string - ) { - this.elementRef = elementRef; - this.holder = holder; - this.tabindex = tabindex; - this.holder.register(this); - } - - setFocus() { - this.elementRef.nativeElement.focus(); - } - - keydown(ev) { - // prevent any keyboard typing when a holder has focus - ev.preventDefault(); - ev.stopPropagation(); - } - - get type() { - // default to text type if unknown - return this._t || 'text'; - } - - set type(val) { - this._t = val; - } -} diff --git a/ionic/components/form/form.ts b/ionic/components/form/form.ts new file mode 100644 index 0000000000..98f6ff648c --- /dev/null +++ b/ionic/components/form/form.ts @@ -0,0 +1,235 @@ +import {Injectable, NgZone} from 'angular2/angular2'; + +import {IonicConfig} from '../../config/config'; +import {raf} from '../../util/dom'; + +/** + * The Input component is used to focus text input elements. + * + * The `focusNext()` and `focusPrevious()` methods make it easy to focus input elements across all devices. + * + * @usage + * ```html + * + * Name + * + * + * ``` + */ + @Injectable() +export class IonicForm { + + constructor(config: IonicConfig, zone: NgZone) { + this._config = config; + this._zone = zone; + + this._inputs = []; + this._ids = -1; + this._focused = null; + + zone.runOutsideAngular(() => { + if (this._config.get('keyboardScrollAssist')) { + this.initHolders(document); + } + + if (this._config.get('keyboardInputListener') !== false) { + this.initKeyInput(document); + } + }); + + } + + initKeyInput(document) { + /* Focus Outline + * -------------------------------------------------- + * When a keydown event happens, from a tab key, then the + * 'key-input' class is added to the body element so focusable + * elements have an outline. On a mousedown or touchstart + * event then the 'key-input' class is removed. + */ + + let isKeyInputEnabled = false; + + function keyDown(ev) { + if (!isKeyInputEnabled && ev.keyCode == 9) { + isKeyInputEnabled = true; + raf(enableKeyInput); + } + } + + function pointerDown() { + isKeyInputEnabled = false; + raf(enableKeyInput); + } + + + function enableKeyInput() { + document.body.classList[isKeyInputEnabled ? 'add' : 'remove']('key-input'); + + document.removeEventListener('mousedown', pointerDown); + document.removeEventListener('touchstart', pointerDown); + + if (isKeyInputEnabled) { + document.addEventListener('mousedown', pointerDown); + document.addEventListener('touchstart', pointerDown); + } + } + + document.addEventListener('keydown', keyDown); + } + + initHolders(document) { + // raw DOM fun + this._holder = document.createElement('focus-holder'); + + this._prev = document.createElement('input'); + this._prev.tabIndex = NO_FOCUS_TAB_INDEX; + this._holder.appendChild(this._prev); + + this._next = document.createElement('input'); + this._next.tabIndex = NO_FOCUS_TAB_INDEX; + this._holder.appendChild(this._next); + + this._temp = document.createElement('input'); + this._temp.tabIndex = NO_FOCUS_TAB_INDEX; + this._holder.appendChild(this._temp); + + document.body.appendChild(this._holder); + + function preventDefault(ev) { + ev.preventDefault(); + ev.stopPropagation(); + } + + this._prev.addEventListener('keydown', preventDefault); + this._next.addEventListener('keydown', preventDefault); + this._temp.addEventListener('keydown', preventDefault); + + this._prev.addEventListener('focus', () => { + this.focusPrevious(); + }); + + this._next.addEventListener('focus', () => { + this.focusNext(); + }); + + let self = this; + let resetTimer; + function queueReset() { + clearTimeout(resetTimer); + + resetTimer = setTimeout(function() { + self._zone.run(() => { + self.resetInputs(); + }); + }, 100); + } + + document.addEventListener('focusin', queueReset); + document.addEventListener('focusout', queueReset); + } + + setFocusHolder(type) { + if (this._temp) { + this._temp.tabIndex = TEMP_TAB_INDEX; + + this._temp.type = type || 'text'; + console.debug('setFocusHolder', this._temp.type); + this._temp.focus(); + } + } + + /** + * @param {TODO} input TODO + */ + register(input) { + console.debug('register input', input); + + input.inputId = ++this._ids; + input.tabIndex = NORMAL_FOCUS_TAB_INDEX; + this._inputs.push(input); + } + + deregister(input) { + console.debug('deregister input', input); + + let index = this._inputs.indexOf(input); + if (index > -1) { + this._inputs.splice(index, 1); + } + if (input === this._focused) { + this._focused = null; + } + } + + resetInputs() { + this._focused = null; + + for (let i = 0, ii = this._inputs.length; i < ii; i++) { + if (!this._focused && this._inputs[i].hasFocus) { + this._focused = this._inputs[i]; + this._focused.tabIndex = ACTIVE_FOCUS_TAB_INDEX; + + } else { + this._inputs[i].tabIndex = NORMAL_FOCUS_TAB_INDEX; + } + } + + if (this._temp) { + this._temp.tabIndex = NO_FOCUS_TAB_INDEX; + + if (this._focused) { + // there's a focused input + this._prev.tabIndex = PREV_TAB_INDEX; + this._next.tabIndex = NEXT_TAB_INDEX; + + } else { + this._prev.tabIndex = this._next.tabIndex = NO_FOCUS_TAB_INDEX; + } + } + + } + + /** + * Focuses the previous input element, if it exists. + */ + focusPrevious() { + console.debug('focusPrevious'); + this.focusMove(-1); + } + + /** + * Focuses the next input element, if it exists. + */ + focusNext() { + console.debug('focusNext'); + this.focusMove(1); + } + + /** + * @param {Number} inc TODO + */ + focusMove(inc) { + let input = this._focused; + if (input) { + let index = this._inputs.indexOf(input); + if (index > -1 && (index + inc) < this._inputs.length) { + let siblingInput = this._inputs[index + inc]; + if (siblingInput) { + siblingInput.initFocus(); + return; + } + } + this._focused.initFocus(); + } + } + +} + +const NO_FOCUS_TAB_INDEX = -1; +const NORMAL_FOCUS_TAB_INDEX = 0; +const PREV_TAB_INDEX = 999; +const ACTIVE_FOCUS_TAB_INDEX = 1000; +const NEXT_TAB_INDEX = 1001; +const TEMP_TAB_INDEX = 2000; + diff --git a/ionic/components/form/input.ts b/ionic/components/form/input.ts deleted file mode 100644 index 6449beabb6..0000000000 --- a/ionic/components/form/input.ts +++ /dev/null @@ -1,87 +0,0 @@ -import {Directive, ElementRef, Query, QueryList} from 'angular2/angular2'; - -import {Ion} from '../ion'; -import {IonicApp} from '../app/app'; -import {IonicConfig} from '../../config/config'; - - -let inputRegistry = []; -let inputItemIds = -1; -let activeInput = null; -let lastInput = null; - -/** - * The Input component is used to focus text input elements. - * - * The `focusNext()` and `focusPrevious()` methods make it easy to focus input elements across all devices. - * - * @usage - * ```html - * - * Name - * - * - * ``` - */ -export class IonInput extends Ion { - /** - * @param {TODO} input TODO - */ - static registerInput(input) { - inputRegistry.push(input); - } - - /** - * TODO - * @param {TODO} input TODO - */ - static setAsLastInput(input) { - lastInput = input; - } - - /** - * Focuses the previous input element, if it exists. - */ - static focusPrevious() { - this.focusMove(-1); - } - - /** - * Focuses the next input element, if it exists. - */ - static focusNext() { - this.focusMove(1); - } - - /** - * @param {Number} inc TODO - */ - static focusMove(inc) { - let input = activeInput || lastInput; - if (input) { - - let index = inputRegistry.indexOf(input); - if (index > -1 && (index + inc) < inputRegistry.length) { - let siblingInput = inputRegistry[index + inc]; - siblingInput && siblingInput.initFocus(); - } - } - } - - /** - * @returns {Number} The ID of the next input element. - */ - static nextId() { - return ++inputItemIds; - } - - /** - * TODO - */ - static clearTabIndexes() { - for (let i = 0; i < inputRegistry.length; i++) { - inputRegistry[i].tabIndex = -1; - } - } - -} diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts index 306f57622a..a5da0d74cf 100644 --- a/ionic/components/switch/switch.ts +++ b/ionic/components/switch/switch.ts @@ -10,8 +10,7 @@ import { forwardRef } from 'angular2/angular2'; -import {Ion} from '../ion'; -import {IonInput} from '../form/input'; +import {IonicForm} from '../form/form'; import {IonicConfig} from '../../config/config'; import {pointerCoord} from '../../util/dom'; @@ -109,7 +108,7 @@ class MediaSwitch { '', directives: [MediaSwitch] }) -export class Switch extends Ion { +export class Switch { /** * TODO * @param {ElementRef} elementRef TODO @@ -117,24 +116,24 @@ export class Switch extends Ion { * @param {NgControl=} ngControl TODO */ constructor( + form: IonicForm, elementRef: ElementRef, config: IonicConfig, @Optional() private ngControl: NgControl ) { - super(elementRef, config); - let self = this; + this.form = form; + form.register(this); - self.id = IonInput.nextId(); - self.tabIndex = 0; - self.lastTouch = 0; - self.mode = config.get('mode'); + this.lastTouch = 0; + this.mode = config.get('mode'); - self.onChange = (_) => {}; - self.onTouched = (_) => {}; + this.onChange = (_) => {}; + this.onTouched = (_) => {}; if (ngControl) ngControl.valueAccessor = this; + let self = this; function pointerMove(ev) { let currentX = pointerCoord(ev).x; @@ -156,21 +155,20 @@ export class Switch extends Ion { } this.addMoveListener = function() { - this.switchEle.addEventListener('touchmove', pointerMove); - this.switchEle.addEventListener('mousemove', pointerMove); + self.switchEle.addEventListener('touchmove', pointerMove); + self.switchEle.addEventListener('mousemove', pointerMove); elementRef.nativeElement.addEventListener('mouseout', pointerOut); }; this.removeMoveListener = function() { - this.switchEle.removeEventListener('touchmove', pointerMove); - this.switchEle.removeEventListener('mousemove', pointerMove); + self.switchEle.removeEventListener('touchmove', pointerMove); + self.switchEle.removeEventListener('mousemove', pointerMove); elementRef.nativeElement.removeEventListener('mouseout', pointerOut); }; } onInit() { - super.onInit(); - this.labelId = 'label-' + this.id; + this.labelId = 'label-' + this.inputId; } /** @@ -234,6 +232,7 @@ export class Switch extends Ion { onDestroy() { this.removeMoveListener(); this.switchEle = this.addMoveListener = this.removeMoveListener = null; + this.form.deregister(this); } isDisabled(ev) { diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index 3db3e6bfb4..343552f943 100644 --- a/ionic/components/text-input/text-input.ts +++ b/ionic/components/text-input/text-input.ts @@ -1,9 +1,8 @@ import {Directive, View, Host, Optional, ElementRef, Attribute, Query, QueryList, NgZone} from 'angular2/angular2'; import {IonicConfig} from '../../config/config'; -import {IonInput} from '../form/input'; +import {IonicForm} from '../form/form'; import {Label} from './label'; -import {Ion} from '../ion'; import {IonicApp} from '../app/app'; import {Content} from '../content/content'; import * as dom from '../../util/dom'; @@ -15,22 +14,18 @@ import {IonicPlatform} from '../../platform/platform'; */ @Directive({ selector: 'ion-input', - inputs: [ - 'tabIndex' - ], host: { '(focus)': 'receivedFocus(true)', '(blur)': 'receivedFocus(false)', '(touchstart)': 'pointerStart($event)', '(touchend)': 'pointerEnd($event)', '(mouseup)': 'pointerEnd($event)', - '[class.has-focus]': 'inputHasFocus', - '[class.has-value]': 'inputHasValue', - '[tabIndex]': 'activeTabIndex', + '[class.has-focus]': 'hasFocus', + '[class.has-value]': 'hasValue', 'class': 'item' } }) -export class TextInput extends Ion { +export class TextInput { /** * TODO * @param {ElementRef} elementRef TODO @@ -42,31 +37,30 @@ export class TextInput extends Ion { * @param {QueryList