티스토리, 공감 클릭시 이벤트 만들기

 

 

 

  

 

Demo & Code

 

 

[Demo] 티스토리, 공감 클릭시 이벤트 만들기..

 

 

window.addEventListener('load', () => {
  function likeOn() {
    document.querySelector('button.uoc-icon').addEventListener('click', () => {
      if ( document.querySelector('div.uoc-icon').classList.contains('like_on') == false ) {
        setTimeout(() => {
         document.querySelector('.container_postbtn').insertAdjacentHTML("afterbegin", "<div class='thanks' style='width:500px;height:360px;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#121212;text-align:center;z-index:9999' onclick='$(this).remove()'><img src='https://t1.daumcdn.net/keditor/emoticon/friends1/large/019.gif' style='width:240px; height:auto; margin-top:60px'></div>")
        }, 200, { once: true });

        setTimeout(() => {
          document.querySelector('div.thanks img').remove()
        }, 2000, { once: true });

        setTimeout(() => {
          document.querySelector('div.thanks').insertAdjacentHTML('beforeend', '<img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/028.gif" style="width:240px; height:auto; margin-top:60px">')
        }, 2400, { once: true });

        setTimeout(() => {
          document.querySelector('div.thanks').remove()
        }, 5000, { once: true });
      }
    })
  }

  if ( document.querySelector('body').id == 'tt-body-page' ) {
    let chkLike = setInterval(() => {
      if ( document.querySelector('button.uoc-icon') ) {
        clearInterval(chkLike);
        likeOn()
      }
    }, 500)
  }
});