Skip to content

Commit

Permalink
Merge pull request #15 from itexia/master
Browse files Browse the repository at this point in the history 
added button icons
  • Loading branch information
@demogorgorn
demogorgorn committed Jan 29, 2018
2 parents 82c77a5 + 67e7366 commit a25442f
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 61 deletions.
158 changes: 97 additions & 61 deletions AjaxSubmitButton.php
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<?php

namespace demogorgorn\ajax;

use yii\base\Widget;
Expand All @@ -7,7 +8,8 @@
use yii\web\JsExpression;

/**
* AjaxSubmitButton renders an ajax button which is very similar to ajaxSubmitButton from Yii1.
* AjaxSubmitButton renders an ajax button which is very similar to
* ajaxSubmitButton from Yii1.
*
* Example:
*
Expand All @@ -18,7 +20,7 @@
* 'data' => Country::getAllCountries(),
* 'options' => [
* 'id' => 'country_select',
* 'multiple' => false,
* 'multiple' => false,
* 'placeholder' => 'Select country...',
* 'class' => 'uk-width-medium-7-10'
* ]
Expand All @@ -44,109 +46,120 @@
*
* @author Oleg Martemjanov <demogorgorn@gmail.com>
*/

class AjaxSubmitButton extends Widget
{

/**
* Icon positions
*/
public const ICON_POSITION_LEFT = 'left';

public const ICON_POSITION_RIGHT = 'right';

public $ajaxOptions = [];

/**
* @var array the HTML attributes for the widget container tag.
*/
public $options = [];
* @var array the HTML attributes for the widget container tag.
*/
public $options = [];

/**
* @var string the tag to use to render the button
*/
public $tagName = 'button';

/**
* @var string the button label
*/
public $label = 'Button';

/**
* @var string The button icon.
*/
public $icon;

/**
* @var string Icon position.
* Valid values are 'left', 'right'.
*/
public $iconPosition = self::ICON_POSITION_LEFT;

/**
* @var string the tag to use to render the button
*/
public $tagName = 'button';
/**
* @var string the button label
*/
public $label = 'Button';
/**
* @var boolean whether the label should be HTML-encoded.
*/
public $encodeLabel = true;
* @var boolean whether the label should be HTML-encoded.
*/
public $encodeLabel = true;

/**
* @var string js object name.
* it is unused when useWithActiveForm is enabled
*/
public $clickedButtonVarName = '_clickedButton';

/**
* @var boolean whether the button should not be used with ActiveForm.
* string the id of ActiveForm to use the button with
* string the id of ActiveForm to use the button with
*/
public $useWithActiveForm = false;



/**
* Initializes the widget.
*/
public function init()
{
parent::init();

if (!isset($this->options['id'])) {
$this->options['id'] = $this->getId();
}
}

public function run()
/**
* Initializes the widget.
*/
public function init()
{
parent::run();
parent::init();

echo Html::tag($this->tagName, $this->encodeLabel ? Html::encode($this->label) : $this->label, $this->options);

if (!empty($this->ajaxOptions)) {

if ($this->useWithActiveForm !== false)
$this->registerAjaxFormScript();
else
$this->registerAjaxScript();
if (!isset($this->options['id'])) {
$this->options['id'] = $this->getId();
}
}

protected function registerAjaxScript()
public function run()
{
$view = $this->getView();
parent::run();

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

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

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

$this->ajaxOptions= Json::encode($this->ajaxOptions);
$view->registerJs("$('#".$this->options['id']."').unbind('click').click(function() {
" . (null !== $this->clickedButtonVarName ? "var {$this->clickedButtonVarName} = this;" : "") . "
$.ajax(" . $this->ajaxOptions . ");
return false;
});");
if (!empty($this->ajaxOptions)) {

if ($this->useWithActiveForm !== false) {
$this->registerAjaxFormScript();
} else {
$this->registerAjaxScript();
}
}
}

protected function registerAjaxFormScript()
{
$view = $this->getView();

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

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

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

$this->ajaxOptions= Json::encode($this->ajaxOptions);
$this->ajaxOptions = Json::encode($this->ajaxOptions);

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


}

protected function registerAjaxScript()
{
$view = $this->getView();

if (!isset($this->ajaxOptions['type'])) {
$this->ajaxOptions['type'] = new JsExpression('$(this).parents("form").attr("method")');
}

if (!isset($this->ajaxOptions['url'])) {
$this->ajaxOptions['url'] = new JsExpression('$(this).parents("form").attr("action")');
}

if (!isset($this->ajaxOptions['data']) && isset($this->ajaxOptions['type'])) {
$this->ajaxOptions['data'] = new JsExpression('$(this).parents("form").serialize()');
}

$this->ajaxOptions = Json::encode($this->ajaxOptions);
$view->registerJs("$('#" . $this->options['id'] . "').unbind('click').click(function() {
" . (null !== $this->clickedButtonVarName ? "var {$this->clickedButtonVarName} = this;" : "") . "
$.ajax(" . $this->ajaxOptions . ");
return false;
});");
}

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

0 comments on commit a25442f

Please sign in to comment.