Segment love

ionic/components/segment/extensions/ios.scss

@@ -1,6 +1,6 @@
 .platform-ios {
 
-  ion-segment {
+  .ion-segment {
 
     > .button {
       border-width: 2px;
@@ -16,10 +16,10 @@
       border-style: solid;
       border-color: get-color(primary, base);
 
-      &:first-child {
+      &:first-of-type {
         border-right-width: 0px;
       }
-      &:last-child {
+      &:last-of-type {
         border-left-width: 0px;
       }
     }

ionic/components/segment/segment.js

@@ -1,29 +1,100 @@
-import {NgElement, Component, View, Decorator} from 'angular2/angular2'
+import {NgElement, Renderer, ElementRef, Component, DefaultValueAccessor, View, Ancestor, Optional, Decorator, Directive} from 'angular2/angular2'
+import {dom} from 'ionic/util';
 import {IonicComponent} from 'ionic/config/component'
 import {Button} from 'ionic/components/button/button'
 
 
 @Component({
-  selector: 'ion-segment'
+  selector: 'ion-segment',
+  hostListeners: {
+    'click': 'buttonClicked($event)'
+  }
 })
 @View({
-  template: `<div class="ion-segment" (^click)="buttonClicked($event)">
+  template: `<div class="ion-segment">
     <content></content>
   </div>
   `,
-  directives: [Button]
+  directives: [Button, SegmentButton]
 })
 export class Segment {
   constructor(
-    @NgElement() ngElement:NgElement
+    @NgElement() ngElement:NgElement,
+    elementRef: ElementRef,
+    renderer: Renderer
   ) {
     this.domElement = ngElement.domElement
-    this.config = Button.config.invoke(this)
+    this.config = Segment.config.invoke(this)
+    this.elementRef = elementRef;
+    this.renderer = renderer;
+
+    this.buttons = [];
+  }
+
+  bindButton(segmentValue) {
+    this.buttons.push(segmentValue);
+    let index = this.buttons.length;
+    console.log('Bound button', index);
+  }
+
+  register(segmentButton) {
+    this.buttons.push(segmentButton);
+  }
+
+  selected(event, segmentButton) {
+    for(let button of this.buttons) {
+      button.setActive(false);
+    }
+    segmentButton.setActive(true);
+  }
+}
+
+new IonicComponent(Segment, {
+});
+
+@Component({
+  selector: 'ion-segment-button',
+  hostListeners: {
+    'click': 'buttonClicked($event)'
+  },
+  properties: {
+    value: 'value'
+  }
+})
+@View({
+  template: '<content></content>'
+})
+/*
+@Directive({
+  hostListeners: {
+    mouseover: 'buttonClicked'
+  }
+})
+*/
+export class SegmentButton {
+  constructor(
+    @Ancestor() segment: Segment,
+    @NgElement() ngElement:NgElement,
+    elementRef: ElementRef,
+    renderer: Renderer
+  ) {
+    this.domElement = ngElement.domElement
+    this.segment = segment;
+
+    segment.register(this);
+  }
+
+  setActive(isActive) {
+    // TODO: No domElement
+    if(isActive) {
+      this.domElement.classList.add('active');
+    } else {
+      this.domElement.classList.remove('active');
+    }
   }
 
   buttonClicked(event) {
-    console.log('Button clicked', event);
+    this.segment.selected(event, this);
   }
+
 }
-new IonicComponent(Segment, {
-})

ionic/components/segment/segment.scss

@@ -1,4 +1,6 @@
-ion-segment {
+ion-segment { display: block; }
+
+.ion-segment {
   @include flex-display();
   @include flex(1);
   width: 100%;
@@ -27,10 +29,10 @@ ion-segment {
       color: white;
     }
 
-    &:first-child {
+    &:first-of-type {
       border-radius: $button-border-radius 0px 0px $button-border-radius;
     }
-    &:last-child {
+    &:last-of-type {
       border-right-width: 1px;
       border-radius: 0px $button-border-radius $button-border-radius 0px;
     }

ionic/components/segment/test/basic/main.html

@@ -1,13 +1,29 @@
 <ion-content class="padding">
+
   <ion-segment>
-    <button ion-button class="active">
+    <ion-segment-button value="standard" ion-button>
+      Standard
+    </ion-segment-button>
+    <ion-segment-button value="hybrid" ion-button>
+      Hybrid
+    </ion-segment-button>
+    <ion-segment-button value="sat" ion-button>
+      Satellite
+    </ion-segment-button>
+    <!--
+    <button ion-button class="active" [segment-value]="standard">
       Standard
     </button>
-    <button ion-button>
+
+    <button ion-button [segment-value]="hybrid">
       Hybrid
     </button>
-    <button ion-button>
+
+    <button #sat ion-button [segment-value]="sat">
       Satellite
     </button>
+  -->
+
   </ion-segment>
+
 </ion-content>

ionic/components/segment/test/basic/main.js

@@ -1,10 +1,7 @@
 import {Component, View, bootstrap} from 'angular2/angular2'
 import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
-//import {Button, Switch, Form, List, Label, Item, Input, Content} from 'ionic/ionic';
 import {IONIC_DIRECTIVES} from 'ionic/ionic'
 
-console.log([FormDirectives].concat(IONIC_DIRECTIVES));
-
 @Component({ selector: '[ion-app]' })
 @View({
   templateUrl: 'main.html',

ionic/directives.js

@@ -1,4 +1,6 @@
-import {Button, Switch, List, Label, Item, Input, Content, Segment} from 'ionic/ionic';
-var IONIC_DIRECTIVES = [Button, List, Label, Item, Content, Segment];
+import {Button, Switch, List, Label,
+  Item, Input, Content, Segment, SegmentButton} from 'ionic/ionic';
+
+var IONIC_DIRECTIVES = [Button, List, Label, Item, Content, Segment, SegmentButton];
 
 export {IONIC_DIRECTIVES};

ionic/util/dom.js

@@ -108,3 +108,15 @@ export function addClass(el: Element, ...classNames) {
     el.classList.add(c);
   }
 }
+
+export function getChildIndex(el: Element) {
+  let child;
+  let parent = el.parentNode;
+  for(let i = 0, j = parent.children.length; i < j; i++) {
+    child = parent.children[i];
+    if(child === el) {
+      return i;
+    }
+  }
+  return -1;
+}