Implemented ability to customize buttons

Eugene Tupikov · Eugene Tupikov · commit c4587f9659ae · 2015-09-12T21:30:29.000+06:00
diff --git a/README.md b/README.md
@@ -2,7 +2,8 @@
 Yii2 widget for handle multiple inputs for an attribute of model
 
 [![Latest Stable Version](https://poser.pugx.org/unclead/yii2-multiple-input/v/stable)](https://packagist.org/packages/unclead/yii2-multiple-input)
-[![Total Downloads](https://poser.pugx.org/unclead/yii2-multiple-input/downloads)](https://packagist.org/packages/unclead/yii2-multiple-input) 
+[![Total Downloads](https://poser.pugx.org/unclead/yii2-multiple-input/downloads)](https://packagist.org/packages/unclead/yii2-multiple-input)
+[![Daily Downloads](https://poser.pugx.org/unclead/yii2-multiple-input/d/daily)](https://packagist.org/packages/unclead/yii2-multiple-input)
 [![Latest Unstable Version](https://poser.pugx.org/unclead/yii2-multiple-input/v/unstable)](https://packagist.org/packages/unclead/yii2-multiple-input) 
 [![License](https://poser.pugx.org/unclead/yii2-multiple-input/license)](https://packagist.org/packages/unclead/yii2-multiple-input)
 
@@ -14,6 +15,7 @@ Contents:
 - [Installation](#installation)
 - [Configuration](#configuration)
 - [Usage](#usage)
+- [How to customize buttons](#customize-buttons)
 - [Javascript Events](#javascript-events)
 - [Renderers](#renderers)
 
@@ -38,10 +40,12 @@ to the require section of your `composer.json` file.
 
 Widget support the following options that are additionally recognized over and above the configuration options in the InputWidget:
 
-- `limit`: *integer*: rows limit. If not set will defaul to unlimited
-- `attributeOptions` *array*: client-side attribute options, e.g. enableAjaxValidation. You may use this property in case when 
+- `limit` *integer*: rows limit. If not set will defaul to unlimited
+- `attributeOptions` *array*: client-side attribute options, e.g. enableAjaxValidation. You may use this property in case when
   you use widget without a model, since in this case widget is not able to detect client-side options automatically
-- `date` *array*: array of values in case you use widget without model
+- `addButtonOptions` *array*: the HTML options for `add` button. Can contains `class` and `label` keys
+- `removeButtonOptions` *array*: the HTML options for `add` button. Can contains `class` and `label` keys
+- `data` *array*: array of values in case you use widget without model
 - `models` *array*: the list of models. Required in case you use `TabularInput` widget
 - `columns` *array*: the row columns configuration where you can set the following properties:
   - `name` *string*: input name. *Required options*
@@ -236,6 +240,27 @@ You can find more detail about this use case [here](docs/tabular_input.md)
 
 > Also you can find source code of examples [here](./docs/examples/)
 
+## How to customize buttons
+
+You can customize `add` and `remove` buttons via `addButtonOptions` and `removeButtonOptions`. Here is the simple example
+how you can use those options:
+
+```php
+
+    echo $form->field($model, 'emails')->widget(MultipleInput::className(), [
+        'limit' => 5,
+        'addButtonOptions' => [
+            'class' => 'btn btn-success',
+            'label' => 'add' // also you can use html code
+        ],
+        'removeButtonOptions' => [
+            'label' => 'remove'
+        ]
+    ])
+    ->label(false);
+
+```
+
 ## JavaScript events
 This widget has following events:
  - `afterInit`: triggered after initialization
diff --git a/src/MultipleInput.php b/src/MultipleInput.php
@@ -44,6 +44,16 @@ class MultipleInput extends InputWidget
      */
     public $attributeOptions = [];
 
+    /**
+     * @var array the HTML options for the `remove` button
+     */
+    public $removeButtonOptions;
+
+    /**
+     * @var array the HTML options for the `add` button
+     */
+    public $addButtonOptions;
+
 
     /**
      * Initialization.
@@ -90,23 +100,32 @@ protected function guessColumns()
      */
     public function run()
     {
-        $renderer = $this->createRenderer();
-        return $renderer->render();
+        return $this->createRenderer()->render();
     }
 
     /**
      * @return TableRenderer
      */
     private function createRenderer()
     {
-        return new TableRenderer([
+        $config = [
             'id'                => $this->options['id'],
             'columns'           => $this->columns,
             'limit'             => $this->limit,
             'attributeOptions'  => $this->attributeOptions,
             'data'              => $this->data,
             'columnClass'       => MultipleInputColumn::className(),
             'context'           => $this
-        ]);
+        ];
+
+        if (!is_null($this->removeButtonOptions)) {
+            $config['removeButtonOptions'] = $this->removeButtonOptions;
+        }
+
+        if (!is_null($this->addButtonOptions)) {
+            $config['addButtonOptions'] = $this->addButtonOptions;
+        }
+
+        return new TableRenderer($config);
     }
 }
diff --git a/src/TabularInput.php b/src/TabularInput.php
@@ -38,6 +38,16 @@ class TabularInput extends Widget
      */
     public $attributeOptions = [];
 
+    /**
+     * @var array the HTML options for the `remove` button
+     */
+    public $removeButtonOptions;
+
+    /**
+     * @var array the HTML options for the `add` button
+     */
+    public $addButtonOptions;
+
     /**
      * @var Model[]|ActiveRecord[]
      */
@@ -64,29 +74,37 @@ public function init()
         parent::init();
     }
 
-
     /**
      * Run widget.
      */
     public function run()
     {
-        $renderer = $this->createRenderer();
-        return $renderer->render();
+        return $this->createRenderer()->render();
     }
 
     /**
      * @return TableRenderer
      */
     private function createRenderer()
     {
-        return new TableRenderer([
+        $config = [
             'id'                => $this->options['id'],
             'columns'           => $this->columns,
             'limit'             => $this->limit,
             'attributeOptions'  => $this->attributeOptions,
             'data'              => $this->models,
             'columnClass'       => TabularColumn::className(),
             'context'           => $this
-        ]);
+        ];
+
+        if (!is_null($this->removeButtonOptions)) {
+            $config['removeButtonOptions'] = $this->removeButtonOptions;
+        }
+
+        if (!is_null($this->addButtonOptions)) {
+            $config['addButtonOptions'] = $this->addButtonOptions;
+        }
+
+        return new TableRenderer($config);
     }
 }
diff --git a/src/assets/src/js/jquery.multipleInput.js b/src/assets/src/js/jquery.multipleInput.js
@@ -53,8 +53,6 @@
         template: null,
         // string that collect js templates of widgets which uses in the columns
         jsTemplates: [],
-        // remove button css class
-        btnType: null,
         // how many row has to renders
         limit: 1
     };
@@ -133,8 +131,8 @@
             if (settings.limit != null && count >= settings.limit) {
                 return;
             }
-            var search = ['{multiple-index}', '{multiple-btn-type}', '{multiple-value}'],
-                replace = [data.currentIndex, settings.btnType, ''];
+            var search = ['{multiple-index}', '{multiple-value}'],
+                replace = [data.currentIndex, ''];
 
             for (var i in search) {
                 template = template.replaceAll(search[i], replace[i]);
diff --git a/src/assets/src/js/jquery.multipleInput.min.js b/src/assets/src/js/jquery.multipleInput.min.js
diff --git a/src/components/BaseRenderer.php b/src/components/BaseRenderer.php
@@ -9,6 +9,7 @@
 namespace unclead\widgets\components;
 
 use Yii;
+use yii\helpers\Html;
 use yii\base\InvalidConfigException;
 use yii\base\Model;
 use yii\base\NotSupportedException;
@@ -53,6 +54,16 @@ abstract class BaseRenderer extends Object
      */
     public $attributeOptions = [];
 
+    /**
+     * @var array the HTML options for the `remove` button
+     */
+    public $removeButtonOptions;
+
+    /**
+     * @var array the HTML options for the `add` button
+     */
+    public $addButtonOptions;
+
     /**
      * @var string
      */
@@ -82,6 +93,27 @@ public function init()
         if (!class_exists($this->columnClass)) {
             throw new InvalidConfigException('Column class "' . $this->columnClass. '" does not exist');
         }
+
+        $this->prepareButtonsOptions();
+    }
+
+    private function prepareButtonsOptions()
+    {
+        if (!isset($this->removeButtonOptions['class'])) {
+            $this->removeButtonOptions['class'] = 'btn btn-danger';
+        }
+
+        if (!isset($this->removeButtonOptions['label'])) {
+            $this->removeButtonOptions['label'] = Html::tag('i', null, ['class' => 'glyphicon glyphicon-remove']);
+        }
+
+        if (!isset($this->addButtonOptions['class'])) {
+            $this->addButtonOptions['class'] = 'btn btn-default';
+        }
+
+        if (!isset($this->addButtonOptions['label'])) {
+            $this->addButtonOptions['label'] = Html::tag('i', null, ['class' => 'glyphicon glyphicon-plus']);
+        }
     }
 
 
@@ -136,7 +168,6 @@ protected function registerClientScript()
                 'id'                => $this->id,
                 'template'          => $template,
                 'jsTemplates'       => $jsTemplates,
-                'btnType'           => 'btn-danger',
                 'limit'             => $this->limit,
                 'attributeOptions'  => $this->attributeOptions,
             ]
diff --git a/src/renderers/TableRenderer.php b/src/renderers/TableRenderer.php
@@ -21,9 +21,6 @@
  */
 class TableRenderer extends BaseRenderer
 {
-    const ACTION_ADD    = 'plus';
-    const ACTION_REMOVE = 'remove';
-
     /**
      * @return mixed
      */
@@ -206,28 +203,54 @@ public function renderCellContent($column, $index)
     private function renderActionColumn($index = null)
     {
         if (is_null($index)) {
-            $action = self::ACTION_REMOVE;
-            $type = '{multiple-btn-type}';
+            $button = $this->renderRemoveButton();
         } else {
-            $action = $index == 0 ? self::ACTION_ADD : self::ACTION_REMOVE;
-            $type = $index == 0 ? 'btn-default' : 'btn-danger';
+            $button = $index == 0 ? $this->renderAddButton() : $this->renderRemoveButton();
         }
 
-        $button = Button::widget(
-            [
-                'tagName' => 'div',
-                'encodeLabel' => false,
-                'label' => Html::tag('i', null, ['class' => 'glyphicon glyphicon-' . $action]),
-                'options' => [
-                    'class' => $type . ' multiple-input-list__btn btn js-input-' . $action,
-                ]
-            ]
-        );
         return Html::tag('td', $button, [
             'class' => 'list-cell__button',
         ]);
     }
 
+    private function renderAddButton()
+    {
+        $options = [
+            'class' => 'multiple-input-list__btn js-input-plus',
+        ];
+        Html::addCssClass($options, $this->addButtonOptions['class']);
+        return Button::widget(
+            [
+                'tagName'       => 'div',
+                'encodeLabel'   => false,
+                'label'         => $this->addButtonOptions['label'],
+                'options'       => $options
+            ]
+        );
+    }
+
+    /**
+     * Renders remove button.
+     *
+     * @return string
+     * @throws \Exception
+     */
+    private function renderRemoveButton()
+    {
+        $options = [
+            'class' => 'multiple-input-list__btn js-input-remove',
+        ];
+        Html::addCssClass($options, $this->removeButtonOptions['class']);
+        return Button::widget(
+            [
+                'tagName'       => 'div',
+                'encodeLabel'   => false,
+                'label'         => $this->removeButtonOptions['label'],
+                'options'       => $options
+            ]
+        );
+    }
+
     /**
      * Returns template for using in js.
      *
