// (2020.10.27, 차재복, Cha Jae Bok, http://www.ktword.co.kr)
// (편집자용) 편집용 버튼 생성 유지
function edit_btn (data) {
// 버튼 요소 생성 및 스타일 설정
let btn = document.createElement('button');
btn.id = 'edit_btn_'+data.id;
btn.setAttribute('style','margin-left:20px;padding:0px;font-size:9px;font-style:italic');
// (편집자용) 호출 정보 알려주기
btn.title = 'reform_editor.js \n edit_btn() \n reform.'+data.id;
// 버튼 요소 내 텍스트 'Edit ∨' 요소 설정
const edit_text = document.createTextNode('Edit ∨');
btn.appendChild(edit_text);
// 버튼 요소에 이벤트리스너 설정
btn.addEventListener('click', function(e) {
const div_name = 'edit_div_';
// 'edit_div_(id)' 명칭을 갖는 요소 검색/선택
let div_id = document.getElementById(div_name+data.id);
if (div_id) { // 하부 div의 show/hide
itemShowHide(div_id, btn); // base_utils/common_utils.js
} else {
// 편집용 div 생성
let div = edit_div(data, div_name); // reform/reform_editor.js
insertAfter(e.target, div); // base_utils/common_utils.js
// 클릭 요소 (∨,∧) 바꿈
btn.innerHTML = btn.innerText.replace('∨','∧');
}
});
return btn;
}
// (편집자용) 트리 노드 edit용 div 생성
function edit_div (data, div_name) {
// 전달된 data 객체 내 필요 항목 : data.id, data.title_orig, data.yoyak, data.parent, data.sub_seq
// div 요소 생성 및 스타일 설정
let div = document.createElement('div');
// div 요소 스타일 설정
div.setAttribute('style','border:1px gray dotted;');
// div 요소에 정보 저장
div.id = div_name + data.id;
div.dataset.id = data.id;
div.dataset.parent = data.parent;
div.dataset.sub_seq = data.sub_seq;
div.dataset.path2node = data.path2node;
// id move 관련 버튼들
// let move_div = move_div(data, div); // reform/reform_edit_move.js
// div.appendChild(move_div);
// 타이틀 수정 제목
div.appendChild(document.createTextNode('제목 : '));
// 타이틀 수정 input 필드
let title_input = document.createElement('input');
title_input.id = 'title_input_' + data.id;
title_input.value = data.title_orig;
div.appendChild(title_input);
// 타이틀 수정 버튼
let title_btn = document.createElement('button');
title_btn.ch = 'id_title_update';
title_btn.id = data.id;
title_btn.parent = data.parent;
title_btn.sub_seq = data.sub_seq;
title_btn.carrier_id = title_input.id;
title_btn.select_id = 'title_type_select_' + data.id;
// (편집자용) 타이틀 수정 버튼에 함수 호출 정보 알려주기
if (glob_var.user_type > 0)
title_btn.title = 'reform/reform_editor.js/edit_div() update_item_v2() reform_update.php';
// 타이틀 수정 버튼 텍스트
let title_btn_txt = document.createTextNode('타이틀수정');
title_btn.appendChild(title_btn_txt);
title_btn.addEventListener('click', update_item_v2 ); // 이벤트리스너 등록 추가 (reform/reform_editor.js/update_item_v2 실행)
div.appendChild(title_btn);
// 타이틀 수정 option 선택
let title_type_select = document.createElement('select');
title_type_select.id = 'title_type_select_' + data.id;
let title_type_1_option = document.createElement('option');
title_type_1_option.value = '1';
title_type_1_option.textContent = '일반';
let title_type_2_option = document.createElement('option');
title_type_2_option.value = '2';
title_type_2_option.textContent = '용어링크';
title_type_select.appendChild(title_type_1_option);
title_type_select.appendChild(title_type_2_option);
div.appendChild(title_type_select);
// 줄바꾸기
div.appendChild(document.createElement('br'));
// 요약 수정 제목
div.appendChild(document.createTextNode('요약 : '));
// 요약 수정 input 필드
let yoyak_input = document.createElement('input');
yoyak_input.setAttribute('size','70');
yoyak_input.id = 'yoyak_input_' + data.id;
yoyak_input.value = data.yoyak;
div.appendChild(yoyak_input);
// 요약 수정 버튼
let yoyak_btn = document.createElement('button');
yoyak_btn.ch = 'id_yoyak_update';
yoyak_btn.id = data.id;
yoyak_btn.parent = data.parent;
yoyak_btn.sub_seq = data.sub_seq;
yoyak_btn.carrier_id = yoyak_input.id;
yoyak_btn.select_id = 'yoyak_type_select_' + data.id;
let yoyak_btn_txt = document.createTextNode('요약수정');
yoyak_btn.appendChild(yoyak_btn_txt);
yoyak_btn.addEventListener('click', update_item_v2); // 이벤트리스너 등록 추가 (reform/reform_editor.js/update_item_v2 실행)
div.appendChild(yoyak_btn);
// 요약 수정 option 선택
let yoyak_type_select = document.createElement('select');
yoyak_type_select.id = 'yoyak_type_select_' + data.id;
let yoyak_type_1_option = document.createElement('option');
yoyak_type_1_option.value = '1';
yoyak_type_1_option.textContent = '일반';
let yoyak_type_2_option = document.createElement('option');
yoyak_type_2_option.value = '2';
yoyak_type_2_option.textContent = '용어링크';
yoyak_type_select.appendChild(yoyak_type_1_option);
yoyak_type_select.appendChild(yoyak_type_2_option);
div.appendChild(yoyak_type_select);
// 줄바꾸기
div.appendChild(document.createElement('br'));
// 기능 확장 제목
div.appendChild(document.createTextNode('기능 : '));
// 기능 확장 종류 select/option 필드
let more_type_select = document.createElement('select');
more_type_select.id = 'more_type_select_' + data.id;
// let more_type_1_option = document.createElement('option');
// more_type_1_option.value = '1';
// more_type_1_option.textContent = '구현코드';
// more_type_select.appendChild(more_type_1_option);
let more_type_2_option = document.createElement('option');
more_type_2_option.value = '2';
more_type_2_option.textContent = '메뉴얼';
more_type_select.appendChild(more_type_2_option);
let more_type_4_option = document.createElement('option');
more_type_4_option.value = '4';
more_type_4_option.textContent = '비교/차이';
more_type_select.appendChild(more_type_4_option);
div.appendChild(more_type_select);
// 기능 확장 버튼 생성
let more_btn = document.createElement('button');
// 기능 확장 버튼에 정보 넣기
more_btn.ch = 'id_more_new_add';
more_btn.id = data.id;
more_btn.parent = data.parent;
more_btn.carrier_id = more_type_select.id;
more_btn.select_id = more_type_select.id;
// 기능 확장 버튼에 텍스트 넣기
let more_btn_txt = document.createTextNode('신규 추가');
more_btn.appendChild(more_btn_txt);
// (편집자용) 기능 확장 버튼에 함수 호출 정보 알려주기
if (glob_var.user_type > 0)
more_btn.title = 'reform/reform_editor.js/edit_div() update_item_v2() reform_update.php';
// 기능 확장 버튼에 이벤트리스너 등록 추가
more_btn.addEventListener('click', update_item_v2); // reform/reform_editor.js/update_item_v2()
div.appendChild(more_btn);
return div;
}
// (편집자용 edit_div) reform data 수정 ajax 요청 및 업데이트
function update_item_v2() {
// 주로, 현재 button 노드
let currentNode = this;
// 전달변수 설정
let ch = this.ch; // choice 종류
let id = this.closest('div').dataset.id; // 현재 노드 id
let parent = this.closest('div').dataset.parent; // 부모 노드 id
let sub_seq = this.closest('div').dataset.sub_seq // 현재 노드 sub_seq
let path2node = this.closest('div').dataset.path2node; // 현재 노드 path2node
let carrier_id, text, select, sub_ch; // 기타 변수 선언
carrier_id = this.carrier_id; // 값을 갖는 carrier id
if (carrier_id) text = document.getElementById(carrier_id).value; // text : 타이틀,요약 등 텍스트
select_id = this.select_id; // select 요소가 있는 id
if (select_id) select = document.getElementById(select_id);
if (select) sub_ch = select.options[select.selectedIndex].value;
// select option에 의해 선택된 것 (1:구현코드,2:메뉴얼,4:비교/차이), (1:일반,2:용어링크)
// (디버깅용)
if (!confirm('parent='+parent+', carrier_id='+carrier_id+', id='+id+', text='+text+', ch='+ch+', sub_ch='+sub_ch)) return;
let xhr = new XMLHttpRequest();
let method = 'POST';
let url = '../reform/reform_update.php';
xhr.open(method, url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 디버깅용
console.log(xhr.responseText);
let data;
// JSON이 빈 문자열이 아니면 즉, 무언가 값이 있다면
if (xhr.responseText) {
data = JSON.parse(xhr.responseText);
if (data.err_msg) {
alert(data.err_msg);
return;
}
// if (data.notice) alert(data.notice);
} else {
alert('결과값 empty ???');
return;
}
// 주요 위치별 노드(element)
let parentOl = document.getElementById('olid_'+parent);
let parentLi = parentOl.parentNode;
let currentLi = document.getElementById('lid_'+id);
// 현재 부모 sessionStorage
let currentParentObject = JSON.parse(sessionStorage.getItem('sid_' + parent));
// title 수정
if (ch == 'id_title_update') {
// 화면 상 타이틀 수정
let title = document.getElementById('title_'+id);
title.innerHTML = data.title;
// edit div 사라짐, edit btn '∧'=>'∨'
currentNode.parentNode.style.display = 'none';
const btn = document.getElementById('edit_btn_'+id);
btn.innerHTML = btn.innerText.replace('∧','∨');
// sessionStorage 수정
currentParentObject[sub_seq].title = data.title;
let currentParentSession = JSON.stringify(currentParentObject);
sessionStorage.setItem('sid_' + parent, currentParentSession);
// yoyak 수정
} else if (ch == 'id_yoyak_update') {
let yoyak = document.getElementById('yoyak_'+id);
// 만일, yoyak 존재 않으면
if(!yoyak) {
let title = document.getElementById('lid_'+id).firstChild.nextSibling;
let span = document.createElement('span');
span.id = 'yoyak_'+id;
yoyak = insertAfter(title, span) // base_utils/common_utils.js
}
yoyak.innerHTML = ' : '+data.yoyak;
// edit div 사라짐
currentNode.parentNode.style.display = 'none';
// edit btn '∧'=>'∨'
const btn = document.getElementById('edit_btn_'+id);
btn.innerHTML = btn.innerText.replace('∧','∨');
// sessionStorage 수정
currentParentObject[sub_seq].yoyak = data.yoyak;
let currentParentSession = JSON.stringify(currentParentObject);
sessionStorage.setItem('sid_' + parent, currentParentSession);
// 메뉴얼 신규 추가
} else if (ch == 'id_more_new_add' && sub_ch=='2') {
// edit div 사라짐
currentNode.parentNode.style.display = 'none';
// edit btn '∧'=>'∨'
const btn = document.getElementById('edit_btn_'+id);
btn.innerHTML = btn.innerText.replace('∧','∨');
// more table 요소 생성, 이벤트리스너 설정, 초기 오픈
let liLineSpan = currentNode.closest('li').querySelector("span[name='line']");
// line 밑줄
liLineSpan.style.borderBottom = '1px red dotted';
// line 내 mouse cursor => pointer
liLineSpan.style.cursor = 'pointer';
// line 내 dataset에 JSON 형식 저장
liLineSpan.dataset.dataObject = JSON.stringify(data.currentLiInfo);
// line 내 eventListener 설정
liLineSpan.addEventListener("click", moreShow); // -> navi_more.js
// line 직후에 초기 오픈
let detailBox = document.createElement('table');
detailBox.id = 'detail_'+id;
embed_display(data.currentLiInfo, liLineSpan, detailBox); // -> embed_display.js
insertAfter(liLineSpan, detailBox);
// sessionStorage 수정
currentParentObject[sub_seq] = data.currentLiInfo;
const currentParentData = JSON.stringify(currentParentObject);
sessionStorage.setItem('sid_' + parent, currentParentData);
}
}
}
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('id='+id+'&ch='+ch+'&text='+encodeURIComponent(text)+'&sub_ch='+sub_ch);
}