Skip to content

Commit

Permalink
clean up button toggle docs (#3521)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinayuangao
tinayuangao authored Mar 9, 2017
1 parent d173eb1 commit ce0e933
Showing 1 changed file with 74 additions and 74 deletions.
148 changes: 74 additions & 74 deletions src/lib/button-toggle/button-toggle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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;

Expand All @@ -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()
Expand All @@ -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);
}
}

Expand All @@ -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()
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
}

0 comments on commit ce0e933

Please sign in to comment.