cargdev/angular
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(md-button): enhance button focus appearance.

Browse Source
This commit is contained in:
Jeremy Elbourn
2015-07-31 14:11:35 -07:00
parent 7354206c74
commit 6d280ea31f
3 changed files with 126 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
modules/angular2_material/src/components/button/button.ts
View File

@ -1,36 +1,86 @@
import {Component, View, LifecycleEvent, ViewEncapsulation} from 'angular2/angular2';
import {TimerWrapper} from 'angular2/src/facade/async';
import {isPresent} from 'angular2/src/facade/lang';
// TODO(jelbourn): Ink ripples.
// TODO(jelbourn): Make the `isMosueDown` stuff done with one global listener.
@Component({selector: '[md-button]:not(a), [md-fab]:not(a), [md-raised-button]:not(a)'})
@Component({
selector: '[md-button]:not(a), [md-fab]:not(a), [md-raised-button]:not(a)',
host: {
'(^mousedown)': 'onMousedown()',
'(focus)': 'onFocus()',
'(blur)': 'onBlur()',
'[class.md-button-focus]': 'isKeyboardFocused',
},
})
@View({
templateUrl: 'package:angular2_material/src/components/button/button.html',
encapsulation: ViewEncapsulation.NONE
encapsulation: ViewEncapsulation.NONE,
})
export class MdButton {
// TODO(jelbourn): Ink ripples.
/** Whether a mousedown has occured on this element in the last 100ms. */
isMouseDown: boolean = false;
/** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */
isKeyboardFocused: boolean = false;
onMousedown() {
// We only *show* the focus style when focus has come to the button via the keyboard.
// The Material Design spec is silent on this topic, and without doing this, the
// button continues to look :active after clicking.
// @see http://marcysutton.com/button-focus-hell/
this.isMouseDown = true;
TimerWrapper.setTimeout(() => {this.isMouseDown = false}, 100);
}
onFocus() {
this.isKeyboardFocused = !this.isMouseDown;
}
onBlur() {
this.isKeyboardFocused = false;
}
}
@Component({
selector: '[md-button][href]',
selector: 'a[md-button], a[md-raised-button], a[md-fab]',
properties: ['disabled'],
host: {'(click)': 'onClick($event)', '[tabIndex]': 'tabIndex'},
lifecycle: [LifecycleEvent.onChange]
lifecycle: [LifecycleEvent.onChange],
host: {
'(^click)': 'onClick($event)',
'(^mousedown)': 'onMousedown()',
'(focus)': 'onFocus()',
'(blur)': 'onBlur()',
'[tabIndex]': 'tabIndex',
'[class.md-button-focus]': 'isKeyboardFocused',
'[attr.aria-disabled]': 'disabled',
},
})
@View({
templateUrl: 'package:angular2_material/src/components/button/button.html',
encapsulation: ViewEncapsulation.NONE
})
export class MdAnchor {
export class MdAnchor extends MdButton {
tabIndex: number;
/** Whether the component is disabled. */
disabled: boolean;
disabled_: boolean;
get disabled(): boolean {
return this.disabled_;
}
set disabled(value) {
// The presence of *any* disabled value makes the component disabled, *except* for false.
this.disabled_ = isPresent(value) && this.disabled !== false;
}
onClick(event) {
// A disabled anchor shouldn't navigate anywhere.
if (isPresent(this.disabled) && this.disabled !== false) {
if (this.disabled) {
event.preventDefault();
}
}