remodalをカスタマイズして使っていた時にはまった話
目次
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依存しないモーダルライブラリをストックしておかないといけないなーと