mirror of https://github.com/rancher/ui.git
48 lines
1.1 KiB
JavaScript
48 lines
1.1 KiB
JavaScript
import Component from '@ember/component';
|
|
import layout from './template';
|
|
|
|
export default Component.extend({
|
|
layout,
|
|
tagName: 'div',
|
|
classNames: ['progress'],
|
|
|
|
color: '',
|
|
min: 0,
|
|
value: 0,
|
|
max: 100,
|
|
zIndex: null,
|
|
|
|
percent: function() {
|
|
var min = this.get('min');
|
|
var max = this.get('max');
|
|
var value = Math.max(min, Math.min(max, this.get('value')));
|
|
|
|
var per = value/(max-min)*100; // Percent 0-100
|
|
per = Math.round(per*100)/100; // Round to 2 decimal places
|
|
return per;
|
|
}.property('min','max','value'),
|
|
|
|
colorClass: function() {
|
|
var color = this.get('color');
|
|
if ( !color )
|
|
{
|
|
return;
|
|
}
|
|
|
|
return 'progress-bar-' + color.replace(/^progress-bar-/,'');
|
|
}.property('color'),
|
|
|
|
percentDidChange: function() {
|
|
this.$('.progress-bar').css('width', this.get('percent') + "%");
|
|
}.observes('percent'),
|
|
|
|
zIndexDidChange: function() {
|
|
this.$().css('zIndex', this.get('zIndex') || "inherit");
|
|
}.observes('zIndex'),
|
|
|
|
didInsertElement: function() {
|
|
this.percentDidChange();
|
|
this.zIndexDidChange();
|
|
},
|
|
});
|