|
-Simple horizontal slider, with no events handler attached |
-
+Simple horizontal slider, with no progress indicator, with no events handler attached |
+
|
|
|
-Horizontal slider from -50 to 50, with image handle, Javascript 'onSlide' handler, ServerSide 'onSliderChanged' handler, initial value and autopostback=true
+Horizontal slider from -50 to 50, Javascript 'onSlide' handler, ServerSide 'onSliderChanged' handler, initial value and autopostback=true
|
-
+
$('slider2value').innerHTML = value;
@@ -24,9 +24,9 @@ Value : <%=$this->slider2->value%>
|
|
-Vertical slider from 0 to 1, with image handle, Javascript 'onSlide' handler, ServerSide 'onSliderChanged' handler, StepSize, and no autopostback
+Vertical slider from 0 to 1, Javascript 'onSlide' handler, ServerSide 'onSliderChanged' handler, StepSize, and no autopostback
|
-
+
$('slider3value').innerHTML = value;
@@ -35,6 +35,7 @@ Value : <%=$this->slider3->value%>
|
- |
-
+
+
+
\ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php
index 4b9b61b9..c1c8a711 100644
--- a/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php
+++ b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php
@@ -1,6 +1,10 @@
slider1Result->setText('Slider Value : '.$this->slider1->getValue());
diff --git a/framework/Web/Javascripts/source/packages.php b/framework/Web/Javascripts/source/packages.php
index 03e237de..d056a7b8 100644
--- a/framework/Web/Javascripts/source/packages.php
+++ b/framework/Web/Javascripts/source/packages.php
@@ -47,10 +47,12 @@ $packages = array(
),
'slider'=>array(
- 'scriptaculous/slider.js',
'prado/controls/slider.js'
),
-
+ 'slider2'=>array(
+ 'scriptaculous/slider.js',
+ 'prado/controls/slider2.js'
+ ),
'keyboard'=>array(
'prado/controls/keyboard.js'
),
diff --git a/framework/Web/Javascripts/source/prado/controls/slider.js b/framework/Web/Javascripts/source/prado/controls/slider.js
index 203d95ed..c2725141 100644
--- a/framework/Web/Javascripts/source/prado/controls/slider.js
+++ b/framework/Web/Javascripts/source/prado/controls/slider.js
@@ -1,28 +1,234 @@
+/**
+ * TSlider client class.
+ * This clas is mainly based on Scriptaculous Slider control (http://script.aculo.us)
+ */
+
Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
-{
+{
onInit : function (options)
{
- this.options=options;
- this.onChange=options.onChange;
- options.onChange=this.change.bind(this);
-
+ var slider = this;
+ this.options=options || {};
+ this.track = $(options.ID+'_track');
+ this.handle =$(options.ID+'_handle');
+ this.progress = $(options.ID+'_progress');
+ this.axis = this.options.axis || 'horizontal';
+ this.range = this.options.range || $R(0,1);
+ this.value = 0;
+ this.maximum = this.options.maximum || this.range.end;
+ this.minimum = this.options.minimum || this.range.start;
this.hiddenField=$(this.options.ID+'_1');
- new Control.Slider(options.ID+'_handle',options.ID, options);
+
+ // Will be used to align the handle onto the track, if necessary
+ this.alignX = parseInt(this.options.alignX || - this.track.offsetLeft);
+ this.alignY = parseInt(this.options.alignY || - this.track.offsetTop);
+
+ this.trackLength = this.maximumOffset() - this.minimumOffset();
+ this.handleLength = this.isVertical() ?
+ (this.handle.offsetHeight != 0 ?
+ this.handle.offsetHeight : this.handles.style.height.replace(/px$/,"")) :
+ (this.handle.offsetWidth != 0 ? this.handle.offsetWidth :
+ this.handle.style.width.replace(/px$/,""));
+
+ this.active = false;
+ this.dragging = false;
+ this.disabled = false;
+
+ if(this.options.disabled) this.setDisabled();
+
+ // Allowed values array
+ this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false;
+ if(this.allowedValues) {
+ this.minimum = this.allowedValues.min();
+ this.maximum = this.allowedValues.max();
+ }
+
+ this.eventMouseDown = this.startDrag.bindAsEventListener(this);
+ this.eventMouseUp = this.endDrag.bindAsEventListener(this);
+ this.eventMouseMove = this.update.bindAsEventListener(this);
+
+ // Initialize handle
+ this.setValue(parseFloat(slider.options.sliderValue));
+ Element.makePositioned(this.handle); // fix IE
+ Event.observe (this.handle, "mousedown", this.eventMouseDown);
+
+ Event.observe (this.track, "mousedown", this.eventMouseDown);
+ if (this.progress) Event.observe (this.progress, "mousedown", this.eventMouseDown);
+ Event.observe (document, "mouseup", this.eventMouseUp);
+ Event.observe (document, "mousemove", this.eventMouseMove);
+
+ this.initialized=true;
+
if(this.options['AutoPostBack']==true)
Event.observe(this.hiddenField, "change", Prado.PostBack.bindEvent(this,options));
+
},
+
+ dispose: function() {
+ var slider = this;
+ Event.stopObserving(this.track, "mousedown", this.eventMouseDown);
+ Event.stopObserving(document, "mouseup", this.eventMouseUp);
+ Event.stopObserving(document, "mousemove", this.eventMouseMove);
- change : function (v)
- {
- this.hiddenField.value=v;
- if (this.onChange)
- {
- this.onChange(v);
+ Event.stopObserving(this.handle, "mousedown", slider.eventMouseDown);
+ },
+
+ setDisabled: function(){
+ this.disabled = true;
+ },
+ setEnabled: function(){
+ this.disabled = false;
+ },
+ getNearestValue: function(value){
+ if(this.allowedValues){
+ if(value >= this.allowedValues.max()) return(this.allowedValues.max());
+ if(value <= this.allowedValues.min()) return(this.allowedValues.min());
+
+ var offset = Math.abs(this.allowedValues[0] - value);
+ var newValue = this.allowedValues[0];
+ this.allowedValues.each( function(v) {
+ var currentOffset = Math.abs(v - value);
+ if(currentOffset <= offset){
+ newValue = v;
+ offset = currentOffset;
+ }
+ });
+ return newValue;
}
- if(this.options['AutoPostBack']==true)
+ if(value > this.range.end) return this.range.end;
+ if(value < this.range.start) return this.range.start;
+ return value;
+ },
+
+ setValue: function(sliderValue){
+ if(!this.active) {
+ this.updateStyles();
+ }
+ this.value = this.getNearestValue(sliderValue);
+ var pixelValue= this.translateToPx(this.value);
+ this.handle.style[this.isVertical() ? 'top' : 'left'] = pixelValue;
+ if (this.progress)
+ this.progress.style[this.isVertical() ? 'height' : 'width'] = pixelValue;
+
+ //this.drawSpans();
+ if(!this.dragging || !this.event) this.updateFinished();
+ },
+
+ setValueBy: function(delta) {
+ this.setValue(this.value + delta);
+ },
+
+ translateToPx: function(value) {
+ return Math.round(
+ ((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) * (value - this.range.start)) + "px";
+ },
+
+ translateToValue: function(offset) {
+ return ((offset/(this.trackLength-this.handleLength) * (this.range.end-this.range.start)) + this.range.start);
+ },
+
+ getRange: function(range) {
+ var v = this.values.sortBy(Prototype.K);
+ range = range || 0;
+ return $R(v[range],v[range+1]);
+ },
+
+ minimumOffset: function(){
+ return(this.isVertical() ? this.alignY : this.alignX);
+ },
+
+ maximumOffset: function(){
+ return(this.isVertical() ?
+ (this.track.offsetHeight != 0 ? this.track.offsetHeight :
+ this.track.style.height.replace(/px$/,"")) - this.alignY :
+ (this.track.offsetWidth != 0 ? this.track.offsetWidth :
+ this.track.style.width.replace(/px$/,"")) - this.alignX);
+ },
+
+ isVertical: function(){
+ return (this.axis == 'vertical');
+ },
+
+ updateStyles: function() {
+ if (this.active)
+ Element.addClassName(this.handle, 'selected');
+ else
+ Element.removeClassName(this.handle, 'selected');
+ },
+
+ startDrag: function(event) {
+ if(Event.isLeftClick(event)) {
+ if(!this.disabled){
+ this.active = true;
+ var handle = Event.element(event);
+ var pointer = [Event.pointerX(event), Event.pointerY(event)];
+ var track = handle;
+ if(track==this.track) {
+ var offsets = Position.cumulativeOffset(this.track);
+ this.event = event;
+ this.setValue(this.translateToValue(
+ (this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)
+ ));
+ var offsets = Position.cumulativeOffset(this.handle);
+ this.offsetX = (pointer[0] - offsets[0]);
+ this.offsetY = (pointer[1] - offsets[1]);
+ } else {
+ this.updateStyles();
+ var offsets = Position.cumulativeOffset(this.handle);
+ this.offsetX = (pointer[0] - offsets[0]);
+ this.offsetY = (pointer[1] - offsets[1]);
+ }
+ }
+ Event.stop(event);
+ }
+ },
+
+ update: function(event) {
+ if(this.active) {
+ if(!this.dragging) this.dragging = true;
+ this.draw(event);
+ if(Prototype.Browser.WebKit) window.scrollBy(0,0);
+ Event.stop(event);
+ }
+ },
+
+ draw: function(event) {
+ var pointer = [Event.pointerX(event), Event.pointerY(event)];
+ var offsets = Position.cumulativeOffset(this.track);
+ pointer[0] -= this.offsetX + offsets[0];
+ pointer[1] -= this.offsetY + offsets[1];
+ this.event = event;
+ this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));
+ if(this.initialized && this.options.onSlide)
+ this.options.onSlide(this.value, this);
+ },
+
+ endDrag: function(event) {
+ if(this.active && this.dragging) {
+ this.finishDrag(event, true);
+ Event.stop(event);
+ }
+ this.active = false;
+ this.dragging = false;
+ },
+
+ finishDrag: function(event, success) {
+ this.active = false;
+ this.dragging = false;
+ this.updateFinished();
+ },
+
+ updateFinished: function() {
+ this.hiddenField.value=this.value;
+ this.updateStyles();
+ if(this.initialized && this.options.onChange)
+ this.options.onChange(this.value, this);
+ this.event = null;
+ if (this.options['AutoPostBack']==true)
{
- Event.fireEvent(this.hiddenField, "change");
+ Event.fireEvent(this.hiddenField,"change");
}
}
+
});
\ No newline at end of file
diff --git a/framework/Web/UI/WebControls/TSlider.php b/framework/Web/UI/WebControls/TSlider.php
index 7ac8f033..c7363fc9 100644
--- a/framework/Web/UI/WebControls/TSlider.php
+++ b/framework/Web/UI/WebControls/TSlider.php
@@ -25,17 +25,12 @@
* Notice that this step will be recomputed if there is more than 200 values between the range boundaries.
* You can also provide the allowed values by setting the {@link SetValues Values} array.
*
- * The handle sub-properties can be accessed by {@link GetHandle Handle} property. You can also provide your own control
- * for the handle, using {@link SetHandleClass HandleClass} property. Note that this class must be a subclass of
- * {@link TSliderHandle}
- *
+ * A 'Progress Indicator' can be displayed within the track with the {@link SetProgressIndicator ProgressIndicator} property.
+ *
* The TSlider control can be easily customized using CssClasses. You can provide your own css file, using the
* {@link SetCssUrl CssUrl} property.
- * The css class for TSlider can be set by the {@link setCssClass CssClass} property. Defaults values are "hslider" for
- * an Horizontal slider, or "vslider" for a Vertical one.
- * The css class for the Handle can be set by the