https://kereview.or.kr/js/site/commons/Common.js

1/**
2 * Commons.js
3 * 공통기능 JS
4 * ==============================================
5 * @author PJY
6 * @history     작성일     작성자     변경내용
7 * @history 2019.04.08    PJY      최초작성
8 * @history 2019.04.08    PJY      공통 파라미터 생성함수 정의
9 * ==============================================
10 */
11
12/**
13 * REQUEST METHOD 상수
14 * @author PJY
15 */
16const METHOD = {
17    POST: 'POST',
18    GET: 'GET',
19    PUT: 'PUT',
20    DELETE: 'DELETE',
21    OPTIONS: 'OPTIONS'
22};
23const MESSAGE = {
24    SAVE: '저장하시겠습니까 ?',
25    SAVED: '저장하였습니다.',
26    CREATE: '등록하시겠습니까 ?',
27    CREATED: '등록하였습니다.',
28    UPDATE: '수정하시겠습니까 ?',
29    UPDATED: '수정하였습니다.',
30    DELETE: '삭제하시겠습니까 ?',
31    DELETED: '삭제하였습니다.',
32    FAILED: '실패하였습니다.',
33    RESET: '초기화하시겠습니까?',
34    REMOVE: '완전 삭제하시겠습니까? 복원이 불가능합니다.',
35    RECOVERY: '복원하시겠습니까?',
36    SELECT:'선택하시겠습니까?',
37    APPLIED:'적용되었습니다.'
38};
39/**
40 * VALIDATE_MESSAGE 상수
41 * @author PJY
42 */
43const VALIDATE_MESSAGE = '은(는) 필수 값입니다';
44
45/**
46 * 공통 VALIDATE_MESSAGE FUNCTION
47 * @param tagName 태그명
48 * @author PJY
49 */
50const validateMsg = (tagName) => {
51    const tag = document.getElementById(tagName);
52    const label = tag.parentNode.previousSibling.previousSibling;
53    alert(label.innerText + VALIDATE_MESSAGE);
54};
55
56/**
57 * AJAX - GET Function
58 * @param url
59 * @param data
60 * @author PJY
61 */
62$.ajaxGet = (url,data) => {
63    return $.ajax({
64        url: url,
65        data: data,
66        method: 'GET',
67        dataType: 'json',
68        contentType:'application/json'
69    });
70};
71
72/**
73 * AJAX - POST Function
74 * @param url
75 * @param data
76 * @author PJY
77 */
78$.ajaxPost = (url, data) => {
79   return $.ajax({
80        url: url,
81        data: data,
82        method: 'POST',
83        dataType: 'json',
84        contentType:'application/json'
85    });
86};
87
88
89/**
90 * AJAX - PUT Function
91 * @param url
92 * @param data
93 * @author PJY
94 */
95$.ajaxPut = (url, data) => {
96    return $.ajax({
97        url: url,
98        data: data,
99        method: 'PUT',
100        dataType: 'json',
101        contentType:'application/json'
102    });
103};
104
105/**
106 * AJAX - DELETE Function
107 * @param url
108 * @param data
109 * @author PJY
110 */
111$.ajaxDelete = (url,data) => {
112    return $.ajax({
113        url: url,
114        data: data,
115        method: 'DELETE',
116        dataType: 'json',
117        contentType:'application/json'
118    });
119};
120
121$.fn.serializeObject = function () {
122    const o = {};
123    const a = this.serializeArray();
124    $.each(a, function () {
125        if (o[this.name]) {
126            if (!o[this.name].push) {
127                o[this.name] = [o[this.name]];
128
129            }
130            o[this.name].push(this.value || '');
131
132        } else {
133            o[this.name] = this.value || '';
134        }
135    });
136    return o;
137};
138/**
139 * 공통 함수 정의
140 * @type {{createParams: (function(*, *=): string)}}
141 */
142const COMMON = {
143    createParams (form, pageIndex = 1 ) {
144        const searchCondition = form.searchCondition.value;
145        const searchKeyword = form.searchKeyword.value;
146        const mno = form.mno.value;
147        const params = {
148            mno,
149            pageIndex,
150            searchCondition,
151            searchKeyword
152        };
153        const result = Object.keys(params).reduce((result, key, index) => {
154            if (params[key]) {
155                return result + `${key}=${params[key]}&`;
156            } else {
157                return result;
158            }
159        }, '?');
160        return result;
161    },
162    createParamsWithSrchDt (form, pageIndex = 1) {
163        const searchCondition = form.searchCondition.value;
164        const searchKeyword = form.searchKeyword.value;
165        const mno = form.mno.value;
166        const searchSDate = form.searchSDate.value;
167        const searchEDate = form.searchEDate.value;
168        const params = {
169            mno,
170            pageIndex,
171            searchCondition,
172            searchKeyword,
173            searchSDate,
174            searchEDate,
175        };
176        const result = Object.keys(params).reduce((result, key, index) => {
177            if (params[key]) {
178                return result + `${key}=${params[key]}&`;
179            } else {
180                return result;
181            }
182        }, '?');
183        return result;
184    },
185    unescapeXSS(str) {
186        if (!str) {
187            return "";
188        }
189        while (str.indexOf("&") > -1) {
190            str = str.replaceAll("&", "&");
191        }

192        str = $('<div/>').html(str).text();
193        return str.replace(/<(no)?script[^>]*>.*?<\/(no)?script>/gi, '');;
194    }
195};
196
197/* 발리데이션 결과 */
198const validateResult = (responseJSON) => {
199    if (responseJSON.causes) {
200        return responseJSON.causes.reduce((result, data, index) => `${result}${data.message}\n`, "");
201    }
202    return responseJSON.message;
203};
204
205
206
207$(()=>{
208    // div_onlyEngNum 클래스를 사용할 시 영문과 숫자만 입력 가능
209    $(document).on("change keyup input", ".div_onlyEngNum", (e) => {
210        checkText.onlyEngNum(e);
211    });
212    // div_onlyNum 클래스를 사용할 시 숫자만 입력 가능
213    $(document).on("change keyup input", ".div_onlyNum", (e) => {
214        checkText.onlyNum(e);
215    });
216    // maxlength 에 따라 자릿수가 아닌 byte수로 글자 자르기
217    $(document).on("change keyup input", "input[maxlength],textarea[maxlength]", (e) => {
218        let maxBytes = $(e.target).attr('maxlength');
219        $(e.target).val(subStrOfLngth($(e.target).val(), maxBytes));
220    });
221    // 달력 필드 입력 제한
222    $(document).on("change keyup input", ".js_cal", (e) => {
223        if (!/^[0-9 -]+$/.test(e.target.value)) {
224            e.target.value = e.target.value.replace(/[^0-9 -]/, "");
225        }
226    });
227    $(document).on("change keyup input", ".from-date-picker,.from-datetime-picker", (e) => {
228        if (!/^[0-9 :-]+$/.test(e.target.value)) {
229            e.target.value = e.target.value.replace(/[^0-9 :-]/, "");
230        }
231    });
232
233        if (`${CSRF_ENABLED}`) {
234        // 일반 form CSRF 토큰 전달
235        $(document).on("submit", "form", (e) => {
236            e.preventDefault();
237            if (e.target.enctype == "multipart/form-data") {
238                e.target.action = e.target.action + (e.target.action.indexOf("?") != -1 ? '&' : '?') + csrfHeader + "=" + csrfToken;
239            } else {
240                $('<input>').attr({
241                    type: 'hidden',
242                    name: csrfHeader,
243                    value: csrfToken
244                }).appendTo(e.target);
245            }
246            e.target.submit();
247        });
248
249        // AJAX CSRF 토큰 전달
250        $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
251            // POST 방식 호출만
252            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(options.type)) {
253                // CSRF 토큰을 헤더에 담는다.
254                jqXHR.setRequestHeader("X-CSRF-TOKEN", csrfToken);
255                // 한 페이지에서 비동기로 여러 번 토큰 값을 변경하면 토큰 값을 신뢰할 수 없게 되므로 동기방식으로 동작하도록 강제.
256                options.async = false;
257            }
258        });
259
260        // AJAX 통신 후 CSRF 토큰 갱신
261        $(document).ajaxComplete((event, xhr, settings) => {
262            if (xhr != null && xhr.getResponseHeader('X-CSRF-HEADER') != null ) {
263                csrfToken = xhr.getResponseHeader('X-CSRF-HEADER');
264            }
265        });
266    }
267});
268
269// 스크립트에서 submit() 호출 시 CSRF 토큰 전달
270(function(submit) {
271    HTMLFormElement.prototype.submit = function(data) {
272        if (`${CSRF_ENABLED}`) {
273            if (this[csrfHeader]) {
274                $(this[csrfHeader]).remove();
275            }
276            $('<input>').attr({
277                type: 'hidden',
278                name: csrfHeader,
279                value: csrfToken
280            }).appendTo(this);
281        }
282
283        submit.call(this, data);
284    };
285})(HTMLFormElement.prototype.submit);
286
287const checkText = {
288    onlyEngNum(event){
289        event = event || window.event;
290        let keyID = (event.which) ? event.which : event.keyCode;
291        if (!(keyID >= 37 && keyID <= 40)) {
292            event.target.value = event.target.value.replace(/[^a-z0-9\-\_\.]/gi, "");
293        }
294    },
295    onlyNum(event) {
296        event = event || window.event;
297        let keyID = (event.which) ? event.which : event.keyCode;
298        if ( !((keyID >= 48 && keyID <= 57) || (keyID >

298= 96 && keyID <= 105) || keyID == 8 || keyID == 9 || keyID == 46 || keyID == 35 || keyID == 36 || keyID == 37 || keyID == 39) ) {
299            event.target.value = event.target.value.replace(/[^0-9]/g, "");
300        }
301    }
302};
303
304/**
305 * 프로퍼티 검증 및 공통 검증 함수 모음
306 * @type {{isNotBlank(*=): boolean, isBlank(*=): boolean}}
307 */
308const COMMON_VALIDATOR = {
309    isBlank(obj) {
310        if(obj === null || obj === '' || typeof obj === 'undefined') {
311            return true;
312        }
313        return false;
314    },
315    isNotBlank(obj) {
316        if(obj !== null && obj !== '' && typeof obj !== 'undefined') {
317            return true;
318        }
319        return false;
320    }
321}
322
323/**
324 * 문자열 byte 길이 계산 후 자르기
325 */
326const subStrOfLngth = (str, maxBytes) => {
327    let byte = 0;
328    for (let indx = 0; str && indx < str.length; indx++) {
329        let char = str.charCodeAt(indx);
330        if (char >> 11) {
331            byte += 3;
332        } else if (char >> 7) {
333            byte += 2;
334        } else {
335            byte += 1;
336        }
337
338        if (byte > maxBytes) {
339            // 이모지가 잘려질 경우 이모지 전체를 자름
340            if (frstStrIsEmoji(str.substring(indx - 1))) {
341                return str.substring(0, indx - 1);
342            } else {
343                return str.substring(0, indx);
344            }
345        }
346    }
347    return str;
348};