001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
// (2022.9.9, 차재복, Cha Jae Bok, http://www.ktword.co.kr) function createMultiMoveWin(e) { // show/hide let prevDiv = document.getElementById('outerDiv'); if(prevDiv) { if(prevDiv.style.display == 'none') prevDiv.style.display = 'flex'; else prevDiv.style.display = 'none'; return; } // div 여럿 생성 // 외곽 div 생성 let outerDiv = document.createElement('div'); outerDiv.style.border = '1px red solid'; outerDiv.style.display = 'flex'; outerDiv.style.flexWrap = 'wrap'; outerDiv.style.marginLeft = '20px'; outerDiv.id = 'outerDiv'; insertAfter(e.target,outerDiv); // 내부 상부 div 생성 let inUpperDiv = document.createElement('div'); outerDiv.appendChild(inUpperDiv); inUpperDiv.style.border = '1px red solid'; inUpperDiv.style.width = '100%'; // input radio 버튼 셋(3) 생성 const moveType = document.createElement('span'); moveType.style.border = '1px red solid'; moveType.style.marginRight = '5px'; inUpperDiv.appendChild(moveType); ['copyWord','moveWord','moveNode'].forEach(elem => { const label = document.createElement('label'); moveType.appendChild(label); label.style.marginLeft = '5px'; label.setAttribute('for',elem); label.innerText = elem; const input = document.createElement('input'); label.appendChild(input); input.id = elem; input.setAttribute('type','radio'); input.setAttribute('name','moveType'); if(elem=='copyWord') input.setAttribute('checked',true); input.addEventListener('change', (e) => { if(e.target.checked) { const leftWin = outerDiv.querySelector("div[data-lr-type='left']"); const leftLiAll = leftWin.querySelectorAll("li"); if(e.target.id=='moveNode') { leftLiAll.forEach(elem => { elem.dataset.moveType = e.target.id; const radio = elem.querySelector("input[type='radio']"); if(radio) radio.style.display = ''; const checkbox = elem.querySelector("input[type='checkbox']"); if(checkbox) checkbox.style.display = 'none'; }); } else if(e.target.id=='copyWord' || e.target.id=='moveWord') { leftLiAll.forEach(elem => { elem.dataset.moveType = e.target.id; const radio = elem.querySelector("input[type='radio']"); if(radio) radio.style.display = 'none'; const checkbox = elem.querySelector("input[type='checkbox']"); if(checkbox) checkbox.style.display = ''; }); } } }); }); // 선택 값 span 셋(3) 생성 const spanIdNo = document.createElement('span'); spanIdNo.style.border = '1px red solid'; spanIdNo.style.marginRight = '5px'; inUpperDiv.appendChild(spanIdNo); ['leftId','leftNoList','rightId'].forEach(elem => { spanIdNo.appendChild(document.createTextNode(' ['+elem+'] ')); const span = document.createElement('span'); spanIdNo.appendChild(span); span.id = elem; span.style.marginRight = '5px'; }); // 선택값 취소 button const btnEsc = document.createElement('button'); btnEsc.style.padding = '0px'; btnEsc.innerText = '값취소'; btnEsc.addEventListener('click', (e) => { spanIdNo.querySelectorAll('span').forEach(elem => elem.innerText = ''); outerDiv.querySelectorAll("input[type='checkbox'],input[type='radio']").forEach(elem => elem.checked = false); }); spanIdNo.appendChild(btnEsc); // 목표 위치 span 셋(3) 생성 const targetType = document.createElement('span'); targetType.style.border = '1px red solid'; moveType.style.marginRight = '5px'; inUpperDiv.appendChild(targetType); ['beforeTarget','afterTarget','childTarget'].forEach(elem => { const label = document.createElement('label'); targetType.appendChild(label); label.style.marginLeft = '5px'; label.setAttribute('for',elem); label.innerText = elem; const input = document.createElement('input'); label.appendChild(input); input.id = elem; input.setAttribute('type','radio'); input.setAttribute('name','targetType'); // if(elem=='afterTarget') input.setAttribute('checked',true); }); // confirm 버튼 생성 및 이벤트 처리 multiConfirmBtnCreate(outerDiv,inUpperDiv); // navi_edit_multi.js // 내부 하층 div 좌우 둘(2) 생성 ['left','right'].forEach( elem => { let dualDiv = document.createElement('div'); outerDiv.appendChild(dualDiv); dualDiv.style.border = '1px red solid'; dualDiv.style.width = '50%'; dualDiv.style.boxSizing = 'border-box'; dualDiv.setAttribute('class','dualDiv'); dualDiv.dataset.type = 'word'; dualDiv.dataset.lrType = elem; dualDiv.dataset.moveType = 'copyWord'; dualDiv.dataset.id = '0'; fetchDataCreateOl(dualDiv); // navi_base.js }); } // 호출 : [navi_edit_multi.js] createMultiMoveWin() function multiConfirmBtnCreate(outerDiv,inUpperDiv){ const confirmBtn = document.createElement('button'); inUpperDiv.appendChild(confirmBtn); confirmBtn.innerText = '확정송출'; confirmBtn.style.marginLeft = '10px'; confirmBtn.addEventListener('click', (e) => { const moveType = inUpperDiv.querySelector("input[name='moveType']:checked"); const leftIdSpan = inUpperDiv.querySelector("span#leftId"); const leftNoListSpan = inUpperDiv.querySelector("span#leftNoList"); const rightIdSpan = inUpperDiv.querySelector("span#rightId"); const targetType = inUpperDiv.querySelector("input[name='targetType']:checked"); let isConfirm; if(moveType && moveType.id=='moveNode' && leftIdSpan.innerText && rightIdSpan.innerText && targetType && targetType.id) { isConfirm = confirm('moveType:'+moveType.id +'\nleftId:'+leftIdSpan.innerText+ ', rightId:'+rightIdSpan.innerText +'\ntargetType:'+targetType.id); } else if(moveType && (moveType.id=='copyWord' || moveType.id=='moveWord') && leftNoListSpan.innerText && rightIdSpan.innerText) { isConfirm = confirm('moveType(choice):'+moveType.id +'\nleftNoList(parent,child):'+leftNoListSpan.innerText+', rightId:'+rightIdSpan.innerText); } else alert('적절한 항목 선택 요망'); if(!isConfirm) return; let obj = { 'choice' : moveType.id, 'leftId' : leftIdSpan.innerText , 'leftNoList' : leftNoListSpan.innerText, 'rightId' : rightIdSpan.innerText , 'targetType' : targetType.id }; 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); else { alert('업데이트 성공'); // left const leftDiv = outerDiv.querySelector("div[data-lr-type='left']"); while(leftDiv.hasChildNodes()) leftDiv.removeChild(leftDiv.firstChild); const idPath = response.path2node.split(','); asynctodo(idPath,leftDiv); // navi_search.js // right const rightDiv = outerDiv.querySelector("div[data-lr-type='right']"); while(rightDiv.hasChildNodes()) rightDiv.removeChild(rightDiv.firstChild); fetchDataCreateOl(rightDiv); } }, error => { alert(error); } ); }); } // 각 li 마다, checkbox 또는 radio 버튼 생성, 버튼 클릭 시 이벤트 처리 // 호출 : [navi_base.js] li_create() function multiChoiceMove(li, liData, typeParms) { // 각 li 마다, checkbox 또는 radio 버튼 생성 (radio 경우에, 좌우 구분) const check = document.createElement('input'); if(liData.item_type=='id') { check.setAttribute('type','radio'); //alert(typeParms.moveType); if(typeParms.lrType=='left' && (typeParms.moveType=='copyWord' || typeParms.moveType=='moveWord')) check.style.display = 'none'; check.setAttribute('name',typeParms.lrType); li.appendChild(check); } else if(liData.item_type=='no' && typeParms.lrType=='left') { check.setAttribute('type','checkbox'); if(typeParms.lrType=='left' && typeParms.moveType=='moveNode') check.style.display = 'none'; li.appendChild(check); } check.addEventListener('change', (e) => { const multiDiv = e.target.closest("div"); const leftIdSpan = document.getElementById('leftId'); const leftNoListSpan = document.getElementById('leftNoList'); const rightIdSpan = document.getElementById('rightId'); const pair = li.dataset.parent + ',' + li.dataset.no; if(e.target.checked) { if(multiDiv.dataset.lrType == 'left') { if(e.target.name) leftIdSpan.innerText = li.dataset.id; else { if(!leftNoListSpan.innerText) { leftNoListSpan.innerText = pair; return; } let noList = leftNoListSpan.innerText.split(';'); if(!noList.includes(pair)) { noList.push(pair); leftNoListSpan.innerText = noList.join(';'); } } } if(multiDiv.dataset.lrType == 'right') { rightIdSpan.innerText = li.dataset.id; } } else { if(multiDiv.dataset.lrType == 'left') { const noList = leftNoListSpan.innerText.split(';'); const idx = noList.indexOf(pair); noList.splice(idx,1); leftNoListSpan.innerText = noList.join(';'); } } }); }