1 /** 2 * @author Gillis Haasnoot <gillis.haasnoot@gmail.com> 3 * @package Banana.Controls 4 * @summary Slider 5 */ 6 7 goog.provide('Banana.Controls.DataControls.Slider'); 8 9 /** 10 * more info at http://docs.jquery.com/UI/Slider 11 * 12 * TODO jquery plugin ready for more than 1 handle. banana control not yet 13 */ 14 15 /** @namespace Banana.Controls.Slider */ 16 namespace('Banana.Controls').Slider = Banana.Controls.DataControl.extend( 17 /** @lends Banana.Controls.Slider.prototype */ 18 { 19 20 /** 21 * Creates a slider by using jquery ui slider. 22 * Note that this control is not ready for multiple handles. The jquery ui plugin actually is. 23 * @constructs 24 * @extends Banana.Controls.DataControl 25 */ 26 init : function() 27 { 28 this._super(); 29 30 this.addCssClass("BSlider"); 31 32 this.stepSize = 1; 33 this.min = 1; 34 this.max = 10; 35 this.orientation = 'horizontal'; 36 37 this.bind('slide',this.getProxy(function(e,v){ 38 39 this.setData(v.value,false,true); 40 })); 41 }, 42 43 /** 44 * @param {int} data range 0 to 100. 100 is full progressbar. 45 * @param {boolean} ignoreEvent 46 * @param {boolean} ignoreDom 47 * @return {this} 48 * @override 49 */ 50 setData : function(data,ignoreEvent,ignoreDom) 51 { 52 this._super(data,ignoreEvent,ignoreDom); 53 54 if (!ignoreDom) 55 { 56 this.updateElement(); 57 } 58 59 return this; 60 }, 61 62 /** 63 * @override 64 * this function to add some jquery events which should be handled as dom event 65 */ 66 getDomEventTypes : function() 67 { 68 var events = this._super(); 69 70 events.push('create'); 71 events.push('slide'); 72 events.push('change'); 73 events.push('slidestop'); 74 events.push('slidestart'); 75 76 return events; 77 }, 78 79 /** 80 * creates the element 81 */ 82 updateElement : function() 83 { 84 if (!this.isRendered) return; 85 86 var options = {}; 87 options.step = this.stepSize; 88 options.min = this.min; 89 options.max = this.max; 90 91 if (this.getData()) 92 { 93 options.value = this.getData(); 94 } 95 96 jQuery('#'+this.getClientId()).slider(options); 97 }, 98 99 /** 100 * @override 101 * Here we create the slider itself 102 */ 103 updateDisplay : function() 104 { 105 this.updateElement(); 106 }, 107 108 /** 109 * @param {int} size 110 * @return {this 111 */ 112 setStepSize : function(size) 113 { 114 this.stepSize = size; 115 return this; 116 }, 117 118 /** 119 * @param {int} size 120 * @return {this} 121 */ 122 setMin : function(size) 123 { 124 this.min = size; 125 return this; 126 }, 127 128 /** 129 * @param {int} size 130 * @return {this} 131 */ 132 setMax : function(size) 133 { 134 this.max = size; 135 return this; 136 }, 137 138 /** 139 * @param {string} o horizontal or vert 140 * @return {this} 141 */ 142 setOrientation : function(or) 143 { 144 this.orientation = or; 145 return this; 146 } 147 });