편집토론기록

사용자:하늘/addCopyButtonToCode.js: 두 판 사이의 차이

< 사용자:하늘
편집 요약 없음
편집 요약 없음
 
(사용자 2명의 중간 판 25개는 보이지 않습니다)
1번째 줄: 1번째 줄:
function addCopyLinkToCodeElements() {
/**
const elements = document.querySelectorAll(".mw-parser-output .mw-highlight");
* 코드 상자에 코드를 복사하는 버튼을 추가합니다.
elements.forEach(function(element) {
*/
const copybutton = document.createElement('button');
mw.loader.using(['oojs-ui-core', 'oojs-ui.styles.icons-editing-advanced'], () => {
const code = element.firstChild.innerText;
 
copybutton.innerText = "copy";
mw.util.addCSS('.copyToClipBoard-button { margin-top: 0.7em; margin-right: 0.7em; position: absolute; z-index: 100; right: 0; }\
copybutton.addEventListener('click', function() {
.mw-highlight { position: relative; }');
copyCode(code);
copybutton.innerText = "복사됨";
    const highlightElements = document.querySelectorAll(".mw-parser-output .mw-highlight");
highlightElements.forEach(element => {
var copyToClipBoardbutton = new OO.ui.ButtonWidget({
label: 'copy',
icon: 'code',
title: 'copy this code to clipboard',
classes: ['copyToClipBoard-button']
});
});
copybutton.style = "float:right";
const codeText = element.firstChild.innerText;
copyToClipBoardbutton.on('click', () => copyToClipBoard(codeText));
const endBlock = document.createElement('div');
const endBlock = document.createElement('div');
endBlock.style = "clear:both";
endBlock.style = "clear:both";
element.appendChild(copybutton);
$(element).prepend(copyToClipBoardbutton.$element);
element.appendChild(endBlock);
element.appendChild(endBlock);
});
});
}
});


function copyCode(codeText) {
/**
navigator.clipboard.writeText(codeText);
* content를 클립보드로 복사합니다.
* @param {string} content
*/
function copyToClipBoard(content) {
navigator.clipboard.writeText(content);
}
}
$(function() {addCopyLinkToCodeElements()});

2023년 12월 31일 (일) 03:21 기준 최신판

/**
 * 코드 상자에 코드를 복사하는 버튼을 추가합니다.
 */
mw.loader.using(['oojs-ui-core', 'oojs-ui.styles.icons-editing-advanced'], () => {

	mw.util.addCSS('.copyToClipBoard-button { 	margin-top: 0.7em; margin-right: 0.7em; position: absolute; z-index: 100; right: 0; }\
	.mw-highlight { position: relative; }');
	
    const highlightElements = document.querySelectorAll(".mw-parser-output .mw-highlight");
	
	highlightElements.forEach(element => {
		var copyToClipBoardbutton = new OO.ui.ButtonWidget({
			label: 'copy',
			icon: 'code',
			title: 'copy this code to clipboard',
			classes: ['copyToClipBoard-button']
		});
		
		const codeText = element.firstChild.innerText;
		copyToClipBoardbutton.on('click', () => copyToClipBoard(codeText));
		
		const endBlock = document.createElement('div');
		endBlock.style = "clear:both";
		$(element).prepend(copyToClipBoardbutton.$element);
		element.appendChild(endBlock);
	});
});

/**
 * content를 클립보드로 복사합니다.
 * @param {string} content 
 */
function copyToClipBoard(content) {
	navigator.clipboard.writeText(content);
}