個人アプリ開発 オーバーレイ・モーダルウィンドウの実装（jQuery）

作業内容

コメント投稿のビューを記事詳細ページのモーダルウィンドウ内に移しました。
オーバーレイ：画面の背景を薄暗くする動作
モーダルウィンドウ：別ウィンドウとして浮かび上がってくる動作
”コメントする”を押すと、コメント投稿フォームが浮かび上がる仕様にします。

ビューの編集

[groups/show.html.haml]
ーーー追加ーーー
#overlay
    #modal-window
      .aquarium-comments__form
        %h3 口コミの投稿
        .form
          = form_for [@group, @comment] do |f|
            = f.text_field :title, class: 'form__title', placeholder: 'タイトルを入れてください'
            = f.text_area :text, class: 'form__text', placeholder: '口コミ本文を入れてください'
            = f.date_field :visit_date, class: 'form__date'
            = f.submit '投稿', class: 'form__submit'
        %button#close
          閉じる

CSSの調整

group/show.scssの編集

jQueryの導入

[Gemfile]
# gem 'turbolinks', '~> 5'  ← コメントアウトする
ーーー追加ーーー
gem 'jquery-rails'

$ bundle install

[application.html.haml]
 ~変更前~
!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title giga-app
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' ← このオプションを消す
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' ← このオプションを消す
  %body
    = render "layouts/notifications"
    = yield

 ~変更後~
　省略
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'
　省略

[application.js]
//= require jquery      ← 追記
//= require jquery_ujs
//= require turbolinks  ← ここを削除する
//= require_tree .

※//= require_tree .は最下部に。上から順番に読み込む為。
最初記述順を間違え、uncaught referenceerror $ is not definedのエラーが出て、JSファイルが読み込まれませんでした。

turbolinksの機能は下記問題がよく出る為、使わないようにしました。
・$(document).ready()が発火しない
・$(window).load()が発火しない
・metaタグが更新されない
turbolinks；Turbolinksは Asset Pipeline を活用しているアプリケーションにおいて画面遷移を高速化するライブラリ
参考：https://gist.github.com/saboyutaka/8727377

JSファイルの作成

[modal-window.js]
$(function(){
  alert("hello")
$(function() {
  // 「Open」ボタンをクリック時に、fadeInメソッドでHTML要素を表示する
  $('#open').on('click', function() {
    $('#overlay, #modal-window').fadeIn();
  });
  
  // 「Close」ボタンをクリック時に、fadeOutメソッドでHTML要素を非表示にする
  $('#close').on('click', function() {
    $('#overlay, #modal-window').fadeOut();
  });
  
  locateCenter();  // => モーダルウィンドウを中央配置するための初期値を設定する
  $(window).resize(locateCenter);  // => ウィンドウのリサイズに合わせて、モーダルウィンドウの配置を変える

// モーダルウィンドウを中央配置するための配置場所を計算する関数
  function locateCenter() {
    let w = $(window).width();
    let h = $(window).height();
    
    let cw = $('#modal-window').outerWidth();
    let ch = $('#modal-window').outerHeight();
   
    $('#modal-window').css({
      'left': ((w - cw) / 2) + 'px',
      'top': ((h - ch) / 2) + 'px'
    });
  }
});

参考：
JQueryでオーバーレイとモーダルウィンドウを作ってみよう！

躓き

編集ページの作成

コメントの編集箇所に進んだ時に今回の実装では不十分なことに気がつきました。
現状は同じview内にフォームを置いている為、コメントの新規作成と編集を同時に行うことができません。
なので、記事詳細ページとは別のビューとして、コメントの新規作成ページ・編集ページをモーダル表示できるようにするべきでした。
スケジュールを考慮し、一旦編集の際は編集ページに飛ばすようにし、上記は追加実装時の課題としました。

単純に目先の実装方法を考えるだけでなく、一歩引いて全体を見れるように精進していきたいと思います。