チャットアプリにメッセージの編集と削除ボタンをつける

やりたいこと

現在チャットアプリを作っており、投稿したメッセージの編集と削除を行うために
まずはボタンを配置したいと思っています。またそのボタンは常時表示させるのでなく、
該当メッセージにカーソルが当たった時に表示されて、離れたら非表示にします。

環境

ruby 2.3.1
Rails 5.0.7.2

今回記載すること

今回は追記した部分だけ記載させていただきます。
他ソースは下記Githubをご参照ください。

chat-space

対応したこと

それではまず、viewにボタンを配置します。ボタンはfont-awesomeのものを使います。
下記部分を追記しました。

app/views/messages/_message.html.haml

.message{"data-id" => "#{message.id}"}
  .message__upper-info
    %p.message__upper-info__talker
      = message.user.name
    %p.message__upper-info__date
      = message.created_at.strftime("%Y/%m/%d %H:%M")
#////////////////////ここから////////////////////
    %ul.message__upper-info__menu
      %li
        = fa_icon 'pencil-square-o'
      %li
        = fa_icon 'times'
#////////////////////ここまで追記////////////////////
  .message__text
    - if message.content.present?
      %p.lower-message__content
        = message.content
    = image_tag message.image.url, class: 'lower-message__image' if message.image.present?

続いて、font-awesomeのscssに今回使用する情報を追加します。

app/assets/stylesheets/_fa.scss

.fa-pencil-square-o{
  &:before {
    content: "\f044";
  }
}
.fa-times{
  &:before{
    content: "\f00d";
  }
}

そして、messages.scssも編集します。

app/assets/stylesheets/_messages.scss

@@ -5,6 +5,7 @@
  overflow: scroll;

  .message {
    position: relative;　　　//追記
    padding-bottom: 40px;

    &__upper-info {
@@ -23,6 +24,31 @@
        margin-left: 10px;
      }
////////////////////ここから////////////////////
      &__menu{
        position: absolute;
        display: flex;
        display: none;
        top: -8px;
        right: 20px;
        line-height: 1;
        padding: 3px 7px;
        margin: 0 0 0 auto;
        
        li {
          padding: 0.5rem;
          border: solid .0625rem rgba(0,0,0,15);

          &:first-child{
            border-top-left-radius: .375em;
            border-bottom-left-radius: .375em;
          }
          &:last-child{
            border-top-right-radius: .375em;
            border-bottom-right-radius: .375em;
          }
        }
      }
////////////////////ここまで追記////////////////////
    }

    &__text {

ポイントとしては、「position: relative」「position: absolute」で配置していること。
またliタグに「&:first-child」「&:last-child」で最初と最後のボタンの角を丸くしていることです。
今後ボタンが増えた時を考えてのものです。

最後にカーソルが乗った時、離れた時のjavascriptの処理を行います。
カーソルが乗った時、その要素を取得してその子要素であるulタグを取得します。
そして、要素を表示。また要素がdisplay=flexとして横並びにしています。
これは非表示にした際にdisplayがデフォルトとなってしまうためです。
カーソルが離れた際はhideメソッドで非表示にします。

app/assets/javascripts/mouseover_out_btn.js

$(function() {
  var message_btn;
  $('.message').mouseover(function() {
    message_btn = $(this).find('ul')
    message_btn.show();
    message_btn.css("display", "flex")
  })
  $('.message').mouseout(function() {
    message_btn = $(this).find('ul')
    message_btn.hide();
  })
}); 

結果

正常にボタン表示できました！！

以上です。宜しくお願いします。

参考

[参考][JavaScript] マウスポインタが触れた/離れたイベントを取得する（onMouseOver, onMouseOut）
[参考]JavaScript 要素を表示/非表示にするサンプル(displayとvisibility)
[参考]position:relativeとposition:absoluteで画像や文字を重ねてみよう
[参考]jQuery【 CSS 】display を使用した表示・非表示に関するサンプル
[参考]【JavaScript】マウスオーバー（ホバー）をトリガーにしたイベント