clean up button toggle docs (#3521)

Author: tinayuangao

src/lib/button-toggle/button-toggle.ts

@@ -85,12 +85,6 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
   /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
   onTouched: () => any = () => {};
 
-  /** Event emitted when the group's value changes. */
-  private _change: EventEmitter<MdButtonToggleChange> = new EventEmitter<MdButtonToggleChange>();
-  @Output() get change(): Observable<MdButtonToggleChange> {
-    return this._change.asObservable();
-  }
-
   /** Child button toggle buttons. */
   @ContentChildren(forwardRef(() => MdButtonToggle))
   _buttonToggles: QueryList<MdButtonToggle> = null;
@@ -165,6 +159,12 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
     }
   }
 
+  /** Event emitted when the group's value changes. */
+  @Output() get change(): Observable<MdButtonToggleChange> {
+    return this._change.asObservable();
+  }
+  private _change: EventEmitter<MdButtonToggleChange> = new EventEmitter<MdButtonToggleChange>();
+
   private _updateButtonToggleNames(): void {
     if (this._buttonToggles) {
       this._buttonToggles.forEach((toggle) => {
@@ -291,15 +291,6 @@ export class MdButtonToggle implements OnInit {
   /** Type of the button toggle. Either 'radio' or 'checkbox'. */
   _type: ToggleType;
 
-  /** The unique ID for this button toggle. */
-  @HostBinding()
-  @Input()
-  id: string;
-
-  /** HTML's 'name' attribute used to group radios for unique selection. */
-  @Input()
-  name: string;
-
   /** Whether or not this button toggle is disabled. */
   private _disabled: boolean = null;
 
@@ -309,64 +300,28 @@ export class MdButtonToggle implements OnInit {
   /** Whether or not the button toggle is a single selection. */
   private _isSingleSelector: boolean = null;
 
+  @ViewChild('input') _inputElement: ElementRef;
+
   /** The parent button toggle group (exclusive selection). Optional. */
   buttonToggleGroup: MdButtonToggleGroup;
 
   /** The parent button toggle group (multiple selection). Optional. */
   buttonToggleGroupMultiple: MdButtonToggleGroupMultiple;
 
-  /** Event emitted when the group value changes. */
-  private _change: EventEmitter<MdButtonToggleChange> = new EventEmitter<MdButtonToggleChange>();
-  @Output() get change(): Observable<MdButtonToggleChange> {
-    return this._change.asObservable();
-  }
-
-  @ViewChild('input') _inputElement: ElementRef;
-
-  constructor(@Optional() toggleGroup: MdButtonToggleGroup,
-              @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
-              public buttonToggleDispatcher: UniqueSelectionDispatcher,
-              private _renderer: Renderer,
-              private _elementRef: ElementRef,
-              private _focusOriginMonitor: FocusOriginMonitor) {
-    this.buttonToggleGroup = toggleGroup;
-
-    this.buttonToggleGroupMultiple = toggleGroupMultiple;
-
-    if (this.buttonToggleGroup) {
-      buttonToggleDispatcher.listen((id: string, name: string) => {
-        if (id != this.id && name == this.name) {
-          this.checked = false;
-        }
-      });
-
-      this._type = 'radio';
-      this.name = this.buttonToggleGroup.name;
-      this._isSingleSelector = true;
-    } else {
-      // Even if there is no group at all, treat the button toggle as a checkbox so it can be
-      // toggled on or off.
-      this._type = 'checkbox';
-      this._isSingleSelector = false;
-    }
-  }
-
-  ngOnInit() {
-    if (this.id == null) {
-      this.id = `md-button-toggle-${_uniqueIdCounter++}`;
-    }
-
-    if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {
-      this._checked = true;
-    }
-    this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
-  }
-
   /** Unique ID for the underlying `input` element. */
   get inputId(): string {
     return `${this.id}-input`;
   }
 
+  /** The unique ID for this button toggle. */
+  @HostBinding()
+  @Input()
+  id: string;
+
+  /** HTML's 'name' attribute used to group radios for unique selection. */
+  @Input()
+  name: string;
+
   /** Whether the button is checked. */
   @HostBinding('class.mat-button-toggle-checked')
   @Input()
@@ -378,7 +333,7 @@ export class MdButtonToggle implements OnInit {
     if (this._isSingleSelector) {
       if (newCheckedState) {
         // Notify all button toggles with the same name (in the same group) to un-check.
-        this.buttonToggleDispatcher.notify(this.id, this.name);
+        this._buttonToggleDispatcher.notify(this.id, this.name);
       }
     }
 
@@ -404,14 +359,6 @@ export class MdButtonToggle implements OnInit {
     }
   }
 
-  /** Dispatch change event with current value. */
-  private _emitChangeEvent(): void {
-    let event = new MdButtonToggleChange();
-    event.source = this;
-    event.value = this._value;
-    this._change.emit(event);
-  }
-
   /** Whether the button is disabled. */
   @HostBinding('class.mat-button-toggle-disabled')
   @Input()
@@ -424,6 +371,56 @@ export class MdButtonToggle implements OnInit {
     this._disabled = (value != null && value !== false) ? true : null;
   }
 
+  /** Event emitted when the group value changes. */
+  private _change: EventEmitter<MdButtonToggleChange> = new EventEmitter<MdButtonToggleChange>();
+  @Output() get change(): Observable<MdButtonToggleChange> {
+    return this._change.asObservable();
+  }
+
+  constructor(@Optional() toggleGroup: MdButtonToggleGroup,
+              @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
+              private _buttonToggleDispatcher: UniqueSelectionDispatcher,
+              private _renderer: Renderer,
+              private _elementRef: ElementRef,
+              private _focusOriginMonitor: FocusOriginMonitor) {
+    this.buttonToggleGroup = toggleGroup;
+
+    this.buttonToggleGroupMultiple = toggleGroupMultiple;
+
+    if (this.buttonToggleGroup) {
+      _buttonToggleDispatcher.listen((id: string, name: string) => {
+        if (id != this.id && name == this.name) {
+          this.checked = false;
+        }
+      });
+
+      this._type = 'radio';
+      this.name = this.buttonToggleGroup.name;
+      this._isSingleSelector = true;
+    } else {
+      // Even if there is no group at all, treat the button toggle as a checkbox so it can be
+      // toggled on or off.
+      this._type = 'checkbox';
+      this._isSingleSelector = false;
+    }
+  }
+
+  ngOnInit() {
+    if (this.id == null) {
+      this.id = `md-button-toggle-${_uniqueIdCounter++}`;
+    }
+
+    if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {
+      this._checked = true;
+    }
+    this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
+  }
+
+  /** Focuses the button. */
+  focus() {
+    this._renderer.invokeElementMethod(this._inputElement.nativeElement, 'focus');
+  }
+
   /** Toggle the state of the current button toggle. */
   private _toggle(): void {
     this.checked = !this.checked;
@@ -458,8 +455,11 @@ export class MdButtonToggle implements OnInit {
     event.stopPropagation();
   }
 
-  /** Focuses the button. */
-  focus() {
-    this._renderer.invokeElementMethod(this._inputElement.nativeElement, 'focus');
+  /** Dispatch change event with current value. */
+  private _emitChangeEvent(): void {
+    let event = new MdButtonToggleChange();
+    event.source = this;
+    event.value = this._value;
+    this._change.emit(event);
   }
 }