Segment runs (incorrectly though)

This commit is contained in:
Max Lynch
2015-06-24 15:09:52 -05:00
parent 3044509953
commit febc56c35d
4 changed files with 34 additions and 43 deletions

View File

@ -1,7 +1,4 @@
.platform-ios { .segment-ios .ion-segment {
.ion-segment {
> button, > button,
> [button] { > [button] {
border-width: 1px; border-width: 1px;
@ -29,4 +26,3 @@
} }
} }
} }
}

View File

@ -4,6 +4,7 @@ import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/a
import {Ancestor} from 'angular2/src/core/annotations_impl/visibility'; import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
import {View} from 'angular2/src/core/annotations_impl/view'; import {View} from 'angular2/src/core/annotations_impl/view';
import {NgControl} from 'angular2/forms';
import {ControlGroup, ControlDirective} from 'angular2/forms' import {ControlGroup, ControlDirective} from 'angular2/forms'
import {dom} from 'ionic/util'; import {dom} from 'ionic/util';
import {IonicComponent} from 'ionic/config/component' import {IonicComponent} from 'ionic/config/component'
@ -22,7 +23,7 @@ export class Segment {
static get config() { static get config() {
return { return {
selector: 'ion-segment', selector: 'ion-segment',
appInjector: [ControlDirective], appInjector: [ NgControl ],
properties: [ properties: [
'value' 'value'
], ],
@ -34,18 +35,17 @@ export class Segment {
} }
constructor( constructor(
ngControl: NgControl,
elementRef: ElementRef, elementRef: ElementRef,
renderer: Renderer, renderer: Renderer
cd:ControlDirective
) { ) {
console.log('ELEMENT REF INJECT', elementRef); console.log('ELEMENT REF INJECT', elementRef, ngControl);
this.domElement = elementRef.domElement this.domElement = elementRef.domElement
//this.config = Segment.config.invoke(this) //this.config = Segment.config.invoke(this)
this.elementRef = elementRef; this.elementRef = elementRef;
this.renderer = renderer; this.renderer = renderer;
this.controlDirective = cd; this.ngControl = ngControl;
this.ngControl.valueAccessor = this;
cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
this.buttons = []; this.buttons = [];
} }
@ -117,14 +117,14 @@ export class Segment {
'value' 'value'
], ],
host: { host: {
'(click)': 'buttonClicked($event)' '(click)': 'buttonClicked($event)',
'class.active': 'isActive'
} }
}) })
export class SegmentButton { export class SegmentButton {
constructor( constructor(
@Ancestor() segment: Segment, @Ancestor() segment: Segment,
elementRef: ElementRef, elementRef: ElementRef,
renderer: Renderer
) { ) {
this.domElement = elementRef.domElement this.domElement = elementRef.domElement
this.segment = segment; this.segment = segment;
@ -133,12 +133,7 @@ export class SegmentButton {
} }
setActive(isActive) { setActive(isActive) {
// TODO: No domElement this.isActive = isActive;
if(isActive) {
this.domElement.classList.add('active');
} else {
this.domElement.classList.remove('active');
}
} }
buttonClicked(event) { buttonClicked(event) {

View File

@ -2,13 +2,13 @@
<form (^submit)="doSubmit($event)" [control-group]="form"> <form (^submit)="doSubmit($event)" [control-group]="form">
<ion-segment control="mapStyle"> <ion-segment control="mapStyle">
<ion-segment-button value="standard" ion-button> <ion-segment-button value="standard" button>
Standard Standard
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="hybrid" ion-button> <ion-segment-button value="hybrid" button>
Hybrid Hybrid
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="sat" ion-button> <ion-segment-button value="sat" button>
Satellite Satellite
</ion-segment-button> </ion-segment-button>
<!-- <!--

View File

@ -31,7 +31,8 @@ export class IonicView extends View {
Icon, Icon,
// Form elements // Form elements
//Checkbox, Switch, Label, Input, Segment, SegmentButton, Segment, SegmentButton,
//Checkbox, Switch, Label, Input
//RadioGroup, RadioButton, SearchBar, //RadioGroup, RadioButton, SearchBar,
// Nav // Nav
@ -42,4 +43,3 @@ export class IonicView extends View {
super(config); super(config);
} }
} }