yii2-sweetalert2-widget

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('//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.

Name		Name	Last commit message	Last commit date
Latest commit History 186 Commits
.github		.github
src		src
tests/functional		tests/functional
.gitattributes		.gitattributes
.scrutinizer.yml		.scrutinizer.yml
.travis.yml		.travis.yml
LICENSE.md		LICENSE.md
README.md		README.md
composer.json		composer.json
phpunit.xml.dist		phpunit.xml.dist
swal2-logo.png		swal2-logo.png

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

yii2-sweetalert2-widget

Installation

Usage

Flash message

Render Widget

Theme

Testing

More Information

License

About

Releases

Contributors 3

Languages

License

Dominus77/yii2-sweetalert2-widget

Folders and files

Latest commit

History

Repository files navigation

yii2-sweetalert2-widget

Installation

Usage

Flash message

Render Widget

Theme

Testing

More Information

License

About

Topics

Resources

License

Stars

Watchers

Forks

Releases

Contributors 3

Languages