IgbDockManager – ペインを閉じる際に確認ダイアログを表示するには

IgbDockManager でペインの閉じるボタンが押された際に確認ダイアログを表示し、ユーザーがキャンセルした場合は閉じる動作を中止したい場合があります。これは PaneCloseScript プロパティに、閉じる操作をフックする JavaScript を登録することで実現できます。

IgbDockManager の設定

IgbDockManager の PaneCloseScript プロパティに、後述の igRegisterScript で登録するスクリプト名（ここでは paneClose）を指定します。ペインの閉じるボタンが押されると、このスクリプトが呼び出されます。

<IgbDockManager @ref="dockManager"
                Layout="_layout"
                PaneCloseScript="paneClose">
    <div slot="pane-1" ...>エクスプローラー</div>
    <div slot="pane-2" ...>プロパティ</div>
    <div slot="pane-3" ...>出力</div>
</IgbDockManager>

PaneCloseScript の使用

igRegisterScript を使って、PaneCloseScript に指定した名前（paneClose）でスクリプトを登録します。引数のイベントから ev.detail.sourcePane で対象ペインを取得できるため、ここではヘッダー名を使った確認ダイアログを表示します。ユーザーがキャンセルを選んだ場合は ev.preventDefault() を呼び出すことで、ペインを閉じる動作を中止します（確認を許可した場合はそのまま閉じられます）。

igRegisterScript("paneClose", (ev) => {
    const sourcePane = ev.detail.sourcePane;
    const confirmClose = window.confirm(sourcePane.header + " を閉じますか？");
    if (confirmClose) return;
    ev.preventDefault();
    console.log("キャンセルしました。");
}, false);

実行結果

ペインの閉じるボタンをクリックすると確認ダイアログが表示されます。［OK］を選択するとペインが閉じられ、［キャンセル］を選択するとペインのクローズはキャンセルされます。