yii2mod/yii2-sweet-alert

Alert widget based on SweetAlert extension {@link http://tristanedwards.me/sweetalert)

Installs: 132 126

Dependents: 3

Suggesters: 0

Security: 0

Stars: 43

Watchers: 8

Forks: 18

Open Issues: 4

Type:yii2-extension

1.3 2017-09-12 08:35 UTC

This package is not auto-updated.

Last update: 2024-11-09 17:50:47 UTC


README

Yii2 Alert Widget


Alert widget based on SweetAlert

Latest Stable Version Total Downloads License Build Status

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist yii2mod/yii2-sweet-alert "*"

or add

"yii2mod/yii2-sweet-alert": "*"

to the require section of your composer.json.

Usage

For render the message from session flash you can use the following code:

  1. Set the message in your action, for example:
Yii::$app->session->setFlash('success', 'This is the message');
  1. Simply add widget to your page as follows:
echo Alert::widget();

For render the custom message you can use the following code:

// A replacement for the "prompt" function

echo \yii2mod\alert\Alert::widget([
    'useSessionFlash' => false,
    'options' => [
        'timer' => null,
        'type' => \yii2mod\alert\Alert::TYPE_INPUT,
        'title' => 'An input!',
        'text' => "Write something interesting",
        'confirmButtonText' => "Yes, delete it!",
        'closeOnConfirm' => false,
        'showCancelButton' => true,
        'animation' => "slide-from-top",
        'inputPlaceholder' => "Write something"
    ],
    'callback' => new \yii\web\JsExpression(' function(inputValue) { 
                if (inputValue === false) return false;      
                if (inputValue === "") { 
                    swal.showInputError("You need to write something!");     
                    return false;   
                }      
                swal("Nice!", "You wrote: " + inputValue, "success"); 
    }')
]);

You can also change the theme of SweetAlert!

To change the theme, you can configure the assetManager array in your application configuration:

// twitter theme

'assetManager' => [
    'bundles' => [
        'yii2mod\alert\AlertAsset' => [
            'css' => [
                'dist/sweetalert.css',
                'themes/twitter/twitter.css',
            ]
        ],
    ],
]

You can override the Yii2 default data-confirm popup by the following code:

The basics are to include the asset, then add this JS:

/**
 * Override the default yii confirm dialog. This function is
 * called by yii when a confirmation is requested.
 *
 * @param message the message to display
 * @param okCallback triggered when confirmation is true
 * @param cancelCallback callback triggered when cancelled
 */
yii.confirm = function (message, okCallback, cancelCallback) {
    swal({
        title: message,
        type: 'warning',
        showCancelButton: true,
        closeOnConfirm: true,
        allowOutsideClick: true
    }, okCallback);
};

Alert Options

You can find them on the options page