Skip to content

Commit a25442f

Browse files
demogorgorndemogorgorn
authored
Merge pull request #15 from itexia/master
added button icons
2 parents 82c77a5 + 67e7366 commit a25442f

File tree

2 files changed

+99
-61
lines changed

2 files changed

+99
-61
lines changed

‎AjaxSubmitButton.php‎

Lines changed: 97 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<?php
2+
23
namespace demogorgorn\ajax;
34

45
use yii\base\Widget;
@@ -7,7 +8,8 @@
78
use yii\web\JsExpression;
89

910
/**
10-
* AjaxSubmitButton renders an ajax button which is very similar to ajaxSubmitButton from Yii1.
11+
* AjaxSubmitButton renders an ajax button which is very similar to
12+
* ajaxSubmitButton from Yii1.
1113
*
1214
* Example:
1315
*
@@ -18,7 +20,7 @@
1820
* 'data' => Country::getAllCountries(),
1921
* 'options' => [
2022
* 'id' => 'country_select',
21-
* 'multiple' => false,
23+
* 'multiple' => false,
2224
* 'placeholder' => 'Select country...',
2325
* 'class' => 'uk-width-medium-7-10'
2426
* ]
@@ -44,109 +46,120 @@
4446
*
4547
* @author Oleg Martemjanov <demogorgorn@gmail.com>
4648
*/
47-
4849
class AjaxSubmitButton extends Widget
4950
{
51+
52+
/**
53+
* Icon positions
54+
*/
55+
public const ICON_POSITION_LEFT = 'left';
56+
57+
public const ICON_POSITION_RIGHT = 'right';
58+
5059
public $ajaxOptions = [];
5160

5261
/**
53-
* @var array the HTML attributes for the widget container tag.
54-
*/
55-
public $options = [];
62+
* @var array the HTML attributes for the widget container tag.
63+
*/
64+
public $options = [];
65+
66+
/**
67+
* @var string the tag to use to render the button
68+
*/
69+
public $tagName = 'button';
70+
71+
/**
72+
* @var string the button label
73+
*/
74+
public $label = 'Button';
75+
76+
/**
77+
* @var string The button icon.
78+
*/
79+
public $icon;
80+
81+
/**
82+
* @var string Icon position.
83+
* Valid values are 'left', 'right'.
84+
*/
85+
public $iconPosition = self::ICON_POSITION_LEFT;
5686

5787
/**
58-
* @var string the tag to use to render the button
59-
*/
60-
public $tagName = 'button';
61-
/**
62-
* @var string the button label
63-
*/
64-
public $label = 'Button';
65-
/**
66-
* @var boolean whether the label should be HTML-encoded.
67-
*/
68-
public $encodeLabel = true;
88+
* @var boolean whether the label should be HTML-encoded.
89+
*/
90+
public $encodeLabel = true;
91+
6992
/**
7093
* @var string js object name.
7194
* it is unused when useWithActiveForm is enabled
7295
*/
7396
public $clickedButtonVarName = '_clickedButton';
97+
7498
/**
7599
* @var boolean whether the button should not be used with ActiveForm.
76-
* string the id of ActiveForm to use the button with
100+
* string the id of ActiveForm to use the button with
77101
*/
78102
public $useWithActiveForm = false;
79103

80104

81-
82-
/**
83-
* Initializes the widget.
84-
*/
85-
public function init()
86-
{
87-
parent::init();
88-
89-
if (!isset($this->options['id'])) {
90-
$this->options['id'] = $this->getId();
91-
}
92-
}
93-
94-
public function run()
105+
/**
106+
* Initializes the widget.
107+
*/
108+
public function init()
95109
{
96-
parent::run();
110+
parent::init();
97111

98-
echo Html::tag($this->tagName, $this->encodeLabel ? Html::encode($this->label) : $this->label, $this->options);
99-
100-
if (!empty($this->ajaxOptions)) {
101-
102-
if ($this->useWithActiveForm !== false)
103-
$this->registerAjaxFormScript();
104-
else
105-
$this->registerAjaxScript();
112+
if (!isset($this->options['id'])) {
113+
$this->options['id'] = $this->getId();
106114
}
107115
}
108116

109-
protected function registerAjaxScript()
117+
public function run()
110118
{
111-
$view = $this->getView();
119+
parent::run();
112120

113-
if(!isset($this->ajaxOptions['type'])) {
114-
$this->ajaxOptions['type'] = new JsExpression('$(this).parents("form").attr("method")');
115-
}
121+
$label = $this->encodeLabel ? Html::encode($this->label) : $this->label;
116122

117-
if(!isset($this->ajaxOptions['url'])) {
118-
$this->ajaxOptions['url'] = new JsExpression('$(this).parents("form").attr("action")');
123+
if ($this->icon !== null) {
124+
$icon = Html::tag('i', '', ['class' => $this->icon]);
125+
$label = strcasecmp($this->iconPosition,
126+
self::ICON_POSITION_LEFT) === 0 ? sprintf('%s %s', $icon,
127+
$label) : sprintf('%s %s', $label, $icon);
119128
}
120129

121-
if(!isset($this->ajaxOptions['data']) && isset($this->ajaxOptions['type']))
122-
$this->ajaxOptions['data'] = new JsExpression('$(this).parents("form").serialize()');
130+
echo Html::tag($this->tagName,
131+
$label,
132+
$this->options);
123133

124-
$this->ajaxOptions= Json::encode($this->ajaxOptions);
125-
$view->registerJs("$('#".$this->options['id']."').unbind('click').click(function() {
126-
" . (null !== $this->clickedButtonVarName ? "var {$this->clickedButtonVarName} = this;" : "") . "
127-
$.ajax(" . $this->ajaxOptions . ");
128-
return false;
129-
});");
134+
if (!empty($this->ajaxOptions)) {
135+
136+
if ($this->useWithActiveForm !== false) {
137+
$this->registerAjaxFormScript();
138+
} else {
139+
$this->registerAjaxScript();
140+
}
141+
}
130142
}
131143

132144
protected function registerAjaxFormScript()
133145
{
134146
$view = $this->getView();
135147

136-
if(!isset($this->ajaxOptions['type'])) {
148+
if (!isset($this->ajaxOptions['type'])) {
137149
$this->ajaxOptions['type'] = new JsExpression('$(this).attr("method")');
138150
}
139151

140-
if(!isset($this->ajaxOptions['url'])) {
152+
if (!isset($this->ajaxOptions['url'])) {
141153
$this->ajaxOptions['url'] = new JsExpression('$(this).attr("action")');
142154
}
143155

144-
if(!isset($this->ajaxOptions['data']) && isset($this->ajaxOptions['type']))
156+
if (!isset($this->ajaxOptions['data']) && isset($this->ajaxOptions['type'])) {
145157
$this->ajaxOptions['data'] = new JsExpression('$(this).serialize()');
158+
}
146159

147-
$this->ajaxOptions= Json::encode($this->ajaxOptions);
160+
$this->ajaxOptions = Json::encode($this->ajaxOptions);
148161

149-
$js = <<<SEL
162+
$js = <<<SEL
150163
$(document).unbind('beforeSubmit.{$this->useWithActiveForm}').on('beforeSubmit.{$this->useWithActiveForm}', "#{$this->useWithActiveForm}", function () {
151164
if ($(this).find('.has-error').length < 1) {
152165
$.ajax({$this->ajaxOptions});
@@ -158,7 +171,30 @@ protected function registerAjaxFormScript()
158171
$view->registerJs($js);
159172

160173

174+
}
175+
176+
protected function registerAjaxScript()
177+
{
178+
$view = $this->getView();
161179

180+
if (!isset($this->ajaxOptions['type'])) {
181+
$this->ajaxOptions['type'] = new JsExpression('$(this).parents("form").attr("method")');
182+
}
183+
184+
if (!isset($this->ajaxOptions['url'])) {
185+
$this->ajaxOptions['url'] = new JsExpression('$(this).parents("form").attr("action")');
186+
}
187+
188+
if (!isset($this->ajaxOptions['data']) && isset($this->ajaxOptions['type'])) {
189+
$this->ajaxOptions['data'] = new JsExpression('$(this).parents("form").serialize()');
190+
}
191+
192+
$this->ajaxOptions = Json::encode($this->ajaxOptions);
193+
$view->registerJs("$('#" . $this->options['id'] . "').unbind('click').click(function() {
194+
" . (null !== $this->clickedButtonVarName ? "var {$this->clickedButtonVarName} = this;" : "") . "
195+
$.ajax(" . $this->ajaxOptions . ");
196+
return false;
197+
});");
162198
}
163199

164200
}

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,8 @@ ajaxOptions | ajax options | Array
140140
options | HTML attributes and other options of the widget's container tag | Array
141141
tagName | the tag to use to render the button (by default is 'button'. You can specify, for example, 'a' tag) | String
142142
label | button's label | String
143+
icon | button's icon | String (e.g. 'fa fa-download')
144+
iconPosition | button icon position | const (ICON_POSITION_LEFT or ICON_POSITION_RIGHT)
143145
encodeLabel | whether the label should be HTML-encoded | Boolean
144146
clickedButtonVarName | js object name. It is unused when useWithActiveForm is enabled | String
145147
useWithActiveForm | whether the button should not be used with ActiveForm. the id of ActiveForm to use the button with | Boolean / String

0 commit comments

Comments
 (0)