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