Skip to content

docs(button-toggle): clean up button toggle docs #3521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 9, 2017
Merged

docs(button-toggle): clean up button toggle docs #3521

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 74 additions & 74 deletions src/lib/button-toggle/button-toggle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,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 @@ -163,6 +157,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 @@ -289,15 +289,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 @@ -307,64 +298,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 @@ -376,7 +331,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 @@ -402,14 +357,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 @@ -422,6 +369,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 @@ -456,8 +453,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);
}
}