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