実装過程のメモ。

やったこと

次のようなレコードのジャケットを表示する画面で、

ジャケット画像をクリックして、次の画像のようにモーダルウィンドウに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;
  }

おわり