実装過程のメモ。
やったこと
次のようなレコードのジャケットを表示する画面で、
ジャケット画像をクリックして、次の画像のようにモーダルウィンドウにspotify埋め込みプレーヤを表示した。
ソース
htmlは次の通り設定。
インスタンス変数@releases
をeachで回している。
release.title
→アルバムのタイトル
release.image
→ジャケ画像
release.embed_link
とすると、次のようなspotifyの埋め込みタグを出力するよう設定している。
→https://open.spotify.com/embed/album/6dURCAepMUP97AwHLnxdSu
index.html.erb
<div class="contents" id="app">
<% @releases.each do |release| %>
<div class="content">
<img v-on:click="openModal" src="<%= release.image %>" alt="[写真]" class="content-image">
<p><%= release.title %></p>
<p><%= release.artists.first.name %><p>
<div id="overlay" v-show="showContent" v-on:click="closeModal">
<div id="show-player" >
<iframe v-show="showContent" src="<%= release.embed_link %>"
width="310" height="200" frameborder="0" allowtransparency="true" allow="encrypted-media" class="content-player" ></iframe>
</div>
</div>
</div>
<% end %>
<%= javascript_pack_tag 'index' %>
</div>
vueの設定は次の通り
v-show="showContent"
がtrueの場合に埋め込みプレーヤが表示されるように設定したいので、
初期状態ではshowContent: false
としている。
v-on:click="openModal"
でopenModalメソッドを実行する。
index.js
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#app',
data: {
showContent: false
},
methods:{
openModal: function(){
this.showContent = true
},
closeModal: function(){
this.showContent = false
}
}
})
})
cssは次の通り
#overlay{
/* 要素を重ねた時の順番 */
z-index:1;
/* 画面全体を覆う設定 */
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
/* 画面の中央に要素を表示させる設定 */
display: flex;
align-items: center;
justify-content: center;
}
#show-player{
z-index:2;
width:50%;
padding: 1em;
background:#fff;
}
おわり