mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
back-button: use updated config
This commit is contained in:
@ -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: {},
|
||||||
|
@ -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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
@ -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;}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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() )
|
||||||
|
Reference in New Issue
Block a user