001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
// (2022.9.7, 차재복, Cha Jae Bok, http://www.ktword.co.kr) // type별로 각각 다른 편집 버튼 및 기능 구현 (type = word, source, manual, db_table) // 호출 : [navi_base.js] li_create() function variousEditByType(li, liData, type) { // 타이틀, 요약 수정 : (type = word, source, manual, db_table 모두 해당) // [title] let titleBtn = itemTitleEdit(li, liData, type); // navi_base_edit.js li.appendChild(titleBtn); // 트리 노드 수정 : (type = word, source, manual, db_table 모두 해당) // [ ← ↑ ↓ →] [자식 맨앞 맨끝] [check] if(liData.item_type!='no') { let treeEditSpan = treeEdit(li, liData, type); // navi_base_edit.js li.appendChild(treeEditSpan); } // 워드 노드 내용 편집 : (type = word 만 해당) // [ New Move Delete Edit ] if(li.dataset.no && type=='word') { let wordEditSpan = wordEdit(li, liData, type); // navi_edit_word.js li.appendChild(wordEditSpan); } // 소스 노드 내용 편집 : (type = source 만 해당) // [ Edit ] if(type=='source' && liData.item_type == 'file') { let sourceEditSpan = sourceEdit(li, liData, type); // navi_base_edit.js li.appendChild(sourceEditSpan); } } // 기능 : 노드 title, desc 문자열 편집 // 호출 : [navi_base.js] li_create() function itemTitleEdit(li, liData, type) { // type = (word,file,manual,table 4종) const editBtn = document.createElement('button'); editBtn.setAttribute('class','editBtn'); editBtnAllStyle(editBtn,'Title'); // navi_base_edit.js editBtn.style.margin = '0px 0px 0px 15px'; editBtn.addEventListener('click', function(e) { // 이미 input sumit 있으면 복귀 if( li.querySelector('button.submit') ) { disableInput(li); // navi_base_edit.js return editBtn;; } // title,colon,desc 찾음 const title = li.querySelector('span.title'); const colon = li.querySelector('span.colon'); const desc = li.querySelector('span.desc') // title,colon,desc 숨김 if(title) title.style.display = 'none'; if(colon) colon.style.display = 'none'; if(desc) desc.style.display = 'none'; // title 변경 // title 요소 백업 window.titleBackup = title; // title을 input 요소로 변환 let inputTitle = document.createElement('input'); inputTitle.setAttribute('class','title'); inputTitle.setAttribute('size','12'); inputTitle.value = title.innerText; li.insertBefore(inputTitle,this); // title.replaceWith(inputTitle); // li.replaceChild(inputTitle,title); // desc 요소 변경 // desc 요소 백업 if(desc) window.descBackup = desc; // desc을 input 요소로 변환 if(desc) { let inputDesc = document.createElement('input'); inputDesc.setAttribute('class','desc'); inputDesc.setAttribute('size','30'); inputDesc.value = desc.innerText; li.insertBefore(inputDesc,this); // desc.replaceWith(inputDesc); // li.replaceChild(inputDesc,desc); } // submit button 추가 let submitBtn = document.createElement('button'); submitBtn.setAttribute('class','submit'); submitBtn.dataset.type = type; // type별 요소 내 식별자 저장 if(type=='word' && liData.item_type == 'id') submitBtn.dataset.choice = 'word_gubun_name_yoyak_update'; if(type=='word' && liData.item_type == 'no') { li.dataset.id = li.parentNode.dataset.id; li.dataset.no = liData.id; submitBtn.dataset.choice = 'word_titlename_yoyak_update'; } if(type=='source') submitBtn.dataset.choice = 'source_name_expr_update'; if(type=='manual') submitBtn.dataset.choice = 'manual_name_yoyak_update'; if(type=='db_table') { if(liData.item_type=='field') { li.dataset.id = li.parentNode.dataset.id; // table id li.dataset.no = liData.id; // field id } submitBtn.dataset.choice = 'db_tbl_fld_comment_update'; } submitBtn.innerHTML = 'Submit'; submitBtn.style.fontSize = '13px'; li.insertBefore(submitBtn, this); // submit button에 event 추가 if(submitBtn.dataset.choice) submitBtn.addEventListener('click', ajaxUpdate ); // navi_base_edit.js },true); return editBtn; } // 기능 : 트리 노드 수정 // 호출 : [navi_base.js] li_create() function treeEdit(li, liData, type) { const treeEditSpan = document.createElement('span'); treeEditSpan.style.marginLeft = '10px'; // move 버튼 넷 (4 ← ↑ ↓ → ) 보이기 moveBtnShow (li, treeEditSpan, 'sourceOrderingInNode'); // navi_base_edit.js // check 버튼 보이기 if (type=='word') { const checkBtn = document.createElement('button'); treeEditSpan.appendChild(checkBtn); checkBtn.setAttribute('class','treeChkBtn'); editBtnAllStyle(checkBtn,'check'); // navi_base_edit.js checkBtn.style.margin = '0px 5px 0px'; checkBtn.dataset.type = type; checkBtn.dataset.choice = 'treeNodeCheck'; checkBtn.addEventListener('click', ajaxUpdate ); // navi_base_edit.js } // delete 버튼 (x) 보이기 if (type=='source') { const deleteBtn = document.createElement('button'); treeEditSpan.appendChild(deleteBtn); editBtnAllStyle(deleteBtn,'x'); // navi_base_edit.js deleteBtn.addEventListener('click', (e) => { const isConfirm = confirm('삭제 대상 id : '+li.dataset.id); if(!isConfirm) return; const url = '/test/navigation/naviUpdate.php'; const method = 'post'; const choice = 'deleteSrcFile'; const parent = li.parentNode.closest('li').dataset.id; const id = li.dataset.id; parms = {'type' : 'source', 'choice' : choice, 'id' : id, 'no' : parent}; ajaxPromise(url,method,parms) // common_utils.js .then( response => { if(response.err_msg) alert(response.err_msg); // 기존 olStart 산하 자식 모두 없애고 다시 보여주기 // - 기존 열려진 ol 요소들 모두 닫기, bullet 요소 화살표 방향 바꿈, idpath에 언급된 id 마다 차례로 open 시킴 const idpath = ['0',parent]; // const olStart = document.getElementById('sourceOlStart'); const startElem = document.getElementById('sourceStart'); const childOl = startElem.querySelector('ol.tree'); if(childOl) childOl.remove(); asynctodo(idpath,startElem); // navi_search.js }, error => { alert(error); } ); }); } return treeEditSpan; } // 편집 버튼 제목 및 스타일링 function editBtnAllStyle(button,name,color) { button.style.fontSize = '7px'; button.style.marginLeft = '5px'; button.style.padding = '0px'; button.innerHTML = name; if(color) button.style.color = color; } // 기능 : 서버측 db 업데이트 및 그 결과 응답 처리 // 호출 : [navi_base_edit.js] itemTitleEdit(li,liData,type) function ajaxUpdate(e) { // title update : // - type = (word,source,manual,db_table) // - word : word_gubun_name_yoyak_update, word_titlename_yoyak_update // - source : source_name_expr_update, // - manual : manual_name_yoyak_update // - db_tbl : db_tbl_fld_comment_update // check update : // - word : treeNodeCheck let type = e.target.dataset.type; let choice = e.target.dataset.choice; let li = e.target.closest('li'); let id = li.dataset.id; let no = li.dataset.no; if(no) id = li.closest('li').dataset.id; // 상위 id 가져옴 // 제목 let inputTitle = li.querySelector('input.title'); let msg; if(inputTitle) msg = inputTitle.value; // 요약 let inputDesc = li.querySelector('input.desc'); let text; if(inputDesc) text = inputDesc.value; if(!confirm('type='+type+', choice='+choice+', id='+id+', no='+no+', msg='+msg+', text='+text)) return; let formData = new FormData(); // 빈 formData 생성 formData.append('type',type); formData.append('choice',choice); // [str update] (word) 'word_gubun_name_yoyak_update', (source) 'source_name_expr_update' // [word treeNode check] formData.append('id',id); // 해당 id if(no) formData.append('no',no); // 해당 no formData.append('msg',msg); // name(title) formData.append('text',text); // yoyak(desc) let url = '/test/navigation/naviUpdate.php'; let method = 'post'; let parms = { 'formData' : formData }; ajaxPromise(url, method, parms) // common_utils.js // 가져온 결과에 대한 데이터 가공 .then( response => { // (개발,디버깅중) if(response.err_msg) { alert(response.err_msg); return; } if(choice=='word_gubun_name_yoyak_update' || choice=='word_titlename_yoyak_update' || choice=='source_name_expr_update' || choice=='manual_name_yoyak_update' || choice=='db_tbl_fld_comment_update') { // input,submit 요소 제거, span 요소 복구 disableInput(li) // 서버 송출 데이터를 해당 요소에 출력 let title = li.querySelector('span.title'); let desc = li.querySelector('span.desc'); if(response.title) title.innerHTML = response.title; if(response.desc) desc.innerHTML = response.desc; } else if(choice=='treeNodeCheck'){ alert(response.result); } }, error => { alert(error); } ); } // 제목 입력 창 닫기 // 호출 : [navi_base_edit.js] itemTitleEdit(li,liData,type) function disableInput(li) { // 각 요소들 찾기 const inputTitle = li.querySelector('input.title'); const inputDesc = li.querySelector('input.desc'); const buttonSubmit = li.querySelector('button.submit'); const spanTitle = li.querySelector('span.title'); const spanColon = li.querySelector('span.colon'); const spanDesc = li.querySelector('span.desc') // 편집용 inputTitle,inputDesc,submit 제거 if(inputTitle) inputTitle.remove(); if(inputDesc) inputDesc.remove(); if(buttonSubmit) buttonSubmit.remove(); // 기존 title,colon,desc 보이기 if(spanTitle) spanTitle.style.display = ''; if(spanColon) spanColon.style.display = ''; if(spanDesc) spanDesc.style.display = ''; } // 소스 파일 편집 function sourceEdit(li, liData, type) { const srcEditSpan = document.createElement('span'); const editBtn = document.createElement('button'); editBtnAllStyle(editBtn,'Edit'); // navi_base_edit.js srcEditSpan.appendChild(editBtn); editBtn.addEventListener('click', function(e) { const oldEditDiv = li.querySelector('div.editDiv') if(oldEditDiv) { if(oldEditDiv.style.display == 'none') oldEditDiv.style.display = 'flex'; else oldEditDiv.style.display = 'none'; return; } //console.log(liData); // alert(li.dataset.id); const url = '/test/navigation/naviUpdate.php'; const method = 'post'; const choice = 'editSrcFileFetch'; const id = li.dataset.id; const parms = { 'choice' : choice, 'id' : id}; ajaxPromise(url, method, parms) // common_utils.js .then( response => { // console.log(response); // alert(response.responseText); const editDiv = document.createElement('div'); editDiv.setAttribute('class','editDiv'); editDiv.style.display = 'flex'; editDiv.style.border = '1px solid red'; const textarea = document.createElement('textarea'); textarea.setAttribute('rows','23'); // textarea.setAttribute('cols','98'); textarea.style.width = '80%'; textarea.style.fontSize = '13px'; textarea.style.padding = '10px'; // textarea.style.whitespace = 'pre'; editDiv.appendChild(textarea); textarea.value = response.code; const submitBtn = document.createElement('button'); submitBtn.innerText = 'Submit'; editDiv.appendChild(submitBtn); submitBtn.addEventListener('click', (e) => { // alert(id + ' => ' + textarea.value); const url = '/test/navigation/naviUpdate.php'; const method = 'post'; const choice = 'editSrcFileUpdate'; const parms = {'choice' : choice, 'id' : id, 'msg' : textarea.value }; ajaxPromise(url, method, parms) // common_utils.js .then( response => { console.log(response); // editDiv(textarea,submitBtn) 제거 editDiv.remove(); }, error => { alert(error); } ); }); li.appendChild(editDiv); }, error => { alert(error); } ); }); return srcEditSpan; }