diff --git a/ionic/components/tabs/tabs.js b/ionic/components/tabs/tabs.js index 3f2f8da5b3..e9163cc9c8 100644 --- a/ionic/components/tabs/tabs.js +++ b/ionic/components/tabs/tabs.js @@ -1,5 +1,5 @@ import {Optional} from 'angular2/src/di/annotations_impl' -import {Component} from 'angular2/src/core/annotations_impl/annotations'; +import {Component, onInit} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; import {ElementRef} from 'angular2/src/core/compiler/element_ref'; import {Compiler} from 'angular2/angular2'; @@ -12,7 +12,6 @@ import {ViewItem} from '../view/view-item'; import {TabButton} from './tab-button'; import {Icon} from '../icon/icon'; import {IonicComponentNEW} from '../../config/component'; -import {Config} from '../../config/component'; @IonicComponentNEW(Tabs) @@ -68,13 +67,10 @@ export class Tabs extends ViewController { }; } - Config(this, { - 'tabBarPlacement': { - 'default': 'bottom', - 'android': 'top', - 'ios': 'bottom' - } - }); + } + + onInit() { + Tabs.applyConfig(this); } addTab(tab) { @@ -127,18 +123,9 @@ export class Tabs extends ViewController { static get config() { return { selector: 'ion-tabs', - properties: [ - 'tabBarPlacement', - 'tabBarIcons' - ], - hostProperties: { - 'tabBarPlacement': 'attr.tab-bar-placement', - 'tabBarIcons': 'attr.tab-bar-icons' - }, - classId: 'tabs', - propertyDefaults: { - 'tabBarPlacement': 'top', - 'tabBarIcons': 'bottom' + defaultProperties: { + 'tabBarPlacement': 'bottom', + 'tabBarIcons': 'top' } } } diff --git a/ionic/config/component.js b/ionic/config/component.js index d382898ba3..d3e689283f 100644 --- a/ionic/config/component.js +++ b/ionic/config/component.js @@ -6,9 +6,6 @@ import {Platform} from 'ionic/platform/platform' let platformMode = Platform.getMode(); -// Low-level: how the user will override -// BackButton.config.bind.icon.value = 'ion-chevron-right' -// BackButton.config._computeDefaultValue(BackButton.config.bind.icon) export function Config(instance, config){ for (var setting in config) { @@ -30,7 +27,59 @@ export class ModeDirective extends Directive { export class IonicComponentNEW extends ModeComponent { constructor(ComponentType) { - super(ComponentType && ComponentType.config); + let config = ComponentType.config; + const defaultProperties = config.defaultProperties; + + config.properties = config.properties || []; + config.hostProperties = config.hostProperties || {}; + + for (let prop in defaultProperties) { + // add the property to the component "properties" + config.properties.push(prop); + + // set the component "hostProperties", so the instance's + // property value will be used to set the element's attribute + config.hostProperties[prop] = 'attr.' + util.pascalCaseToDashCase(prop); + } + + // called by the component's onInit when an instance has been created and properties bound + ComponentType.applyConfig = (instance) => { + for (let prop in defaultProperties) { + // Priority: + // --------- + // 1) Value set from within constructor + // 2) Value set from the host element's attribute + // 3) Value set by the users global config + // 4) Value set by the default mode/platform config + // 5) Value set from the component's default + + if (instance[prop]) { + // this property has already been set on the instance + // could be from the user setting the element's attribute + // or from the user setting it within the constructor + continue; + } + + // get the property values from a global user config + var globalPropertyValue = null; + if (globalPropertyValue) { + instance[prop] = globalPropertyValue; + continue; + } + + // get the property values provided by this mode/platform + var modePropertyValue = null; + if (modePropertyValue) { + instance[prop] = modePropertyValue; + continue; + } + + // wasn't set yet, so go with property's default value + instance[prop] = defaultProperties[prop]; + } + }; + + super(config); } }