From 2f7e6c0495e45edc1bbaa5358fa5595f33ea8acb Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 18 Jun 2015 18:54:58 -0500 Subject: [PATCH] Radio cleanup, create @IonicDirective --- ionic/components/nav/pane.js | 15 ++- ionic/components/radio/radio.js | 60 +++++----- ionic/components/radio/test/basic/index.js | 12 +- ionic/config/component.js | 130 ++++++++++----------- 4 files changed, 108 insertions(+), 109 deletions(-) diff --git a/ionic/components/nav/pane.js b/ionic/components/nav/pane.js index ca592ad31f..6401db12a5 100644 --- a/ionic/components/nav/pane.js +++ b/ionic/components/nav/pane.js @@ -7,7 +7,7 @@ import {bind} from 'angular2/di'; import {ViewController} from '../view/view-controller'; import {SwipeHandle} from './swipe-handle'; -import {ModeComponent} from '../../config/component'; +import {IonicComponentNEW} from '../../config/component'; export class PaneController { @@ -87,10 +87,7 @@ export class PaneController { } -@ModeComponent({ - selector:'ion-pane', - classId: 'nav' -}) +@IonicComponentNEW(Pane) @View({ template: ` @@ -102,6 +99,14 @@ export class PaneController { directives: [PaneAnchor, PaneContentAnchor, SwipeHandle] }) export class Pane { + + static get config() { + return { + selector:'ion-pane', + classId: 'nav' + } + } + constructor(viewCtrl: ViewController, elementRef: ElementRef) { this.domElement = elementRef.domElement; viewCtrl.panes.add(this); diff --git a/ionic/components/radio/radio.js b/ionic/components/radio/radio.js index c5490cfe7d..9627324dce 100644 --- a/ionic/components/radio/radio.js +++ b/ionic/components/radio/radio.js @@ -1,28 +1,29 @@ import {ElementRef} from 'angular2/angular2' - import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; import {Ancestor} from 'angular2/src/core/annotations_impl/visibility'; import {View} from 'angular2/src/core/annotations_impl/view'; -import {ControlGroup, ControlDirective} from 'angular2/forms' -import {IonicComponent} from 'ionic/config/component' +//import {ControlGroup, ControlDirective} from 'angular2/forms' +import {IonicDirective, IonicComponentNEW} from 'ionic/config/component'; -@Component({ - selector: 'ion-radio-group' -}) -@View({ - template: `` -}) +@IonicDirective(RadioGroup) export class RadioGroup { + + static get config() { + return { + selector: 'ion-radio-group' + } + } + constructor( - elementRef: ElementRef, - cd:ControlDirective + elementRef: ElementRef//, + //cd:ControlDirective ) { this.domElement = elementRef.domElement - this.config = RadioGroup.config.invoke(this) - this.controlDirective = cd; - cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective + // this.config = RadioGroup.config.invoke(this) + // this.controlDirective = cd; + // cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective this.domElement.classList.add('list'); @@ -85,17 +86,8 @@ export class RadioGroup { } } -new IonicComponent(RadioGroup, {}) -@Component({ - selector: 'ion-radio', - hostListeners: { - '^click': 'buttonClicked($event)' - }, - properties: [ - 'value' - ] -}) +@IonicComponentNEW(RadioButton) @View({ template: `
@@ -113,12 +105,24 @@ new IonicComponent(RadioGroup, {}) ` }) export class RadioButton { + + static get config() { + return { + selector: 'ion-radio', + hostListeners: { + '^click': 'buttonClicked($event)' + }, + properties: [ + 'value' + ] + } + } + constructor( @Ancestor() group: RadioGroup, elementRef: ElementRef ) { - this.domElement = elementRef.domElement - this.config = RadioButton.config.invoke(this) + this.domElement = elementRef.domElement; this.domElement.classList.add('item') this.domElement.setAttribute('aria-checked', true) @@ -145,7 +149,3 @@ export class RadioButton { } } - -new IonicComponent(RadioButton, { - -}) diff --git a/ionic/components/radio/test/basic/index.js b/ionic/components/radio/test/basic/index.js index 82855c2005..2b8841cb8d 100644 --- a/ionic/components/radio/test/basic/index.js +++ b/ionic/components/radio/test/basic/index.js @@ -1,22 +1,22 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; -import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms'; +//import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms'; import {RadioGroup, RadioButton, Content, Button, List} from 'ionic/ionic'; @Component({ selector: 'ion-view' }) @View({ templateUrl: 'main.html', - directives: [FormDirectives].concat([RadioGroup, RadioButton, List, Content, Button]) + directives: [RadioGroup, RadioButton, List, Content, Button] }) export default class IonicApp { constructor() { console.log('IonicApp Start') - var fb = new FormBuilder(); - this.form = fb.group({ - preferredApple: ['mac', Validators.required], - }); + // var fb = new FormBuilder(); + // this.form = fb.group({ + // preferredApple: ['mac', Validators.required], + // }); } } diff --git a/ionic/config/component.js b/ionic/config/component.js index b8556759da..9473f97fc5 100644 --- a/ionic/config/component.js +++ b/ionic/config/component.js @@ -13,82 +13,76 @@ export function Config(instance, config){ } } -export class ModeComponent extends Component { - constructor(config) { - super( appendModeConfig(config) ); - } -} - -export class ModeDirective extends Directive { - constructor(config) { - super( appendModeConfig(config) ); - } -} - -export class IonicComponentNEW extends ModeComponent { +export class IonicDirective extends Directive { constructor(ComponentType) { - 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); + super( appendModeConfig(ComponentType) ); } } -function appendModeConfig(config) { - config = config || {}; +export class IonicComponentNEW extends Component { + constructor(ComponentType) { + super( appendModeConfig(ComponentType) ); + } +} + +function appendModeConfig(ComponentType) { + 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]; + } + }; + config.hostAttributes = config.hostAttributes || {}; let className = (config.hostAttributes['class'] || ''); let id = config.classId || config.selector.replace('ion-', ''); config.hostAttributes['class'] = (className + ' ' + id + ' ' + id + '-' + platformMode).trim(); + return config; }