diff options
-rw-r--r-- | .gitattributes | 7 | ||||
-rw-r--r-- | HISTORY | 1 | ||||
-rw-r--r-- | demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page | 40 | ||||
-rw-r--r-- | demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php | 19 | ||||
-rw-r--r-- | demos/quickstart/protected/pages/Controls/Slider.page | 55 | ||||
-rw-r--r-- | demos/quickstart/protected/pages/Controls/Standard.page | 4 | ||||
-rw-r--r-- | demos/quickstart/protected/pages/GettingStarted/NewFeatures.page | 3 | ||||
-rw-r--r-- | framework/Exceptions/messages/messages.txt | 5 | ||||
-rw-r--r-- | framework/Web/Javascripts/source/packages.php | 3 | ||||
-rw-r--r-- | framework/Web/Javascripts/source/prado/controls/slider.js | 28 | ||||
-rw-r--r-- | framework/Web/UI/WebControls/TSlider.php | 616 | ||||
-rwxr-xr-x | framework/Web/UI/WebControls/assets/TSlider.css | 55 | ||||
-rw-r--r-- | framework/Web/UI/WebControls/assets/TSliderHandle.png | bin | 0 -> 717 bytes |
13 files changed, 833 insertions, 3 deletions
diff --git a/.gitattributes b/.gitattributes index f48d1084..67d3d6c5 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1462,6 +1462,8 @@ demos/quickstart/protected/pages/Controls/Samples/TRepeater/Sample5.php -text demos/quickstart/protected/pages/Controls/Samples/TRequiredFieldValidator/Home.page -text demos/quickstart/protected/pages/Controls/Samples/TRequiredFieldValidator/Home.php -text demos/quickstart/protected/pages/Controls/Samples/TSafeHtml/Home.page -text +demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page -text +demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php -text demos/quickstart/protected/pages/Controls/Samples/TStatements/Home.page -text demos/quickstart/protected/pages/Controls/Samples/TTabPanel/Home.page -text demos/quickstart/protected/pages/Controls/Samples/TTabPanel/Home.php -text @@ -1484,6 +1486,7 @@ demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample4.php -text demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.page -text demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.php -text demos/quickstart/protected/pages/Controls/Samples/config.xml -text +demos/quickstart/protected/pages/Controls/Slider.page -text demos/quickstart/protected/pages/Controls/Standard.page -text demos/quickstart/protected/pages/Controls/Statements.page -text demos/quickstart/protected/pages/Controls/TabPanel.page -text @@ -2422,6 +2425,7 @@ framework/Web/Javascripts/source/prado/colorpicker/target_black.gif -text framework/Web/Javascripts/source/prado/colorpicker/target_white.gif -text framework/Web/Javascripts/source/prado/controls/controls.js -text framework/Web/Javascripts/source/prado/controls/keyboard.js -text +framework/Web/Javascripts/source/prado/controls/slider.js -text framework/Web/Javascripts/source/prado/controls/tabpanel.js -text framework/Web/Javascripts/source/prado/datepicker/calendar.png -text framework/Web/Javascripts/source/prado/datepicker/datepicker.js -text @@ -2569,6 +2573,7 @@ framework/Web/UI/WebControls/TRepeater.php -text framework/Web/UI/WebControls/TRepeaterItemRenderer.php -text framework/Web/UI/WebControls/TRequiredFieldValidator.php -text framework/Web/UI/WebControls/TSafeHtml.php -text +framework/Web/UI/WebControls/TSlider.php -text framework/Web/UI/WebControls/TStatements.php -text framework/Web/UI/WebControls/TStyle.php -text framework/Web/UI/WebControls/TTabPanel.php -text @@ -2588,6 +2593,8 @@ framework/Web/UI/WebControls/TWebControlAdapter.php -text framework/Web/UI/WebControls/TWizard.php -text framework/Web/UI/WebControls/TWizardNavigationButtonStyle.php -text framework/Web/UI/WebControls/TXmlTransform.php -text +framework/Web/UI/WebControls/assets/TSlider.css -text +framework/Web/UI/WebControls/assets/TSliderHandle.png -text svneol=unset#image/png framework/Web/UI/WebControls/assets/captcha.php -text framework/Web/UI/WebControls/assets/keyboard.css -text framework/Web/UI/WebControls/assets/tabpanel.css -text @@ -23,6 +23,7 @@ NEW: Ticket#680 - Added TCacheHttpSession (Carl, Qiang) NEW: Added TTabPanel (Qiang) NEW: Added TKeyboard (Qiang) NEW: Added TCaptcha and TCaptchaValidator (Qiang) +NEW: Added TSlider (Christophe) NEW: Added Indonesian translation to QuickStart, requirements and error messages (Zaenal Mutaqin) NEW: Added French translation to the blog tutorial (Eric Marchetti) diff --git a/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page new file mode 100644 index 00000000..7670f9d3 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page @@ -0,0 +1,40 @@ +<com:TContent id="body"> +<h1>TSlider Sample</h1> + +<table class="sampletable"> + +<tr><td class="samplenote"> +Simple horizontal slider, with no events handler attached</td><td class="sampleaction"> +<com:TSlider id="slider1" Direction="Horizontal"/> +</td> +<td class="sampleaction"> + <com:TButton onClick="submit1" Text="Submit"/> + <com:TLabel id="slider1Result"/> +</td></tr> +<tr><td class="samplenote"> +Horizontal slider from -50 to 50, with image handle, Javascript 'onSlide' handler, ServerSide 'onSliderChanged' handler, initial value and autopostback=true +</td><td class="sampleaction"> +<com:TSlider id="slider2" AutoPostBack="true" Handle.CssClass="handle-image" Direction="Horizontal" Value="30" Enabled="true" MinValue="-50" MaxValue="50" OnValueChanged="slider2Changed"> + <prop:ClientSide.onSlide> + $('slider2value').innerHTML = value; + </prop:ClientSide.onSlide> +</com:TSlider> +Value : <span id="slider2value"><%=$this->slider2->value%></span> +</td><td class="sampleaction"> +<com:TLabel id="slider2Result"/> +</td></tr> +<tr><td class="samplenote"> +Vertical slider from 0 to 1, with image handle, Javascript 'onSlide' handler, ServerSide 'onSliderChanged' handler, StepSize, and no autopostback +</td><td class="sampleaction"> +<com:TSlider id="slider3" AutoPostBack="false" Handle.CssClass="handle-image" Direction="Vertical" Enabled="true" MinValue="0" MaxValue="1" StepSize="0.1" OnValueChanged="slider3Changed"> + <prop:ClientSide.onSlide> + $('slider3value').innerHTML = value; + </prop:ClientSide.onSlide> +</com:TSlider> +Value : <span id="slider3value"><%=$this->slider3->value%></span> +</td><td class="sampleaction"> +<com:TButton Text="Submit"/> +<com:TLabel id="slider3Result"/> +</td></tr> +</table> +</com:TContent>
\ 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 new file mode 100644 index 00000000..4b9b61b9 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php @@ -0,0 +1,19 @@ +<?php +class Home extends TPage +{ + public function submit1 ($sender, $param) + { + $this->slider1Result->setText('Slider Value : '.$this->slider1->getValue()); + } + + public function slider2Changed ($sender, $param) + { + $this->slider2Result->setText('onSliderChanged, Value : '.$sender->getValue()); + } + + public function slider3Changed ($sender, $param) + { + $this->slider3Result->setText('onSliderChanged, Value : '.$sender->getValue()); + } +} +?>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/Slider.page b/demos/quickstart/protected/pages/Controls/Slider.page new file mode 100644 index 00000000..d71c28a0 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Slider.page @@ -0,0 +1,55 @@ +<com:TContent ID="body" >
+
+<h1 id="4401">TSlider</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TSlider" />
+
+<p id="510314" class="block-content">
+<tt>TSlider</tt> displays a slider for numeric input purpose. A slider consists of a <em>track</em> +which define the range of possible value, and a <em>handle</em> which can slide on the track, to select +a value in the range. The track can be either Horizontal or Vertical, depending of the <tt>Direction</tt> +property. By default, it's horizontal. +</p> +<p> +The range boundaries are defined by <tt> MinValue</tt> and <tt>MaxValue</tt> properties. +The default range is from 0 to 100. +The <tt>StepSize</tt> property can be used to define the <em>step</em> between 2 values inside the range. +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 <tt>Values</tt> array. +</p> + +<p> +The handle sub-properties can be accessed by <tt>Handle</tt> property. You can also provide your own control +for the handle, using <tt>HandleClass</tt> property. Note that this class must be a subclass of +<tt>TSliderHandle</tt> +</p> + +<p> +The TSlider control can be easily customized using CssClasses. You can provide your own css file, using the +<tt>CssUrl</tt> property. +The css class for TSlider can be set by the <tt>CssClass</tt> property. Defaults values are <b>'hslider'</b> for +an Horizontal slider, or <b>'vslider'</b> for a Vertical one. +The css class for the Handle can be set by the <tt>Handle.CssClass</tt> subproperty. Defaults is <b>'handle'</b>, which just +draw a red block as a cursor. <b>'handle-image'</b> css class is also provided for your convenience, which display an image +as the handle. +</p> + +<p> +If <tt>AutoPostBack</tt> property is true, postback is performed as soon as the value changed. +</p> + +<p> +TSlider raises the <tt>onValueChanged</tt> event when the value of the slider has changed during postback. +</p> + +<p> +You can also attach ClientSide javascript events handler to the slider : +<ul> +<li><tt>ClientSide.onSlide</tt> is called when the handle is slided on the track. You can get the current value in the <b>value</b> +javascript variable. You can use this event to update on client side a label with the current value</li> +<li><tt>ClientSide.onChange</tt> is called when the slider value has changed (at the end of a move).</li> +</ul>
+</p>
+
+<com:RunBar PagePath="Controls.Samples.TSlider.Home" />
+
+<div class="last-modified">$Id$</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/Standard.page b/demos/quickstart/protected/pages/Controls/Standard.page index 7d961a84..2b8dd7ab 100644 --- a/demos/quickstart/protected/pages/Controls/Standard.page +++ b/demos/quickstart/protected/pages/Controls/Standard.page @@ -120,6 +120,10 @@ </li>
<li>
+ <a href="?page=Controls.Slider">TSlider</a> represents a Slider control
+ </li>
+
+ <li>
<a href="?page=Controls.Statements">TStatements</a> accepts a few PHP statements and displays their standard output on the Web page.
</li>
diff --git a/demos/quickstart/protected/pages/GettingStarted/NewFeatures.page b/demos/quickstart/protected/pages/GettingStarted/NewFeatures.page index 53b516cc..6d5b89e4 100644 --- a/demos/quickstart/protected/pages/GettingStarted/NewFeatures.page +++ b/demos/quickstart/protected/pages/GettingStarted/NewFeatures.page @@ -10,7 +10,8 @@ This page summarizes the main new features that are introduced in each PRADO rel <ul>
<li>Added a new control <a href="?page=Controls.TabPanel">TTabPanel</a> that displays tabbed views.</li>
<li>Added a new control <a href="?page=Controls.Keyboard">TKeyboard</a> that displays a virtual keyboard for text input.</li>
-<li>Added a new control <a href="?page=Controls.Captcha">TCaptcha</a> that displays a CAPTCHA to keep spammers from signing up for certain accounts online. A related validator <tt>TCaptchaValidator</tt> is also implemented.</li>
+<li>Added a new control <a href="?page=Controls.Captcha">TCaptcha</a> that displays a CAPTCHA to keep spammers from signing up for certain accounts online. A related validator <tt>TCaptchaValidator</tt> is also implemented.</li> +<li>Added a new control <a href="?page=Controls.Slider">TSlider</a> that displays a slider which can be used for numeric input.</li>
<li>Added Oracle DB support to Active Record</li>
</ul>
diff --git a/framework/Exceptions/messages/messages.txt b/framework/Exceptions/messages/messages.txt index 33a6f752..1514ed2f 100644 --- a/framework/Exceptions/messages/messages.txt +++ b/framework/Exceptions/messages/messages.txt @@ -442,4 +442,7 @@ captcha_tokenalphabet_invalid = TCaptcha.TokenAlphabet must be a string consis captcha_privatekey_unknown = TCaptcha.PrivateKey is unknown. Please make sure that your assets directory is writable by the Web server process. captcha_gd2_required = TCaptcha requires PHP GD2 extension. captcha_imagettftext_required = TCaptcha requires PHP GD2 extension with TrueType font support. -captcha_imagepng_required = TCaptcha requires PHP GD2 extension with PNG image format support.
\ No newline at end of file +captcha_imagepng_required = TCaptcha requires PHP GD2 extension with PNG image format support. + +slider_handle_class_invalid = TSlider.HandleClass '{0}' is not a valid user class. The class must extends TSliderHandle. +slider_track_class_invalid = TSliderHandle track class '{0}' must be a TSlider instance.
\ No newline at end of file diff --git a/framework/Web/Javascripts/source/packages.php b/framework/Web/Javascripts/source/packages.php index 66b63966..03e237de 100644 --- a/framework/Web/Javascripts/source/packages.php +++ b/framework/Web/Javascripts/source/packages.php @@ -47,7 +47,8 @@ $packages = array( ),
'slider'=>array(
- 'scriptaculous/slider.js'
+ 'scriptaculous/slider.js', + 'prado/controls/slider.js'
),
'keyboard'=>array(
diff --git a/framework/Web/Javascripts/source/prado/controls/slider.js b/framework/Web/Javascripts/source/prado/controls/slider.js new file mode 100644 index 00000000..203d95ed --- /dev/null +++ b/framework/Web/Javascripts/source/prado/controls/slider.js @@ -0,0 +1,28 @@ +Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl, +{ + onInit : function (options) + { + this.options=options; + this.onChange=options.onChange; + options.onChange=this.change.bind(this); + + this.hiddenField=$(this.options.ID+'_1'); + new Control.Slider(options.ID+'_handle',options.ID, options); + + if(this.options['AutoPostBack']==true) + Event.observe(this.hiddenField, "change", Prado.PostBack.bindEvent(this,options)); + }, + + change : function (v) + { + this.hiddenField.value=v; + if (this.onChange) + { + this.onChange(v); + } + if(this.options['AutoPostBack']==true) + { + 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 new file mode 100644 index 00000000..53c2a18b --- /dev/null +++ b/framework/Web/UI/WebControls/TSlider.php @@ -0,0 +1,616 @@ +<?php
+/**
+ * TSlider class file.
+ *
+ * @author Christophe Boulain <Christophe.Boulain@gmail.com>
+ * @link http://www.pradosoft.com/
+ * @copyright Copyright © 2007 PradoSoft
+ * @license http://www.pradosoft.com/license/
+ * @version $Id$
+ * @package System.Web.UI.WebControls
+ */
+
+/**
+ * TSlider class
+ * + * TSlider displays a slider for numeric input purpose. A slider consists of a 'track', + * which define the range of possible value, and a 'handle' which can slide on the track, to select + * a value in the range. The track can be either Horizontal or Vertical, depending of the {@link SetDirection Direction} + * property. By default, it's horizontal. + * + * The range boundaries are defined by {@link SetMinValue MinValue} and {@link SetMaxValue MaxValue} properties. + * The default range is from 0 to 100. + * The {@link SetStepSize StepSize} property can be used to define the <b>step</b> between 2 values inside the range. + * 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} + * + * 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 <b>Handle.CssClass</b> subproperty. Defaults is "handle", which just + * draw a red block as a cursor. 'handle-image' css class is also provided for your convenience, which display an image + * as the handle. + * + * If {@link SetAutoPostBack AutoPostBack} property is true, postback is sent as soon as the value changed. + * + * TSlider raises the {@link onValueChanged} event when the value of the slider has changed during postback. + * + * You can also attach ClientSide javascript events handler to the slider : + * - ClientSide.onSlide is called when the handle is slided on the track. You can get the current value in the <b>value</b> + * javascript variable. You can use this event to update on client side a label with the current value + * - ClientSide.onChange is called when the slider value has changed (at the end of a move). + *
+ * @author Christophe Boulain <Christophe.Boulain@gmail.com>
+ * @version $Id$
+ * @package System.Web.UI.WebControls
+ * @since 3.1.1
+ */
+class TSlider extends TWebControl implements IPostBackDataHandler
+{
+ + /** + * @var TSliderHandle handle component + */ + private $_handle; + /* + * @var boolean Wether the data has changed during postback + */ + private $_dataChanged=false; + /** + * @var TSliderClientScript Clients side javascripts + */ + private $_clientScript=null; +
+ /**
+ * @return TSliderDirection Direction of slider (Horizontal or Vertical)
+ */
+ public function getDirection()
+ {
+ return $this->getViewState('Direction', TSliderDirection::Horizontal);
+ }
+
+ /**
+ * @param TSliderDirection Direction of slider (Horizontal or Vertical)
+ */
+ public function setDirection($value)
+ {
+ $this->setViewState('Direction', TPropertyValue::ensureEnum($value,'TSliderDirection'));
+ }
+
+ /**
+ * @return string URL for the CSS file including all relevant CSS class definitions. Defaults to ''.
+ */
+ public function getCssUrl()
+ {
+ return $this->getViewState('CssUrl','');
+ }
+
+ /**
+ * @param string URL for the CSS file including all relevant CSS class definitions.
+ */
+ public function setCssUrl($value)
+ {
+ $this->setViewState('CssUrl',TPropertyValue::ensureString($value),'');
+ }
+
+ /**
+ * @return float Maximum value for the slider
+ */
+ public function getMaxValue()
+ {
+ return $this->getViewState('MaxValue',100);
+ }
+
+ /**
+ * @param float Maximum value for slider
+ */
+ public function setMaxValue($value)
+ { + $this->setViewState('MaxValue', TPropertyValue::ensureFloat($value),100);
+ }
+
+ /**
+ * @return float Minimum value for slider
+ */
+ public function getMinValue()
+ {
+ return $this->getViewState('MinValue',0);
+ }
+
+ /**
+ * @param float Minimum value for slider
+ */
+ public function setMinValue($value)
+ { + $this->setViewState('MinValue', TPropertyValue::ensureFloat($value),0);
+ }
+ + /** + * @return float Step size. Defaults to 1 + */ + public function getStepSize() + { + return $this->getViewState('StepSize', 1); + } + + /** + * @param float Step size. Defaults to 1. + */ + public function setStepSize($value) + { + $this->setViewState('StepSize', $value, 1); + } +
+ /**
+ * @return float current value of slider
+ */
+ public function getValue()
+ {
+ return $this->getViewState('Value',0.0);
+ }
+
+ /**
+ * @param float current value of slider
+ */
+ public function setValue($value)
+ {
+ $this->setViewState('Value', TPropertyValue::ensureFloat($value),0.0);
+ }
+
+ /**
+ * @return array list of allowed values the slider can take
+ */
+ public function getValues()
+ {
+ return $this->getViewState('Values', null);
+ }
+
+ /**
+ * @param array list of allowed values the slider can take
+ */
+ public function setValues($value)
+ {
+ $value=TPropertyValue::ensureArray($value); + $this->setViewState('Values', $value, null);
+ }
+ +
+ /**
+ * This method will return the handle control.
+ * @return TSliderHandle the control for the slider's handle (must inherit from TSliderHandle}
+ */ + public function getHandle () + { + if ($this->_handle==null) + { + $this->_handle=prado::createComponent($this->getHandleClass(), $this); + if (!$this->_handle instanceof TSliderHandle) + { + throw new TInvalidDataTypeException('slider_handle_class_invalid', get_class($this->_handle)); + } + } + return $this->_handle; + } + + + /**
+ * @return string Custom handle class. Defaults to TSliderHandle;
+ */ + public function getHandleClass () + { + return $this->getViewState('HandleClass', 'TSliderHandle'); + } +
+ /**
+ * Set custom handle class. This class must exists, and be an instance of TSliderHandle
+ *
+ * @param string Custom Handle Class
+ */ + public function setHandleClass ($value) + { + $handle=prado::createComponent($value, $this); + if ($handle instanceof TSliderHandle) + { + $this->setViewState('HandleClass', $value); + $this->_handle=$handle; + } else { + throw new TInvalidDataTypeException('slider_handle_class_invalid', get_class($this->_handle)); + } + } + + /** + * @return boolean a value indicating whether an automatic postback to the server + * will occur whenever the user modifies the slider value. Defaults to false. + */ + public function getAutoPostBack() + { + return $this->getViewState('AutoPostBack',false); + } + + /** + * Sets the value indicating if postback automatically. + * An automatic postback to the server will occur whenever the user + * modifies the slider value. + * @param boolean the value indicating if postback automatically + */ + public function setAutoPostBack($value) + { + $this->setViewState('AutoPostBack',TPropertyValue::ensureBoolean($value),false); + } +
+
+ /**
+ * Gets the name of the javascript class responsible for performing postback for this control.
+ * This method overrides the parent implementation.
+ * @return string the javascript class name
+ */
+ protected function getClientClassName()
+ {
+ return 'Prado.WebUI.TSlider';
+ }
+
+ + /** + * Returns a value indicating whether postback has caused the control data change. + * This method is required by the IPostBackDataHandler interface. + * @return boolean whether postback has caused the control data change. False if the page is not in postback mode. + */ + public function getDataChanged() + { + return $this->_dataChanged; + } + + /** + * Raises postdata changed event. + * This method is required by {@link IPostBackDataHandler} interface. + * It is invoked by the framework when {@link getValue Value} property + * is changed on postback. + * This method is primarly used by framework developers. + */ + public function raisePostDataChangedEvent() + { + $this->onValueChanged(null); + } + + /** + * Raises <b>OnValueChanged</b> event. + * This method is invoked when the {@link getValue Value} + * property changes on postback. + * If you override this method, be sure to call the parent implementation to ensure + * the invocation of the attached event handlers. + * @param TEventParameter event parameter to be passed to the event handlers + */ + public function onValueChanged($param) + { + if ($this->getDataChanged()) $this->raiseEvent('OnValueChanged',$this,$param); + } + + /** + * Loads user input data. + * This method is primarly used by framework developers. + * @param string the key that can be used to retrieve data from the input data collection + * @param array the input data collection + * @return boolean whether the data of the component has been changed + */ + public function loadPostData($key,$values) + { + $value=(float)$values[$this->getClientID().'_1']; + if($this->getValue()!==$value) + { + $this->setValue($value); + return $this->_dataChanged=true; + } + else + return false; + } + + /** + * Gets the TSliderClientScript to set the TSlider event handlers. + * + * The slider on the client-side supports the following events. + * # <tt>OnSliderMove</tt> -- raised when the slider is moved. + * # <tt>OnSliderChanged</tt> -- raised when the slider value is changed + * + * You can attach custom javascript code to each of these events + * + * @return TSliderClientScript javascript validator event options. + */ + public function getClientSide() + { + if(is_null($this->_clientScript)) + $this->_clientScript = $this->createClientScript(); + return $this->_clientScript; + } + + /** + * @return TSliderClientScript javascript event options. + */ + protected function createClientScript() + { + return new TSliderClientScript; + } + + public function getTagName () + { + return "div"; + }
+ + /** + * Renders body content. + * This method renders the handle of slider + * This method overrides parent implementation + * @param THtmlWriter writer + */ + public function renderContents($writer) + { + // Render the handle + $this->getHandle()->render ($writer); + + } + + /** + * Add the specified css classes to the track + * @param THtmlWriter writer + */ + protected function addAttributesToRender($writer) + { + parent::addAttributesToRender($writer); + $writer->addAttribute('id',$this->getClientID());
+ if ($this->getCssClass()==='') + $writer->addAttribute('class', $this->getDirection()===TSliderDirection::Horizontal?'hslider':'vslider'); + } + + /** + * Registers CSS and JS. + * This method is invoked right before the control rendering, if the control is visible. + * @param mixed event parameter + */ + public function onPreRender ($param) + { + parent::onPreRender($param);
+ $this->registerStyleSheet(); + $this->registerSliderClientScript(); + + } +
+ /**
+ * Registers the CSS relevant to the TSlider.
+ * It will register the CSS file specified by {@link getCssUrl CssUrl}.
+ * If that is not set, it will use the default CSS.
+ */
+ protected function registerStyleSheet()
+ {
+ if(($url=$this->getCssUrl())==='')
+ {
+ // publish the handle image
+ $this->getApplication()->getAssetManager()->publishFilePath(dirname(__FILE__).DIRECTORY_SEPARATOR.'assets'.DIRECTORY_SEPARATOR.'TSliderHandle.png');
+ // publish the css file
+ $url=$this->getApplication()->getAssetManager()->publishFilePath(dirname(__FILE__).DIRECTORY_SEPARATOR.'assets'.DIRECTORY_SEPARATOR.'TSlider.css');
+
+ }
+ $this->getPage()->getClientScript()->registerStyleSheetFile($url,$url);
+ }
+ + /** + * Registers the javascript code to initialize the slider. + */ + protected function registerSliderClientScript() + { + + $cs = $this->getPage()->getClientScript(); + $cs->registerPradoScript("slider"); + $id=$this->getClientID();
+ $page=$this->getPage();
+ $cs->registerHiddenField($id.'_1',$this->getValue());
+ $page->registerRequiresPostData($this); + $cs->registerPostBackControl($this->getClientClassName(),$this->getSliderOptions()); + } + + /** + * Get javascript sliderr options. + * @return array slider client-side options + */ + protected function getSliderOptions() + {
+ // PostBack Options : + $options['ID'] = $this->getClientID(); + $options['EventTarget'] = $this->getUniqueID(); + $options['AutoPostBack'] = $this->getAutoPostBack(); + + // Slider Control options + $minValue=$this->getMinValue(); + $maxValue=$this->getMaxValue(); + $options['axis'] = strtolower($this->getDirection()); + $options['maximum'] = $maxValue; + $options['minimum'] = $minValue; + $options['range'] = 'javascript:$R('.$minValue.",".$maxValue.")"; + $options['sliderValue'] = $this->getValue(); + $options['disabled'] = !$this->getEnabled(); + if (($values=$this->getValues())) + { + // Values are provided. Check if min/max are present in them + if (!in_array($minValue, $values)) $values[]=$minValue; + if (!in_array($maxValue, $values)) $values[]=$maxValue; + // Remove all values outsize the range [min..max] + foreach ($values as $idx=>$value) + { + if ($value < $minValue) unset ($values[$idx]); + if ($value > $maxValue) unset ($values[$idx]); + } + } + else + { + // Values are not provided, generate automatically using stepsize + $step=$this->getStepSize(); + // We want at most 200 values, so, change the step if necessary + if (($maxValue-$minValue)/$step > 200) + { + $step=($maxValue-$minValue)/200; + } + $values=array(); + for ($i=$minValue;$i<=$maxValue;$i+=$step) + $values[]=$i; + // Add max if it's not in the array because of step + if (!in_array($maxValue, $values)) $values[]=$maxValue; + } + $options['values'] = TJavascript::Encode($values,false); + if(!is_null($this->_clientScript)) + $options = array_merge($options,$this->_clientScript->getOptions()->toArray()); + return $options; + }
+} + +/** + * TSliderClientScript class. + * + * Client-side slider events {@link setOnChange OnChange} and {@line setOnMove OnMove} + * can be modified through the {@link TSlider:: getClientSide ClientSide} + * property of a slider. + * + * The current value of the slider can be get in the 'value' js variable + * + * The <tt>OnMove</tt> event is raised when the slider moves + * The <tt>OnChange</tt> event is raised when the slider value is changed (or at the end of a move) + * + * @author Christophe Boulain <Christophe.Boulain@gmail.com> + * @version $Id$ + * @package System.Web.UI.WebControls + * @since 3.1.1 + */ +class TSliderClientScript extends TClientSideOptions +{ + /** + * Javascript code to execute when the slider value is changed. + * @param string javascript code + */ + public function setOnChange($javascript) + { + $code="javascript: function (value) { {$javascript} }"; + $this->setFunction('onChange', $code); + } + + /** + * @return string javascript code to execute when the slider value is changed. + */ + public function getOnChange() + { + return $this->getOption('onChange'); + } + + /* Javascript code to execute when the slider moves. + * @param string javascript code + */ + public function setOnSlide($javascript) + {
+ $code="javascript: function (value) { {$javascript} }"; + $this->setFunction('onSlide', $code); + } + + /** + * @return string javascript code to execute when the slider moves. + */ + public function getOnSlide() + { + return $this->getOption('onSlide'); + } +} +
+ +/** + * TSliderDirection class. + * + * TSliderDirection defines the enumerable type for the possible direction that can be used in a {@link TSlider} + * + * The following enumerable values are defined : + * - Horizontal : Horizontal slider + * - Vertical : Vertical slider + * + * @author Christophe Boulain <Christophe.Boulain@gmail.com> + * @version $Id$ + * @package System.Web.UI.WebControls + * @since 3.1.1 + */
+class TSliderDirection extends TEnumerable
+{
+ const Horizontal='Horizontal';
+ const Vertical='Vertical';
+} + + +/** + * TSliderHandle class + * + * TSliderHandle is responsible of rendering the 'handle' control on a {@link TSlider} + * Users can override this class to personalize the handle. + * Default class renders a 'div' tag, and apply the css class provided by {@link setCssClass CssClass} property. + * + * Two css classes are provided by default : + * - handle : render a simple red cursor + * - handle-image : render an image as handle + * + * @author Christophe Boulain <Christophe.Boulain@gmail.com> + * @version $Id$ + * @package System.Web.UI.WebControls + * @since 3.1.1 + */ +class TSliderHandle extends TWebControl +{ + private $_track; + + /** + * Override parent constructor to get the track control as parameter + * + * @param TSlider track control + */ + public function __construct ($track) + { + if ($track instanceof TSlider) + { + $this->_track=$track; + } else { + throw new TInvalidDataTypeException ('slider_track_class_invalid', get_class($this)); + } + } + + /** + * @return TSlider track control + */ + public function getTrack() { + return $this->_track; + } + + public function getTagName() + { + return 'div'; + } +
+ /**
+ * @return string CssClass for the handle of the slider control. Defaults to 'handle'
+ */
+ public function getCssClass ()
+ {
+ $class=parent::getCssClass();
+ return ($class=='')?'handle':$class;
+ } +
+ /** + * Add the specified css classes to the handle + * @param THtmlWriter writer + */ + public function addAttributesToRender($writer) + { + parent::addAttributesToRender($writer); + $writer->addAttribute('id', $this->getTrack()->getClientID()."_handle");
+ $writer->addAttribute('class', $this->getCssClass()); + } + + +} + +
+?>
\ No newline at end of file diff --git a/framework/Web/UI/WebControls/assets/TSlider.css b/framework/Web/UI/WebControls/assets/TSlider.css new file mode 100755 index 00000000..3b068c2f --- /dev/null +++ b/framework/Web/UI/WebControls/assets/TSlider.css @@ -0,0 +1,55 @@ +/* Css class for an Horizontal Slider */ +.hslider
+{
+ background-color: rgb(170,170,170);
+ width: 200px;
+ height: 5px;
+}
+ +/* Css class for a Vertical Slider */
+.vslider
+{
+ background-color: rgb(170,170,170);
+ width: 5px;
+ height: 200px;
+}
+ +/* Css class for a block cursor as handle */
+.handle
+{
+ background-color: red;
+ cursor: move;
+}
+ +/* Dimensions of cursor depend on Direction */
+.hslider .handle
+{
+ width: 5px;
+ height: 10px;
+}
+
+.vslider .handle
+{
+ width: 10px;
+ height: 5px;
+}
+ +/* Css class for an image as handle */
+.handle-image
+{
+ width: 14px;
+ height: 15px;
+ cursor: move; + background: url("TSliderHandle.png") no-repeat;
+}
+ +/* Center the image on the track */
+.hslider .handle-image
+{
+ top: -5px;
+}
+
+.vslider .handle-image
+{
+ left: -5px;
+}
\ No newline at end of file diff --git a/framework/Web/UI/WebControls/assets/TSliderHandle.png b/framework/Web/UI/WebControls/assets/TSliderHandle.png Binary files differnew file mode 100644 index 00000000..47d02e88 --- /dev/null +++ b/framework/Web/UI/WebControls/assets/TSliderHandle.png |