こんにちは、ユアサです。
今回は前々回作成したギャラリーモーダルを改修していきます。
↓前回の記事はこちら
tech.arms-soft.co.jp
現状の動作の流れをまとめる
まず改修前のギャラリーモーダルを確認します。
See the Pen gallery_modal by felly (@felly00505) on CodePen.
改修前のギャラリーモーダルでは、特定の画像をクリック後にモーダルが表示され、クリックした対象の画像の箇所まで自動で移動する仕様でした。
しかし、モーダルが非表示の場合でもDOM上では存在している状態だったので、これをモーダル表示時にのみ生成させ、また画像のaltも画像と共にモーダル内に表示させる仕様に改修することを目標としました。
改修にあたって色々とコードを書き換えることになりそうなので、まず現在のコードで何をしているのかまとめていきたいと思います。
言わずもがな主にJSで制御していくわけですが、順を追っていくと以下のような流れになります。
- スライダー用プラグイン（Splide）のインスタンス生成
- クリックされた画像が何番目か取得後、モーダルを表示（不透明度100%）させて対象の画像の位置までスライド移動
- クローズボタンもしくはモーダルのグレー背景がクリックされた場合にモーダルを非表示（不透明度0%）にする
ではこれを踏まえた上で改修に取り掛かっていきます。
改修後の流れを考察する
改めて、今回改修したい内容としては
- 非表示状態のモーダルをDOM上に残さない
- 画像のaltを取得して表示
の2点でした。後者については作業が軽そうなので、まず前者を実現することをベースとしてJSの動作を考察していきたいと思います。
改修前の状態ではまず始めにスライダー用プラグイン（Splide）のインスタンス生成が行われていましたが、これはクラス名splideの要素ありきの動作なので、これに限らずモーダル要素内に存在するクラス名を対象としたインスタンス生成やセレクタなどは、モーダル要素自体を生成してから実装するタイミングを考慮する必要があります。
したがって、改修後はざっくりと以下の流れになります。
- モーダル要素の生成
- インスタンス生成、クローズボタンの制御などモーダル内要素の動作実装
書いていてもイメージしづらいので手を動かしていきましょう。
改修してみよう
早速改修に取り掛かっていきます。一旦シンプルなところから始める方が順を追って分かりやすいと思うので、まずはモーダル要素を生成するところから始めます。
モーダルを生成する
前回の記事で紹介したinsertAdjacentHTML()を使用します。ギャラリーの画像がクリックされたタイミングで生成されるように記述します。
モーダル表示・非表示を一通りできるようにクローズボタンの動作もついでに実装します。
See the Pen gallery_modal_fix_wip01 by felly (@felly00505) on CodePen.
モーダルの生成・表示から非表示までできるようになりました。
しかし確認すると分かりますが、モーダル表示時にアニメーションが効いていません。
モーダルの生成と表示の動作（classList.add('is-active’)）がほぼ同じタイミングで発生しているのが原因なので、表示させる時はCSSのanimationでモーダル生成時でもアニメーションが動作できるようにします。
（JSはモーダル表示時に表示用クラス名を追加→非表示時に非表示用クラス名を追加する仕様にしました）
See the Pen gallery_modal_fix_wip02 by felly (@felly00505) on CodePen.
ギャラリーから画像を取得してモーダルで表示させる
生成後のモーダルにはまだ画像表示用のli要素がない状態です。まずはこのli要素をギャラリー内の画像の数だけ生成するところから始めます。
また今回altの表示箇所を用意しておく必要があるので、あらかじめli要素内に空のp要素も追加しておきます。
See the Pen Untitled by felly (@felly00505) on CodePen.
ギャラリー内の画像は3枚なので、li要素が3つ生成されていることが確認できます。
（li要素内のテキストは確認用のものなので後ほど削除します）
li要素が追加できたので、次は画像とaltを追加します。
これらは前回の記事で紹介したgetAttribute()を使用して、ギャラリー内のli要素からそれぞれの情報を取得します。
前回の記事ではalt取得用と記述していましたが、画像のsrc属性やsrcset属性なども取得できます。
getAttribute()を使用して一通りの情報を取得後、setAttribute()を使用して対象箇所に追加します。
See the Pen gallery_modal_fix_wip04 by felly (@felly00505) on CodePen.
ご覧の通りSplideのスタイルや動作が反映されていないので、このタイミングでSplideのインスタンス生成も実行する必要があります。
またギャラリー内の何番目の画像がクリックされたかをSplideに認識させるため、モーダル生成用だった関数function initThumbnail()からli要素追加用の関数function modalSetup()に引数indexを渡すように変更します。
See the Pen gallery_modal_fix_template by felly (@felly00505) on CodePen.
これで完成です！DOMを確認しながら動作させてみてください。
まとめ
スライダー用プラグインのSplideを使って自作でギャラリーモーダルを作成しました。
試行錯誤しながら作成していた時は割と必死だったのですが、改めてコードを整理して見直してみるとそんなに難しいものじゃなかったような気がしてきますね・・・。この程度のコードはスラスラ構想を練れるようになりたいです。
