iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(material): migrate most components to TypeScript.

Browse Source
This commit is contained in:
Jeremy Elbourn 2015-05-22 13:01:23 -07:00
parent 26d5d17ebe
commit 0f3a8f369a
30 changed files with 487 additions and 616 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
modules/angular2_material/.clang-format Normal file
View File

@ -0,0 +1,12 @@
Language: JavaScript
BasedOnStyle: Google
ColumnLimit: 100
TabWidth: 2
ContinuationIndentWidth: 4
MaxEmptyLinesToKeep : 2
AllowShortBlocksOnASingleLine: false
AllowShortIfStatementsOnASingleLine: false
AllowShortLoopsOnASingleLine: false
AllowShortFunctionsOnASingleLine: Empty

11
modules/angular2_material/src/components/button/button.js → modules/angular2_material/src/components/button/button.ts
View File

@ -1,5 +1,4 @@
import {Component, onChange} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Component, View, onChange} from 'angular2/angular2';
import {isPresent} from 'angular2/src/facade/lang';
@ -12,16 +11,12 @@ export class MdButton {
@Component({
selector: '[md-button][href]',
properties: {
'disabled': 'disabled'
},
properties: {'disabled': 'disabled'},
hostListeners: {'click': 'onClick($event)'},
hostProperties: {'tabIndex': 'tabIndex'},
lifecycle: [onChange]
})
@View({
templateUrl: 'angular2_material/src/components/button/button.html'
})
@View({templateUrl: 'angular2_material/src/components/button/button.html'})
export class MdAnchor {
tabIndex: number;

22
modules/angular2_material/src/components/checkbox/checkbox.js → modules/angular2_material/src/components/checkbox/checkbox.ts
View File

@ -1,20 +1,13 @@
import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Attribute} from 'angular2/src/core/annotations_impl/di';
import {Component, View, Attribute} from 'angular2/angular2';
import {isPresent} from 'angular2/src/facade/lang';
import {KEY_SPACE} from 'angular2_material/src/core/constants'
import {KEY_SPACE} from 'angular2_material/src/core/constants';
import {KeyboardEvent} from 'angular2/src/facade/browser';
import {NumberWrapper} from 'angular2/src/facade/lang';
@Component({
selector: 'md-checkbox',
properties: {
'checked': 'checked',
'disabled': 'disabled'
},
hostListeners: {
'keydown': 'onKeydown($event)'
},
properties: {'checked': 'checked', 'disabled': 'disabled'},
hostListeners: {'keydown': 'onKeydown($event)'},
hostProperties: {
'tabindex': 'tabindex',
'role': 'attr.role',
@ -22,10 +15,7 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
'disabled': 'attr.aria-disabled'
}
})
@View({
templateUrl: 'angular2_material/src/components/checkbox/checkbox.html',
directives: []
})
@View({templateUrl: 'angular2_material/src/components/checkbox/checkbox.html', directives: []})
export class MdCheckbox {
/** Whether this checkbox is checked. */
checked: boolean;
@ -39,7 +29,7 @@ export class MdCheckbox {
/** Setter for tabindex */
tabindex: number;
constructor(@Attribute('tabindex') tabindex: String) {
constructor(@Attribute('tabindex') tabindex: string) {
this.role = 'checkbox';
this.checked = false;
this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;

2
modules/angular2_material/src/components/dialog/dialog.js vendored
View File

@ -4,7 +4,7 @@ import {ObservableWrapper, Promise, PromiseWrapper} from 'angular2/src/facade/as
import {isPresent, Type} from 'angular2/src/facade/lang';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {MouseEvent, KeyboardEvent} from 'angular2/src/facade/browser';
import {KEY_ESC} from 'angular2_material/src/core/constants'
import {KEY_ESC} from 'angular2_material/src/core/constants';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';

33
modules/angular2_material/src/components/grid_list/grid_list.js → modules/angular2_material/src/components/grid_list/grid_list.ts
View File

@ -1,8 +1,13 @@
import {Component, onDestroy, onChange, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Component, View, Parent, onDestroy, onChange, onAllChangesDone} from 'angular2/angular2';
import {ListWrapper} from 'angular2/src/facade/collection';
import {StringWrapper, isPresent, isString, NumberWrapper, RegExpWrapper} from 'angular2/src/facade/lang';
import {
StringWrapper,
isPresent,
isString,
NumberWrapper,
RegExpWrapper
} from 'angular2/src/facade/lang';
import {Math} from 'angular2/src/facade/math';
// TODO(jelbourn): Set appropriate aria attributes for grid list elements.
@ -14,16 +19,10 @@ import {Math} from 'angular2/src/facade/math';
@Component({
selector: 'md-grid-list',
properties: {
'cols': 'cols',
'rowHeight': 'row-height',
'gutterSize': 'gutter-size'
},
properties: {'cols': 'cols', 'rowHeight': 'row-height', 'gutterSize': 'gutter-size'},
lifecycle: [onAllChangesDone]
})
@View({
templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'
})
@View({templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'})
export class MdGridList {
/** List of tiles that are being rendered. */
tiles: List<MdGridTile>;
@ -218,10 +217,7 @@ export class MdGridList {
@Component({
selector: 'md-grid-tile',
properties: {
'rowspan': 'rowspan',
'colspan': 'colspan'
},
properties: {'rowspan': 'rowspan', 'colspan': 'colspan'},
hostProperties: {
'styleHeight': 'style.height',
'styleWidth': 'style.width',
@ -233,9 +229,7 @@ export class MdGridList {
},
lifecycle: [onDestroy, onChange]
})
@View({
templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html'
})
@View({templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html'})
export class MdGridTile {
gridList: MdGridList;
_rowspan: number;
@ -282,7 +276,6 @@ export class MdGridTile {
* Notifies grid-list that a re-layout is required.
*/
onChange(_) {
//console.log(`grid-tile on-change ${this.gridList.tiles.indexOf(this)}`);
if (!this.isRegisteredWithGridList) {
this.gridList.addTile(this);
this.isRegisteredWithGridList = true;

149
modules/angular2_material/src/components/input/input.js → modules/angular2_material/src/components/input/input.ts
View File

@ -1,6 +1,4 @@
import {Directive, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations';
import {Attribute} from 'angular2/src/core/annotations_impl/di';
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Directive, onAllChangesDone, Attribute, Parent} from 'angular2/angular2';
import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
@ -9,77 +7,11 @@ import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
// TODO(jelbourn): max-length counter
// TODO(jelbourn): placeholder property
@Directive({
selector: 'md-input-container input',
events: ['mdChange', 'mdFocusChange'],
hostProperties: {
'yes': 'class.md-input'
},
hostListeners: {
'input': 'updateValue($event)',
'focus': 'setHasFocus(true)',
'blur': 'setHasFocus(false)'
}
})
export class MdInput {
value: string;
yes: boolean;
// Events emitted by this directive. We use these special 'md-' events to communicate
// to the parent MdInputContainer.
mdChange: EventEmitter;
mdFocusChange: EventEmitter;
constructor(
@Attribute('value') value: String,
@Parent() container: MdInputContainer) {
// TODO(jelbourn): Remove this when #1402 is done.
this.yes = true;
this.value = value == null ? '' : value;
this.mdChange = new EventEmitter();
this.mdFocusChange = new EventEmitter();
container.registerInput(this);
}
updateValue(event) {
this.value = event.target.value;
ObservableWrapper.callNext(this.mdChange, this.value);
}
setHasFocus(hasFocus: boolean) {
ObservableWrapper.callNext(this.mdFocusChange, hasFocus);
}
}
@Directive({
selector: 'md-input-container textarea',
events: ['mdChange', 'mdFocusChange'],
hostProperties: {
'yes': 'class.md-input'
},
hostListeners: {
'input': 'updateValue($event)',
'focus': 'setHasFocus(true)',
'blur': 'setHasFocus(false)'
}
})
export class MdTextarea extends MdInput {
constructor(
@Attribute('value') value: String,
@Parent() container: MdInputContainer) {
super(value, container);
}
}
@Directive({
selector: 'md-input-container',
lifecycle: [onAllChangesDone],
hostProperties: {
'inputHasValue': 'class.md-input-has-value',
'inputHasFocus': 'class.md-input-focused'
}
hostProperties:
{'inputHasValue': 'class.md-input-has-value', 'inputHasFocus': 'class.md-input-focused'}
})
export class MdInputContainer {
// The MdInput or MdTextarea inside of this container.
@ -91,7 +23,7 @@ export class MdInputContainer {
// Whether the input inside of this container has focus.
inputHasFocus: boolean;
constructor() {
constructor(@Attribute('id') id: string) {
this._input = null;
this.inputHasValue = false;
this.inputHasFocus = false;
@ -115,12 +47,73 @@ export class MdInputContainer {
// Listen to input changes and focus events so that we can apply the appropriate CSS
// classes based on the input state.
ObservableWrapper.subscribe(input.mdChange, value => {
this.inputHasValue = value != '';
});
ObservableWrapper.subscribe(input.mdChange, value => { this.inputHasValue = value != ''; });
ObservableWrapper.subscribe(input.mdFocusChange, hasFocus => {
this.inputHasFocus = hasFocus
});
ObservableWrapper.subscribe(input.mdFocusChange, hasFocus => {this.inputHasFocus = hasFocus});
}
}
@Directive({
selector: 'md-input-container input',
events: ['mdChange', 'mdFocusChange'],
hostProperties: {'yes': 'class.md-input'},
hostListeners: {
'input': 'updateValue($event)',
'focus': 'setHasFocus(true)',
'blur': 'setHasFocus(false)'
}
})
export class MdInput {
value: string;
yes: boolean;
// Events emitted by this directive. We use these special 'md-' events to communicate
// to the parent MdInputContainer.
mdChange: EventEmitter;
mdFocusChange: EventEmitter;
constructor(@Attribute('value') value: string, @Parent() container: MdInputContainer,
@Attribute('id') id: string) {
// TODO(jelbourn): Remove this when #1402 is done.
this.yes = true;
this.value = value == null ? '' : value;
this.mdChange = new EventEmitter();
this.mdFocusChange = new EventEmitter();
container.registerInput(this);
}
updateValue(event) {
this.value = event.target.value;
ObservableWrapper.callNext(this.mdChange, this.value);
}
setHasFocus(hasFocus: boolean) {
ObservableWrapper.callNext(this.mdFocusChange, hasFocus);
}
}
/*
@Directive({
selector: 'md-input-container textarea',
events: ['mdChange', 'mdFocusChange'],
hostProperties: {
'yes': 'class.md-input'
},
hostListeners: {
'input': 'updateValue($event)',
'focus': 'setHasFocus(true)',
'blur': 'setHasFocus(false)'
}
})
export class MdTextarea extends MdInput {
constructor(
@Attribute('value') value: string,
@Parent() container: MdInputContainer,
@Attribute('id') id: string) {
super(value, container, id);
}
}
*/

13
modules/angular2_material/src/components/progress-circular/progress_circular.js vendored
View File

@ -1,13 +0,0 @@
import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
@Component({
selector: 'md-progress-circular'
})
@View({
templateUrl: 'angular2_material/src/components/progress-circular/progress_circular.html'
})
export class MdProgressCircular {
constructor() {
}
}

7
modules/angular2_material/src/components/progress-circular/progress_circular.ts Normal file
View File

@ -0,0 +1,7 @@
import {Component, View} from 'angular2/angular2';
@Component({selector: 'md-progress-circular'})
@View({templateUrl: 'angular2_material/src/components/progress-circular/progress_circular.html'})
export class MdProgressCircular {
constructor() {}
}

12
modules/angular2_material/src/components/progress-linear/progress_linear.js → modules/angular2_material/src/components/progress-linear/progress_linear.ts
View File

@ -1,16 +1,12 @@
import {Component, onChange} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Attribute} from 'angular2/src/core/annotations_impl/di';
import {Component, onChange, View, Attribute} from 'angular2/angular2';
import {isPresent, isBlank} from 'angular2/src/facade/lang';
import {Math} from 'angular2/src/facade/math';
@Component({
selector: 'md-progress-linear',
lifecycle: [onChange],
properties: {
'value': 'value',
'bufferValue': 'buffer-value'
},
properties: {'value': 'value', 'bufferValue': 'buffer-value'},
hostProperties: {
'role': 'attr.role',
'ariaValuemin': 'attr.aria-valuemin',
@ -42,7 +38,7 @@ export class MdProgressLinear {
ariaValuemin: string;
ariaValuemax: string;
constructor(@Attribute('md-mode') mode: String) {
constructor(@Attribute('md-mode') mode: string) {
this.primaryBarTransform = '';
this.secondaryBarTransform = '';

296
modules/angular2_material/src/components/radio/radio_button.js → modules/angular2_material/src/components/radio/radio_button.ts
View File

@ -1,15 +1,13 @@
import {Component, onChange} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
import {Attribute} from 'angular2/src/core/annotations_impl/di';
import {Optional} from 'angular2/src/di/annotations_impl';
import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher'
import {Component, View, onChange, Parent, Ancestor, Attribute, Optional} from 'angular2/angular2';
import {isPresent, StringWrapper, NumberWrapper} from 'angular2/src/facade/lang';
import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
import {ListWrapper} from 'angular2/src/facade/collection';
import {KEY_UP, KEY_DOWN, KEY_SPACE} from 'angular2_material/src/core/constants'
import {Event, KeyboardEvent} from 'angular2/src/facade/browser';
import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher';
import {KEY_UP, KEY_DOWN, KEY_SPACE} from 'angular2_material/src/core/constants';
// TODO(jelbourn): Behaviors to test
// Disabled radio don't select
// Disabled radios don't propagate click event
@ -22,156 +20,13 @@ import {Event, KeyboardEvent} from 'angular2/src/facade/browser';
// Radio group changes on arrow keys
// Radio group skips disabled radios on arrow keys
var _uniqueIdCounter:number = 0;
@Component({
selector: 'md-radio-button',
lifecycle: [onChange],
properties: {
'id': 'id',
'name': 'name',
'value': 'value',
'checked': 'checked',
'disabled': 'disabled'
},
hostListeners: {
'keydown': 'onKeydown($event)'
},
hostProperties: {
'id': 'id',
'tabindex': 'tabindex',
'role': 'attr.role',
'checked': 'attr.aria-checked',
'disabled': 'attr.aria-disabled'
}
})
@View({
templateUrl: 'angular2_material/src/components/radio/radio_button.html',
directives: []
})
export class MdRadioButton {
/** Whether this radio is checked. */
checked: boolean;
/** Whether the radio is disabled. */
disabled_: boolean;
/** The unique ID for the radio button. */
id: string;
/** Analog to HTML 'name' attribute used to group radios for unique selection. */
name: string;
/** Value assigned to this radio. Used to assign the value to the parent MdRadioGroup. */
value: any;
/** The parent radio group. May or may not be present. */
radioGroup: MdRadioGroup;
/** Dispatcher for coordinating radio unique-selection by name. */
radioDispatcher: MdRadioDispatcher;
tabindex: number;
role: string;
constructor(
@Optional() @Parent() radioGroup: MdRadioGroup,
@Attribute('id') id: String,
@Attribute('tabindex') tabindex: String,
radioDispatcher: MdRadioDispatcher) {
// Assertions. Ideally these should be stripped out by the compiler.
// TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
this.radioGroup = radioGroup;
this.radioDispatcher = radioDispatcher;
this.value = null;
this.role = 'radio';
this.checked = false;
this.id = isPresent(id) ? id : `md-radio-${_uniqueIdCounter++}`;;
// Whenever a radio button with the same name is checked, uncheck this radio button.
radioDispatcher.listen((name) => {
if (name == this.name) {
this.checked = false;
}
});
// When this radio-button is inside of a radio-group, the group determines the name.
if (isPresent(radioGroup)) {
this.name = radioGroup.getName();
this.radioGroup.register(this);
}
// If the user has not set a tabindex, default to zero (in the normal document flow).
if (!isPresent(radioGroup)) {
this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
} else {
this.tabindex = -1;
}
}
/** Change handler invoked when bindings are resolved or when bindings have changed. */
onChange(_) {
if (isPresent(this.radioGroup)) {
this.name = this.radioGroup.getName();
}
}
/** Whether this radio button is disabled, taking the parent group into account. */
isDisabled(): boolean {
// Here, this.disabled may be true/false as the result of a binding, may be the empty string
// if the user just adds a `disabled` attribute with no value, or may be absent completely.
// TODO(jelbourn): If someone sets `disabled="disabled"`, will this work in dart?
return this.disabled ||
(isPresent(this.disabled) && StringWrapper.equals(this.disabled, '')) ||
(isPresent(this.radioGroup) && this.radioGroup.disabled);
}
get disabled() {
return this.disabled_;
}
set disabled(value) {
this.disabled_ = isPresent(value) && value !== false;
}
/** Select this radio button. */
select(event: Event) {
if (this.isDisabled()) {
event.stopPropagation();
return;
}
// Notifiy all radio buttons with the same name to un-check.
this.radioDispatcher.notify(this.name);
this.checked = true;
if (isPresent(this.radioGroup)) {
this.radioGroup.updateValue(this.value, this.id);
}
}
/** Handles pressing the space key to select this focused radio button. */
onKeydown(event: KeyboardEvent) {
if (event.keyCode == KEY_SPACE) {
event.preventDefault();
this.select(event);
}
}
}
var _uniqueIdCounter: number = 0;
@Component({
selector: 'md-radio-group',
lifecycle: [onChange],
events: ['change'],
properties: {
'disabled': 'disabled',
'value': 'value'
},
properties: {'disabled': 'disabled', 'value': 'value'},
hostListeners: {
// TODO(jelbourn): Remove ^ when event retargeting is fixed.
'^keydown': 'onKeydown($event)'
@ -183,9 +38,7 @@ export class MdRadioButton {
'activedescendant': 'attr.aria-activedescendant'
}
})
@View({
templateUrl: 'angular2_material/src/components/radio/radio_group.html'
})
@View({templateUrl: 'angular2_material/src/components/radio/radio_group.html'})
export class MdRadioGroup {
/** The selected value for the radio group. The value comes from the options. */
value: any;
@ -212,10 +65,8 @@ export class MdRadioGroup {
role: string;
constructor(
@Attribute('tabindex') tabindex: String,
@Attribute('disabled') disabled: String,
radioDispatcher: MdRadioDispatcher) {
constructor(@Attribute('tabindex') tabindex: string, @Attribute('disabled') disabled: string,
radioDispatcher: MdRadioDispatcher) {
this.name_ = `md-radio-group-${_uniqueIdCounter++}`;
this.radios_ = [];
this.change = new EventEmitter();
@ -330,3 +181,130 @@ export class MdRadioGroup {
this.activedescendant = radio.id;
}
}
@Component({
selector: 'md-radio-button',
lifecycle: [onChange],
properties:
{'id': 'id', 'name': 'name', 'value': 'value', 'checked': 'checked', 'disabled': 'disabled'},
hostListeners: {'keydown': 'onKeydown($event)'},
hostProperties: {
'id': 'id',
'tabindex': 'tabindex',
'role': 'attr.role',
'checked': 'attr.aria-checked',
'disabled': 'attr.aria-disabled'
}
})
@View({templateUrl: 'angular2_material/src/components/radio/radio_button.html', directives: []})
export class MdRadioButton {
/** Whether this radio is checked. */
checked: boolean;
/** Whether the radio is disabled. */
disabled_: boolean;
/** The unique ID for the radio button. */
id: string;
/** Analog to HTML 'name' attribute used to group radios for unique selection. */
name: string;
/** Value assigned to this radio. Used to assign the value to the parent MdRadioGroup. */
value: any;
/** The parent radio group. May or may not be present. */
radioGroup: MdRadioGroup;
/** Dispatcher for coordinating radio unique-selection by name. */
radioDispatcher: MdRadioDispatcher;
tabindex: number;
role: string;
constructor(@Optional() @Parent() radioGroup: MdRadioGroup, @Attribute('id') id: string,
@Attribute('tabindex') tabindex: string, radioDispatcher: MdRadioDispatcher) {
// Assertions. Ideally these should be stripped out by the compiler.
// TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
this.radioGroup = radioGroup;
this.radioDispatcher = radioDispatcher;
this.value = null;
this.role = 'radio';
this.checked = false;
this.id = isPresent(id) ? id : `md-radio-${_uniqueIdCounter++}`;
// Whenever a radio button with the same name is checked, uncheck this radio button.
radioDispatcher.listen((name) => {
if (name == this.name) {
this.checked = false;
}
});
// When this radio-button is inside of a radio-group, the group determines the name.
if (isPresent(radioGroup)) {
this.name = radioGroup.getName();
this.radioGroup.register(this);
}
// If the user has not set a tabindex, default to zero (in the normal document flow).
if (!isPresent(radioGroup)) {
this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
} else {
this.tabindex = -1;
}
}
/** Change handler invoked when bindings are resolved or when bindings have changed. */
onChange(_) {
if (isPresent(this.radioGroup)) {
this.name = this.radioGroup.getName();
}
}
/** Whether this radio button is disabled, taking the parent group into account. */
isDisabled(): boolean {
// Here, this.disabled may be true/false as the result of a binding, may be the empty string
// if the user just adds a `disabled` attribute with no value, or may be absent completely.
// TODO(jelbourn): If someone sets `disabled="disabled"`, will this work in dart?
return this.disabled || (isPresent(this.disabled) && StringWrapper.equals(this.disabled, '')) ||
(isPresent(this.radioGroup) && this.radioGroup.disabled);
}
get disabled(): any {
return this.disabled_;
}
set disabled(value: any) {
this.disabled_ = isPresent(value) && value !== false;
}
/** Select this radio button. */
select(event: Event) {
if (this.isDisabled()) {
event.stopPropagation();
return;
}
// Notifiy all radio buttons with the same name to un-check.
this.radioDispatcher.notify(this.name);
this.checked = true;
if (isPresent(this.radioGroup)) {
this.radioGroup.updateValue(this.value, this.id);
}
}
/** Handles pressing the space key to select this focused radio button. */
onKeydown(event: KeyboardEvent) {
if (event.keyCode == KEY_SPACE) {
event.preventDefault();
this.select(event);
}
}
}

0
modules/angular2_material/src/components/radio/radio_dispatcher.js → modules/angular2_material/src/components/radio/radio_dispatcher.ts
View File

30
modules/angular2_material/src/components/switcher/switch.js → modules/angular2_material/src/components/switcher/switch.ts
View File

@ -1,8 +1,6 @@
import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Attribute} from 'angular2/src/core/annotations_impl/di';
import {Component, View, Attribute} from 'angular2/angular2';
import {isPresent} from 'angular2/src/facade/lang';
import {KEY_SPACE} from 'angular2_material/src/core/constants'
import {KEY_SPACE} from 'angular2_material/src/core/constants';
import {KeyboardEvent} from 'angular2/src/facade/browser';
import {NumberWrapper} from 'angular2/src/facade/lang';
@ -10,23 +8,12 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
@Component({
selector: 'md-switch',
properties: {
'checked': 'checked',
'disabled': 'disabled'
},
hostListeners: {
'keydown': 'onKeydown($event)'
},
hostProperties: {
'checked': 'attr.aria-checked',
'disabled_': 'attr.aria-disabled',
'role': 'attr.role'
}
})
@View({
templateUrl: 'angular2_material/src/components/switcher/switch.html',
directives: []
properties: {'checked': 'checked', 'disabled': 'disabled'},
hostListeners: {'keydown': 'onKeydown($event)'},
hostProperties:
{'checked': 'attr.aria-checked', 'disabled_': 'attr.aria-disabled', 'role': 'attr.role'}
})
@View({templateUrl: 'angular2_material/src/components/switcher/switch.html', directives: []})
export class MdSwitch {
/** Whether this switch is checked. */
checked: boolean;
@ -37,7 +24,7 @@ export class MdSwitch {
tabindex: number;
role: string;
constructor(@Attribute('tabindex') tabindex: String) {
constructor(@Attribute('tabindex') tabindex: string) {
this.role = 'checkbox';
this.checked = false;
this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
@ -67,4 +54,3 @@ export class MdSwitch {
this.checked = !this.checked;
}
}

0
modules/angular2_material/src/core/constants.js → modules/angular2_material/src/core/constants.ts
View File

4
modules/angular2_material/src/core/theme.js → modules/angular2_material/src/core/theme.ts
View File

@ -1,8 +1,6 @@
import {Directive} from 'angular2/angular2';
@Directive({
selector: '[md-theme]'
})
@Directive({selector: '[md-theme]'})
export class MdTheme {
color: string;

12
modules/examples/src/material/.clang-format Normal file
View File

@ -0,0 +1,12 @@
Language: JavaScript
BasedOnStyle: Google
ColumnLimit: 100
TabWidth: 2
ContinuationIndentWidth: 4
MaxEmptyLinesToKeep : 2
AllowShortBlocksOnASingleLine: false
AllowShortIfStatementsOnASingleLine: false
AllowShortLoopsOnASingleLine: false
AllowShortFunctionsOnASingleLine: Empty

24
modules/examples/src/material/button/index.js → modules/examples/src/material/button/index.ts
View File

@ -1,21 +1,13 @@
import {bootstrap, MapWrapper, ListWrapper, NgFor} from 'angular2/angular2';
import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button'
import {bootstrap, Component, View, NgFor} from 'angular2/angular2';
import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdButton, MdAnchor, NgFor]
})
@Component({selector: 'demo-app'})
@View({templateUrl: './demo_app.html', directives: [MdButton, MdAnchor, NgFor]})
class DemoApp {
previousClick: string;
action: string;
@ -26,7 +18,7 @@ class DemoApp {
this.previousClick = 'Nothing';
this.action = "ACTIVATE";
this.clickCount = 0;
this.items = [1,2,3,4,5,6,7,8,9,0];
this.items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
}
click(msg: string) {
@ -45,7 +37,5 @@ class DemoApp {
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
}

36
modules/examples/src/material/checkbox/index.js
View File

@ -1,36 +0,0 @@
import {bootstrap} from 'angular2/angular2';
import {MdCheckbox} from 'angular2_material/src/components/checkbox/checkbox'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdCheckbox]
})
class DemoApp {
toggleCount: number;
constructor() {
this.toggleCount = 0;
}
increment() {
this.toggleCount++;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}

24
modules/examples/src/material/checkbox/index.ts Normal file
View File

@ -0,0 +1,24 @@
import {bootstrap, Component, Directive, View} from 'angular2/angular2';
import {MdCheckbox} from 'angular2_material/src/components/checkbox/checkbox';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({selector: 'demo-app'})
@View({templateUrl: './demo_app.html', directives: [MdCheckbox]})
class DemoApp {
toggleCount: number;
constructor() {
this.toggleCount = 0;
}
increment() {
this.toggleCount++;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
}

78
modules/examples/src/material/demo_common.js
View File

@ -1,78 +0,0 @@
import {IMPLEMENTS, print} from 'angular2/src/facade/lang';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {isPresent, isBlank, RegExpWrapper, StringWrapper, BaseException} from 'angular2/src/facade/lang';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {Injectable} from 'angular2/src/di/annotations_impl';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
import {reflector} from 'angular2/src/reflection/reflection';
import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
export function commonDemoSetup(): void {
BrowserDomAdapter.makeCurrent();
reflector.reflectionCapabilities = new ReflectionCapabilities();
}
@Injectable()
export class DemoUrlResolver extends UrlResolver {
static a;
isInPubServe:boolean;
constructor() {
super();
if (isBlank(UrlResolver.a)) {
UrlResolver.a = DOM.createElement('a');
}
this.isInPubServe = _isInPubServe();
}
resolve(baseUrl: string, url: string): string {
if (isBlank(baseUrl)) {
DOM.resolveAndSetHref(UrlResolver.a, url, null);
return DOM.getHref(UrlResolver.a);
}
if (isBlank(url) || url == '') return baseUrl;
if (url[0] == '/') {
throw new BaseException(`Could not resolve the url ${url} from ${baseUrl}`);
}
var m = RegExpWrapper.firstMatch(_schemeRe, url);
if (isPresent(m[1])) {
return url;
}
if (StringWrapper.startsWith(url, './')) {
return `${baseUrl}/${url}`;
}
// Whether the `examples/` dir is being directly served (as the server root).
// For cases when this is not true AND we're in pub-serve, `examples/` needs to be
// prepended to the URL.
var isDirectlyServingExamplesDir = !StringWrapper.contains(baseUrl, 'examples/');
if (this.isInPubServe && isDirectlyServingExamplesDir) {
return `/packages/${url}`;
} else if (this.isInPubServe) {
return `/examples/packages/${url}`;
} else {
return `/${url}`;
}
}
}
var _schemeRe = RegExpWrapper.create('^([^:/?#]+:)?');
// TODO: remove this hack when http://dartbug.com/23128 is fixed
function _isInPubServe():boolean {
try {
int.parse('123');
print('>> Running in Dart');
return true;
} catch(_) {
print('>> Running in JS');
return false;
}
}

87
modules/examples/src/material/demo_common.ts Normal file
View File

@ -0,0 +1,87 @@
import {IMPLEMENTS, print} from 'angular2/src/facade/lang';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {
isPresent,
isBlank,
RegExpWrapper,
StringWrapper,
BaseException
} from 'angular2/src/facade/lang';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {Injectable} from 'angular2/di';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
import {reflector} from 'angular2/src/reflection/reflection';
import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
export function commonDemoSetup(): void {
BrowserDomAdapter.makeCurrent();
reflector.reflectionCapabilities = new ReflectionCapabilities();
}
@Injectable()
export class DemoUrlResolver extends UrlResolver {
static a;
isInPubServe: boolean;
constructor() {
super();
if (isBlank(UrlResolver.a)) {
UrlResolver.a = DOM.createElement('a');
}
this.isInPubServe = _isInPubServe();
}
resolve(baseUrl: string, url: string): string {
if (isBlank(baseUrl)) {
DOM.resolveAndSetHref(UrlResolver.a, url, null);
return DOM.getHref(UrlResolver.a);
}
if (isBlank(url) || url == '') {
return baseUrl;
}
if (url[0] == '/') {
throw new BaseException(`Could not resolve the url ${url} from ${baseUrl}`);
}
var m = RegExpWrapper.firstMatch(_schemeRe, url);
if (isPresent(m[1])) {
return url;
}
if (StringWrapper.startsWith(url, './')) {
return `${baseUrl}/${url}`;
}
// Whether the `examples/` dir is being directly served (as the server root).
// For cases when this is not true AND we're in pub-serve, `examples/` needs to be
// prepended to the URL.
var isDirectlyServingExamplesDir = !StringWrapper.contains(baseUrl, 'examples/');
if (this.isInPubServe && isDirectlyServingExamplesDir) {
return `/packages/${url}`;
} else if (this.isInPubServe) {
return `/examples/packages/${url}`;
} else {
return `/${url}`;
}
}
}
var _schemeRe = RegExpWrapper.create('^([^:/?#]+:)?');
// TODO: remove this hack when http://dartbug.com/23128 is fixed
function _isInPubServe(): boolean {
try {
int.parse('123');
print('>> Running in Dart');
return true;
} catch (_) {
print('>> Running in JS');
return false;
}
}

34
modules/examples/src/material/grid_list/index.js
View File

@ -1,34 +0,0 @@
import {bootstrap} from 'angular2/angular2';
import {MdGridList, MdGridTile} from 'angular2_material/src/components/grid_list/grid_list'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdGridList, MdGridTile]
})
class DemoApp {
tile3RowSpan: number;
tile3ColSpan: number;
constructor() {
this.tile3RowSpan = 3;
this.tile3ColSpan = 3;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}

22
modules/examples/src/material/grid_list/index.ts Normal file
View File

@ -0,0 +1,22 @@
import {bootstrap, Component, View} from 'angular2/angular2';
import {MdGridList, MdGridTile} from 'angular2_material/src/components/grid_list/grid_list';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({selector: 'demo-app'})
@View({templateUrl: './demo_app.html', directives: [MdGridList, MdGridTile]})
class DemoApp {
tile3RowSpan: number;
tile3ColSpan: number;
constructor() {
this.tile3RowSpan = 3;
this.tile3ColSpan = 3;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
}

4
modules/examples/src/material/input/demo_app.html
View File

@ -34,10 +34,10 @@
<input disabled value="Firefly">
</md-input-container>
<h3>textarea</h3>
<!--<h3>textarea</h3>
<md-input-container>
<label>What I did on my summer vaccation</label>
<textarea></textarea>
</md-input-container>
</md-input-container>-->
</div>

30
modules/examples/src/material/input/index.js
View File

@ -1,30 +0,0 @@
import {bootstrap} from 'angular2/angular2';
import {MdInputContainer, MdInput, MdTextarea} from 'angular2_material/src/components/input/input'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdInputContainer, MdInput, MdTextarea]
})
class DemoApp {
constructor() {
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}

16
modules/examples/src/material/input/index.ts Normal file
View File

@ -0,0 +1,16 @@
import {bootstrap, Component, View} from 'angular2/angular2';
import {MdInputContainer, MdInput} from 'angular2_material/src/components/input/input';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({selector: 'demo-app'})
@View({templateUrl: './demo_app.html', directives: [MdInputContainer, MdInput]})
class DemoApp {
constructor() {}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
}

36
modules/examples/src/material/progress-linear/index.js
View File

@ -1,36 +0,0 @@
import {bootstrap} from 'angular2/angular2';
import {MdProgressLinear} from 'angular2_material/src/components/progress-linear/progress_linear'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdProgressLinear]
})
class DemoApp {
progress: number;
constructor() {
this.progress = 40;
}
step(s: number) {
this.progress += s;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}

24
modules/examples/src/material/progress-linear/index.ts Normal file
View File

@ -0,0 +1,24 @@
import {bootstrap, Component, View} from 'angular2/angular2';
import {MdProgressLinear} from 'angular2_material/src/components/progress-linear/progress_linear';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({selector: 'demo-app'})
@View({templateUrl: './demo_app.html', directives: [MdProgressLinear]})
class DemoApp {
progress: number;
constructor() {
this.progress = 40;
}
step(s: number) {
this.progress += s;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
}

25
modules/examples/src/material/radio/index.js → modules/examples/src/material/radio/index.ts
View File

@ -1,23 +1,12 @@
import {bootstrap} from 'angular2/angular2';
import {MdRadioButton, MdRadioGroup} from 'angular2_material/src/components/radio/radio_button'
import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher'
import {bootstrap, Component, View} from 'angular2/angular2';
import {MdRadioButton, MdRadioGroup} from 'angular2_material/src/components/radio/radio_button';
import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
@Component({
selector: 'demo-app',
appInjector: [MdRadioDispatcher]
})
@View({
templateUrl: './demo_app.html',
directives: [MdRadioGroup, MdRadioButton]
})
@Component({selector: 'demo-app', appInjector: [MdRadioDispatcher]})
@View({templateUrl: './demo_app.html', directives: [MdRadioGroup, MdRadioButton]})
class DemoApp {
thirdValue;
groupValueChangeCount;
@ -48,7 +37,5 @@ class DemoApp {
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
}

36
modules/examples/src/material/switcher/index.js
View File

@ -1,36 +0,0 @@
import {bootstrap} from 'angular2/angular2';
import {MdSwitch} from 'angular2_material/src/components/switcher/switch'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdSwitch]
})
class DemoApp {
toggleCount: number;
constructor() {
this.toggleCount = 0;
}
increment() {
this.toggleCount++;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}

24
modules/examples/src/material/switcher/index.ts Normal file
View File

@ -0,0 +1,24 @@
import {bootstrap, Component, View} from 'angular2/angular2';
import {MdSwitch} from 'angular2_material/src/components/switcher/switch';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({selector: 'demo-app'})
@View({templateUrl: './demo_app.html', directives: [MdSwitch]})
class DemoApp {
toggleCount: number;
constructor() {
this.toggleCount = 0;
}
increment() {
this.toggleCount++;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
}