README

Renders a SweetAlert2 widget for Yii2.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require dominus77/yii2-sweetalert2-widget "^2.0"

or add

"dominus77/yii2-sweetalert2-widget": "^2.0"

to the require section of your composer.json file.

Usage

Once the extension is installed, simply use it in your code by:

Flash message

View:

<?php \dominus77\sweetalert2\Alert::widget(['useSessionFlash' => true]); ?>

Controller:

A basic message

Yii::$app->session->setFlash('message', 'Any fool can use a computer');

A title with a text under

Yii::$app->session->setFlash(Alert::TYPE_QUESTION, [ 'title' => 'The Internet?', 'text' => 'That thing is still around?', ]);

A modal with a title, an error icon, a text, and a footer

Yii::$app->session->setFlash(Alert::TYPE_ERROR, [ 'title' => 'Oops...', 'text' => 'Something went wrong!', 'footer' => '<a href="">Why do I have this issue?</a>' ]);

A modal window with a long content inside:

Yii::$app->session->setFlash('image1', [ 'imageUrl' => 'https://placeholder.pics/svg/300x1500', 'imageHeight' => 1500, 'imageAlt' => 'A tall image' ]);

Custom HTML description and buttons with ARIA labels

Yii::$app->session->setFlash('customHtml', [ 'title' => '<strong>HTML <u>example</u></strong>', 'icon' => Alert::TYPE_INFO, 'html' => '  You can use <b>bold text</b>,   <a href="//sweetalert2.github.io">links</a>  and other HTML tags  ', 'showCloseButton' => true, 'showCancelButton' => true, 'focusConfirm' => false, 'confirmButtonText' => '<i class="fa fa-thumbs-up"></i> Great!', 'confirmButtonAriaLabel' => 'Thumbs up, great!', 'cancelButtonText' => '<i class="fa fa-thumbs-down"></i>', 'cancelButtonAriaLabel' => 'Thumbs down', ]);

A dialog with three buttons

Yii::$app->session->setFlash('dialog', [ 'title' => 'Do you want to save the changes?', 'showDenyButton' => true, 'showCancelButton' => true, 'confirmButtonText' => 'Save', 'denyButtonText' => "Don't save", 'callback' => new \yii\web\JsExpression("  (result) => {  if (result.isConfirmed) {  Swal.fire('Saved!', '', 'success');  } else if (result.isDenied) {  Swal.fire('Changes are not saved', '', 'info');  }  }  ") ]);

A custom positioned dialog

Yii::$app->session->setFlash('position', [ 'position' => 'top-end', 'icon' => Alert::TYPE_SUCCESS, 'title' => 'Your work has been saved', 'showConfirmButton' => false, 'timer' => 1500 ]);

Custom animation with Animate.css

Set to View:

<?php \dominus77\sweetalert2\Alert::widget([ 'useSessionFlash' => true, 'customAnimate' => true ]); ?>

also

Yii::$app->session->setFlash('customAnimate', [ 'title' => 'Custom animation with Animate.css', 'showClass' => [ 'popup' => 'animate__animated animate__fadeInDown' ], 'hideClass' => [ 'popup' => 'animate__animated animate__fadeOutUp' ], ]);

A confirm dialog, with a function attached to the "Confirm"-button

Yii::$app->session->setFlash('confirm', [ 'title' => 'Are you sure?', 'text' => "You won't be able to revert this!", 'icon' => Alert::TYPE_WARNING, 'showCancelButton' => true, 'confirmButtonColor' => '#3085d6', 'cancelButtonColor' => '#d33', 'confirmButtonText' => 'Yes, delete it!', 'callback' => new \yii\web\JsExpression("  (result) => {  if (result.isConfirmed) {  Swal.fire(  'Deleted!',  'Your file has been deleted.',  'success'  );  }  }  ") ]);

... and by passing a parameter, you can execute something else for "Cancel"

Yii::$app->session->setFlash('confirm2', [ 'title' => 'Are you sure?', 'text' => "You won't be able to revert this!", 'icon' => Alert::TYPE_WARNING, 'showCancelButton' => true, 'confirmButtonText' => 'Yes, delete it!', 'cancelButtonText' => 'No, cancel!', 'reverseButtons' => true, 'mixinOptions' => [ 'customClass' => [ 'confirmButton' => 'btn btn-success', 'cancelButton' => 'btn btn-danger', ], 'buttonsStyling' => false ], 'callback' => new \yii\web\JsExpression("  (result) => {  if (result.isConfirmed) {  SwalQueue.fire(  'Deleted!',  'Your file has been deleted.',  'success'  );  } else if (result.dismiss === Swal.DismissReason.cancel) {  SwalQueue.fire(  'Cancelled',  'Your imaginary file is safe :)',  'error'  );  }  }  ") ]);

A message with a custom image

Yii::$app->session->setFlash('image', [ 'title' => 'Sweet!', 'text' => 'Modal with a custom image.', 'imageUrl' => 'https://unsplash.it/400/200', 'imageWidth' => 400, 'imageHeight' => 200, 'imageAlt' => 'Custom image', ]);

A message with custom width, padding, background and animated Nyan Cat

Yii::$app->session->setFlash('NyanCat', [ 'title' => 'Custom width, padding, color, background.', 'width' => 600, 'padding' => '3em', 'color' => '#716add', 'background' => '#fff url(/images/trees.png)', 'backdrop' => "rgba(0,0,123,0.4) url('/images/nyan-cat.gif') left top no-repeat", ]);

A message with auto close timer

Yii::$app->session->setFlash('key1', [ 'title' => 'Auto close alert!', 'html' => 'I will close in <b></b> milliseconds.', 'timer' => 2000, 'timerProgressBar' => true, 'didOpen' => new \yii\web\JsExpression("  () => {  Swal.showLoading();  const b = Swal.getHtmlContainer().querySelector('b');  timerInterval = setInterval(() => {  b.textContent = Swal.getTimerLeft();  }, 100)  }  "), 'willClose' => new \yii\web\JsExpression("  () => {   clearInterval(timerInterval);  }  "), 'callback' => new \yii\web\JsExpression("  (result) => {  if (result.dismiss === Swal.DismissReason.timer) {  console.log('I was closed by the timer');  }  }  "), ]);

Right-to-left support for Arabic, Persian, Hebrew, and other RTL languages

Yii::$app->session->setFlash('rlt', [ 'title' => 'هل تريد الاستمرار؟', 'icon' => Alert::TYPE_QUESTION, 'iconHtml' => '؟', 'confirmButtonText' => 'نعم', 'cancelButtonText' => 'لا', 'showCancelButton' => true, 'showCloseButton' => true, ]);

AJAX request example

Yii::$app->session->setFlash('ajax', [ 'title' => 'Submit your Github username', 'input' => 'text', 'inputAttributes' => [ 'autocapitalize' => 'off' ], 'showCancelButton' => true, 'confirmButtonText' => 'Look up', 'showLoaderOnConfirm' => true, 'backdrop' => true, 'preConfirm' => new \yii\web\JsExpression("  (login) => {  return fetch('//api.github.com/users/' + login)  .then(response => {  if (!response.ok) {  throw new Error(response.statusText);  }  return response.json();  })  .catch(error => {  Swal.showValidationMessage(  'Request failed: ' + error  );  })  }  "), 'allowOutsideClick' => new \yii\web\JsExpression("  () => !Swal.isLoading()  "), 'callback' => new \yii\web\JsExpression("  (result) => {  if (result.isConfirmed) {  Swal.fire({  title: result.value.login + '\'s avatar',  imageUrl: result.value.avatar_url  });  }  }  ") ]);

Mixin example

Yii::$app->session->setFlash('toast', [ 'icon' => Alert::TYPE_SUCCESS, 'title' => 'Signed in successfully', 'mixinOptions' => [ 'toast' => true, 'position' => 'top-end', 'showConfirmButton' => false, 'timer' => 3000, 'timerProgressBar' => true, 'didOpen' => new \yii\web\JsExpression("  (toast) => {  toast.addEventListener('mouseenter', Swal.stopTimer);  toast.addEventListener('mouseleave', Swal.resumeTimer);  }  ") ], ]);

Multiple

Yii::$app->session->setFlash('multiple', [ 'items' => [ [ 'icon' => Alert::TYPE_WARNING, 'title' => 'Your title 1', 'text' => 'Your message 1', 'confirmButtonText' => 'Done 1!', ], [ 'icon' => Alert::TYPE_SUCCESS, 'title' => 'Your title 2', 'text' => 'Your message 2', 'confirmButtonText' => 'Done 2!', ] ] ]);

or

Yii::$app->session->setFlash('multiple2', [ 'mixinOptions' => [ 'toast' => true, 'position' => 'top-right', 'showConfirmButton' => false, 'timer' => 1500, 'timerProgressBar' => true, ], 'items' => [ [ 'icon' => Alert::TYPE_INFO, 'title' => 'Your title 1', 'text' => 'Your message 1', 'callback' => new \yii\web\JsExpression("  (result) => {console.log('Close Your title 1')}  "), ], [ 'icon' => Alert::TYPE_SUCCESS, 'title' => 'Your title 2', 'text' => 'Your message 2', 'callback' => new \yii\web\JsExpression("  (result) => {console.log('Close Your title 2')}  "), ], [ 'icon' => Alert::TYPE_SUCCESS, 'title' => 'Your title 3', 'text' => 'Your message 3', 'callback' => new \yii\web\JsExpression("  (result) => {console.log('Close Your title 3')}  "), ] ] ]);

Render Widget

View:

<?php use dominus77\sweetalert2\Alert;

A basic message

<?php Alert::widget([ 'options' => [ 'Any fool can use a computer' ], ]); ?>

A title with a text under

<?php Alert::widget([ 'options' => [ 'The Internet?', 'That thing is still around?', Alert::TYPE_QUESTION ] ]); ?>

A success message!

<?php Alert::widget([ 'options' => [ 'Good job!', 'You clicked the button!', Alert::TYPE_SUCCESS ] ]); ?>

A message with auto close timer

<?php Alert::widget([ 'options' => [ 'title' => 'Auto close alert!', 'text' => 'I will close in 2 seconds.', 'timer' => 2000, ], 'callback' => new \yii\web\JsExpression("  (result) => {  if (result.dismiss === 'timer') {  console.log('I was closed by the timer')  }  }  "), ]); ?>

Custom HTML description and buttons

<?php Alert::widget([ 'options' => [ 'title' => '<i>HTML</i> <u>example</u>', 'icon' => Alert::TYPE_INFO, 'html' => 'You can use <b>bold text</b>,' . '<a href="//github.com">links</a> ' . 'and other HTML tags', 'showCloseButton' => true, 'showCancelButton' => true, 'confirmButtonText' => '<i class="fa fa-thumbs-up"></i> Great!', 'cancelButtonText' => '<i class="fa fa-thumbs-down"></i>', ] ]); ?>

Custom animation with Animate.css

Example:

<?php Alert::widget([ 'customAnimate' => true, 'options' => [ 'title' => 'Custom animation with Animate.css', 'showClass' => [ 'popup' => 'animate__animated animate__fadeInDown' ], 'hideClass' => [ 'popup' => 'animate__animated animate__fadeOutUp' ] ] ]); ?>

A warning message, with a function attached to the "Confirm"-button...

<?php Alert::widget([ 'options' => [ 'title' => 'Are you sure?', 'text' => "You won't be able to revert this!", 'icon' => Alert::TYPE_WARNING, 'showCancelButton' => true, 'confirmButtonColor' => '#3085d6', 'cancelButtonColor' => '#d33', 'confirmButtonText' => 'Yes, delete it!', ], 'callback' => new \yii\web\JsExpression("  (result) => {  if(result.value === true){  Swal.fire('Deleted!','Your file has been deleted.','success');  }  }  "), ]); ?>

... and by passing a parameter, you can execute something else for "Cancel".

<?php Alert::widget([ 'mixinOptions' => [ 'customClass' => [ 'confirmButton' => 'btn btn-success', 'cancelButton' => 'btn btn-danger', ], 'buttonsStyling' => false ], 'options' => [ 'title' => 'Are you sure?', 'text' => "You won't be able to revert this!", 'icon' => Alert::TYPE_WARNING, 'showCancelButton' => true, 'confirmButtonColor' => '#3085d6', 'cancelButtonColor' => '#d33', 'confirmButtonText' => 'Yes, delete it!', 'cancelButtonText' => 'No, cancel!', ], 'callback' => new \yii\web\JsExpression("  (result) => {  if(result.value) {  Swal.fire('Deleted!', 'Your file has been deleted.', 'success');  }   if (result.dismiss === 'cancel') {  Swal.fire(  'Cancelled',  'Your imaginary file is safe :)',  'error'  );  }  }  "), ]); ?>

Theme

View:

use dominus77\sweetalert2\assets\ThemeAsset; /** @var yii\web\View $this */ ThemeAsset::register($this, ThemeAsset::THEME_DARK);

Testing

$ ./vendor/bin/phpunit 

More Information

Please, check the SweetAlert2

License

The MIT License (MIT). Please see License File for more information.