1 /** 2 * @author Gillis Haasnoot <gillis.haasnoot@gmail.com> 3 * @package Banana.Controls 4 * @summary Progressbar. 5 */ 6 7 goog.provide('Banana.Controls.DataControls.ProgressBar'); 8 9 goog.require('Banana.Controls.DataControls.DataControl'); 10 11 /** @namespace Banana.Controls.ProgressBar */ 12 namespace('Banana.Controls').ProgressBar = Banana.Controls.DataControl.extend( 13 /** @lends Banana.Controls.ProgressBar.prototype */ 14 { 15 /** 16 * Creates a progressbar. Can show linear color gradient. 17 * @constructs 18 * @extends Banana.Controls.DataControl 19 */ 20 init : function() 21 { 22 this._super(); 23 this.addCssClass('BProgressBar'); 24 this.data = 0; 25 this.bar = new Banana.Controls.Panel(); 26 this.bar.addCssClass('BProgressBarBar'); 27 this.addControl(this.bar); 28 29 this.colorBlend=new Banana.Util.Color(); 30 31 if (!this.color1) 32 this.setBeginColor('#88ff88'); 33 if (!this.color2) 34 this.setEndColor('#ff8888'); 35 }, 36 37 /** 38 * sets begin color 39 * @param {String} value hex format 40 * @return {this} 41 */ 42 setBeginColor : function(value) 43 { 44 this.color1=new Banana.Util.Color(value); 45 return this; 46 }, 47 48 /** 49 * sets end color 50 * @param {String} value hex format 51 * @return {this} 52 */ 53 setEndColor : function(value) 54 { 55 this.color2=new Banana.Util.Color(value); 56 return this; 57 }, 58 59 /** 60 * @override 61 */ 62 updateDisplay : function() 63 { 64 var alpha=this.data/100; 65 this.colorBlend.setH( alpha*this.color2.getH() + (1-alpha)*this.color1.getH() ); 66 this.colorBlend.setS( alpha*this.color2.getS() + (1-alpha)*this.color1.getS() ); 67 this.colorBlend.setV( alpha*this.color2.getV() + (1-alpha)*this.color1.getV() ); 68 69 this.bar.setCss({ 70 'width' : this.data+'%', 71 'background-color' : this.colorBlend.getValue() 72 }); 73 }, 74 75 /** 76 * @param {int} data range 0 to 100. 100 is full progressbar. 77 * @param {boolean} ignoreEvent 78 * @param {boolean} ignoreDom 79 * @return {this} 80 * @override 81 */ 82 setData : function(data,ignoreEvent,ignoreDom) 83 { 84 data = Math.min(100, Math.max(0, Math.round(data))); 85 this._super(data,ignoreEvent,ignoreDom); 86 87 this.updateDisplay(); 88 89 return this; 90 } 91 });