back-button: use updated config

This commit is contained in:
Andrew
2015-03-31 12:27:34 -06:00
parent 4ba305305f
commit 4699ef5ff8
4 changed files with 50 additions and 31 deletions

View File

@ -1,5 +1,4 @@
import {Component, Template, Inject, Parent, NgElement} from 'angular2/angular2' import {Component, Template, Inject, Parent, NgElement} from 'angular2/angular2'
import {ComponentConfig} from 'ionic2/config/component-config'
import * as types from 'ionic2/components/aside/extensions/types' import * as types from 'ionic2/components/aside/extensions/types'
import * as gestures from 'ionic2/components/aside/extensions/gestures'; import * as gestures from 'ionic2/components/aside/extensions/gestures';
import {IonicComponent} from 'ionic2/config/component' import {IonicComponent} from 'ionic2/config/component'
@ -58,15 +57,26 @@ export class Aside {
} }
} }
@Component({
selector: 'ion-aside',
bind: {
content: 'content',
side: 'side',
dragThreshold: 'dragThreshold'
}
})
new IonicComponent(Aside, { new IonicComponent(Aside, {
bind: { bind: {
side: { side: {
default: 'left' value: 'left'
}, },
type: { type: {
ios: 'reveal', defaults: {
android: 'overlay', ios: 'reveal',
default: 'overlay', android: 'overlay',
base: 'overlay',
}
}, },
dragThreshold: {}, dragThreshold: {},
content: {}, content: {},

View File

@ -1,32 +1,37 @@
import {NgElement, Component, Template} from 'angular2/angular2' import {NgElement, Component, Template} from 'angular2/angular2'
import {ComponentConfig} from 'ionic2/config/component-config' import {IonicComponent} from 'ionic2/config/component'
export let BackButtonConfig = new ComponentConfig('back-button')
BackButtonConfig
.platform('ios', instance => {
instance.domElement.querySelector('.back-button-icon').classList.add('ion-ios-arrow-back')
instance.domElement.querySelector('.back-default').textContent = 'Back'
})
.platform('android', instance => {
instance.domElement.querySelector('.back-button-icon').classList.add('ion-android-arrow-back')
})
@Component({ @Component({
selector: '.back-button', selector: '.back-button',
services: [BackButtonConfig]
}) })
@Template({ @Template({
inline: ` inline: `
<icon class="back-button-icon"></icon> <icon [class-name]="'back-button-icon ' + icon"></icon>
<div class="back-button-text"> <div class="back-button-text">
<div class="back-default"></div> <div class="back-default"></div>
<div class="back-title"></div> <div class="back-title"></div>
</div>` </div>`
}) })
export class BackButton { export class BackButton {
constructor(@NgElement() ngEle:NgElement, configFactory: BackButtonConfig) { constructor(
@NgElement() ngEle:NgElement
) {
this.domElement = ngEle.domElement this.domElement = ngEle.domElement
this.config = configFactory.create(this);
setTimeout(() => {
this.config = BackButton.config.invoke(this)
})
} }
} }
new IonicComponent(BackButton, {
bind: {
icon: {
defaults: {
ios: 'ion-ios-arrow-back',
android: 'ion-android-arrow-back',
base: 'ion-chevron-left'
}
}
}
})

View File

@ -4,6 +4,10 @@ import {platform} from 'ionic2/platform/platform'
let platforms = Object.keys(platform.registry) let platforms = Object.keys(platform.registry)
let platformName = platform.getName() let platformName = platform.getName()
// Low-level: how the user will override
// BackButton.config.bind.icon.value = 'ion-chevron-right'
// BackButton.config._computeDefaultValue(BackButton.config.bind.icon)
export class IonicComponent { export class IonicComponent {
constructor(ComponentClass, { constructor(ComponentClass, {
bind, bind,
@ -18,8 +22,8 @@ export class IonicComponent {
let binding = bind[attrName] let binding = bind[attrName]
if (util.isObject(binding)) { if (util.isObject(binding)) {
binding.property || (binding.property = attrName) binding.property || (binding.property = attrName)
this._computeDefaultValue(binding)
// TODO recompute defaultValue when user possibly adds a binding // TODO recompute defaultValue when user possibly adds a binding
binding._defaultValue = binding[platformName] || binding.default;
} }
} }
@ -29,6 +33,8 @@ export class IonicComponent {
// } // }
} }
_computeDefaultValue(binding = {}) { _computeDefaultValue(binding = {}) {
let defaults = binding.defaults || {}
binding._defaultValue = binding.value || defaults[platformName] || defaults.base;
} }
invoke(instance) { invoke(instance) {
@ -50,13 +56,11 @@ export class IonicComponent {
let cases = (config.delegates || {})[delegateName] || [] let cases = (config.delegates || {})[delegateName] || []
for (let i = 0; i < cases.length; i++) { for (let i = 0; i < cases.length; i++) {
let delegateCase = cases[i] let delegateCase = cases[i]
try { if (util.isArray(delegateCase)) {
if (util.isArray(delegateCase)) { if (delegateCase[0](instance)) return new delegateCase[1](instance)
if (delegateCase[0](instance)) return new delegateCase[1](instance) } else {
} else { return new delegateCase(instance)
return new delegateCase(instance) }
}
}catch(e){debugger;}
} }
} }
} }

View File

@ -44,7 +44,7 @@ class PlatformController {
detect() { detect() {
for (let name in this.registry) { for (let name in this.registry) {
if (this.registry[name].matcher()) { if (this.registry[name].matcher()) {
return platform return this.registry[name]
} }
} }
return this.defaultPlatform return this.defaultPlatform
@ -74,7 +74,7 @@ platform.register({
// Last case is a catch-all // Last case is a catch-all
platform.setDefaultPlatform({ platform.setDefaultPlatform({
name: 'default' name: 'base'
}) })
platform.set( platform.detect() ) platform.set( platform.detect() )