Yii2の削除確認ダイアログをかっこ良くする #Yii

せっかく最初からBootstrapなんだし、削除確認などに使われてるあのOS標準ダイアログなJSの confirm() ももっとかっこ良くしたい。というわけで Bootbox であれをオーバーライドします。

フレームワークの中から探しだした yii.js にはこう書いてあります。

/**
 * Displays a confirmation dialog.
 * The default implementation simply displays a js confirmation dialog.
 * You may override this by setting `yii.confirm`.
 * @param message the confirmation message.
 * @param ok a callback to be called when the user confirms the message
 * @param cancel a callback to be called when the user cancels the confirmation
 */
confirm: function (message, ok, cancel) {
    if (confirm(message)) {
        !ok || ok();
    } else {
        !cancel || cancel();
    }
},

おや

You may override this by setting yii.confirm

すばらしいですね。やってみましょう。

composer.json に bower の bootbox を追加。ご存知のとおり、Yii2 では Composer を使って、Packagist からだけでなく、bower や npm からでもいろいろインストールできます。

{
    "require": {
        "php": ">=5.4.0",
        ...略
        "bower-asset/bootbox": "~4.3.0"
    },
}

別のプロジェクトでも使いまわせるようにBootbox用のアセットを定義し、

<?php
namespace app\assets;

use Yii;
use yii\web\AssetBundle;

class BootboxAsset extends AssetBundle
{
    public $sourcePath = '@vendor/bower/bootbox';
    public $js = [
        'bootbox.js',
    ];
}

つねにロードしておいて欲しいのでそれを app\assets\AppAsset に追加。

namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    // ... 略
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'app\assets\BootboxAsset', // ここ
    ];
}

ここまでで、基本、全てのページに bootbox.js が入ります。

いよいよ標準の確認ダイアログのオーバーライドです。たとえばこういう実装でいかがでしょう。

class BootboxAsset extends AssetBundle
{
    // ... 略
    public static function overrideSystemConfirm()
    {
        Yii::$app->view->registerJs('
            yii.confirm = function(message, ok, cancel) {
                bootbox.confirm(message, function(result) {
                    if (result) { !ok || ok(); } else { !cancel || cancel(); }
                });
            }
        ');
    }
}

というような、JSを登録できるメソッドを作っておいて、views/layouts/main.php あたりのこのへんからこう。

<?php
// ... 略
AppAsset::register($this);
BootboxAsset::overrideSystemConfirm(); // これ (もしかしたら $this 渡したほうが...?)
?>
<!DOCTYPE html>

よーし!

ようするに、単に、yii.confirm を自分の関数に置き換えてるだけです。が、Yiiのアセットマネージャーを使うと、いい感じの場所で透過的にそうなってくれるので、何も気にしなくてもよくてありがたいですね。

おや、これが可能になったときのコミットにどこかで見た名前が。