소스 파일 : /reform/reform_editor.js (2020-10-23)     소스 설명 : (개선중) 편집자용 javascript 구현 : reform 트리,데이터,코드/메뉴얼 수정 등
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
// (2020.10.23, 차재복, Cha Jae Bok, cjbword@gmailcom)


// (편집자용) 편집용 버튼 생성 유지
function edit_btn (data) {

	// 버튼 요소 생성 및 스타일 설정
	let btn = document.createElement('button');
    btn.id = 'edit_btn_'+data.id;
    btn.title = 'reform_editor.js/edit_btn() reform.'+data.id;
	btn.setAttribute('style','margin-left:20px;padding:0px;font-size:9px;font-style:italic');

	// 버튼 요소 내 텍스트 '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);
}


JS 키워드 : addEventListener, appendChild, console.log, createElement, dataset, encodeURIComponent, getElementById, innerHTML, innerText, item, JSON.parse, JSON.stringify, nextSibling, onreadystatechange, open, parentNode, replace, send, sessionStorage, setRequestHeader, target, textContent, value, XMLHttpRequest

Copyrightⓒ written by 차재복 (Cha Jae Bok)     (소액후원)

   소스 이력    소스 폴더    소스 언어