This commit is contained in:
Andrew
2015-04-25 11:48:09 -05:00
parent 7b006db118
commit 14ecc7178b
89 changed files with 3470 additions and 435 deletions

View File

@@ -1,44 +1,49 @@
import {NgElement, Component, View, Parent} from 'angular2/angular2'
import {ComponentConfig} from 'ionic/config/component-config'
import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
import {Icon} from 'ionic/components/icon/icon'
import {Item} from 'ionic/components/item/item'
export let ActionMenuConfig = new ComponentConfig('action-menu')
@Component({
selector: 'ion-action-menu',
injectables: [ActionMenuConfig]
selector: 'ion-action-menu'
})
@View({
@NgView({
template: `
<div class="overlay-backdrop"></div>
<div class="overlay-container">
<div class="action-menu-container">
<div class="action-menu-group">
<div class="action-menu-label">Action Menu Label</div>
<button class="button action-menu-button">Button 1</button>
<button class="button action-menu-button">Button 2</button>
<div class="list-header">Action Menu List Header</div>
<div class="list">
<button ion-item class="item">
Button 1
</button>
<button ion-item class="item">
Button 2
</button>
</div>
<div class="action-menu-group">
<div class="action-menu-label">Action Menu Label</div>
<button class="button action-menu-button">Button 1</button>
<button class="button action-menu-button">Button 2</button>
<div class="list-header">Action Menu Label</div>
<div class="list">
<button ion-item class="item">Button 1</button>
<button ion-item class="item">Button 2</button>
</div>
<div class="action-menu-group">
<button class="button action-menu-button">Button 1</button>
<div class="list">
<button ion-item class="item">Button 1</button>
</div>
</div>
</div>`
</div>`,
directives: [Item,Icon]
})
export class ActionMenu {
constructor(
configFactory: ActionMenuConfig,
@NgElement() ngElement:NgElement
) {
this.domElement = ngElement.domElement
this.domElement.classList.add('pane')
this.domElement.classList.add('pane-overlay')
this.config = configFactory.create(this)
this.config = ActionMenu.config.invoke(this)
}
}
new IonicComponent(ActionMenu, {})

View File

@@ -1,9 +1,9 @@
import {Component, View, bootstrap} from 'angular2/angular2';
import {ActionMenu} from 'ionic/ionic';
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
import {ActionMenu} from 'ionic/components/action-menu/action-menu';
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html',
directives: [ActionMenu]
})

View File

@@ -1,11 +1,11 @@
import {NgElement, Component, View, Parent} from 'angular2/angular2'
import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
@Component({
selector: 'ion-alert'
})
@View({
@NgView({
template: `
<div class="overlay-backdrop"></div>
<div class="overlay-container">
@@ -27,13 +27,8 @@ export class Alert {
@NgElement() ngElement:NgElement
) {
this.domElement = ngElement.domElement
this.domElement.classList.add('pane')
this.domElement.classList.add('pane-overlay')
this.config = Alert.config.invoke(this)
}
}
new IonicComponent(Alert, {
bind: {}
})
new IonicComponent(Alert, {})

View File

@@ -1,9 +1,9 @@
import {Component, View, bootstrap} from 'angular2/angular2';
import {Alert} from 'ionic/ionic';
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
import {Alert} from 'ionic/components/alert/alert';
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html',
directives: [Alert]
})

View File

@@ -1,3 +1,4 @@
import {Ion} from 'ionic/ion';
export function main() {
it('should be true', () => {

View File

@@ -0,0 +1,2 @@
<ion-nav-viewport #viewport [initial]="firstPage">
</ion-nav-viewport>

View File

@@ -1,18 +1,14 @@
import {
For, Component, Template, Parent, bootstrap,
FormBuilder, Validators, FormDirectives, CongrolGroup
} from 'angular2/angular2'
import {Log} from 'ionic/util'
import {Router} from 'ionic/routing/router'
import {For, Component, View as NgView, Parent, bootstrap} from 'angular2/angular2'
import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
import {Log} from 'ionic/util'
import {List, Item, NavViewport, View, Button, Input, Tabs, Tab, Content, NavPane, Aside} from 'ionic/ionic'
@Component({
selector: 'login-page'
})
@Template({
url: 'pages/login.html',
@NgView({
templateUrl: 'pages/login.html',
directives: [View, FormDirectives, Button, Input]
})
export class LoginPage {
@@ -44,8 +40,8 @@ export class LoginPage {
@Component({
selector: 'signup-page'
})
@Template({
url: 'pages/signup.html',
@NgView({
templateUrl: 'pages/signup.html',
directives: [View, FormDirectives, Button, Input]
})
export class SignupPage {
@@ -81,8 +77,8 @@ export class SignupPage {
@Component({
selector: 'app-page'
})
@Template({
url: 'pages/app.html',
@NgView({
templateUrl: 'pages/app.html',
directives: [View, FormDirectives, Button, Input, Tabs, Tab]
})
export class AppPage {
@@ -93,8 +89,8 @@ export class AppPage {
}
@Component({ selector: 'stream-tab' })
@Template({
url: 'pages/tabs/home.html',
@NgView({
templateUrl: 'pages/tabs/home.html',
directives: [For, View, Content, List, Item]
})
class StreamTab {
@@ -116,8 +112,8 @@ class StreamTab {
}
@Component({ selector: 'post-detail-tab' })
@Template({
url: 'pages/post/detail.html',
@NgView({
templateUrl: 'pages/post/detail.html',
directives: [View, Content]
})
class PostDetail {
@@ -131,8 +127,8 @@ class PostDetail {
}
@Component({ selector: 'splash-page' })
@Template({
url: 'pages/splash.html',
@NgView({
templateUrl: 'pages/splash.html',
directives: [View, Content]
})
class SplashPage {
@@ -142,14 +138,13 @@ class SplashPage {
}
/**
* Main app entry point
*/
@Component({ selector: '[ion-app]' })
@Template({
@NgView({
directives: [NavViewport],
url: 'main.html'
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
@@ -179,10 +174,5 @@ class IonicApp {
})
*/
}, 2000);
console.log('IonicApp Start')
}
}
bootstrap(IonicApp)

View File

@@ -0,0 +1,6 @@
<ion-tabs>
<ion-tab [initial]="streamTab" tab-title="Stream">
</ion-tab>
</ion-tabs>

View File

@@ -0,0 +1,14 @@
<ion-view nav-title="Login" style="padding: 20px">
<form (^submit)="doLogin($event)" [control-group]="loginForm">
<ion-input>
<input control="email" type="email" placeholder="Your email">
</ion-input>
<ion-input>
<input control="password" type="password" placeholder="Your password">
</ion-input>
<button ion-button stable block type="submit">Log in</button>
<div>
<button ion-button primary block (click)="doSignup()">Create an account</button>
</div>
</form>
</ion-view>

View File

@@ -0,0 +1 @@
<h1>{{title}}</h1>

View File

@@ -0,0 +1,18 @@
<ion-view nav-title="Signup" style="padding: 20px">
<form (^submit)="doSignup($event)" [control-group]="signupForm">
<ion-input>
<input control="name" type="text" placeholder="Your name">
</ion-input>
<ion-input>
<input control="email" type="email" placeholder="Your email">
</ion-input>
<ion-input>
<input control="password" type="password" placeholder="Your password">
</ion-input>
<button ion-button stable block type="submit">Create account</button>
<div>
<button ion-button primary block (click)="doLogin()">Log in</button>
</div>
</form>
</ion-view>

View File

@@ -1,160 +0,0 @@
<style>
body * {
display: block;
box-sizing: border-box;
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background: maroon;
position: relative;
}
navview {
position: absolute;
background: gray;
height: 100vh;
width: 100%;
display:flex;
flex-direction: column;
top: 0;
left: 0;
}
toolbars {
background: blue;
position: relative;
width: 100%;
min-height: 50px;
overflow: hidden;
}
toolbar {
background: green;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
tabs {
background: red;
display: flex;
justify-content: center;
}
tab {
background: blue;
color: white;
height: 50px;
padding: 0 20px;
border: 1px solid white;
text-align: center;
display: flex;
align-items: center;
justify-content:center;
}
view-container {
background: yellow;
width: 100%;
height: 100%;
}
view {
position: absolute;
background: orange;
width: 100%;
height: 100%;
}
.entering {
box-shadow: 0px 0px 5px 5px black;
}
.entering-1 {
transform: translateX(20%);
}
.entering-2 {
transform: translateX(40%);
}
</style>
<navview>
<toolbars>
<toolbar>
Level 1, View 1 Toolbar
</toolbar>
<toolbar class="entering entering-1">
Level 1, View 2 Toolbar
</toolbar>
</toolbars>
<view-container>
<view>
Level 1, View 1 Content
<div id="holder1"></div>
</view>
<view class="entering entering-1">
Level 1, View 2 Content
<div id="holder2"></div>
</view>
<navview class="entering entering-2">
<toolbars>
<toolbar style="background:red">
Level 3, View 1 Toolbar
</toolbar>
<toolbar class="entering entering-1" style="background:red">
Level 3, View 2 Toolbar
</toolbar>
</toolbars>
<view-container>
<view style="background:blue">
Level 3, View 1 Content
</view>
<view class="entering entering-1" style="background:blue">
Level 3, View 2 Content
</view>
</view-container>
</navview>
</view-container>
</navview>
<script>
var btn = document.createElement('button');
btn.textContent = 'Button!'
btn.addEventListener('click', function() {
alert('CLICK!')
});
var holder1 = document.getElementById('holder1');
var holder2 = document.getElementById('holder2');
holder1.appendChild(btn);
setTimeout(function(){
holder1.removeChild(btn);
holder2.appendChild(btn);
}, 2000);
</script>

View File

@@ -0,0 +1,12 @@
<div animation>
<div class="square" style="position:absolute; width:100px; height:100px; background:red; top: 100px; left: 100px;"></div>
<div class="square" style="position:absolute; width:100px; height:100px; background:green; top: 100px; left: 200px;"></div>
<div class="square" style="position:absolute; width:100px; height:100px; background:blue; top: 100px; left: 300px;"></div>
<button class="button button-primary" (click)="start($event)">Start</button>
<button class="button button-primary" (click)="stop($event)">Stop</button>
</div>

View File

@@ -0,0 +1,34 @@
import {Component, Decorator, View as NgView, NgElement, bootstrap} from 'angular2/angular2';
import {Transition, IOSTransition} from 'ionic/ionic';
@Component({ selector: '[ion-app]' })
@NgView({
templateUrl: 'main.html'
})
class IonicApp {
constructor(
@NgElement ngElement:NgElement
) {
this.trans = new Transition( ngElement.domElement.querySelector('.square') )
this.trans.duration(500)
this.trans.easing('linear')
this.trans.property('opacity', 0)
}
start() {
this.trans.start()
}
stop() {
this.trans.stop()
}
}
bootstrap(IonicApp)

View File

@@ -1,7 +1,7 @@
import {Component, View, bootstrap} from 'angular2/angular2';
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html'
})
class IonicApp {

View File

@@ -1,4 +1,4 @@
import {Component, View, Inject, Parent, NgElement, EventEmitter} from 'angular2/angular2'
import {Component, View as NgView, Inject, Parent, NgElement, EventEmitter} from 'angular2/angular2'
import * as types from 'ionic/components/aside/extensions/types'
import * as gestures from 'ionic/components/aside/extensions/gestures'
import {dom} from 'ionic/util'
@@ -16,7 +16,7 @@ import {IonicComponent} from 'ionic/config/component'
dragThreshold: 'dragThreshold'
}
})
@View({
@NgView({
template: `<content></content>`
})
export class Aside {

View File

@@ -1,4 +1,6 @@
import {Aside, Content, View} from 'ionic/ionic';
import {Aside} from 'ionic/components/aside/aside';
import {Content} from 'ionic/components/content/content';
import {View} from 'ionic/components/view/view';
import {View as NgView, Component, bootstrap} from 'angular2/angular2';
@Component({

View File

@@ -2,7 +2,7 @@ import {NgElement, Decorator} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
@Decorator({
selector: '.button',
selector: 'ion-button, [ion-button],.button',
})
export class Button {
constructor(
@@ -12,4 +12,6 @@ export class Button {
this.config = Button.config.invoke(this)
}
}
new IonicComponent(Button, {})
new IonicComponent(Button, {
propClasses: ['primary', 'secondary', 'danger', 'light', 'stable', 'dark', 'block']
})

View File

@@ -47,3 +47,14 @@
<button class="button button-dark hover">hover</button>
<button class="button button-dark activated">activated</button>
</div>
<h2>With Properties</h2>
<div>
<button ion-button primary>button.primary</button>
<button ion-button secondary>button.secondary</button>
<button ion-button stable>button.stable</button>
<button ion-button light>button.light</button>
<button ion-button dark>button.dark</button>
<button ion-button danger>button.danger</button>
</div>

View File

@@ -1,9 +1,9 @@
import {Component, View, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/ionic'
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/components/button/button'
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html',
directives: [Button]
})

View File

@@ -1,9 +1,9 @@
import {Component, View, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/ionic'
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/components/button/button'
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html',
directives: [Button]
})

View File

@@ -1,9 +1,9 @@
import {Component, View, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/ionic'
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/components/button/button'
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html',
directives: [Button]
})

View File

@@ -1,9 +1,9 @@
import {Component, View, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/ionic'
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/components/button/button'
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html',
directives: [Button]
})

View File

@@ -1,9 +1,9 @@
import {Component, View, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/ionic'
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/components/button/button'
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html',
directives: [Button]
})

View File

@@ -1,9 +1,9 @@
import {Component, View, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/ionic'
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/components/button/button'
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html',
directives: [Button]
})

View File

@@ -1,9 +1,9 @@
import {Component, View, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/ionic'
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {Button} from 'ionic/components/button/button'
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html',
directives: [Button]
})

View File

@@ -1,5 +1,7 @@
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
import {View, Content, List} from 'ionic/components';
import {View} from 'ionic/components/view/view';
import {Content} from 'ionic/components/content/content';
import {List} from 'ionic/components/list/list';
@Component({ selector: '[ion-app]' })

View File

@@ -1,8 +1,6 @@
import {Component, View, NgElement, PropertySetter} from 'angular2/angular2'
import {ComponentConfig} from 'ionic/config/component-config'
import {Component, View as NgView, NgElement, PropertySetter} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
export let CheckboxConfig = new ComponentConfig('checkbox')
@Component({
selector: 'ion-checkbox',
@@ -11,10 +9,9 @@ export let CheckboxConfig = new ComponentConfig('checkbox')
},
events: {
'^click': 'onClick()'
},
injectables: [CheckboxConfig]
}
})
@View({
@NgView({
template: `
<div class="item-media media-checkbox">
<icon class="checkbox-off"></icon>
@@ -31,7 +28,6 @@ export let CheckboxConfig = new ComponentConfig('checkbox')
})
export class Checkbox {
constructor(
configFactory: CheckboxConfig,
@NgElement() ngElement: NgElement,
@PropertySetter('attr.role') setAriaRole: Function,
@PropertySetter('attr.aria-checked') setAriaChecked: Function,

View File

@@ -1,9 +1,12 @@
import {Component, View, bootstrap} from 'angular2/angular2';
import {View as NgView} from 'ionic/components/view/view';
import {Content, Icon, Checkbox, List} from 'ionic/components';
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
import {View} from 'ionic/components/view/view';
import {Content} from 'ionic/components/content/content';
import {Icon} from 'ionic/components/icon/icon';
import {Checkbox} from 'ionic/components/checkbox/checkbox';
import {List} from 'ionic/components/list/list';
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html',
directives: [View, Content, Icon, Checkbox, List]
})

View File

@@ -1,9 +1,9 @@
import {NgElement, Component, View, PropertySetter} from 'angular2/angular2';
import {NgElement, Component, View as NgView, PropertySetter} from 'angular2/angular2';
@Component({
selector: 'ion-content'
})
@View({
@NgView({
template: `
<div class="scroll-content">
<content></content>

View File

@@ -0,0 +1,17 @@
import {NgElement, Decorator} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
@Decorator({
selector: 'ion-input'
})
export class Input {
constructor(
@NgElement() ngElement:NgElement
) {
this.domElement = ngElement.domElement
//this.config = Button.config.invoke(this)
console.log('INPUT');
}
}
new IonicComponent(Input, {
})

View File

@@ -1,4 +1,4 @@
import {NgElement, Component, View} from 'angular2/angular2'
import {NgElement, Component, View as NgView} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
import {
ItemPrimaryOptions, ItemSecondaryOptions
@@ -8,9 +8,9 @@ import {
} from 'ionic/components/item/item-swipe-buttons'
@Component({
selector: 'ion-item'
selector: 'ion-item,[ion-item]'
})
@View({
@NgView({
template: `
<content select="ion-primary-options"></content>
<content select="ion-primary-swipe-buttons"></content>

View File

@@ -1,14 +1,14 @@
import {Component, View as NgView, For, bootstrap} from 'angular2/angular2'
import {Item, View, List} from 'ionic/components'
import {Item, View, List} from 'ionic/ionic'
// import {ItemPrimarySwipeButtons} from 'ionic/components/item/item-swipe-buttons'
import {ItemPrimarySwipeButtons} from 'ionic/components/item/item-swipe-buttons'
@Component({
selector: '[ion-app]'
})
@NgView({
templateUrl: 'main.html',
directives: [Item, View, List, For/*, ItemPrimarySwipeButtons*/]
directives: [Item, View, List, For, ItemPrimarySwipeButtons]
})
class App{
constructor() {

View File

@@ -1,5 +1,5 @@
import {Component, View as NgView, For, bootstrap} from 'angular2/angular2'
import {Item, View, List} from 'ionic/components'
import {Item, View, List} from 'ionic/ionic'
import {ItemPrimarySwipeButtons} from 'ionic/components/item/item-swipe-buttons'

View File

@@ -1,10 +1,10 @@
import {NgElement, Component, View, Parent} from 'angular2/angular2'
import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
@Component({
selector: 'layout,[layout]'
})
@View({
@NgView({
template: `
<content></content>
<object class="ele-qry" data="about:blank"></object>

View File

@@ -1,5 +1,7 @@
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
import {View, Content, Layout} from 'ionic/components';
import {View} from 'ionic/components/view/view';
import {Content} from 'ionic/components/content/content';
import {Layout} from 'ionic/components/layout/layout';
@Component({ selector: '[ion-app]' })

View File

@@ -1,21 +1,20 @@
import {NgElement, Component, View} from 'angular2/angular2'
import {ComponentConfig} from 'ionic/config/component-config';
import {NgElement, Component, View as NgView} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
export let ListConfig = new ComponentConfig('list')
@Component({
selector: 'ion-list',
injectables: [ListConfig]
selector: 'ion-list'
})
@View({
@NgView({
template: `<content></content>`
})
export class List {
constructor(
configFactory: ListConfig,
ngElement: NgElement
) {
this.domElement = ngElement.domElement;
configFactory.create(this);
this.config = List.config.invoke(this)
}
}
new IonicComponent(List, {})

View File

@@ -3,6 +3,7 @@
<ion-content>
<div class="list-header">
List Header
</div>
@@ -77,6 +78,7 @@
</ion-list>
</ion-content>
</ion-view>

View File

@@ -1,5 +1,8 @@
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
import {View, Content, List} from 'ionic/components';
import {View} from 'ionic/components/view/view';
import {Content} from 'ionic/components/content/content';
import {List} from 'ionic/components/list/list';
@Component({ selector: '[ion-app]' })
@NgView({

View File

@@ -1,9 +1,9 @@
import {Compiler, NgElement, Component, View} from 'angular2/angular2';
import {Compiler, NgElement, Component, View as NgView} from 'angular2/angular2';
@Component({
selector: 'ion-modal-wrapper'
})
@View({
@NgView({
template: `
<div class="modal-backdrop active">
<div class="modal-backdrop-bg"></div>
@@ -25,7 +25,7 @@ class ModalWrapper {
@Component({
selector: 'ion-modal'
})
@View({
@NgView({
directives: [ModalWrapper],
template: `
<ion-modal-wrapper>

View File

@@ -1,4 +1,11 @@
import {DynamicComponent, Parent, NgElement, DynamicComponentLocation, DynamicComponentLoader, Optional} from 'angular2/angular2'
import {
DynamicComponent,
Parent,
NgElement,
DynamicComponentLoader,
DynamicComponentLocation,
Optional
} from 'angular2/angular2'
import {NavViewport} from 'ionic/components/nav-viewport/nav-viewport'
import {Tab} from 'ionic/components/tabs/tab'
@@ -53,3 +60,6 @@ export class NavPane {
return this.viewport.popTo(index, opts)
}
}
/*
Ideal API: inject a tN

View File

@@ -1,5 +1,4 @@
import {Component, View, For, NgElement, bind} from 'angular2/angular2'
import {ComponentConfig} from 'ionic/config/component-config'
import {Component, View as NgView, For, NgElement, bind} from 'angular2/angular2'
import {NavPane} from 'ionic/components/nav-pane/nav-pane'
import * as util from 'ionic/util'
@@ -26,11 +25,11 @@ class NavStack {
bind: {
initial: 'initial'
},
injectables: [
services: [
NavStack
]
})
@View({
@NgView({
template: `
<header class="toolbar-container">
<!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
@@ -89,12 +88,12 @@ export class NavViewport {
// TODO make sure the timing is together
// TODO allow starting an animation in the middle (eg gestures). Leave
// most of this up to the animation's implementation.
push(Class: Function, opts = {}) {
push(Class: Function, data = {}, opts = {}) {
util.defaults(opts, {
sync: this._stack.length === 0
})
let pushedItem = new NavItem(Class)
let pushedItem = new NavItem(Class, data)
this._stack.push(pushedItem)
this._ngForLoopArray.push(pushedItem)
@@ -178,8 +177,9 @@ export class NavViewport {
}
class NavItem {
constructor(ComponentClass) {
constructor(ComponentClass, data = {}) {
this.Class = ComponentClass
this.data = data
this._setupPromise = new Promise((resolve) => {
this._resolveSetupPromise = resolve
})

View File

@@ -1,10 +1,10 @@
import {Component, View, bootstrap} from 'angular2/angular2'
import {NavViewport} from 'ionic/components'
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {NavViewport} from 'ionic/components/nav-viewport/nav-viewport'
import {Log} from 'ionic/util'
import {FirstPage} from 'app/pages/first-page'
@Component({ selector: '[ion-app]' })
@View({
@NgView({
directives: [NavViewport],
templateUrl: 'main.html'
})

View File

@@ -1,5 +1,5 @@
import {Component, View as NgView, Parent} from 'angular2/angular2'
import {NavViewport, View} from 'ionic/components'
import {NavViewport, View} from 'ionic/ionic'
import {SecondPage} from 'app/pages/second-page'
@Component({

View File

@@ -1,5 +1,6 @@
import {Component, View as NgView, Parent} from 'angular2/angular2'
import {NavViewport, View} from 'ionic/components'
import {NavViewport} from 'ionic/components'
import {View} from 'ionic/components/view/view'
@Component({
selector: 'second-page'

View File

@@ -1,13 +1,11 @@
import {NgElement, Component, View} from 'angular2/angular2'
import {ComponentConfig} from 'ionic/config/component-config';
import {NgElement, Component, View as NgView} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
export let RadioConfig = new ComponentConfig('radio');
@Component({
selector: 'ion-radio',
injectables: [RadioConfig]
selector: 'ion-radio'
})
@View({
@NgView({
template: `
<div class="item-content">
@@ -25,13 +23,14 @@ export let RadioConfig = new ComponentConfig('radio');
})
export class RadioButton {
constructor(
configFactory: RadioConfig,
element: NgElement
) {
this.domElement = element.domElement
this.config = RadioButton.config.invoke(this)
this.domElement.classList.add('item')
this.domElement.setAttribute('aria-checked', true)
configFactory.create(this)
}
}
new IonicComponent(RadioButton, {})

View File

@@ -1,23 +1,22 @@
import {NgElement, Component, View} from 'angular2/angular2'
import {ComponentConfig} from 'ionic/config/component-config';
import {NgElement, Component, View as NgView} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
export let RadioConfig = new ComponentConfig('radio');
@Component({
selector: 'ion-radio-group',
injectables: [RadioConfig]
selector: 'ion-radio-group'
})
@View({
@NgView({
template: `<content></content>`
})
export class RadioGroup {
constructor(
configFactory: RadioConfig,
element: NgElement
) {
this.domElement = element.domElement
this.config = RadioGroup.config.invoke(this)
this.domElement.classList.add('list')
this.domElement.classList.add('radio-group')
configFactory.create(this)
}
}
new IonicComponent(RadioGroup, {})

View File

@@ -1,5 +1,9 @@
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
import {View, Content, Icon, RadioGroup, RadioButton} from 'ionic/components';
import {View} from 'ionic/components/view/view';
import {Content} from 'ionic/components/content/content';
import {Icon} from 'ionic/components/icon/icon';
import {RadioGroup} from 'ionic/components/radio/radio-group';
import {RadioButton} from 'ionic/components/radio/radio-button';
@Component({ selector: '[ion-app]' })

View File

@@ -1,4 +1,4 @@
import {Component, View, Inject, Parent, NgElement} from 'angular2/angular2'
import {Component, View as NgView, Inject, Parent, NgElement} from 'angular2/angular2'
import {Log} from 'ionic/util'
/**

View File

@@ -1,33 +1,44 @@
import {NgElement, Component, View} from 'angular2/angular2'
import {ComponentConfig} from 'ionic/config/component-config';
import {NgElement, Component, View as NgView} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
export let SearchBarConfig = new ComponentConfig('search-bar')
@Component({
selector: 'ion-search-bar',
bind: {
cancelText: 'cancel-text',
placeholderText: 'placeholder-text'
},
injectables: [SearchBarConfig]
}
})
@View({
@NgView({
template: `<div class="search-bar-input-container">
<input class="search-bar-input" type="search" [placeholder]="placeholderText">
<input class="search-bar-input" type="search" [attr.placeholder]="placeholderText">
</div>
<button class="button search-bar-cancel">{{ cancelText }}</button>`
})
export class SearchBar {
constructor(
configFactory: SearchBarConfig,
ngElement: NgElement
) {
this.domElement = ngElement.domElement;
configFactory.create(this);
// Defaults
this.cancelText = this.cancelText || 'Cancel'
this.placeholderText = this.placeholderText || 'Search'
this.domElement = ngElement.domElement
this.config = SearchBar.config.invoke(this)
}
}
new IonicComponent(SearchBar, {
bind: {
cancelText: {
defaults: {
ios: 'Cancel',
android: 'Cancel',
core: 'Cancel'
}
},
placeholderText: {
defaults: {
ios: 'Search',
android: 'Search',
core: 'Search'
}
}
}
})

View File

@@ -1,5 +1,8 @@
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
import {View, Content, List, SearchBar} from 'ionic/components';
import {View} from 'ionic/components/view/view';
import {Content} from 'ionic/components/content/content';
import {List} from 'ionic/components/list/list';
import {SearchBar} from 'ionic/components/search-bar/search-bar';
@Component({ selector: '[ion-app]' })

View File

View File

View File

View File

@@ -1,10 +1,10 @@
import {Component, View} from 'angular2/angular2'
import {View} from 'ionic/components'
import {Component, View as NgView} from 'angular2/angular2'
import {View} from 'ionic/ionic'
@Component({
selector: 'settings-general'
})
@View({
@NgView({
template: `
<ion-view nav-title="General Stuff">
General Settings

View File

@@ -1,8 +1,8 @@
import {Component, View} from 'angular2/angular2'
import {View, NavPane} from 'ionic/components'
import {Component, View as NgView} from 'angular2/angular2'
import {View, NavPane} from 'ionic/ionic'
@Component({ selector: 'privacy-settings' })
@View({
@NgView({
template: `
<ion-view nav-title="Privacy">
Privacy
@@ -22,7 +22,7 @@ export class PrivacyPage {
}
@Component({ selector: 'privp1' })
@View({
@NgView({
template: `
<ion-view nav-title="Privacy Page 1">
This is page 1
@@ -51,7 +51,7 @@ class PrivacyP1 {
}
@Component({ selector: 'privp2' })
@View({
@NgView({
template: `
<ion-view nav-title="Privacy Page 2">
Page 2 here

View File

View File

@@ -1,7 +1,6 @@
import {Component, View, NgElement, PropertySetter} from 'angular2/angular2'
import {ComponentConfig} from 'ionic/config/component-config'
import {Component, View as NgView, NgElement, PropertySetter} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
export let SwitchConfig = new ComponentConfig('switch')
@Component({
selector: 'ion-switch',
@@ -10,10 +9,9 @@ export let SwitchConfig = new ComponentConfig('switch')
},
events: {
'click': 'onClick()'
},
injectables: [SwitchConfig]
}
})
@View({
@NgView({
template: `
<div class="item-content">
@@ -29,30 +27,27 @@ export let SwitchConfig = new ComponentConfig('switch')
})
export class Switch {
constructor(
configFactory: SwitchConfig,
element: NgElement,
@PropertySetter('attr.role') setAriaRole: Function,
@PropertySetter('attr.aria-checked') setAriaChecked: Function,
@PropertySetter('attr.aria-invalid') setAriaInvalid: Function,
@PropertySetter('attr.aria-disabled') setAriaDisabled: Function
@PropertySetter('attr.aria-checked') setChecked: Function,
@PropertySetter('attr.aria-invalid') setInvalid: Function,
@PropertySetter('attr.aria-disabled') setDisabled: Function
) {
this.domElement = element.domElement
this.config = Switch.config.invoke(this)
this.domElement.classList.add('item')
this.config = configFactory.create(this)
setAriaRole('checkbox')
setAriaInvalid('false')
setAriaDisabled('false')
setInvalid('false')
setDisabled('false')
this.setAriaRole = setAriaRole
this.setAriaChecked = setAriaChecked
this.setAriaInvalid = setAriaInvalid
this.setAriaDisabled = setAriaDisabled
this.setChecked = setChecked
}
set checked(checked) {
this._checked = checked
this.setAriaChecked(checked)
this.setChecked(checked)
}
get checked() {
return this._checked
@@ -62,3 +57,4 @@ export class Switch {
}
}
new IonicComponent(Switch, {})

View File

@@ -1,5 +1,8 @@
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
import {View, Content, Switch, List} from 'ionic/components';
import {View} from 'ionic/components/view/view';
import {Content} from 'ionic/components/content/content';
import {Switch} from 'ionic/components/switch/switch';
import {List} from 'ionic/components/list/list';
@Component({ selector: '[ion-app]' })
@NgView({

View File

@@ -1,7 +1,7 @@
import {
NgElement,
Component,
View,
View as NgView,
Ancestor,
PropertySetter,
For
@@ -9,6 +9,7 @@ import {
import {NavViewport} from 'ionic/components/nav-viewport/nav-viewport'
import {NavPane} from 'ionic/components/nav-pane/nav-pane'
import {Tabs} from 'ionic/components/tabs/tabs'
import * as util from 'ionic/util'
import {IonicComponent} from 'ionic/config/component'
@@ -16,10 +17,11 @@ import {IonicComponent} from 'ionic/config/component'
selector: 'ion-tab',
bind: {
title: 'tab-title',
icon: 'tab-icon',
initial: 'initial'
}
})
@View({
@NgView({
template: `
<div class="nav-pane-container">
<!-- COLLECTION OF PANES WITHIN THIS NAV-VIEWPORT, EACH PANE AS ONE VIEW -->
@@ -33,12 +35,20 @@ export class Tab extends NavViewport {
constructor(
element: NgElement,
@Ancestor() tabs: Tabs,
@PropertySetter('class.hide') setHidden: Function
@PropertySetter('class.hide') setHidden: Function,
@PropertySetter('attr.role') setRole: Function,
@PropertySetter('attr.id') setId: Function,
@PropertySetter('attr.aria-labelledby') setLabelby: Function
) {
super(element)
this.config = Tab.config.invoke(this)
this.setHidden = setHidden
this.tabId = util.uid()
setId('tab-content-' + this.tabId)
setLabelby('tab-item-' + this.tabId)
setRole('tabpanel')
this.setSelected(false)
tabs.addTab(this)
}

View File

@@ -1,33 +1,33 @@
import {NgElement, Component, View, For} from 'angular2/angular2'
import {NgElement, Component, View as NgView, For, PropertySetter} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
@Component({
selector: 'ion-tabs',
bind: {
placement: 'placement',
tabBarIcons: 'tab-bar-icons',
tabBarText: 'tab-bar-text'
tabBarPlacement: 'tab-bar-placement',
tabBarIcons: 'tab-bar-icons'
}
})
@View({
@NgView({
template: `
<header class="toolbar-container">
<!-- COLLECTION OF TOOLBARS FOR EACH VIEW WITHIN EACH TAB-VIEWPORT -->
<!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
</header>
<nav class="tab-bar-container">
<nav class="tab-bar-container" role="tablist"
[attr.aria-activedescendant]="'tab-item-' + selectedTab.tabId">
<div class="tab-bar">
<a *for="#tab of tabs"
<button *for="#t of tabs"
role="tab"
class="tab-bar-item"
[class.tab-active]="tab.isSelected"
(^click)="onClickTabItem($event, tab)">
<icon class="tab-bar-item-icon ion-home"
[hidden]="tabBarIcons=='none'"
[class.tab-bar-icon-bottom]="tabBarIcons=='bottom'"
[class.tab-bar-icon-top]="tabBarIcons=='top'"></icon>
<span class="tab-bar-item-text" [hidden]="tabBarText=='none'">{{tab.title}}</span>
</a>
[attr.id]="'tab-item-' + t.tabId"
[attr.aria-controls]="'tab-content-' + t.tabId"
[attr.aria-selected]="t.isSelected"
(^click)="onClickTabItem($event, t)">
<icon [class-name]="'tab-bar-item-icon ' + t.icon" [hidden]="!t.icon"></icon>
<span class="tab-bar-item-text" [hidden]="!t.title">{{t.title}}</span>
</button>
</div>
</nav>
@@ -42,21 +42,8 @@ export class Tabs {
@NgElement() ngElement: NgElement
) {
this.domElement = ngElement.domElement
// should be used to cover up sibling .nav-pane's and it's parent
this.domElement.classList.add('nav-pane-cover-parent')
// .tab-bar-top/bottom should be added to the entire element when specified
// TODO: MAKE MORE GOOD!!!
setTimeout(() => {
if (this.placement == 'top') {
this.domElement.classList.add('tab-bar-top')
} else {
this.domElement.classList.add('tab-bar-bottom')
}
})
this.config = Tabs.config.invoke(this)
this.tabs = []
}
@@ -88,7 +75,7 @@ export class Tabs {
new IonicComponent(Tabs, {
bind: {
placement: {
tabBarPlacement: {
defaults: {
ios: 'bottom',
android: 'top',
@@ -98,10 +85,9 @@ new IonicComponent(Tabs, {
tabBarIcons: {
defaults: {
ios: 'top',
android: 'none',
android: 'top',
core: 'top'
}
},
tabBarText: {}
}
}
})

View File

@@ -1,13 +1,14 @@
import {Component, View, bootstrap} from 'angular2/angular2'
import {NavViewport, Aside} from 'ionic/components'
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {NavViewport, Aside} from 'ionic/ionic'
import {SignInPage} from 'app/pages/sign-in'
@Component({
selector: '[ion-app]',
})
@View({
@NgView({
templateUrl: 'main.html',
directives: []
directives: [NavViewport, Aside]
})
class App {
constructor() {

View File

@@ -17,6 +17,10 @@
</button>
</p>
<p>
<input>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>

View File

@@ -1,5 +1,5 @@
import {Component, View as NgView} from 'angular2/angular2'
import {View, NavPane, Content} from 'ionic/components'
import {View, NavPane, Content} from 'ionic/ionic'
import {TabsPage} from 'app/pages/tabs'
@Component({

View File

@@ -1,4 +1,3 @@
<ion-tabs>
<ion-tab [initial]="tab1Initial" tab-title="Tab 1">

View File

@@ -1,5 +1,6 @@
import {Component, View as NgView, Parent} from 'angular2/angular2'
import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic/components'
import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic/ionic'
@Component({
selector: 'tabs-page'

View File

@@ -1,7 +1,7 @@
<ion-tabs>
<ion-tab tab-title="Tab 1">
<ion-tab tab-title="Tab 1" tab-icon="ion-home">
<ion-view nav-title="Tab 1">
<ion-content class="padding">
Tab 1 Content
@@ -9,7 +9,7 @@
</ion-view>
</ion-tab>
<ion-tab tab-title="Tab 2">
<ion-tab tab-title="Tab 2" tab-icon="ion-star">
<ion-view nav-title="Tab 2">
<ion-content class="padding">
Tab 2 Content

View File

@@ -1,5 +1,5 @@
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {View, Tabs, Tab} from 'ionic/components'
import {View, Tabs, Tab} from 'ionic/ionic'
import {webview} from 'ionic/webview/webview'
import {cordova} from 'ionic/webview/cordova/cordova'
import {nodeWebkit} from 'ionic/webview/node-webkit/node-webkit'

View File

@@ -1,5 +1,5 @@
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
import {View, Tabs, Tab} from 'ionic/components';
import {View, Tabs, Tab} from 'ionic/ionic';
@Component({ selector: '[ion-app]' })

View File

@@ -1,7 +1,8 @@
import {Component, View, bootstrap} from 'angular2/angular2';
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html'
})
class IonicApp {

View File

@@ -1,8 +1,9 @@
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
import {View, Tabs, Tab} from 'ionic/components';
import {View, Tabs, Tab} from 'ionic/ionic';
@Component({ selector: '[ion-app]' })
@View({
@NgView({
templateUrl: 'main.html',
directives: [View, Tabs, Tab]
})

View File

@@ -1,10 +1,10 @@
import {NgElement, Component, View} from 'angular2/angular2'
import {NgElement, Component, View as NgView} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
@Component({
selector: '.back-button',
})
@View({
@NgView({
template: `
<icon [class-name]="'back-button-icon ' + icon"></icon>
<span class="back-button-text">

View File

@@ -1,18 +1,16 @@
import {NgElement, Component, View, Ancestor, Optional} from 'angular2/angular2'
import {NgElement, Component, View as NgView, Ancestor} from 'angular2/angular2'
import {Optional} from 'angular2/src/di/annotations'
import {BackButton} from 'ionic/components/toolbar/back-button'
import {ComponentConfig} from 'ionic/config/component-config'
import {IonicComponent} from 'ionic/config/component'
import {raf} from 'ionic/util/dom'
export let ToolbarConfig = new ComponentConfig('toolbar')
@Component({
selector: 'ion-toolbar',
bind: {
title: 'nav-title'
},
injectables: [ToolbarConfig]
}
})
@View({
@NgView({
template: `
<div class="toolbar-items">
<button class="button back-button toolbar-item" style="display:none"></button>
@@ -34,12 +32,10 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
})
export class Toolbar {
constructor(
@NgElement() ngEle:NgElement,
configFactory: ToolbarConfig
@NgElement() ngEle:NgElement
) {
this.domElement = ngEle.domElement
this.config = configFactory.create(this);
this.config = Toolbar.config.invoke(this)
// TODO: make more better plz
setTimeout(() => {
@@ -87,3 +83,5 @@ export class Toolbar {
}
}
new IonicComponent(Toolbar, {})

View File

@@ -1,15 +1,13 @@
import {NgElement, Component, View as NgView, Parent, Ancestor} from 'angular2/angular2'
import {Toolbar} from 'ionic/components/toolbar/toolbar'
import {ComponentConfig} from 'ionic/config/component-config'
import {IonicComponent} from 'ionic/config/component'
export let ViewConfig = new ComponentConfig('view')
@Component({
selector: 'ion-view',
bind: {
title: 'nav-title'
},
injectables: [ViewConfig]
}
})
@NgView({
template: `
@@ -23,12 +21,11 @@ export let ViewConfig = new ComponentConfig('view')
})
export class View {
constructor(
configFactory: ViewConfig,
@NgElement() ngElement:NgElement
) {
this.domElement = ngElement.domElement
this.domElement.classList.add('pane')
this.config = configFactory.create(this)
this.config = View.config.invoke(this)
/*** TODO: MAKE MORE GOOD!! HACK HACK HACK!!!!!!!!! *****/
/*
@@ -65,3 +62,5 @@ export class View {
}
}
new IonicComponent(View, {})