사용자:하늘/addCopyButtonToCode.js

< 사용자:하늘
하늘 (토론 | 기여)님의 2022년 9월 4일 (일) 13:09 판

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

  • 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
  • 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
  • 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
  • 오페라: Ctrl-F5를 입력.
function addCopyLinkToCodeElements() {
  const elements = document.querySelectorAll(".mw-parser-output .mw-highlight");
  elements.forEach(function(element) {
    var copybutton = new OO.ui.ButtonWidget({
      label: 'copy',
      icon: 'code',
      title: 'copy'
    });
    const code = element.firstChild.innerText;
    copybutton.on('click', function() {
      copyCode(element.value);
      copybutton.innerText = "copy!";
      setTimeout(function() {
        copybutton.innerText = "copy";
      }, 500);
    });
    copybutton.style = "float:right; margin-left: -9999999px; margin-top: 0.7em; margin-right: 0.7em;";
    const endBlock = document.createElement('div');
    endBlock.style = "clear:both";
    $(element).append(copybutton.$element);
    element.appendChild(endBlock);
  });
}

function copyCode(codeText) {
  navigator.clipboard.writeText(codeText);
}

mw.loader.using( [ 'oojs-ui-core' ], function () {
  addCopyLinkToCodeElements()
});