[jQuery] 코드 블럭 복사하기 - (문제 인지) 플러그인들과의 충돌

clipboard.js 라이브러리를 활용하여 코드 블록의 내용을 복사하는 버튼을 구현했으나 "저작권자 표시" 플러그인과의 충돌이 있음을 발견하고 문제를 해결해 가는 과정을 적었습니다
빠른 답을 찾으신다면 다음 글로 이동 바랍니다

[jQuery] 코드 블럭 복사하기 - (문제 해결) 플러그인과 함께 사용하기

---

• "마우스 오른쪽 클릭 방지" 플러그인의 불편함
• 복사 버튼 따라 만들기 (clipboard.js 활용)
• 이왕 복사를 눌러봤으니 붙여넣기나 한번 해봐야지?
• "저작권자 표시" 플러그인과의 충돌

"마우스 오른쪽 클릭 방지" 플러그인의 불편함

티스토리는 "마우스 오른쪽 클릭 방지" 플러그인을 적용하면 텍스트 선택 자체를 못하게 막아버리므로 코드 블럭을 활용하더라도 소스를 복사할 수 없게 된다

("드래그 검색" 플러그인도 있던데 이것도 사용 못하는 것 아닌가..)

코드 블럭 내부를 텍스트 선택 불가 영역에서 제외시켜 주는 설정이나 기능이 있으면 좋으련만 찾기가 어렵다

 

복사 버튼 따라 만들기 (clipboard.js 활용)

다른 분들은 어떻게 하고 계시나 보니 복사 버튼을 따로 만들어서 쓰고 계시는 것 같았다
방법을 적어둔 최근 글도 꽤 보이고 해서 잘 동작하겠지, 안일하게 생각하고 소스를 읽으면서 동시에 적용 및 수정, 꾸미기 단계로 들어갔다
복잡하게 라이브러리를 다운로드했다가 블로그에 별도 업로드하는 부분은 호스팅을 받도록 바꾸고, 문법도 가능한 jQuery로 통일시키는 등 베껴 치면서 수정 작업을 같이 했다

(Cloudflare의 CDN 호스팅 서비스 cndjs 관련해서 차후 정리해 봐야겠다)

수정 작업에는 CSS를 입맛대로 바꾸는 작업까지 포함되었는데 프론트를 오랜 만에 손대는 것이다 보니 좌충우돌, 문법 오류도 생기고 객체가 위치를 제대로 못 잡거나 애니메이션이 동작하지 않는 등 자잘한 문제가 자꾸 나서, 고생깨나 한 끝에 어느 정도 마음에 들게 적용시킬 수 있었다
이때가 가장 기분이 좋다...!

모양이 꽤 마음에 들어서 기분이 좋았다.. 여기까지는..

 

"저작권자 표시" 플러그인을 사용하지 않는 분들이 참고하실 수 있도록 소스는 남겨 두겠다

스킨 편집 > HTML (head 태그)

  <!-- jQuery 라이브러리가 사용중인 스킨에 이미 있다면 굳이 추가 안해도 된다 -->
  <script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>

  <!-- 라이브러리를 다운로드해서 업로드하는 대신 호스팅을 활용하면 편하다
       추가하는 시점에서 최신인 버전으로 추가했다 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
  <script>
    $(document).ready( function() {
      ...
      // 복사 버튼 [S]
      const button = '<button type="button" class="copy-button">Copy</button>';
      $('pre[id^="code"]').each( function( index, e ) {
        const clnBtn = $(button).clone()
            .data( 'clipboardText', e.innerText )
            .on( 'mouseleave', function(event) {
              $( event.currentTarget ).removeAttr( 'data-copy-message' );
              $( event.currentTarget ).removeClass( 'copy-message' );
            } );
        e.appendChild( clnBtn[0] );
      } );

      let clipboard = new ClipboardJS( '.copy-button', {
        text: function( trigger ) {
          return $(trigger).data( 'clipboardText' );
        }
      } );
      clipboard.on( 'success', function(e) {
        e.clearSelection();
        $( e.trigger ).addClass( 'copy-message' );
        $( e.trigger ).attr( 'data-copy-message', '복사 성공' );
      }, 'error', function(e) {
        console.info('Text:', e.text);
        $( e.trigger ).addClass( 'copy-message' );
        $( e.trigger ).attr( 'data-copy-message', '!! 실패 !!' );
      } );
      // 복사 버튼 [E]
    } );
  </script>

 

스킨 편집 > CSS

/* 복사 버튼 [S] */
pre[id^="code"] {
  position: relative;
  /*overflow: visible;*/
}
pre .copy-button {
  opacity: 0.35;
  position: absolute;
  right: 8px; top: 4px;
  padding: 6px 18px;
  color: #fff;
  background: rgba(255, 240, 50, 0.8);
  border-radius: 5px;
  transition: opacity .3s ease-in-out;
  cursor: pointer;
}
pre:hover .copy-button {
  opacity: 1;
}
pre .copy-button:hover {
  background: rgba(255, 210, 0, 1);
  transition: all ease-in-out 0.3s;
}
pre .copy-button:active {
  color: #333;
  background: #eee;
  transition: all ease-in-out 0.2s;
}
.copy-message:before {
  content: attr( data-copy-message );
  position: absolute;
  left: -95px; top: 0px;
  padding: 6px;
  color: #fff;
  background: rgba(255, 210, 0, 1);
  border-radius: 5px;
}
/* 복사 버튼 [E] */

이왕 복사를 눌러봤으니 붙여넣기나 한번 해봐야지?

사실 절대 의심하지 않았다
아주 가벼운 마음으로, 그저 지금 느끼는 이 뿌듯함을 더하기 위한 행동에 불과했다
그런데... 그 모든 감정과 기대를 한번에 날려버리는 일이 일어났다
아무런 내용도 없이 그냥 출처만 덩그러니 튀어나온 것이다

응..? 뭐지..??

따라하기 했던 글로 가서 테스트해 보니 같은 현상이다..
낭패감과 함께 허탈함이 밀려들었다... 나는 무엇을 위해 몇 시간을 사용한 것이란 말인가
어떤 기능을 구현할 때는 (특히 그것이 따라 적기 또는 복붙일 경우는) 기능 테스트부터 먼저 제대로 해야 한다는 것을 다시 한번 유념하며 어디가 문제인지 파기 시작했다

 

javascript에 문제가 있는지 확인하기 위해 console에 찍어보니 틀림없이 복사할 내용은 잘 가져오고 있다
그럼 출처가 붙으면서 내용이 증발한다는 얘기인데.. 당최 출처를 붙이는 부분을 찾을 수가 없다
'스킨에 붙어있는 내용이 아닌 건가' 생각이 스쳤다
그런데 아직 블로그가 익숙지 않아 설정을 통해 적용했던 건지, 아니면 외부 기능을 붙였던 건지 통 모르겠다

"저작권자 표시" 플러그인과의 충돌

결국 검색을 통해 티스토리 플러그인 "저작권자 표시"의 기능임을 알게 됐다 (또 플러그인이냐!!)
플러그인의 소스는 어떻게 보는지 몰라서 그냥 MS Edge 브라우저의 기능 "페이지 원본 보기"를 (단축키 Ctrl+U) 사용했다

"저작권자 표시" 플러그인의 함수

스킨 편집에서는 보이지 않았던 복사 Event Listener 함수가 보인다
결론은 텍스트 선택 불가에 따른 부작용의 연장선으로 보이는데..
플러그인 소스를 손댈 수 있는 방법을 모르니 고민이 생긴다
연구 조사를 더해서 해결하게 되면 다음 글 재료로 써야겠다