[JavaScript Code] context menu(우클릭), 클립보드(Clip Board), 드래그(Drag), 블럭지정 이벤트

// 우측 마우스 클릭시 이벤트 리스너
document.addEventListener('contextmenu', handleCreateContextMenu);

// 나만의 context menu 생성
function handleCreateContextMenu(event) {
	// 기본 Context Menu가 나오지 않게 차단
	event.preventDefault();

	// 나만의 context menu
	const ctxMenu = document.getElementById('context_menu');
	
	// 노출 설정
	ctxMenu.style.display = 'block';

	// 위치 설정
	ctxMenu.style.top = event.pageY + 'px';
	ctxMenu.style.left = event.pageX + 'px';

	// 각주만들기 누를시에 블록지정이 풀려서 카피 내용이 사라지기 때문에 우측을 눌렀을 때 카피되는 과정이 필요하다
	document.execCommand('copy');

	// 클립보드 내용 가져오는 것은 비동기로 처리되기 때문에 
	// 비동기 함수로 처리해서 값이 다 나왔을 때 필요한 값을 받는 과정이 필요하다
	getClipboardContents();

}


// 클립보드 내용을 가져오려면 비동기 처리가 필요하다.
async function getClipboardContents() {
	try {
		footnoteContent = await navigator.clipboard.readText();
		console.log('Pasted content: ', text);
	} catch (err) {
		console.error('Failed to read clipboard contents: ', err);
	}
}


// 좌측 마우스 클릭시 이벤트 리스너
document.addEventListener('click', handleClearContextMenu);


// Context Menu 제거
function handleClearContextMenu(event) {
	const ctxMenu = document.getElementById('context_menu');

	// 노출 초기화
	ctxMenu.style.display = 'none';
	ctxMenu.style.top = null;
	ctxMenu.style.left = null;
}

// 드래그 했을 때 이벤트 리스너
document.addEventListener("drag", function(event) {
	console.log("이동 중");
}, false);




// 블럭지정 했을 때 이벤트 리스너
document.addEventListener('selectionchange', () => {
	console.log(document.getSelection().toString());
});