diff --git a/README.md b/README.md index 352a01f..f71654e 100644 --- a/README.md +++ b/README.md @@ -67,17 +67,61 @@ public function actionCreate() ### View ```php -use lo\widgets\modal\Modal; +use lo\widgets\modal\AjaxModal; -Modal::begin([ +echo AjaxModal::widget([ 'id' => 'createCompany', + 'header' => 'Create Company', + 'toggleButton' => [ + 'label' => 'New Company', + 'class' => 'btn btn-primary pull-right' + ], 'url' => Url::to(['/partner/default/create']), // Ajax view with form to load 'ajaxSubmit' => true, // Submit the contained form as ajax, true by default // ... any other yii2 bootstrap modal option you need ]); -Modal::end(); ``` +## Usage in grid + +### Index View - Create +```php +use lo\widgets\modal\AjaxModal; + +echo AjaxModal::widget([ + 'id' => 'createCompany', + 'header' => 'Create Company', + 'toggleButton' => [ + 'label' => 'New Company', + 'class' => 'btn btn-primary pull-right' + ], + 'url' => Url::to(['/partner/default/create']), // Ajax view with form to load + 'ajaxSubmit' => true, // Submit the contained form as ajax, true by default + + 'options' => ['class' => 'header-primary'], + 'autoClose' => true, + 'pjaxContainer' => '#grid-company-pjax' + +]); +``` + +### Index View - Update +```php +use lo\widgets\modal\AjaxModal; + +echo AjaxModal::widget([ + 'id' => 'updateCompany', + 'selector' => 'a.btn' // all buttons in grid view with href attribute + 'ajaxSubmit' => true, // Submit the contained form as ajax, true by default + + 'options' => ['class' => 'header-primary'], + 'autoClose' => true, + 'pjaxContainer' => '#grid-company-pjax' + +]); +``` + + ## Plugin Events On top if the basic twitter bootstrap modal events the following events are triggered diff --git a/composer.json b/composer.json index 0ec4107..adc5e57 100644 --- a/composer.json +++ b/composer.json @@ -4,9 +4,11 @@ "keywords": [ "yii2", "bootstrap", - "modal" + "modal", + "ajax-modal" ], "homepage": "https://github.com/loveorigami/yii2-modal-ajax", + "version": "2.0", "type": "yii2-extension", "license": "MIT", "authors": [ diff --git a/src/AjaxModal.php b/src/AjaxModal.php new file mode 100644 index 0000000..05247d6 --- /dev/null +++ b/src/AjaxModal.php @@ -0,0 +1,175 @@ + + */ +class AjaxModal extends Modal +{ + const MODE_SINGLE = 'id'; + const MODE_MULTI = 'multi'; + + /** + * The selector to get url request when modal is opened for multy mode + * @var string + */ + public $selector; + + /** + * The url to request when modal is opened for single mode + * @var string + */ + public $url; + + /** + * reload pjax container after ajaxSubmit + * @var string + */ + public $pjaxContainer; + + /** + * Submit the form via ajax + * @var boolean + */ + public $ajaxSubmit = true; + + /** + * Submit the form via ajax + * @var boolean + */ + public $autoClose = false; + + /** + * @var string + */ + protected $mode = self::MODE_SINGLE; + + /** + * @inheritdocs + */ + public function init() + { + parent::init(); + if (!$this->url && !$this->selector) { + throw new InvalidConfigException('Not specified property "Url" or "Selector"'); + } + + if ($this->selector) { + $this->mode = self::MODE_MULTI; + } + } + + /** + * @inheritdocs + */ + public function run() + { + parent::run(); + /** @var View */ + $view = $this->getView(); + $id = $this->options['id']; + + AjaxModalAsset::register($view); + + switch ($this->mode) { + case self::MODE_SINGLE: + $this->registerSingleModal($id, $view); + break; + + case self::MODE_MULTI: + $this->registerMultyModal($id, $view); + break; + } + + $this->registerAutoClose($id, $view); + $this->registerPjaxReload($id, $view); + } + + /** + * @param $id + * @param View $view + */ + protected function registerSingleModal($id, $view) + { + $url = is_array($this->url) ? Url::to($this->url) : $this->url; + + $view->registerJs(" + jQuery('#$id').kbModalAjax({ + url: '$url', + ajaxSubmit: $this->ajaxSubmit + }); + "); + } + + /** + * @param $id + * @param View $view + */ + protected function registerMultyModal($id, $view) + { + $view->registerJs(" + jQuery('body').on('click', '$this->selector', function(e) { + e.preventDefault(); + $(this).attr('data-toggle', 'modal'); + $(this).attr('data-target', '#$id'); + + var bs_url = $(this).attr('href'); + var bs_title = $(this).attr('title'); + + jQuery('#$id').find('.modal-header').html(bs_title); + + jQuery('#$id').kbModalAjax({ + url: bs_url, + ajaxSubmit: $this->ajaxSubmit + }); + }); + "); + } + + /** + * @param $id + * @param View $view + */ + protected function registerAutoClose($id, $view) + { + if ($this->autoClose) { + $view->registerJs(" + jQuery('#$id').on('kbModalSubmit', function(event, data, status, xhr) { + if(status){ + $(this).modal('toggle'); + $.pjax.reload({ + container : '#grid-lo-modules-email-models-emailcat-pjax' + }); + } + }); + "); + } + } + + /** + * @param $id + * @param View $view + */ + protected function registerPjaxReload($id, $view) + { + if ($this->pjaxContainer) { + $view->registerJs(" + jQuery('#$id').on('kbModalSubmit', function(event, data, status, xhr) { + if(status){ + $.pjax.reload({ + container : '$this->pjaxContainer' + }); + } + }); + "); + } + } +} diff --git a/src/AjaxModalAsset.php b/src/AjaxModalAsset.php new file mode 100644 index 0000000..b9f2970 --- /dev/null +++ b/src/AjaxModalAsset.php @@ -0,0 +1,43 @@ + + */ +class AjaxModalAsset extends AssetBundle +{ + /** + * @inheritdoc + */ + public $depends = [ + 'yii\bootstrap\BootstrapAsset', + ]; + + /** + * @inheritdoc + */ + public $js = [ + 'js/kb-modal-ajax.js', + ]; + + /** + * @inheritdoc + */ + public $css = [ + 'css/modal-colors.css', + ]; + + /** + * @inheritdoc + */ + public function init() + { + $this->sourcePath = __DIR__ . "/assets"; + parent::init(); + } +}