001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103104105106107108109110111112113114115116117118119120121122
// (2022.8.29, 차재복, Cha Jae Bok, http://www.ktword.co.kr) // 노드 이동용 버튼 생성 // 호출 : [navi_base_edit.js] treeEdit() function moveBtnShow (li, parentSpan, choice) { // 부모 수준 상승 버튼 const leftBtn = document.createElement('button'); editBtnAllStyle(leftBtn,'←'); // navi_base_edit.js parentSpan.appendChild(leftBtn); // 형제 수준 앞으로 이동 const upBtn = document.createElement('button'); editBtnAllStyle(upBtn,'↑'); // navi_base_edit.js upBtn.addEventListener('click', function(e) { // 기존 confirm 버튼 없을 때, confirm 버튼 생성 if(!li.querySelector('.confirm')) confirmBtnCreate(li, parentSpan, choice); // navi_edit_move.js // 앞쪽 형제 여부 왁인 후, 교체 if(li.previousElementSibling) li.parentNode.insertBefore(li,li.previousElementSibling); else alert('맨 앞입니다'); }); parentSpan.appendChild(upBtn); // 형제 수준 뒤로 이동 const downBtn = document.createElement('button'); editBtnAllStyle(downBtn,'↓'); // navi_base_edit.js downBtn.addEventListener('click', function(e) { // 기존 confirm 버튼 없을 때, confirm 버튼 생성 if(!li.querySelector('.confirm')) confirmBtnCreate(li, parentSpan, choice); // navi_edit_move.js if(li.nextElementSibling) insertAfter(li.nextElementSibling,li); else alert('맨 끝입니다'); }); parentSpan.appendChild(downBtn); // 자식 수준 하강 버튼 const rightBtn = document.createElement('button'); editBtnAllStyle(rightBtn,'→'); // navi_base_edit.js parentSpan.appendChild(rightBtn); } // 기능 : 이동 확정 confirm 버튼 생성 // 호출 : [navi_base_edit.js] moveBtnShow(li,parentSpan,choice) function confirmBtnCreate(li, parentSpan, choice) { // 기존 열린 confirm 버튼들 제거, 기존 li 외곽선 제거, 원래 위치로 이동 const topLi = document.querySelector("li[data-type='source']"); const confirmButtons = topLi.querySelectorAll('.confirm'); if(confirmButtons) confirmButtons.forEach( elem => { const li = elem.closest('li'); li.style.border = ''; const parent = topLi.querySelector("ol[data-id='"+li.dataset.oldParentId+"']") const reference = topLi.querySelector("li[data-id='"+li.dataset.oldNextId+"']") // parent.insertBefore(li,reference) elem.remove(); }); // li 요소 스타일링 li.style.border = '2px red solid'; // 원래parent,원래직후id 기록 li.dataset.oldParentId = li.dataset.parent; li.dataset.oldNextId = li.nextElementSibling ? li.nextElementSibling.dataset.id : null ; const confirmBtn = document.createElement('button'); confirmBtn.setAttribute('class','confirm'); // 스타일링 editBtnAllStyle(confirmBtn,'Confirm','red'); // navi_base_edit.js confirmBtn.addEventListener('click', function(e) { const type = this.closest('li').dataset.type; const currentId = this.closest('li').dataset.id; const currentParentId = this.closest('li').parentNode.closest('li').dataset.id; const oldParentId = li.dataset.oldParentId; const oldNextId = li.dataset.oldNextId; // { type, choice, parent id, 'seq_matched' : {sequence # : id} } let i=1; let obj = { 'type' : type, 'choice' : choice, 'id' : currentParentId }; let seq_matched_obj = {}; const children = this.closest('ol').childNodes; children.forEach( elem => { seq_matched_obj[i] = elem.dataset.id; i = i + 1; }); obj['seq_matched'] = seq_matched_obj; const sendData = JSON.stringify(obj); const isConfirm = confirm('현재parent:'+currentParentId+',현재id:'+currentId +',원래parent:'+oldParentId+',원래직후id:'+oldNextId +'\n'+sendData); if(!isConfirm) return; const parms = { 'json' : true, 'obj' : obj}; const url = '/test/navigation/naviUpdate_JSON.php'; const method = 'post'; ajaxPromise(url, method, parms) // common_utils.js .then( response => { // (개발,디버깅중) if(response.err_msg) alert(response.err_msg); // console.log(response.query,'\n',response.typeStr,'\n',response.varStr,'\n',response.bind_stmt); // alert('서버 응답'); li.style.border = ''; confirmBtn.remove(); }, error => { alert(error); } ); }); insertAfter(parentSpan,confirmBtn); // common_utils.js }