From 7140254173461d1dd1617431bf7b5a6144ef3ea1 Mon Sep 17 00:00:00 2001 From: leebj Date: Mon, 9 Sep 2024 14:04:06 +0900 Subject: [PATCH] =?UTF-8?q?js=20=EC=86=8C=EC=8A=A4=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/fims/cmmn/customElements.js | 301 ---------- .../resources/js/fims/cmmn/fims-base.js | 519 ---------------- .../js/fims/cmmn/fims-componentization.js | 230 -------- .../resources/js/fims/cmmn/fims-support.js | 555 ------------------ 4 files changed, 1605 deletions(-) delete mode 100644 src/main/webapp/resources/js/fims/cmmn/customElements.js delete mode 100644 src/main/webapp/resources/js/fims/cmmn/fims-base.js delete mode 100644 src/main/webapp/resources/js/fims/cmmn/fims-componentization.js delete mode 100644 src/main/webapp/resources/js/fims/cmmn/fims-support.js diff --git a/src/main/webapp/resources/js/fims/cmmn/customElements.js b/src/main/webapp/resources/js/fims/cmmn/customElements.js deleted file mode 100644 index c4cec040..00000000 --- a/src/main/webapp/resources/js/fims/cmmn/customElements.js +++ /dev/null @@ -1,301 +0,0 @@ -/************************************************************************** -* doctx 탐지 -**************************************************************************/ -Element.prototype.detectDoctx = function(){ - - let parent = this.parentElement; - - if(parent == null){ - return null; - } - - if(parent.hasAttribute("data-doctx")){ - return parent.getAttribute("data-doctx"); - } - - return parent.detectDoctx(); -} - -/************************************************************************** -* 페이징 표시하는 SPAN -**************************************************************************/ -class PagingInfoSpan extends HTMLSpanElement { - constructor() { - super(); - } - - help(){ - PagingInfoSpan.help(); - } - static help(){ - console.log("클래스명 = PagingInfoSpan"); - console.log("is속성 = paging-info"); - console.log("PagingInfoSpan 페이징 정보를 표시하는 SPAN태그이다."); - } - - connectedCallback(){ - if(this.isConnected){ - let nm = this.getAttribute("name"); - let prefix = nm.substr(0,nm.indexOf("PagingInfo")) - - let doctx = this.getAttribute("data-ref-doctx"); - if(doctx == null){ - doctx = this.detectDoctx(); - } - if(doctx != null){ - this.setAttribute("data-ref-doctx", doctx); - this.id = prefix+"--"+doctx+"PagingInfo"; - } - } - } -} - -customElements.define("paging-info", PagingInfoSpan, { extends: "span" }); - - -/************************************************************************** -* name으로 참조하는 label -**************************************************************************/ -class NameLabel extends HTMLLabelElement { - constructor() { - super(); - } - - help(){ - NameLabel.help(); - } - static help(){ - console.log("클래스명 = NameLabel"); - console.log("is속성 = name-label"); - console.log("id가 아닌 name으로 참조하는 LABEL태그이다."); - } - - connectedCallback(){ - if(this.isConnected){ - - let doctx = this.getAttribute("data-ref-doctx"); - if(doctx == null){ - doctx = this.detectDoctx(); - } - if(doctx != null){ - this.setAttribute("data-ref-doctx", doctx); - if(this.getAttribute("for") != null && this.getAttribute("for").indexOf("--") == -1){ - this.htmlFor = this.getAttribute("for")+"--"+doctx; - } - } - } - } -} - -customElements.define("name-label", NameLabel, { extends: "label" }); - -/************************************************************************** -* name과 doctx로 id를 생성하는 SELECT -**************************************************************************/ -class IdSelect extends HTMLSelectElement { - constructor() { - super(); - } - - help(){ - IdSelect.help(); - } - static help(){ - console.log("클래스명 = IdSelect"); - console.log("is속성 = id-select"); - console.log("name과 doctx로 자신의 id를 생성하는 SELECT태그이다."); - } - - connectedCallback(){ - if(this.isConnected){ - let doctx = this.getAttribute("data-ref-doctx"); - if(doctx == null){ - doctx = this.detectDoctx(); - } - if(doctx != null){ - this.setAttribute("data-ref-doctx", doctx); - this.id = this.getAttribute("name")+"--"+doctx; - } - } - } -} - -customElements.define("id-select", IdSelect, { extends: "select" }); - -/************************************************************************** -* name과 doctx로 id를 생성하는 TEXTAREA -**************************************************************************/ -class IdTextArea extends HTMLTextAreaElement { - constructor() { - super(); - } - - help(){ - IdTextArea.help(); - } - static help(){ - console.log("클래스명 = IdTextArea"); - console.log("is속성 = id-textArea"); - console.log("name과 doctx로 자신의 id를 생성하는 TEXTAREA태그이다."); - } - - connectedCallback(){ - if(this.isConnected){ - let doctx = this.getAttribute("data-ref-doctx"); - if(doctx == null){ - doctx = this.detectDoctx(); - } - if(doctx != null){ - this.setAttribute("data-ref-doctx", doctx); - this.id = this.getAttribute("name")+"--"+doctx; - } - } - } -} - -customElements.define("id-textarea", IdTextArea, { extends: "textarea" }); - -/************************************************************************** -* name과 doctx로 id를 생성하는 INPUT -**************************************************************************/ -class IdInput extends HTMLInputElement { - constructor() { - super(); - } - - help(){ - IdInput.help(); - } - static help(){ - console.log("클래스명 = IdInput"); - console.log("is속성 = id-input"); - console.log("name과 doctx로 자신의 id를 생성하는 INPUT태그이다."); - } - - connectedCallback(){ - if(this.isConnected){ - let doctx = this.getAttribute("data-ref-doctx"); - if(doctx == null){ - doctx = this.detectDoctx(); - } - if(doctx != null){ - this.setAttribute("data-ref-doctx", doctx); - this.id = this.getAttribute("name")+"--"+doctx; - if(this.hasAttribute("list") && this.getAttribute("list").indexOf("--") == -1){ - this.setAttribute("list",this.getAttribute("list")+"--"+doctx); - } - } - } - } -} - -customElements.define("id-input", IdInput, { extends: "input" }); - -/************************************************************************** -* name과 doctx로 id를 생성하는 DATALIST -**************************************************************************/ -class IdDataList extends HTMLDataListElement { - constructor() { - super(); - } - - help(){ - IdDataList.help(); - } - static help(){ - console.log("클래스명 = IdDataList"); - console.log("is속성 = id-datalist"); - console.log("name과 doctx로 자신의 id를 생성하는 DATALIST태그이다."); - } - - - connectedCallback(){ - if(this.isConnected){ - let doctx = this.getAttribute("data-ref-doctx"); - if(doctx == null){ - doctx = this.detectDoctx(); - } - if(doctx != null){ - this.setAttribute("data-ref-doctx", doctx); - this.id = this.getAttribute("name")+"--"+doctx; - } - } - } -} - -customElements.define("id-datalist", IdDataList, { extends: "datalist" }); - - - -/************************************************************************** -* 중괄호 자동 추가 템플릿 -**************************************************************************/ -class CurlyBrackets extends HTMLTemplateElement { - constructor() { - super(); - - let curlyBracketsOpen = String.fromCharCode(123); //중괄호시작 - - let thisCon = this.content; - - let trs = thisCon.querySelectorAll("tr"); - - trs.forEach(function(node) { - let key = node.getAttribute("data-key"); - if(key != null && key != "" && key.indexOf(curlyBracketsOpen) == -1){ - node.setAttribute("data-key","{"+key+"}"); - } - let index = node.getAttribute("data-index"); - if(index != null && index != "" && index.indexOf(curlyBracketsOpen) == -1){ - node.setAttribute("data-index","{"+index+"}"); - } - }); - - let tds = thisCon.querySelectorAll("td"); - tds.forEach(function(node) { - if(node.getAttribute("onclick") != null && node.getAttribute("onclick") == ""){ - node.setAttribute("onclick","{onclick}"); - } - - if(node.getAttribute("ondblclick") != null && node.getAttribute("ondblclick") == ""){ - node.setAttribute("ondblclick","{ondblclick}"); - } - - if(node.childElementCount == 0){ - if(node.textContent.trim() != "" && node.textContent.indexOf(curlyBracketsOpen) == -1){ - node.textContent = "{"+node.textContent.trim()+"}"; - } - } - }); - - let tdCheckboxes = thisCon.querySelectorAll("td>input[type='checkbox']"); - tdCheckboxes.forEach(function(node) { - if(node.getAttribute("value") != null && node.getAttribute("value") != "" && node.getAttribute("value") != "on"){ - node.setAttribute("value","{"+node.getAttribute("value")+"}"); - } - if(node.getAttribute("onchange") != null && node.getAttribute("onchange") == ""){ - node.setAttribute("onchange","{onchange}"); - } - }); - - let tdRadios = thisCon.querySelectorAll("td>input[type='radio']"); - tdRadios.forEach(function(node) { - if(node.getAttribute("value") != null && node.getAttribute("value") != "" && node.getAttribute("value") != "on"){ - node.setAttribute("value","{"+node.getAttribute("value")+"}"); - } - if(node.getAttribute("onchange") != null && node.getAttribute("onchange") == ""){ - node.setAttribute("onchange","{onchange}"); - } - }); - } - - help(){ - CurlyBrackets.help(); - } - static help(){ - console.log("클래스명 = CurlyBrackets"); - console.log("is속성 = curly-brackets"); - console.log("그리드 렌더링시 중괄호가 빠진 부분을 자동으로 추가하는 TEMPLATE태그이다."); - } -} -customElements.define("curly-brackets", CurlyBrackets, { extends: "template" }); diff --git a/src/main/webapp/resources/js/fims/cmmn/fims-base.js b/src/main/webapp/resources/js/fims/cmmn/fims-base.js deleted file mode 100644 index 2966b4a4..00000000 --- a/src/main/webapp/resources/js/fims/cmmn/fims-base.js +++ /dev/null @@ -1,519 +0,0 @@ -if(window.help !== undefined){ - help.prototype.list.push("FimsFormFields 클래스 : FormFields클래스를 상속받은 FIMS프로젝트 내에서 사용하는 FormFields클래스"); - help.prototype.list.push("pageObject 객체 : HTML화면별 스크립트 모음"); - help.prototype.list.push("DoctxFinder 클래스 : DomQuery를 상속받은 클래스. pageObject객체의 내부 요소는 해당 클래스의 인스턴스이다."); -} - -/************************************************************************** -* FimsFormFields -**************************************************************************/ -class FimsFormFields extends FormFields { - - help(){ - FimsFormFields.help(); - } - - static help(){ - console.log("FimsFormFields 클래스 : FormFields클래스를 상속받은 FIMS프로젝트 내에서 사용하는 FormFields클래스"); - } - - /** - * form 에 json data set - * element tag에 data-fmt-type 으로 데이타 format이 지정된 경우 해당 포맷으로 출력 - * @param {object} formObj document.querySelector('form') - * @param {object} jsonData json type data - */ - set(ctrl,obj){ - - document.querySelectorAll(this.children).forEach(input => { - - let prop = input.getAttribute("data-map") - || input.name - || input.id; - if (!prop) return; - - let dataItem = obj instanceof DataItem, - value = dataItem ? obj.getValue(prop) : obj[prop]; - - if ("radio" == input.type) { - if (value && value == input.value) - input.checked = true; - } else if("checkbox" == input.type) { - if (value && value == input.value) - input.checked = ("Y" === value); - } else if(input.tagName == "SELECT") { - for(let option of input.options) { - if(option.value == value){ - option.selected = true; - } else { - option.selected = false; - } - } - } else { - if(value == null){ - value = ""; - } - // element data-fmt-type에 정의된 format 적용 - // dt - yyyy-mm-dd HH:mm:ss, day - yyyy-mm-dd, time - HH:mm:ss, number - #,### - if(input.dataset.fmtType){ - const fmtType = input.dataset.fmtType; - switch (fmtType) { - case 'dt' : - value = datetimeFormat.parse(value); - value = datetimeFormat.format(value); - break; - case 'day' : - value = dateFormat.parse(value); - value = dateFormat.format(value); - break; - case 'time' : - value = timeFormat.parse(value); - value = timeFormat.format(value); - break; - case 'number' : - value = numberFormat.parse(value); - value = numberFormat.format(value); - break; - default: - break; - } - } - if(input.name){ - if($(input).hasClass('form-date')){ - $(input).datepicker("setDate", value); - } else { - input.value = value; - } - - //보안모드 마스킹 항목 - if(input.tagName === 'INPUT' && input.id && input.classList.contains("privacy")){ - let maskVal = value.replace(/./g, "*"); - document.getElementById("mask-"+input.id).value = maskVal; - } - } - - } - }); - - - } - - get() { - let obj = {}; - document.querySelectorAll(this.children).forEach(input => { - if(input.tagName == "INPUT" || input.tagName == "SELECT" || input.tagName == "TEXTAREA"){ - let property = input.name || input.id; - let value = input.value; - if("radio" == input.type) { - if(input.checked) - obj[property] = value; - } else if("checkbox" == input.type) { - if(input.checked){ - if(obj[property]){ - obj[property] += ","+value; - } else { - obj[property] = value; - } - } - } else { - if(input.dataset.fmtType){ - const fmtType = input.dataset.fmtType; - switch (fmtType) { - case 'dt' : - value = value.replaceAll("-","").replaceAll(":","").replaceAll(" ",""); - break; - case 'day' : - value = value.replaceAll("-",""); - break; - case 'time' : - value = value.replaceAll(":",""); - break; - case 'number' : - value = value.replaceAll(",",""); - break; - default: - break; - - } - } - obj[property] = value; - } - } - }); - return obj; - } -} - -function newFimsFormFields(conf){ - return new FimsFormFields(conf); -} - -/************************************************************************** -* data-doctx,name 어트리뷰트로 찾기 -**************************************************************************/ -function newDoctxFinder(doctx){ - let finder = new DoctxFinder(doctx); - return finder; -} - -class DoctxFinder extends DomQuery { - constructor(doctx) { - super(); - this.setContainers("[data-doctx='"+doctx+"']"); - this.doctx = doctx; - } - - help(){ - console.log("현재 doctx = "+this.doctx); - DoctxFinder.help(); - } - static help(){ - console.log("클래스명 = DoctxFinder"); - console.log("newDoctxFinder(doctx명)로 인스턴스를 생성할 수 있다."); - console.log("클래스 메서드 목록"); - console.log("selectorn(요소이름) : 문자열 [data-doctx='설정된doctx'] [name='요소이름'] 을 반환한다."); - console.log("findn(요소이름) : data-doctx속성이 설정된doctx인 요소 내에서 name속성이 요소이름인 HTML요소를 반환한다."); - console.log("$findn(요소이름) : data-doctx속성이 설정된doctx인 요소 내에서 name속성이 요소이름인 제이쿼리 객체를 반환한다."); - console.log("selfElement() : data-doctx속성이 설정된doctx인 HTML요소를 반환한다."); - console.log("selfDlgId() : data-doctx속성이 설정된doctx인 HTML요소를 갖는 모달창의 id를 반환한다."); - console.log("refDlgId(모달창이름) : data-ref-doctx속성이 설정된doctx이고 name속성이 모달창이름인 모달창의 id를 반환한다."); - } - - selectorn(name){ - return this.selector("[name='"+name+"']"); - } - findn(name){ - return this.find("[name='"+name+"']"); - } - $findn(name){ - return $(document.querySelector("[data-doctx='"+this.doctx+"']")).find("[name='"+name+"']"); - } - - selfElement(){ - return document.querySelector("[data-doctx='"+this.doctx+"']"); - } - selfDlgId(){ - if($(this.selfElement()).parents(".modal").length > 0){ - return $(this.selfElement()).parents(".modal")[0].id; - } else { - return ""; - } - } - refDlgId(dlgName){ - if($(".modal[data-ref-doctx='"+this.doctx+"'][name='"+dlgName+"']").length > 0){ - return $(".modal[data-ref-doctx='"+this.doctx+"'][name='"+dlgName+"']")[0].id; - } else { - return ""; - } - } - -} - - -/************************************************************************** -* jquery.fn 커스텀 - UI요소 값 세팅 -**************************************************************************/ -$.fn.set = function(value) { - return this.each(function(){ - if($(this).hasClass('form-date')){ - if(value != null && value.length == 8 && value.indexOf("-") == -1){ - value = value.substring(0,4) + "-" + value.substring(4,6) + "-" + value.substring(6,8); - } - $(this).datepicker("setDate", value); - } else if($(this).hasClass('option-style-select')){ - $(this).val(value); - this.changeUI(); - } else if(this.type == "checkbox" || this.type == "radio"){ - if(this.value == value){ - $(this).prop("checked", true); - } else { - $(this).prop("checked", false); - } - } else { - if(this.dataset.fmtType == "number"){ - $(this).val(numberFormat.format(value)); - } else { - $(this).val(value); - } - } - }); -} - -/************************************************************************** -* Dataset 관련 적용 기능 -**************************************************************************/ -const Apply = { - fromDatasetControl : { - load : async function(control, pageNum){ - return new Promise((resolve, reject) => { - control.query.pageNum = pageNum; - if (!control.query.pageNum){ - control.query.pageNum = 1; - } - ajax.get({ - url:control.urls.load, - data:control.query, - success:(resp) => { - resolve(resp); - } - }); - }); - }, - reload : async function(control){ - return new Promise((resolve, reject) => { - var orgnQuery = Object.assign({}, control.query); - control.query.fetchSize = control.defaultFetchSize * control.query.pageNum; - control.query.pageNum = 1; - - ajax.get({ - url:control.urls.load, - data:control.query, - success:(resp) => { - control.query.pageNum = orgnQuery.pageNum; - control.query.fetchSize = orgnQuery.fetchSize; - resolve(resp); - } - }); - }); - } - }, - fromDataset : { - gridCheckbox : function(dataset, tbody, colIndex, checkedArr){ - - var keys = checkedArr.map(item => dataset.getKey(item)); - - $(tbody).find("tr").each(function() { - var cb = $(this).find("td").eq(colIndex).find(":checkbox"); - cb.prop("checked", keys.includes(cb.val())); - }); - - }, - gridButton : function(dataset, button, checkedArr){ - var keys = checkedArr.map(item => dataset.getKey(item)); - $(button).prop("disabled", keys.length < 1); - }, - currentRow : function(dataset, dataItem, tbody){ - if(!dataItem){ - return; - } - $(tbody).setCurrentRow(dataset.getKey(dataItem)); - }, - paging : function(dataset, resp, navUl, navSpan){ - - let id = navSpan.id; - let pf = id.substr(0,id.indexOf("PagingInfo")); - - $(navUl).setPagingInfo({ - list : dataset, - prefix : pf, - totalSize : resp["Total"] - }); - - }, - getTbody : function(dataset, found, notFound, replacer){ - var empty = dataset.empty; - var trs = empty ? notFound : dataset.inStrings(found, replacer); - return trs.join(); - }, - getTodoCurrent : function(dataset, beforeCurrent, columnName){ - - let di = null; - if(beforeCurrent == null){ - return null; - } - if(dataset.empty){ - return null; - } - - let filtered = dataset.getDataset("item").filter(item => item.data[columnName] == beforeCurrent.primaryKey); - if(filtered.length > 0){ - di = filtered[0]; - return di; - } - - let otherInfo; - if(beforeCurrent.arrayIndex > (dataset.length - 1)){ - di = dataset.getDataset("item")[dataset.length - 1]; - } else { - di = dataset.getDataset("item")[beforeCurrent.arrayIndex]; - } - - return di; - } - }, - toDataset : { - current : function(dataset, dataKey){ - dataset.setCurrent(dataKey, false); - }, - selection : function(dataset, checkbox, bool){ - - var parentEl = $(checkbox).parent()[0]; - var isTH = parentEl.tagName == "TH" ? true : false; - - if(isTH) { - var dataItems = dataset.getDataset("item"); - - for(var i=0; i < dataItems.length; i++){ - dataItems[i].select(bool); - } - } else { - var dataItem = dataset.getData(checkbox.value, "item"); - dataItem.select(bool); - } - }, - set : function(dataset, resp){ - dataset._byKeys = {}; - dataset._current = null; - resp = resp || {}; - var data = dataset._getDataItems(resp,{}); - - dataset._items = data.items; - dataset._byKeys = data.byKeys; - }, - add : function(dataset, resp){ - if (dataset.empty){ - this.set(dataset, resp); - return; - } - var state = dataset.state; - resp = resp || {}; - var data = dataset._getDataItems(resp,{}); - dataset._items = this._items.concat(data.items); - dataset._byKeys = { - ...this._byKeys, - ...data.byKeys - }; - } - } - -}; - -/************************************************************************** -* 그리드 관련 기능 -**************************************************************************/ -const GRID = { - fromResp : { - setPagingInfo : function(respList, respPaging, navUl, navSpan){ - let pagination = {}; - - let id = navSpan.id; - pagination.prefix = id.substr(0,id.indexOf("PagingInfo")); - - let dl = 0; - if(respList != null) { - dl = respList.length; - } - - let s = 0; - let ts = 0; - if(respPaging && respPaging.start) { - s = respPaging.start; - } - if(respPaging && respPaging.totalSize) { - ts = respPaging.totalSize; - } - pagination.totalSize = ts; - pagination.dataLength = s + dl; - - $(navUl).setPagingInfo(pagination); - } - }, - setCurrentRow : function(evTarget){ - if(evTarget instanceof HTMLTableCellElement){ - let tr = evTarget.parentElement; - let tbody = tr.parentElement; - - for (let sibling of tdElement.parentNode.children) { - sibling.classList.remove('current-row'); - } - tr.classList.add('current-row'); - } else if(evTarget instanceof HTMLTableRowElement){ - let tr = evTarget; - let tbody = tr.parentElement; - - for (let sibling of tdElement.parentNode.children) { - sibling.classList.remove('current-row'); - } - tr.classList.add('current-row'); - } - }, - checkbox : { - sync : function(checkboxElement, bool){ - var parentEl = $(checkboxElement).parent()[0]; - var isTH = parentEl.tagName == "TH" ? true : false; - var tr = $(checkboxElement).parents("tr"); - var siblingTag = isTH ? "TH" : "TD"; - var siblings = tr.find(siblingTag); - var checkboxColIndex = siblings.index(parentEl); - - var table = $(checkboxElement).parents("table"); - var thead = table.find("thead"); - var tbody = table.find("tbody"); - var trs = tbody.find("tr"); - - if(isTH) { - - trs.each(function(){ - $(this).find("td").eq(checkboxColIndex).find(":checkbox").prop("checked", bool); - }); - - } else { - var allChecked = false; - var cbLength = 0; - var checkedLength = 0; - - trs.each(function(){ - var cb = $(this).find("td").eq(checkboxColIndex).find(":checkbox"); - if(cb.length > 0){ - cbLength++; - if(cb.is(":checked")){ - checkedLength++; - }; - } - }); - - if(cbLength == checkedLength){ - allChecked = true; - } - - if(allChecked){ - thead.find(":checkbox").prop("checked", true); - } else { - thead.find(":checkbox").prop("checked", false); - } - - } - }, - countChecked : function(checkboxElement){ - - var parentEl = $(checkboxElement).parent()[0]; - var tr = $(checkboxElement).parents("tr").eq(0); - var table = $(checkboxElement).parents("table").eq(0); - - var checkboxColIndex = null; - if(parentEl.tagName == "TH"){ - var siblings = tr.find("TH"); - checkboxColIndex = siblings.index(parentEl); - } else if(parentEl.tagName == "TD"){ - var siblings = tr.find("TD"); - checkboxColIndex = siblings.index(parentEl); - } else { - return null; - } - - var tbody = table.find("tbody"); - var trs = tbody.find("tr"); - - var count = 0; - trs.each(function(){ - var cb = $(this).find("td").eq(checkboxColIndex).find(":checkbox"); - if(cb.length > 0){ - if(cb.is(":checked")) { - count++; - } - } - }); - return count; - } - } -}; diff --git a/src/main/webapp/resources/js/fims/cmmn/fims-componentization.js b/src/main/webapp/resources/js/fims/cmmn/fims-componentization.js deleted file mode 100644 index 426279f0..00000000 --- a/src/main/webapp/resources/js/fims/cmmn/fims-componentization.js +++ /dev/null @@ -1,230 +0,0 @@ -if(window.help !== undefined){ - help.prototype.list.push("FimsComponentization 클래스 : 특정 HTML요소에 기능을 추가할 수 있다."); -} - -class FimsComponentization { - - static help(){ - console.log("fnMakeSpinnerSelect(셀렉트박스,이전버튼,다음버튼) : 특정 셀렉트박스를 버튼클릭으로 옵션 선택 가능한 셀렉트박스로 만든다."); - console.log("fnMakeOptionStyleSelect(셀렉트박스) : 특정 셀렉트박스를 선택된 옵션의 스타일이 적용된 셀렉트박스로 만든다."); - console.log("fnMakeRowSpinner(테이블row,up버튼,down버튼,스크롤컨테이너,validator) : 특정 테이블을 행 위치 이동이 가능한 테이블로 만든다."); - console.log("fnMakeSingleImageViewer(img태그,fileInput태그,파일경로속성명,파일이름속성명) : 특정 이미지 태그를 단일 업로드 이미지 뷰어로 만든다."); - } - - /************************************************************************** - * 특정 셀렉트박스를 버튼클릭으로 옵션 선택 가능한 셀렉트박스로 만든다. - **************************************************************************/ - static fnMakeSpinnerSelect(selectEl, prevBtnEl, nextBtnEl){ - - $(selectEl).on("animationend", function(){ - $(selectEl).removeClass("highlight-once"); - }); - $(prevBtnEl).on("click", function(){ - var selected = $(selectEl).find("option:selected"); - var prev = selected.prev(); - if(prev.length >= 1){ - $(selectEl).val(prev.val()); - } else { - $(selectEl).addClass("highlight-once"); - } - }); - $(nextBtnEl).on("click", function(){ - var selected = $(selectEl).find("option:selected"); - var next = selected.next(); - if(next.length >= 1){ - $(selectEl).val(next.val()); - } else { - $(selectEl).addClass("highlight-once"); - } - }); - } - - /************************************************************************** - * 특정 셀렉트박스를 선택된 옵션의 스타일이 적용된 셀렉트박스로 만든다. - **************************************************************************/ - static fnMakeOptionStyleSelect(selectEl){ - $(selectEl).addClass("option-style-select"); - - selectEl.changeUI = function(){ - - var selected = $(this).find("option:selected"); - - if(selected.length <= 0){ - selectEl.dataset.optionStyle = ""; - selectEl.title = ""; - return; - } - - selectEl.dataset.optionStyle = selected.val(); - selectEl.title = selected[0].title; - }; - - $(selectEl).on("change", function(){ - selectEl.changeUI(); - }); - - selectEl.changeUI(); - } - - /************************************************************************** - * 특정 테이블을 행 위치 이동 가능한 테이블로 만든다. - **************************************************************************/ - static fnMakeRowSpinner(tableRowEl, upBtnEl, downBtnEl, scrollEl, validFunc){ - - if(validFunc != undefined && validFunc != null){ - tableRowEl.validForComponent = validFunc; - } else { - tableRowEl.validForComponent = function(eventInfo){ - return true; - }; - } - - $(upBtnEl).on("click", function(){ - var tbody = $(tableRowEl).parent(); - - var theadHeight = $(scrollEl).find("thead").outerHeight(); - var scrollElStart = $(scrollEl).offset().top + theadHeight; - var scrollElHeight = $(scrollEl).height() - theadHeight - VERTICAL_SCROLL_HEIGHT; - var scrollMiddle = scrollElStart + (scrollElHeight/2); - - if($(tableRowEl).index() == 0){ - return; - } - - var beforeIndex = $(tableRowEl).index() - 1; - var beforeTr = $(tbody).find("tr").eq(beforeIndex); - - - var eventInfo = { - clickedButtonType : "up", - currentRow : tableRowEl, - siblingRow : beforeTr - }; - if(!tableRowEl.validForComponent(eventInfo)){ - return; - } - - - var rowStart = beforeTr.offset().top; - var rowHeight = beforeTr.outerHeight(); - var rowMiddle = rowStart+(rowHeight/2); - - beforeTr.before(tableRowEl); - - if(rowMiddle < scrollMiddle){ - var move = scrollMiddle - rowMiddle; - $(scrollEl).scrollTop($(scrollEl).scrollTop() - move); - } - - $(tbody).find("tr").removeClass("current-row"); - $(tableRowEl).addClass("current-row"); - }); - - $(downBtnEl).on("click", function(){ - var tbody = $(tableRowEl).parent(); - - var theadHeight = $(scrollEl).find("thead").outerHeight(); - var scrollElStart = $(scrollEl).offset().top + theadHeight; - var scrollElHeight = $(scrollEl).height() - theadHeight - VERTICAL_SCROLL_HEIGHT; - var scrollMiddle = scrollElStart + (scrollElHeight/2); - - if($(tableRowEl).index() == ($(tbody).children().length) - 1){ - return; - } - - var afterIndex = $(tableRowEl).index() + 1; - var afterTr = $(tbody).find("tr").eq(afterIndex); - - - var eventInfo = { - clickedButtonType : "down", - currentRow : tableRowEl, - siblingRow : afterTr - }; - if(!tableRowEl.validForComponent(eventInfo)){ - return; - } - - - var rowStart = afterTr.offset().top; - var rowHeight = afterTr.outerHeight(); - var rowMiddle = rowStart+(rowHeight/2); - - afterTr.after(tableRowEl); - - if(rowMiddle > scrollMiddle){ - var move = rowMiddle - scrollMiddle; - $(scrollEl).scrollTop($(scrollEl).scrollTop() + move); - } - - $(tbody).find("tr").removeClass("current-row"); - $(tableRowEl).addClass("current-row"); - }); - - - } - - /************************************************************************** - * 특정 이미지 태그를 단일 업로드 이미지 뷰어로 만든다. - **************************************************************************/ - static fnMakeSingleImageViewer(imgEl, fileInputEl, dataAttributeForFilePath, dataAttributeForFileName){ - - $(imgEl).on("click", function(){ - $(fileInputEl).click(); - }); - - $(fileInputEl).on("change", function(){ - - if(this.files != null && this.files.length > 0){ - $(imgEl).attr("alt", this.files[0].name); - $(imgEl).attr("src", (window.URL || window.webkitURL).createObjectURL(this.files[0])); - - } else { - - var orgnName = $(imgEl).attr("data-"+dataAttributeForFileName); - var orgnPath = $(imgEl).attr("data-"+dataAttributeForFilePath); - - if(orgnPath != undefined && orgnPath != null && orgnPath != ""){ - $(imgEl).attr("alt", orgnName); - $(imgEl).attr("src", orgnPath); - } else { - $(imgEl).attr("alt", "파일이 없습니다."); - $(imgEl).attr("src", "/webjars/applib/img/no-image.svg"); - } - - } - - }); - } - - static getBrowserName() { - var agent = navigator.userAgent.toUpperCase(); - if (agent.indexOf('TRIDENT') >= 0) { - return 'IE'; - } else if (agent.indexOf('FIREFOX') >= 0) { - return 'FIREFOX'; - } else if (agent.indexOf('EDG') >= 0) { - return 'EDGE'; - } else if (agent.indexOf('CHROME') >= 0) { - return 'CHROME'; - } else if (agent.indexOf('SAFARI') >= 0) { - return 'SAFARI'; - } else { - return ''; - } - } -} - -const BROWSER_NAME = FimsComponentization.getBrowserName(); -var VERTICAL_SCROLL_HEIGHT = 14; -switch(BROWSER_NAME){ - case "EDGE" : - VERTICAL_SCROLL_HEIGHT = 14; - break; - case "FIREFOX" : - VERTICAL_SCROLL_HEIGHT = 15; - break; - case "CHROME" : - VERTICAL_SCROLL_HEIGHT = 15; - break; -} \ No newline at end of file diff --git a/src/main/webapp/resources/js/fims/cmmn/fims-support.js b/src/main/webapp/resources/js/fims/cmmn/fims-support.js deleted file mode 100644 index 1f1ad78d..00000000 --- a/src/main/webapp/resources/js/fims/cmmn/fims-support.js +++ /dev/null @@ -1,555 +0,0 @@ -if(window.help !== undefined){ - help.prototype.list.push("FimsSupport 클래스 : FIMS프로젝트 내에서 공통적으로 사용할 수 있는 기능 지원"); - help.prototype.list.push("FimsPagingSupport 클래스 : 스크롤 페이징 정보 표시 지원"); -} - -/************************************************************************** -* FimsSupport -**************************************************************************/ -class FimsSupport { - - static help(){ - console.log("메소드 목록"); - console.log("fnMenualDownload() : 메뉴얼 다운로드"); - console.log("mappingButtonAndMenu(버튼id, 메뉴이름) : 버튼과 메뉴를 매핑한다."); - console.log("fnDownsizeToggle(th객체) : 테이블 컬럼 축소 여부 변경"); - console.log("fnDownsizeCheck(html테이블객체) : 테이블 렌더링 후 축소 처리할 컬럼 확인"); - console.log("countCrdnByVhrno(차량번호, 업무구분코드, 시군구코드) : 차량번호로 단속 건수 조회"); - console.log("countCvlcptDscsnByVhrno(차량번호, 업무구분코드, 시군구코드) : 차량번호로 민원상담 건수 조회"); - console.log("getVhclInfo(시군구코드, 차량번호, 기준일자) : 시군구코드, 차량번호, 기준일자로 차적 조회"); - console.log("getVhclDisabledParkingInfo(차량번호) : 장애인 차량여부 조회"); - console.log("searchFromGridTitle(키워드영문명, 키워드한글명, 메인옵션, 추가옵션) : 그리드의 특정 열 값을 키워드로 자료 조회"); - console.log("renderForTask(렌더링영역객체, 업무class속성명) : 업무구분별 화면 렌더링"); - console.log("registShortcutKey() : 단축키 등록"); - console.log("getActiveRootTabArea() : 현재 활성화된 최상위 탭 영역을 반환한다."); - console.log("fnJsonToFormData(json,배열이름) : son객체 안의 jsonArray를 FormData형식의 키로 치환한다."); - console.log("fnJsonArrayToFormData(json배열,배열이름) : jsonArray를 FormData형식의 키를 갖는 json으로 치환한다."); - console.log("getCellDefsForPrivacyCell(TD태그의 제이쿼리 객체) : 엑셀다운로드시 개인정보 포함된 셀의 컬럼명을 추출하는 함수"); - console.log("openPDF(blob객체,새 창 이름) : PDF파일 미리보기 창 열기"); - console.log("fnProgress(sse키, progress팝업화면 내용, progress응답시 처리 메소드) : 프로그레스바 표시"); - } - - /************************************************************************** - * 메뉴얼 다운로드 - **************************************************************************/ - static fnMenualDownload(){ - var filenameInHeader = ""; - - fetch(wctx.url("/file/downloadMenual.do")) - .then((response) => { - var header = response.headers.get('Content-Disposition'); - console.log(header); - var parts = header.split(';'); - filenameInHeader = parts[1].split('=')[1]; - if(filenameInHeader.startsWith("\"") && filenameInHeader.endsWith("\"")){ - filenameInHeader = filenameInHeader.substring(1,filenameInHeader.length-1); - } - filenameInHeader = decodeURIComponent(filenameInHeader); - return response.blob(); - }) - .then((blob) => { - - var URL = window.URL || window.webkitURL; - var downloadUrl = URL.createObjectURL(blob); - - var a = document.createElement("a"); - a.href = downloadUrl; - a.download = filenameInHeader; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - - }); - - } - - /************************************************************************** - * 버튼과 메뉴를 매핑한다. - **************************************************************************/ - static mappingButtonAndMenu(buttonId, menuNm){ - $("#"+buttonId).on( "click", function() { - $("#menus").find("div[data-i18n='"+menuNm+"']").parent("a").trigger("click"); - }); - } - - /************************************************************************** - * 테이블 컬럼 축소 여부 변경 - **************************************************************************/ - static fnDownsizeToggle(thObj) { - - $(thObj).toggleClass("downsize"); - - var thIndex = $(thObj).index(); - - var setValue = ""; - if($(thObj).hasClass("downsize")){ - setValue = "160px"; - } - - var tbody = $(thObj).parent("tr").parent("thead").next("tbody"); - if(tbody.length < 1){ - return; - } - - var trs = tbody.find("tr"); - - if(trs.length < 1){ - return; - } - - if(trs.length == 1 && trs.find("td").length <= 1){ - return; - } - - trs.each(function(){ - $(this).find("td:eq("+thIndex+")").css("max-width",setValue); - }); - - } - - /************************************************************************** - * 테이블 렌더링 후 축소 처리할 컬럼 확인 - **************************************************************************/ - static fnDownsizeCheck(tableObj) { - $(tableObj).find("thead tr th").each(function(){ - var thIndex = $(this).index(); - if($(this).hasClass("downsize")){ - var trs = $(this).parent("tr").parent("thead").next("tbody").find("tr"); - trs.each(function(){ - $(this).find("td:eq("+thIndex+")").css("max-width","160px"); - }); - } - }); - } - - /************************************************************************** - * 차량번호로 단속 건수 조회 - **************************************************************************/ - static async countCrdnByVhrno(vhrno, taskSeCd, sggCd){ - return new Promise((resolve, reject) => { - json.get({ - url: wctx.url("/"+taskSeCd+"/crdn/crdn06/010/nocs.do"), - data: { - vhrno : vhrno, - taskSeCd : taskSeCd, - sggCd : sggCd - }, - success: function(resp, textStatus, jqXHR) { - resolve(resp); - }, - error: function(jqXHR, textStatus, error) { - } - }); - }); - } - - /************************************************************************** - * 차량번호로 민원상담 건수 조회 - **************************************************************************/ - static async countCvlcptDscsnByVhrno(vhrno, taskSeCd, sggCd){ - return new Promise((resolve, reject) => { - json.get({ - url: wctx.url("/"+taskSeCd+"/sprt/sprt04/010/nocs.do"), - data: { - vhrno : vhrno, - taskSeCd : taskSeCd, - sggCd : sggCd - }, - success: function(resp, textStatus, jqXHR) { - resolve(resp); - }, - error: function(jqXHR, textStatus, error) { - } - }); - }); - } - - /************************************************************************** - * 시군구코드, 차량번호, 기준일자로 차적 조회 - **************************************************************************/ - static async getVhclInfo(sggCd, vhrno, levy_stdde){ - return new Promise((resolve, reject) => { - json.post({ - url: wctx.url("/payer/vehicle.do"), - data: { - sggCd : sggCd, - vhrno : vhrno, - levy_stdde : levy_stdde - }, - success: function(resp, textStatus, jqXHR) { - resolve(resp); - }, - error: function(jqXHR, textStatus, error) { - } - }); - }); - }; - - /************************************************************************** - * 장애인 차량여부 조회 - **************************************************************************/ - static async getVhclDisabledParkingInfo(vhrno){ - return new Promise((resolve, reject) => { - json.get({ - url: wctx.url("/intf/disabledParking/parkingInfo"), - data: { - vehicleNo : vhrno - }, - success: function(resp, textStatus, jqXHR) { - resolve(resp); - }, - error: function(jqXHR, textStatus, error) { - } - }); - }); - } - - /************************************************************************** - * 그리드의 특정 열 값을 키워드로 자료 조회 - **************************************************************************/ - static searchFromGridTitle(byValue, byOutputValue, mainOption, subOption){ - var tr = event.target.parentElement; - - if($(tr).attr("data-search-target") == null || $(tr).attr("data-search-target") == ""){ - - var trDataset = tr.dataset; - - var byElementId = trDataset.by; - var byOutputElementId = trDataset.byOutput; - var mainOptionElementId = trDataset.mainOption; - var subOptionElementId = trDataset.subOption; - - document.getElementById(byElementId).value = StringSupport.snakeToCamel(byValue); - document.getElementById(byOutputElementId).value = byOutputValue; - - document.getElementById(mainOptionElementId).value = mainOption; - document.getElementById(subOptionElementId).value = subOption; - } else { - - let byEl = $($(tr).attr("data-search-target")).find("[name='by']")[0]; - let byOutputEl = $($(tr).attr("data-search-target")).find("[name='byOutput']")[0]; - let mainOptionEl = $($(tr).attr("data-search-target")).find("[name='mainOption']")[0]; - let subOptionEl = $($(tr).attr("data-search-target")).find("[name='subOption']")[0]; - - byEl.value = StringSupport.snakeToCamel(byValue); - byOutputEl.value = byOutputValue; - mainOptionEl.value = mainOption; - subOptionEl.value = subOption; - } - - } - - /************************************************************************** - * 업무구분별 화면 렌더링 - **************************************************************************/ - static renderForTask(areaId, taskClass){ - var slotAreas; - if(typeof areaId == "string"){ - slotAreas = $("#"+areaId).find("[slot]"); - } else { - slotAreas = $(areaId).find("[slot]"); - } - - slotAreas.each(function(){ - if($(this).hasClass("if-empty-col0")){ - if(!isEmpty($(this).attr("data-original-col-size"))){ - let colSize = $(this).attr("data-original-col-size"); - $(this).removeClass("col-0"); - $(this).addClass(colSize); - $(this).attr("data-original-col-size",""); - } - } - }); - - slotAreas.each(function(){ - var tempHtml = ""; - $(this).find("template").each(function(){ - tempHtml += this.cloneNode(true).outerHTML; - }); - - var taskTemplate = $(this).find("template."+taskClass); - if(taskTemplate.length < 1){ - this.innerHTML = tempHtml; - return; - } - - var inHtml = $(taskTemplate[0].content).find("slot")[0].innerHTML; - this.innerHTML = tempHtml + inHtml; - - }); - - slotAreas.each(function(){ - if($(this).hasClass("if-empty-col0")){ - if($(this).children().not("template").length == 0){ - let colSize = ""; - for(let col of BOOTSTRAP_COLS){ - if($(this).hasClass(col)){ - colSize = col; - break; - } - } - - $(this).attr("data-original-col-size", colSize); - $(this).removeClass(colSize); - $(this).addClass("col-0"); - } - } - }); - } - - /************************************************************************** - * 단축키 등록 - **************************************************************************/ - static registShortcutKey(){ - document.addEventListener('keydown', (event) => { - - var RESERVED_FUNCTION_KEYS = ["F1","F2","F3","F4","F6","F7","F8","F9","F10","F11","PageDown","PageUp"]; - var KEYS_FOR_GLOBAL = ["F9","F10","F11"]; - - if(RESERVED_FUNCTION_KEYS.includes(event.key)){ - - event.preventDefault(); - - var activeBasckdropYn = FimsSupport.isActiveBackdrop(); - - var curArea = FimsSupport.getCurrentAreaForShortcutKey(); - - if(KEYS_FOR_GLOBAL.includes(event.key)){ //전역 기능 - - if(event.key == "F9"){ - if($("#securityMode--top").is(":checked")){ - $("#securityMode--top").prop("checked", false); - fn_securityModeToggle(false); - } else { - $("#securityMode--top").prop("checked", true); - fn_securityModeToggle(true); - } - - } - - if(event.key == "F10"){ - if($("#photoMask--top").is(":checked")){ - $("#photoMask--top").prop("checked", false); - fn_photoMask(false); - } else { - $("#photoMask--top").prop("checked", true); - fn_photoMask(true); - } - - } - - if(!activeBasckdropYn){ - //TODO : do something - } - - } else { //페이지별,다이얼로그별 버튼 - - if(curArea != null){ - - var targetButton = $(curArea).find("button.btn-"+event.key); - - if(targetButton.length == 1){ - targetButton.click(); - } else { - if(targetButton.length > 1){ - debug('단축키 버튼 중복 : ' + targetButton.length + "개"); - } - } - - } - - } - - return false; - } - }); - } - - //단축키 기능이 사용될 영역을 반환한다. - static getCurrentAreaForShortcutKey(){ - - if(FimsSupport.isActiveBackdrop()){ - return AppSupport.getLastOpenDialog(); - } else { - return FimsSupport.getActiveRootTabArea(); - } - - return null; - } - - //현재 활성화된 최상위 탭 영역을 반환한다. - static getActiveRootTabArea(){ - return $("#main-tab-content").children(".active")[0]; - } - - - //백드롭 영역 활성화 여부를 반환한다. - static isActiveBackdrop(){ - - if($("div.modal-backdrop").length < 1){ - return false; - } - - var isActiveYn = false; - $("div.modal-backdrop").each(function(){ - if($(this).hasClass("show")){ - isActiveYn = true; - }; - }); - - return isActiveYn; - } - - - /** - * json객체 안의 jsonArray를 FormData형식의 키로 치환한다. - * @return FormData형식의 키를 갖는 json - */ - static fnJsonToFormData(originalJson, arrayName){ - if(originalJson[arrayName] == undefined){ - return originalJson; - } else { - var newObj = {}; - - var array = originalJson[arrayName]; - for(var i=0; i"+progressContent+"", - css: { backgroundColor: "lightgrey", padding : "10px" } - }); - }; - - eventSource.onerror = function(e) { - $.unblockUI(); - }; - - eventSource.onmessage = function(e) { - if (e.data == 'FIN'){ - eventSource.close(); - $.unblockUI(); - } else { - progressEvent(e.data); - } - }; - } -} - -const SSE_SUBSCRIBE_URL = wctx.url("/subscribe.do"); - -const BOOTSTRAP_COLS = [ - "col-1","col-2","col-3","col-4","col-5","col-6","col-7","col-8","col-9","col-10","col-11","col-12", - "col-sm-1","col-sm-2","col-sm-3","col-sm-4","col-sm-5","col-sm-6","col-sm-7","col-sm-8","col-sm-9","col-sm-10","col-sm-11","col-sm-12", - "col-md-1","col-md-2","col-md-3","col-md-4","col-md-5","col-md-6","col-md-7","col-md-8","col-md-9","col-md-10","col-md-11","col-md-12", - "col-lg-1","col-lg-2","col-lg-3","col-lg-4","col-lg-5","col-lg-6","col-lg-7","col-lg-8","col-lg-9","col-lg-10","col-lg-11","col-lg-12", - "col-xl-1","col-xl-2","col-xl-3","col-xl-4","col-xl-5","col-xl-6","col-xl-7","col-xl-8","col-xl-9","col-xl-10","col-xl-11","col-xl-12", - "col-xxl-1","col-xxl-2","col-xxl-3","col-xxl-4","col-xxl-5","col-xxl-6","col-xxl-7","col-xxl-8","col-xxl-9","col-xxl-10","col-xxl-11","col-xxl-12" -]; - - -/************************************************************************** -* FimsPagingSupport -**************************************************************************/ -class FimsPagingSupport extends PagingSupport { - constructor(conf) { - if(conf.ctrl == null){ - conf.ctrl = new DatasetControl({}); - } - super(conf); - - if(conf.doq != null){ - this._doq = conf.doq; - } - } - - setPagingInfo(option) { - - let pagination = {}; - let List; - let Paging; - if(this.prefix == null || this.prefix == ""){ - let c = this.linkContainer; - pagination.prefix = c.substr(7, c.length-15); - List = "List"; - Paging = "Paging"; - } else { - pagination.prefix = this.prefix; - List = pagination.prefix+"List"; - Paging = pagination.prefix+"Paging"; - } - - let dl = 0; - if(option && option[List]) { - dl = option[List].length; - } - - let s = 0; - let ts = 0; - if(option && option[Paging] && option[Paging].start) { - s = option[Paging].start; - } - if(option && option[Paging] && option[Paging].totalSize) { - ts = option[Paging].totalSize; - } - pagination.totalSize = ts; - pagination.dataLength = s + dl; - - $(this.doq.selector(this.linkContainer)).setPagingInfo(pagination); - } -} - -function newFimsPagingSupport(conf){ - return new FimsPagingSupport(conf); -} \ No newline at end of file