// (2021.8.4, 차재복, Cha Jae Bok, http://www.ktword.co.kr)
// 문서 로딩 직후 실행 (편집 용어 선택)
document.addEventListener('DOMContentLoaded', function() {
// 알파벳 편집용어 찾기
let elem4 = document.getElementById('word_select');
if (elem4 != null) {
elem4.addEventListener('click', function (e) {
let letter = e.target.nextSibling.value;
word_choice(e.target.nextSibling, letter); // paging/word_choice.js
}, false);
}
// dropdown 메뉴용 start div 찾음
let startDropdown = document.getElementById('choice_div');
if(startDropdown) {
// menutype에 따라, 서브메뉴 선택 처리
let pathDivs = startDropdown.getElementsByClassName('treeDiv');
for(let i=0; i<pathDivs.length; i++) {
// menutype에 따라, div별로 처리
chooseSubMenu(pathDivs[i]); // navigation/nav_dev.js
}
}
});
// 문서 로딩 직후 실행 (editable 편집용 화면)
document.addEventListener('DOMContentLoaded', function() {
// editable 화면 열기
let content_edit_btn = document.getElementById('content_edit_btn');
if (content_edit_btn) {
content_edit_btn.addEventListener('click', function (e) {
document.getElementById('editable_win').style.display = 'block';
document.getElementById('textarea_win').style.display = 'none';
});
}
// 서버 text 결합 preview
let preview_btn = document.getElementById('preview_btn');
if (preview_btn != null) {
preview_btn.addEventListener('click', function (e) {
// 이미지,링크,mathjax 등을 제거하고, {[(...)]}로 교체
let childs = document.getElementById('pure_text').childNodes;
let str = before_out(childs);
// 출력 화면 준비
let out = document.getElementById('embed_win');
out.innerHTML = '서버 응답 대기 중 ...'; // 화면 비움
// ajax Promise 호출
let url = '../edit/update.php';
let method = 'post'
let parms = {'type' : 'preview', 'pure_str' : str, 'no' : preview_btn.dataset.no};
ajaxPromise(url, method, parms).then(
response => {
out.innerHTML = response.abbr;
},
error => {
alert(error);
}
);
}, false);
}
});
// 문서 로딩 직후 실행 (textarea 편집용 화면)
document.addEventListener('DOMContentLoaded', function() {
// textarea 편집용 화면 열기
let textarea_edit_btn = document.getElementById('textarea_edit_btn');
if(textarea_edit_btn) {
textarea_edit_btn.addEventListener('click', function (e) {
// * editable text => textarea text * //
// pure_text div를 찾음
let pure_text = document.getElementById('pure_text');
// pure_text 내 이미지,링크,mathjax 등을 제거하고, {[(...)]}로 교체
let childs = pure_text.childNodes;
let str = before_out(childs); // edit_embed.js
// 기존 editable_win 화면 hide
let editable_win = document.getElementById('editable_win');
editable_win.style.display = 'none';
// textarea_win 화면 보이기
document.getElementById('textarea_win').style.display = 'block';
// left_textarea (우) 찾고, textarea 내 기존 자식 있으면 삭제
let out = document.getElementById('left_textarea');
while ( out.hasChildNodes() ) out.removeChild(out.firstChild);
// 새로이 textarea 생성
let createdTextarea = document.createElement('textarea');
createdTextarea.id = 'textarea';
createdTextarea.style = 'margin:0;padding:0;width:100%;height:100%;';
// textarea 삽입
out.appendChild(createdTextarea);
// textarea에 내용 출력
createdTextarea.innerHTML = str;
});
}
});
// 업데이트
document.addEventListener('DOMContentLoaded', function() {
// 서버 업데이트
// ('업데이트전 preview : befroe_update', '실제 업데이트 : new_update', 'textarea 업데이트' : textarea_update)
let update_btn = document.getElementsByClassName('update');
for (let i=0; i<update_btn.length; i++) {
update_btn.item(i).addEventListener('click', function (e) {
// 날짜,타이틀
let yako = document.getElementById('yako');
if (yako) yako = yako.value;
let english = document.getElementById('english');
if (english) english = english.value;
let korean = document.getElementById('korean');
if (korean) korean = korean.value;
let extra = document.getElementById('extra');
if (extra) extra = extra.value;
let edit_date = document.getElementById('edit_date');
if (edit_date) edit_date = edit_date.value;
// type 구분 (before_update, new_update, textarea_update)
let type = update_btn.item(i).dataset.type; //
// subtype (편집 화면에 보이기 또는 최종 화면으로 redirect)
let subtype = this.dataset.subtype;
// 편집된 내용 중 이미지,링크,mathjax 등을 제거하고, {[(...)]}로 교체
let str, out;
if(type == 'before_update' || type == 'new_update') {
let childs = document.getElementById('pure_text').childNodes;
str = before_out(childs); // edit_embed.js
// 출력 화면 준비
out = document.getElementById('embed_win');
out.innerHTML = '서버 응답 대기 중 ...'; // 화면 비움
} else if(type == 'textarea_update') {
str = document.getElementById('textarea').value;
type = 'new_update';
// subtype = 'real_view';
out = document.getElementById('textarea_out');
}
// 서버 송출 전 확인
/*
let confirm_str = '날짜변경='+edit_date+'\n약어='+yako+'\n영문='+english+'\n한글='+korean+'\n기타='+extra+'\n'+str;
let is_confirm = confirm(confirm_str);
if(!is_confirm) return;
*/
// ajax Promise 호출
let url = 'update.php';
let method = 'post';
parms = { 'type' : type,
'no' : e.target.dataset.no,
'edit_date': edit_date,
'yako' : yako, 'english' : english, 'korean' : korean, 'extra' : extra,
'pure_str' : str };
ajaxPromise(url, method, parms).then(
response => {
// 디버깅용
// if (response.msg) alert(response.msg);
// console.log(response.abbr);
// alert(response.trans_abbr); // 점검용
// 편집 결과를, view.php로 화면 전환(redirect) 후 보여줌
if(subtype=='real_view')
window.location.href = '/test/view/view.php?no='+e.target.dataset.no;
// 편집 결과를, 현재 편집 우측 화면에 출력
else {
// 편집결과 화면 출력
out.innerHTML = response.abbr;
// 수정일 변경 출력
let sujung = document.getElementById('sujung');
sujung.innerHTML = response.date;
// 출력 div에 MathJax 적용
MathJax.Hub.Queue(["Typeset",MathJax.Hub,out]);
}
},
error => {
alert(error);
}
);
});
}
});
// 문서 로딩 직후 실행 (return 키 처리, (구)업데이트 처리, 편집 버튼 처리)
document.addEventListener('DOMContentLoaded', function() {
//window.onload = function () {
// contenteditable div에서 return 키가 div 넣는 것 방지
let editable = document.querySelector('div[contenteditable]')
if(editable) {
editable.addEventListener('keydown', (e) => {
// trap the return key being pressed
if (e.keyCode === 13 && document.activeElement.nodeName != 'TEXTAREA') { // textarea이면, JaxMath이므로
// return key에 따른 default 수행 방지
e.preventDefault();
// br tag 삽입
document.execCommand('insertHTML', false, '\n');
}
}, false);
}
// (구)업데이트 개선 (준비중)
let elem3 = document.getElementById('old_update');
if (elem3 != null) {
elem3.addEventListener('click', function (e) {
let no = document.getElementById('no');
/*
let yako = document.getElementById('yako');
let english = document.getElementById('english');
let korean = document.getElementById('korean');
let extra = document.getElementById('extra');
*/
let sujung = document.getElementById('sujung');
let edit_date = document.getElementById('edit_date');
let pure_str = document.getElementById('old_text');
let out = document.getElementById('old_out');
// ajax 호출 및 결과 출력
let method = 'post'
let url = '../edit/update.php';
let parms = {'no':no.textContent,'yako':yako.value,'english':english.value,'korean':korean.value,'extra':extra.value,
'pure_str' : pure_str.value,'edit_date':edit_date.value,'type':'old_update'};
let outObj = {'no':no,'yako':yako,'english':english,'korean':korean,'extra':extra,'sujung':sujung,'out':out};
let is_confirm = confirm('no='+no.textContent+'\n'+pure_str.value);
out.innerHTML = '';
if(is_confirm) itemAjax(url, outObj, method, parms);
}, false);
}
// 편집 버튼 처리
let edit_btn = document.getElementsByClassName('edit_btn');
for(let i=0;i<edit_btn.length;i++) {
edit_btn.item(i).addEventListener('click', function(e) {
if (edit_btn.item(i).nextSibling.nodeName=='DIV') {
itemShowHide(edit_btn.item(i).nextSibling, edit_btn.item(i));
} else {
// 링크 : type = 'l'
if (edit_btn.item(i).dataset.type=='l') {
let newDiv = document.createElement('div');
newDiv.style = "border:1px dotted gray;";
let div = insertAfter(edit_btn.item(i), newDiv);
let html = "url : <input type='text' value='"+this.dataset.url+"' size='50'><br>"; // origin
html += "text : <input type='text' id='' value='"+this.dataset.text+"' size='50'>"; // text
div.innerHTML = html;
let btn = document.createElement('button')
btn.innerHTML = 'Submit';
btn.addEventListener('click', function(e) {
let link = div.querySelectorAll('input')[0].value;
let text = div.querySelectorAll('input')[1].value;
let url = 'update.php';
let method = 'post';
parms ={'type' : 'link_update', 'no' : edit_btn.item(i).dataset.no, 'in_no' : edit_btn.item(i).dataset.in_no, 'edit_str' : link, 'pure_str' : text};
ajaxPromise(url, method, parms).then(
response => {
alert(response.msg+'\n');
if(response.link || response.text)
edit_btn.item(i).previousSibling.innerHTML = "<a href='"+response.link+"' target=new>"+response.text+"</a>";
},
error => {
alert(error);
}
);
});
div.appendChild(btn);
// 그림 : type = 'g'
} else if (edit_btn.item(i).dataset.type=='g') {
edit_btn.item(i).nextSibling.style.display = 'block';
// mathjax : type = 'm'
} else if (edit_btn.item(i).dataset.type=='m') {
let div = insertAfter(e.target, document.createElement('div'));
div.dataset.embed = 'extra';
div.style = "border:1px dotted gray;";
let btn = edit_btn.item(i);
mathjax_edit (div,btn);
}
}
});
}
// 이미지 처리
let images = document.getElementsByClassName('img_upload');
for(let i=0; i < images.length; i++) {
images.item(i).addEventListener('submit', function (e) {
e.preventDefault();
let image = e.target.parentElement.previousSibling.previousSibling;
let formData = new FormData(e.target);
formData.append('type','one_upload');
let url = 'update.php';
e.target.fileToUpload.files;
let parms = { 'formData' : formData };
ajaxPromise (url, 'post', parms).then(
response => {
let div = document.getElementById('embed_win');
// 디버깅
console.log(response);
div.innerHTML = response.msg;
image.src = response.filepath + '?' + (new Date()).getTime(); // image no cache
},
error => {
alert(error);
}
);
}, false);
}
});
// ajax post 또는 get 호출 및 결과 출력
function textAjax(url, out, method, parms) {
var xhr = new XMLHttpRequest();
if (!method) method = 'post';
xhr.open(method, url);
// 결과처리부
xhr.onreadystatechange = function() {
// ajax 통신 성공이면,
if (xhr.readyState === 4 && xhr.status === 200) {
if (xhr.responseText) {
let length = xhr.responseText.length;
// alert('결과 데이터 ('+length+'개) 도착함!!!');
console.log(xhr.responseText);
// alert(xhr.responseText);
}
out.innerHTML = xhr.responseText;
// out.innerContent = xhr.responseText;
// 출력 div에 MathJax 적용
MathJax.Hub.Queue(["Typeset",MathJax.Hub,out]);
}
};
// 데이터송신부
if (method=='post') {
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
let sendData = '';
for (const property in parms) {
sendData += property + '=' + encodeURIComponent(parms[property]) + '&';
}
xhr.send(sendData);
}
else xhr.send();
}
// ajax post 결과의 개별 항목별 표출
function itemAjax(url, outObj, method, parms) {
var xhr = new XMLHttpRequest();
if (!method) method = 'post';
xhr.open(method, url);
// 결과처리부
xhr.onreadystatechange = function() {
// ajax 통신 성공이면,
if (xhr.readyState === 4 && xhr.status === 200) {
if (xhr.responseText) {
// 응답된 데이터의 객체(배열)화
try {
var data = JSON.parse(xhr.responseText);
} catch (e) {
alert(xhr.responseText);
return false;
}
// console.log(xhr.responseText);
console.log(data);
let length = Object.keys(data).length
alert('결과 항목 ('+length+'개) 도착함!!!');
outObj.yako.value = data.yako;
outObj.english.value = data.english;
outObj.korean.value = data.korean;
outObj.extra.value = data.extra;
outObj.sujung.innerHTML = data.sujung;
outObj.out.innerHTML = data.abbr;
// 출력 div에 MathJax 적용
MathJax.Hub.Queue(["Typeset",MathJax.Hub,outObj.out]);
}
}
};
// 데이터송신부
if (method=='post') {
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
let sendData = '';
for (const property in parms) {
sendData += property + '=' + encodeURIComponent(parms[property]) + '&';
}
xhr.send(sendData);
}
else xhr.send();
}
/*
// 순수 text preview
let text_preview_btn = document.getElementById('text_preview_btn');
if(text_preview_btn) {
text_preview_btn.addEventListener('click', function (e) {
// 이미지,링크,mathjax 등을 제거하고, {[(...)]}로 교체
let childs = document.getElementById('pure_text').childNodes;
let str = before_out(childs);
// 줄바꿈 표시 (replaceAll)
str = str.split('\n').join('⏎\n');
str = str.split(' ').join('␣');
str = str.split(' ').join('␣');
let out = document.getElementById('embed_win');
out.innerHTML = str;
});
}
*/
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"