/**
* @inherit doc
*/
public function init()
{
if ($this->orientation == 'vertical') {
Html::addCssClass($this->containerOptions, 'kv-range-vertical');
$this->html5Options['orient'] = 'vertical';
}
parent::init();
}
/**
* Registers the needed assets
*/
public function registerAssets()
{
$view = $this->getView();
$value = $this->hasModel() ? Html::getAttributeValue($this->model, $this->attribute) : $this->value;
$this->html5Options['value'] = $value;
ColorInputAsset::register($view);
if ($this->useNative) {
parent::registerAssets();
return;
}
\kartik\base\Html5InputAsset::register($view);
$caption = 'jQuery("#' . $this->options['id'] . '")';
$input = 'jQuery("#' . $this->html5Options['id'] . '")';
$this->pluginOptions['change'] = new JsExpression("function(color){{$caption}.val(color.toString());}");
$this->registerPlugin('spectrum', $input);
$js = <<<JS
{$input}.spectrum('set','{$value}');
{$caption}.on('change', function(){
{$input}.spectrum('set',{$caption}.val());
});
JS;
$view->registerJs($js);
}