From ce0e933e0b5242752ce91753532891b3a53eab48 Mon Sep 17 00:00:00 2001 From: tinayuangao Date: Wed, 8 Mar 2017 18:12:56 -0800 Subject: [PATCH] clean up button toggle docs (#3521) --- src/lib/button-toggle/button-toggle.ts | 148 ++++++++++++------------- 1 file changed, 74 insertions(+), 74 deletions(-) diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index edefed0d7ae0..22b0184d4ee0 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/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 = new EventEmitter(); - @Output() get change(): Observable { - return this._change.asObservable(); - } - /** Child button toggle buttons. */ @ContentChildren(forwardRef(() => MdButtonToggle)) _buttonToggles: QueryList = null; @@ -165,6 +159,12 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor } } + /** Event emitted when the group's value changes. */ + @Output() get change(): Observable { + return this._change.asObservable(); + } + private _change: EventEmitter = new EventEmitter(); + 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 = new EventEmitter(); - @Output() get change(): Observable { - 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 = new EventEmitter(); + @Output() get change(): Observable { + 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); } }