da9b46a071
BREAKING CHANGE:
Angular is now fully camel case.
Before:
<p *ng-if="cond">
<my-cmp [my-prop]="exp">
<my-cmp (my-event)="action()">
<my-cmp [(my-prop)]="prop">
<input #my-input>
<template ng-for #my-item [ng-for-of]=items #my-index="index">
After
<p *ngIf="cond">
<my-cmp [myProp]="exp">
<my-cmp (myEvent)="action()">
<my-cmp [(myProp)]="prop">
<input #myInput>`,
<template ngFor="#my-item" [ngForOf]=items #myIndex="index">
The full details are found in [angular2/docs/migration/kebab-case.md](https://github.com/angular/angular/blob/master/modules/angular2/docs/migration/kebab-case.md)
98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
import {Component, View, ViewEncapsulation, OnChanges} 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 `isMouseDown` stuff done with one global listener.
|
|
|
|
@Component({
|
|
selector: '[mdButton]:not(a), [mdFab]:not(a), [mdRaisedButton]:not(a)',
|
|
host: {
|
|
'(mousedown)': 'onMousedown()',
|
|
'(focus)': 'onFocus()',
|
|
'(blur)': 'onBlur()',
|
|
'[class.md-button-focus]': 'isKeyboardFocused',
|
|
},
|
|
})
|
|
@View({
|
|
templateUrl: 'package:angular2_material/src/components/button/button.html',
|
|
styleUrls: ['package:angular2_material/src/components/button/button.css'],
|
|
encapsulation: ViewEncapsulation.None,
|
|
})
|
|
export class MdButton {
|
|
/** 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: 'a[mdButton], a[mdRaisedButton], a[mdFab]',
|
|
inputs: ['disabled'],
|
|
host: {
|
|
'(click)': 'onClick($event)',
|
|
'(mousedown)': 'onMousedown()',
|
|
'(focus)': 'onFocus()',
|
|
'(blur)': 'onBlur()',
|
|
'[tabIndex]': 'tabIndex',
|
|
'[class.md-button-focus]': 'isKeyboardFocused',
|
|
'[attr.aria-disabled]': 'isAriaDisabled',
|
|
},
|
|
})
|
|
@View({
|
|
templateUrl: 'package:angular2_material/src/components/button/button.html',
|
|
encapsulation: ViewEncapsulation.None
|
|
})
|
|
export class MdAnchor extends MdButton implements OnChanges {
|
|
tabIndex: number;
|
|
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 (this.disabled) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
/** Invoked when a change is detected. */
|
|
ngOnChanges(_) {
|
|
// A disabled anchor should not be in the tab flow.
|
|
this.tabIndex = this.disabled ? -1 : 0;
|
|
}
|
|
|
|
/** Gets the aria-disabled value for the component, which must be a string for Dart. */
|
|
get isAriaDisabled(): string {
|
|
return this.disabled ? 'true' : 'false';
|
|
}
|
|
}
|