remodalをカスタマイズして使っていた時にはまった話

2018-02-18

remodalとは

モーダルを簡単に実装できるjQueryプラグインで、デフォルトのスタイルも好きでそのままでも結構使えます。
jQueryを使っててモーダルの実装が必要な時は、最初に頭に浮かぶぐらい利用してます。

カスタマイズ

APIのレスポンスをモーダルで表示する実装があり、以下のような感じにしました。

remodalのオーバーレイをローディングに見えるスタイルにする
ajaxを送信した時に、先にオーバーレイを開く
レスポンスが返ってきたらモーダル自体を表示する

JSはこんな感じです。

const $remodal = $('[data-remodal-id="modal"]').remodal({ hashTracking: false });
$('.button').on('click', function() {
    // オーバーレイを開く
    $remodal.$overlay.removeClass('remodal-is-closed').addClass('remodal-is-opening').show();
    
    $.ajax(/* option */)
    .done(res => {
        // resの内容をモーダルのHTMLに反映後モーダルオープン
        $remodal.open();
    })
    .fail(/* fail */);
});

不具合

ローカル環境では問題なかったのですが、ステージング環境でモーダルが閉じるなくなる不具合が発生。
さらに閉じたり閉じなかったりしたため、すぐには分からずかなりハマってしまいました。
不具合再現DEMO

原因

開いたあとのオーバーレイとモーダルのクラス名は remodal-is-opened が正常ですが、
閉じない時はremodal-is-openingのままだと気がつきました。

先に開いたオーバーレイのアニメーションの終了タイミングの関係で、モーダルを開いた時に状態遷移が正しくできてなかったようです。

修正

オーバーレイアニメーションが完全に終わってからモーダルを開けば良さそうだったので、アニメーションが終わってたらモーダルを開くように修正しました。

overlayIsAnimationendみたいな変数を用意しておき、trueの時は開いて、falseだったら時間をおいて再確認みたいな感じです。

それで無事に閉じないことが起きなくなりました。

最後に

remodalはコード量も多くないのでなんとなく読み進められましたが、エラーが出ない不具合の時は思ったより大変でした。
どこから手をつければ良いのか分からなかったです。

不具合とは関係ないですが、今後のためにjQuery依存しないモーダルライブラリをストックしておかないといけないなーと