first commit

Author: muhiddingithub

MultiSelect.php

@@ -0,0 +1,64 @@
+<?php
+namespace muhiddin\select;
+
+use yii\bootstrap\InputWidget;
+use yii\bootstrap\Html;
+use yii\helpers\Json;
+use yii\web\View;
+use muhiddin\select\MultiSelectAsset;
+
+class MultiSelect extends InputWidget
+{
+    public $data;
+    public $id = 'multi-select';
+    public $pluginOptions = '';
+    public $selectAll = false;
+    public $deselectAll = false;
+
+    public function run()
+    {
+        if (!isset($this->options['css'])) {
+            $this->options['id'] = $this->id;
+        }
+        if ($this->selectAll)
+            echo Html::a(\Yii::t('backend', 'select all'), '#', ['id' => $this->id . '-select-all']);
+
+        if ($this->deselectAll)
+            echo Html::a(\Yii::t('backend', 'deselect all'), '#', ['id' => $this->id . '-deselect-all']);
+
+        MultiSelectAsset::register($this->getView());
+        if (isset($this->model)) {
+            $this->pluginOptions[] = $this->model->{$this->attribute};
+            echo Html::activeDropDownList($this->model, $this->attribute, $this->data, $this->options);
+            echo Html::error($this->model, $this->attribute);
+        } else {
+            $this->pluginOptions[] = $this->value;
+            echo Html::dropDownList($this->name, $this->value, $this->data, $this->options);
+        }
+
+        $this->registerJsScript();
+    }
+
+    public function registerJsScript()
+    {
+        $this->pluginOptions[] = 'array';
+        $pluginOptions = Json::encode($this->pluginOptions);
+        $addJsScript = "";
+        if ($this->selectAll)
+            $addJsScript .= "
+            $('#" . $this->id . "-select-all').click(function(){
+                $('#" . $this->id . "').multiSelect('select_all');
+                return false;
+            });";
+        if ($this->deselectAll)
+            $addJsScript .= "
+            $('#" . $this->id . "-deselect-all').click(function(){
+                $('#" . $this->id . "').multiSelect('deselect_all');
+                return false;
+            });";
+
+        \Yii::$app->view->registerJs("
+           $('#" . $this->id . "').multiSelect({$pluginOptions});   
+        " . $addJsScript, View::POS_END);
+    }
+}

MultiSelectAsset.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * @link http://www.yiiframework.com/
+ * @copyright Copyright (c) 2008 Yii Software LLC
+ * @license http://www.yiiframework.com/license/
+ */
+
+namespace muhiddin\select;
+
+use yii\web\AssetBundle;
+
+/**
+ * @author Muhiddin Jumaniyazov <[email protected]>
+ * @since 1.0
+ */
+class MultiSelectAsset extends AssetBundle
+{
+    public $sourcePath = '@muhiddin/select/assets';
+
+    public $css = [
+        'css/multi-select.css',
+    ];
+    public $js = [
+        'js/jquery.multi-select.js',
+    ];
+
+    public function init()
+    {
+        parent::init();
+        $this->jsOptions['position'] = \yii\web\View::POS_END;
+    }
+
+}

assets/css/multi-select.css

@@ -0,0 +1,94 @@
+.ms-container {
+    background: transparent url('../img/switch.png') no-repeat 50% 50%;
+    width: 80%;
+}
+
+.ms-container:after {
+    content: ".";
+    display: block;
+    height: 0;
+    line-height: 0;
+    font-size: 0;
+    clear: both;
+    min-height: 0;
+    visibility: hidden;
+}
+
+.ms-container .ms-selectable, .ms-container .ms-selection {
+    background: #fff;
+    color: #555555;
+    float: left;
+    width: 45%;
+}
+
+.ms-container .ms-selection {
+    float: right;
+}
+
+.ms-container .ms-list {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+    border: 1px solid #ccc;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    position: relative;
+    height: 200px;
+    padding: 0;
+    overflow-y: auto;
+}
+
+.ms-container .ms-list.ms-focus {
+    border-color: rgba(82, 168, 236, 0.8);
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+    outline: 0;
+    outline: thin dotted \9;
+}
+
+.ms-container ul {
+    margin: 0;
+    list-style-type: none;
+    padding: 0;
+}
+
+.ms-container .ms-optgroup-container {
+    width: 100%;
+}
+
+.ms-container .ms-optgroup-label {
+    margin: 0;
+    padding: 5px 0px 0px 5px;
+    cursor: pointer;
+    color: #999;
+}
+
+.ms-container .ms-selectable li.ms-elem-selectable,
+.ms-container .ms-selection li.ms-elem-selection {
+    border-bottom: 1px #eee solid;
+    padding: 2px 10px;
+    color: #555;
+    font-size: 14px;
+}
+
+.ms-container .ms-selectable li.ms-hover,
+.ms-container .ms-selection li.ms-hover {
+    cursor: pointer;
+    color: #fff;
+    text-decoration: none;
+    background-color: #08c;
+}
+
+.ms-container .ms-selectable li.disabled,
+.ms-container .ms-selection li.disabled {
+    background-color: #eee;
+    color: #aaa;
+    cursor: text;
+}