// (2022.9.7, 차재복, Cha Jae Bok, http://www.ktword.co.kr)
// 호출 : [navi_base.js] li_create()
function wordEdit(li, liData, type) {
// span 요소 생성
const wordEditSpan = document.createElement('span');
// Move 버튼
const moveBtn = document.createElement('button');
editBtnAllStyle(moveBtn,'Move'); // navi_base_edit.js
wordEditSpan.appendChild(moveBtn);
moveBtn.addEventListener('click', function(e) {
const moveSpan = this.nextElementSibling;
if(moveSpan.getAttribute('class') == 'moveSpan') {
li.style.border = '';
moveSpan.remove();
return;
}
li.style.border = '2px solid red';
// move 세부 버튼 넷 (4 ← ↑ ↓ → ) 및 confirm 버튼 보이기
moveSpanCreate(li,liData,this); // navi_edit_word.js
});
// Edit 버튼
const editBtn = document.createElement('button');
editBtnAllStyle(editBtn,'Edit'); // navi_base_edit.js
wordEditSpan.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;
}
const no = liData.id;
const parent = liData.parent;
const choice = 'ajaxFetchWord';
const url = '/test/navigation/naviFetch.php?choice='+choice+'&no='+no;
const method = 'get';
ajaxPromise (url, method)
.then(
response => {
// (개발,디버깅중)
if(response.err_msg) {
alert(response.err_msg);
return;
}
editDivHandle (li,response); // navi_edit_word.js
},
error => {
alert(error);
}
);
});
// delete(x) 버튼
deleteWord(type,li,wordEditSpan);
// 위와같이 만들어진 edit span 요소를 리턴
return wordEditSpan;
}
// 해당 분류에서 용어 삭제
// 호출 : [navi_base_edit.js] wordEdit()
function deleteWord(type,li,wordEditSpan) {
const deleteBtn = document.createElement('button');
editBtnAllStyle(deleteBtn,'x'); // navi_base_edit.js
wordEditSpan.appendChild(deleteBtn);
deleteBtn.addEventListener('click', function(e) {
const parentLi = li.parentNode.closest('li');
const parentId = parentLi.dataset.id;
const no = li.dataset.no;
const isConfirm = confirm('부모id:'+parentId+', 삭제대상no:'+no);
if(isConfirm) {
const url = '/test/navigation/naviUpdate.php';
const method = 'post';
const choice = 'deleteWordUpdate';
const parms = { 'type' : type, 'choice' : choice, 'id' : parentId, 'no' : no };
ajaxPromise(url,method,parms)
.then(
response => {
this.closest('ol').remove();
fetchDataCreateOl(parentLi); // navi_base.js
},
error => { alert(error); }
);
}
});
}
// 호출 : [navi_base_edit.js] wordEdit()
function moveSpanCreate(li,liData,reference){
const moveSpan = document.createElement('span');
moveSpan.setAttribute('class','moveSpan');
moveSpan.style.backgroundColor = 'lightgray';
insertAfter(reference,moveSpan);
// move 버튼 넷(4) 보이기
moveBtnShow (li,moveSpan);
// confirm 버튼
const confirmBtn = document.createElement('button');
editBtnAllStyle(confirmBtn,'Confirm','red');
confirmBtn.addEventListener('click', function(e) {
const choice = 'wordOrderInNode';
const curParentId = li.parentNode.closest('li').dataset.id;
const previousNo = li.previousElementSibling ? li.previousElementSibling.dataset.no : '맨앞';
// { parent id, sequence #, no }
let i=1;
let obj = { 'type' : li.type, 'id' : liData.parent, 'choice' : 'wordOrderInNode' };
let seq_matched_obj = {};
li.parentNode.childNodes.forEach( elem => {
seq_matched_obj[i] = elem.dataset.no;
i = i + 1;
});
obj['seq_matched'] = seq_no_obj;
const sendData = JSON.stringify(obj);
const isConfirm = confirm('현재 parent:'+curParentId+',현재 no:'+liData.id+
',직전 parent:'+liData.parent+',직전 no:'+previousNo+
'\n'+sendData);
if(!isConfirm) return;
const url = '/test/navigation/naviUpdate_JSON.php';
const method = 'post';
const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
// (개발,디버깅중)
if(xhr.responseText.err_msg) {
alert(xhr.responseText.err_msg);
return;
}
$jsonObj = JSON.parse(xhr.responseText);
alert('응답 결과:'+$jsonObj['result']);
}
};
// HTTP 헤더 mime 타입 지정
xhr.setRequestHeader('Content-Type','application/json');
// 보낼 정보 (JSON 포멧 스트링)
xhr.send(sendData);
});
moveSpan.appendChild(confirmBtn);
}
// 호출 : [navi_edit_word.js] wordEdit(li,liData,type)
function editDivHandle (li,response) {
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.fontSize = '13px';
textarea.style.padding = '10px';
// 서버 응답 문자열 중 html entities들을 변환하고 대입
const transformedStr = response.abbr.replace(/&#(\d+);/g, function(matched, extract) {
return String.fromCharCode(extract);
});
textarea.value = transformedStr;
//console.log(response.abbr.decode());
editDiv.appendChild(textarea);
const submitBtn = document.createElement('button');
submitBtn.innerText = 'Submit';
editDiv.appendChild(submitBtn);
li.appendChild(editDiv);
submitBtn.addEventListener('click', (e) => {
// progressive bar 보이기 구현
const progressDiv = document.createElement('div');
progressDiv.style.width = '1%';
progressDiv.style.height = '20px';
progressDiv.style.backgroundColor = 'black';
li.appendChild(progressDiv);
let width = 1;
let intervalId = setInterval( () => {
if (width >= 100) {
clearInterval(intervalId);
} else {
width++;
progressDiv.style.width = width + "%";
}
}, 30);
// ajax 호출
const url = '/test/navigation/naviUpdate.php';
const method = 'post';
const text = li.querySelector('textarea').value.replaceAll(/\n/g,'\r\n').trim();
// 기존 db 내 문자열 대부분의 줄바꿈이 '\r\n'로 되어있기 때문임
const parms = {'choice' : 'wordEditUpdate', 'id' : li.dataset.parent, 'no' : li.dataset.no,
'text' : text};
let xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// (개발,디버깅중)
if(xhr.responseText.err_msg) {
alert(xhr.responseText.err_msg);
return;
}
// alert('서버응답 성공');
const out = li.querySelector("div[class='detail_view']");
//alert(xhr.status+', '+xhr.statusText+', '+xhr.responseText);
const responseObj = JSON.parse(xhr.responseText)
// out div 산하 자식 모두 삭제
while (out.hasChildNodes()) out.removeChild(out.firstChild);
// 섹션별 나누어 보여주기 및 포커스
displayPerSection(out, responseObj);
li.querySelector('a.bullet').focus();
// editDiv(textarea,submitBtn),progressDiv 제거
editDiv.remove();
progressDiv.remove();
}
};
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
let sendData = '';
for (const property in parms) {
sendData += property + '=' + encodeURIComponent(parms[property]) + '&';
}
xhr.send(sendData);
});
}