diff --git a/ionic/components/segment/segment.js b/ionic/components/segment/segment.js index 87b2f6f525..40b27ad232 100644 --- a/ionic/components/segment/segment.js +++ b/ionic/components/segment/segment.js @@ -1,35 +1,40 @@ import {Renderer, ElementRef} from 'angular2/angular2' -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; +import {Component, Directive, onInit} 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 {dom} from 'ionic/util'; -import {IonicComponent_OLD} from 'ionic/config/component' +import {IonicComponent} from 'ionic/config/component' import {Button} from 'ionic/components/button/button' -@Component({ - selector: 'ion-segment', - hostListeners: { - 'click': 'buttonClicked($event)' - } -}) +@IonicComponent(Segment) @View({ template: `
`, - directives: [Button, SegmentButton], - properties: [ - 'value' - ], - hostProperties: { - value: 'value' - } + directives: [Button, SegmentButton] }) export class Segment { + + static get config() { + return { + selector: 'ion-segment', + hostListeners: { + 'click': 'buttonClicked($event)' + }, + properties: [ + 'value' + ], + hostProperties: { + value: 'value' + } + } + } + constructor( elementRef: ElementRef, renderer: Renderer, @@ -47,6 +52,10 @@ export class Segment { this.buttons = []; } + onInit() { + Segment.applyConfig(this); + } + /** * Much like ngModel, this is called from our valueAccessor for the attached * ControlDirective to update the value internally. @@ -103,8 +112,6 @@ export class Segment { } } -new IonicComponent_OLD(Segment, { -}); @Component({ selector: 'ion-segment-button', diff --git a/ionic/components/slides/slides.js b/ionic/components/slides/slides.js index 640fa80174..3e9209ac87 100644 --- a/ionic/components/slides/slides.js +++ b/ionic/components/slides/slides.js @@ -2,14 +2,14 @@ import {For, ElementRef, Inject, Parent} from 'angular2/angular2' import {Ancestor} from 'angular2/src/core/annotations_impl/visibility'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; +import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; import {DragGesture} from 'ionic/gestures/drag-gesture'; import * as util from 'ionic/util'; import {dom} from 'ionic/util' -import {IonicComponent_OLD} from 'ionic/config/component' +import {IonicComponent} from 'ionic/config/component' import {Hammer} from 'ionic/gestures/hammer'; @@ -29,19 +29,24 @@ import {Hammer} from 'ionic/gestures/hammer'; * * TODO: Test mouse support * * TODO: Port over mouse handling */ -@Component({ - selector: 'ion-slides', - properties: [ - 'loop', - 'index', - 'bounce' - ] -}) +@IonicComponent(Slides) @View({ template: `
`, directives: [Slide, SlidePager] }) export class Slides { + + static get config() { + return { + selector: 'ion-slides', + properties: [ + 'loop', + 'index', + 'bounce' + ] + } + } + constructor(elementRef: ElementRef) { // Grab the main container, and the slides-view wrapper this.domElement = elementRef.domElement; @@ -63,17 +68,9 @@ export class Slides { // Initialize our slides gesture handler this.gesture = new SlidesGesture(this); this.gesture.listen(); - - - // Wait a cycle for the children to exist before computing sizes - setTimeout(() => { - // Continuous mode, but only if we have at least 2 slides - this.setup(); - - }); } - setup() { + onInit() { this.continuous = util.isDefined(this.loop) && (this.slides.length > 1 ? true : false); // Grab the wrapper element that contains the slides @@ -464,15 +461,11 @@ export class Slides { } } -new IonicComponent_OLD(Slides, { -}); -@Component({ + +@Directive({ selector: 'ion-slide', }) -@View({ - template: `` -}) export class Slide { constructor( @Ancestor() slides: Slides, @@ -515,8 +508,6 @@ export class Slide { } } -new IonicComponent_OLD(Slide, { -}); @Component({ selector: 'ion-pager', @@ -543,13 +534,10 @@ export class SlidePager { return this.slides.slides; } } -new IonicComponent_OLD(SlidePager, { -}); export class SlidesGesture extends DragGesture { constructor(slides) { - //util.defaults(opts, {}); super(slides.domElement); this.slides = slides; } @@ -573,7 +561,6 @@ export class SlidesGesture extends DragGesture { this.slides._dragStart(event, this._drag); } onDragEnd(event) { - this.slides._endDrag(event, this._drag); } } diff --git a/ionic/components/switch/switch.js b/ionic/components/switch/switch.js index da23d1dc58..5963d1239e 100644 --- a/ionic/components/switch/switch.js +++ b/ionic/components/switch/switch.js @@ -4,45 +4,37 @@ import {View} from 'angular2/src/core/annotations_impl/view'; import {ControlGroup, ControlDirective} from 'angular2/forms' import {dom} from 'ionic/util'; -import {IonicComponent_OLD} from 'ionic/config/component' +import {IonicComponent} from 'ionic/config/component' -@Component({ - selector: 'ion-switch', - properties: { - checked: 'checked' - }, - hostListeners: { - 'click': 'switchClicked($event)' - }, - /* - TODO: For some reason this triggers a 'TypeError: array.map is not a function' - events: { - 'click': 'onClick()' - } - */ -}) +@IonicComponent(Switch) @View({ template: `
-
-
-
` }) export class Switch { + + static get config() { + return { + selector: 'ion-switch', + properties: [ + 'checked' + ], + hostListeners: { + 'click': 'switchClicked($event)' + } + } + } + constructor( elementRef: ElementRef, cd: ControlDirective - // @PropertySetter('attr.role') setAriaRole: Function, - // @PropertySetter('attr.aria-checked') setChecked: Function - // @PropertySetter('attr.aria-invalid') setInvalid: Function, - // @PropertySetter('attr.aria-disabled') setDisabled: Function ) { this.domElement = elementRef.domElement this.config = Switch.config.invoke(this) @@ -89,5 +81,3 @@ export class Switch { this.checked = !this.checked; } } - -new IonicComponent_OLD(Switch, {})