001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
// (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; }); } */