2015-07-04 15:04:50 +02:00
|
|
|
import {Component, LifecycleEvent, View, Attribute} from 'angular2/angular2';
|
2015-05-22 13:01:23 -07:00
|
|
|
|
2015-02-17 11:56:24 -08:00
|
|
|
import {isPresent, isBlank} from 'angular2/src/facade/lang';
|
|
|
|
import {Math} from 'angular2/src/facade/math';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'md-progress-linear',
|
2015-07-04 15:04:50 +02:00
|
|
|
lifecycle: [LifecycleEvent.onChange],
|
2015-05-26 15:54:10 +02:00
|
|
|
properties: ['value', 'bufferValue'],
|
2015-06-09 12:33:40 +02:00
|
|
|
host: {
|
2015-06-14 14:24:19 +02:00
|
|
|
'[attr.role]': '"progressbar"',
|
|
|
|
'[attr.aria-valuemin]': '"0"',
|
|
|
|
'[attr.aria-valuemax]': '"100"',
|
2015-06-09 12:33:40 +02:00
|
|
|
'[attr.aria-valuenow]': 'value'
|
2015-02-17 11:56:24 -08:00
|
|
|
}
|
|
|
|
})
|
|
|
|
@View({
|
2015-07-23 00:00:14 -07:00
|
|
|
templateUrl: 'package:angular2_material/src/components/progress-linear/progress_linear.html',
|
2015-02-17 11:56:24 -08:00
|
|
|
directives: []
|
|
|
|
})
|
|
|
|
export class MdProgressLinear {
|
|
|
|
/** Value for the primary bar. */
|
|
|
|
value_: number;
|
|
|
|
|
|
|
|
/** Value for the secondary bar. */
|
|
|
|
bufferValue: number;
|
|
|
|
|
|
|
|
/** The render mode for the progress bar. */
|
|
|
|
mode: string;
|
|
|
|
|
|
|
|
/** CSS `transform` property applied to the primary bar. */
|
|
|
|
primaryBarTransform: string;
|
|
|
|
|
|
|
|
/** CSS `transform` property applied to the secondary bar. */
|
|
|
|
secondaryBarTransform: string;
|
|
|
|
|
2015-05-22 13:01:23 -07:00
|
|
|
constructor(@Attribute('md-mode') mode: string) {
|
2015-02-17 11:56:24 -08:00
|
|
|
this.primaryBarTransform = '';
|
|
|
|
this.secondaryBarTransform = '';
|
|
|
|
|
|
|
|
this.mode = isPresent(mode) ? mode : Mode.DETERMINATE;
|
|
|
|
}
|
|
|
|
|
|
|
|
get value() {
|
|
|
|
return this.value_;
|
|
|
|
}
|
|
|
|
|
|
|
|
set value(v) {
|
|
|
|
if (isPresent(v)) {
|
|
|
|
this.value_ = MdProgressLinear.clamp(v);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
onChange(_) {
|
|
|
|
// If the mode does not use a value, or if there is no value, do nothing.
|
|
|
|
if (this.mode == Mode['QUERY'] || this.mode == Mode['INDETERMINATE'] || isBlank(this.value)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.primaryBarTransform = this.transformForValue(this.value);
|
|
|
|
|
|
|
|
// The bufferValue is only used in buffer mode.
|
|
|
|
if (this.mode == Mode['BUFFER']) {
|
|
|
|
this.secondaryBarTransform = this.transformForValue(this.bufferValue);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/** Gets the CSS `transform` property for a progress bar based on the given value (0 - 100). */
|
|
|
|
transformForValue(value) {
|
|
|
|
// TODO(jelbourn): test perf gain of caching these, since there are only 101 values.
|
|
|
|
var scale = value / 100;
|
|
|
|
var translateX = (value - 100) / 2;
|
|
|
|
return `translateX(${translateX}%) scale(${scale}, 1)`;
|
|
|
|
}
|
|
|
|
|
|
|
|
/** Clamps a value to be between 0 and 100. */
|
|
|
|
static clamp(v) {
|
|
|
|
return Math.max(0, Math.min(100, v));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @enum {string} Progress-linear modes. */
|
|
|
|
var Mode = {
|
|
|
|
'DETERMINATE': 'determinate',
|
|
|
|
'INDETERMINATE': 'indeterminate',
|
|
|
|
'BUFFER': 'buffer',
|
|
|
|
'QUERY': 'query'
|
|
|
|
};
|