Commit 75aa6659 by Alexander Makarov

Fixes #1222: refactored jui/Widget, intorduced jui/Slider and jui/SliderInput

parent 22439d33
<?php
/**
* @link http://www.yiiframework.com/
* @copyright Copyright (c) 2008 Yii Software LLC
* @license http://www.yiiframework.com/license/
*/
namespace yii\jui;
use yii\helpers\Html;
/**
* Slider renders a slider jQuery UI widget.
*
* echo Slider::widget([
* 'clientOptions' => [
* 'min' => 1,
* 'max' => 10,
* ],
* ]);
* ```
*
* @see http://api.jqueryui.com/slider/
* @author Alexander Makarov <sam@rmcreative.ru>
* @since 2.0
*/
class Slider extends Widget
{
protected $clientEventsMap = [
'change' => 'slidechange',
'create' => 'slidecreate',
'slide' => 'slide',
'start' => 'slidestart',
'stop' => 'slidestop',
];
/**
* Executes the widget.
*/
public function run()
{
echo Html::tag('div', '', $this->options);
$this->registerWidget('slider', SliderAsset::className());
}
}
\ No newline at end of file
<?php
/**
* @link http://www.yiiframework.com/
* @copyright Copyright (c) 2008 Yii Software LLC
* @license http://www.yiiframework.com/license/
*/
namespace yii\jui;
use yii\helpers\Html;
/**
* SliderInput renders a slider jQuery UI widget that writes its value into hidden input.
*
* For example,
*
* ```
* echo Slider::widget([
* 'model' => $model,
* 'attrbute' => 'amount',
* 'clientOptions' => [
* 'min' => 1,
* 'max' => 10,
* ],
* ]);
* ```
*
* The following example will use the name property instead:
*
* ```
* echo Slider::widget([
* 'name' => 'amount',
* 'clientOptions' => [
* 'min' => 1,
* 'max' => 10,
* ],
* ]);
* ```
*
* @see http://api.jqueryui.com/slider/
* @author Alexander Makarov <sam@rmcreative.ru>
* @since 2.0
*/
class SliderInput extends InputWidget
{
protected $clientEventsMap = [
'change' => 'slidechange',
'create' => 'slidecreate',
'slide' => 'slide',
'start' => 'slidestart',
'stop' => 'slidestop',
];
/**
* Executes the widget.
*/
public function run()
{
echo Html::tag('div', '', $this->options);
$inputId = $this->id.'-input';
$inputOptions = $this->options;
$inputOptions['id'] = $inputId;
if ($this->hasModel()) {
echo Html::activeHiddenInput($this->model, $this->attribute, $inputOptions);
} else {
echo Html::hiddenInput($this->name, $this->value, $inputOptions);
}
if (!isset($this->clientEvents['slide'])) {
$this->clientEvents['slide'] = 'function(event, ui) {
$("#'.$inputId.'").val(ui.value);
}';
}
$this->registerWidget('slider', SliderAsset::className());
$this->getView()->registerJs('$("#'.$inputId.'").val($("#'.$this->id.'").slider("value"));');
}
}
\ No newline at end of file
...@@ -42,6 +42,11 @@ class Widget extends \yii\base\Widget ...@@ -42,6 +42,11 @@ class Widget extends \yii\base\Widget
*/ */
public $clientEvents = []; public $clientEvents = [];
/**
* @var array event names mapped to what should be specified in .on(
* If empty, it is assumed that event passed to clientEvents is prefixed with widget name.
*/
protected $clientEventsMap = [];
/** /**
* Initializes the widget. * Initializes the widget.
...@@ -56,32 +61,62 @@ class Widget extends \yii\base\Widget ...@@ -56,32 +61,62 @@ class Widget extends \yii\base\Widget
} }
/** /**
* Registers a specific jQuery UI widget and the related events * Registers a specific jQuery UI widget assets
* @param string $name the name of the jQuery UI widget
* @param string $assetBundle the asset bundle for the widget * @param string $assetBundle the asset bundle for the widget
*/ */
protected function registerWidget($name, $assetBundle) protected function registerAssets($assetBundle)
{ {
$view = $this->getView();
/** @var \yii\web\AssetBundle $assetBundle */ /** @var \yii\web\AssetBundle $assetBundle */
$assetBundle::register($view); $assetBundle::register($this->getView());
/** @var \yii\web\AssetBundle $themeAsset */ /** @var \yii\web\AssetBundle $themeAsset */
$themeAsset = static::$theme; $themeAsset = static::$theme;
$themeAsset::register($view); $themeAsset::register($this->getView());
}
$id = $this->options['id']; /**
* Registers a specific jQuery UI widget options
* @param string $name the name of the jQuery UI widget
*/
protected function registerClientOptions($name)
{
if ($this->clientOptions !== false) { if ($this->clientOptions !== false) {
$id = $this->options['id'];
$options = empty($this->clientOptions) ? '' : Json::encode($this->clientOptions); $options = empty($this->clientOptions) ? '' : Json::encode($this->clientOptions);
$js = "jQuery('#$id').$name($options);"; $js = "jQuery('#$id').$name($options);";
$view->registerJs($js); $this->getView()->registerJs($js);
} }
}
/**
* Registers a specific jQuery UI widget events
* @param string $name the name of the jQuery UI widget
*/
protected function registerClientEvents($name)
{
if (!empty($this->clientEvents)) { if (!empty($this->clientEvents)) {
$id = $this->options['id'];
$js = []; $js = [];
foreach ($this->clientEvents as $event => $handler) { foreach ($this->clientEvents as $event => $handler) {
$js[] = "jQuery('#$id').on('$name$event', $handler);"; if (isset($this->clientEventsMap[$event])) {
$eventName = $this->clientEventsMap[$event];
} else {
$eventName = $name.$event;
}
$js[] = "jQuery('#$id').on('$eventName', $handler);";
} }
$view->registerJs(implode("\n", $js)); $this->getView()->registerJs(implode("\n", $js));
} }
} }
/**
* Registers a specific jQuery UI widget asset bundle, initializes it with client options and registers related events
* @param string $name the name of the jQuery UI widget
* @param string $assetBundle the asset bundle for the widget
*/
protected function registerWidget($name, $assetBundle)
{
$this->registerAssets($assetBundle);
$this->registerClientOptions($name);
$this->registerClientEvents($name);
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment