flash 메시지 구현(비동기 통신)

현재 Ruby와 JavaScript를 사용하여 기사 게시 사이트를 만들고 있습니다.
이번에는 즐겨찾기 등록/해제 시 flash 메시지를 표시할 수 있도록 해 가고 싶습니다.
즐겨찾기 기능 구현은 여기

■사양 등

・즐겨찾기 아이콘을 클릭하면 페이지 상단에 메시지가 표시된다
・화면 스크롤에 추종한다
· 연속으로 아이콘을 누르면 최신 메시지가 중단됩니다.
· jQuery를 사용하지 않음

■완성 후의 동작과 코드

create.js.erb

//①お気に入りに登録した時の処理
if(document.getElementById('article_<%= @article.id %>').innerHTML = '<%= escape_javascript( render 'shared/articles', article: @article ) %>'){

//②flashメッセージが既に存在する場合は、それを削除する
  if(document.getElementById('flash-message')){
    document.getElementById('flash-message').remove();
  }

//③flashメッセージ(div要素)を生成する
  const flashMessage = document.createElement('div');
  flashMessage.setAttribute('class', 'flash-message')
  flashMessage.setAttribute('id', 'flash-message')
  flashMessage.setAttribute("style", `top: ${window.scrollY}px; animation-name: flash-message-fade;` );
  flashMessage.innerHTML = "お気に入りに登録しました"

//④flashメッセージの挿入先を取得(body)
  const body = document.querySelector("body");
  body.prepend(flashMessage)

//⑤flashメッセージの表示位置をページスクロールに合わせる
  document.addEventListener('scroll', function(){
    flashMessage.style.top = `${window.scrollY}px`
  })

//⑥flashメッセージを４秒後に消去する
  window.setTimeout(function(){
    flashMessage.remove();
  }, 4000);
}

■ 즐겨찾기 기능 구현

이전 여기 에서 구현한 것을 그대로 사용하고 있습니다.

■ 플래시 메시지 구현

① 즐겨찾기 등록했을 때의 처리

create.js.erb

if(document.getElementById('article_<%= @article.id %>').innerHTML = '<%= escape_javascript( render 'shared/articles', article: @article ) %>'){

if분의 조건으로서, 즐겨찾기 등록의 처리를 기술하고 있습니다.

②플래시 메시지가 이미 존재하는 경우에는 삭제

create.js.erb

  if(document.getElementById('flash-message')){
    document.getElementById('flash-message').remove();
  }

flash 메세지 표시중에 계속해 즐겨찾기 아이콘 눌렀을 때,
보고 있는 메시지를 지우고 최신 메시지를 표시합니다. ↓

③flash 메시지(div 요소)를 생성한다

create.js.erb

  const flashMessage = document.createElement('div');
  flashMessage.setAttribute('class', 'flash-message')
  flashMessage.setAttribute('id', 'flash-message')
  flashMessage.setAttribute("style", `top: ${window.scrollY}px; animation-name: flash-message-fade;` );
  flashMessage.innerHTML = "お気に入りに登録しました"

style 속성의 값으로 지정하고 있는 ${window.scrollY}px; 는, 현재의 스크롤 위치를 돌려줍니다.
이 요소와 animation-name에 지정된 애니메이션의 CSS는 다음과 같습니다. ↓

index.css

@keyframes flash-message-fade {
  0% {
    display: inline;
    opacity: 0;
    transform: scaleY(-1);
    background-color: rgb(235, 247, 129);
  }
  10% { opacity: 0.5; }
  20% { opacity: 1; transform: scaleY(1) }
  90% { opacity: 1; transform: scaleY(1); }
  100% {
    opacity: 0;
    transform: scaleY(0);
    display: none;
    background-color: white;
  }
}

.flash-message {
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
  display: none;
  position: absolute;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  padding-top: 1%;
}

④flash 메시지의 삽입처를 취득(body)

create.js.erb

  const body = document.querySelector("body");
  body.prepend(flashMessage)

body를 가져오고 생성된 flash 메시지의 div 요소를 삽입합니다.

⑤ 플래시 메시지의 표시 위치를 페이지 스크롤에 맞추기

create.js.erb

  document.addEventListener('scroll', function(){
    flashMessage.style.top = `${window.scrollY}px`
  })

이벤트에 scroll 를 지정하는 것으로, 화면이 스크롤 되었을 때에 이벤트 발화합니다.
flash 메시지의 style 속성의 top에 이전의 window.scrollY를 대입합니다.
이렇게하면 메시지가 페이지 스크롤을 따르게됩니다. ↓

⑥ 플래시 메시지를 4초 후에 지우기

create.js.erb

  window.setTimeout(function(){
    flashMessage.remove();
  }, 4000);
}

window.setTimeout에 설명 된 처리는 지정된 시간 후에 실행됩니다.
flash 메세지를 표시로부터 4초 후에 소거되도록(듯이) 설정했습니다.
create.js.erb의 설명은 이상입니다.

그리고는 destroy.js.erb(즐겨찾기 해제)에 ①의 조건과 ③의 메시지 내용을 변경한 것을 기술합니다.

이상으로 완성입니다.

■참고문헌

htps : //에서 ゔぇぺぺr. 모잖아. 오 rg / 자 / 도 CS / 우 B