xit-app
/
fims-web-all
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

js 소스 이동

Browse Source
main
이범준 2 months ago
parent c5c0ce0205
commit 7140254173
4 changed files with 0 additions and 1605 deletions
Show Stats Download Patch File Download Diff File

301
src/main/webapp/resources/js/fims/cmmn/customElements.js
Unescape Escape View File

@ -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" });

519
src/main/webapp/resources/js/fims/cmmn/fims-base.js
Unescape Escape View File

@ -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;
}
}
};

230
src/main/webapp/resources/js/fims/cmmn/fims-componentization.js
Unescape Escape View File

@ -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;
}

555
src/main/webapp/resources/js/fims/cmmn/fims-support.js
Unescape Escape View File

@ -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<array.length; i++){
var json = array[i];
var keys = Object.keys(json);
for(var j=0; j<keys.length; j++){
var key = keys[j];
newObj[arrayName+"["+i+"]."+key] = json[key];
}
}
delete originalJson[arrayName];
return {...originalJson, ...newObj};
}
}
/**
* jsonArray를 FormData형식의 키를 갖는 json으로 치환한다.
* @return FormData형식의 키를 갖는 json
*/
static fnJsonArrayToFormData(array, arrayName){
var newObj = {};
for(var i=0; i<array.length; i++){
var json = array[i];
var keys = Object.keys(json);
for(var j=0; j<keys.length; j++){
var key = keys[j];
newObj[arrayName+"["+i+"]."+key] = json[key];
}
}
return newObj;
}
/**************************************************************************
* 엑셀다운로드시 개인정보 포함된 셀의 이름 정보를 추출하는 함수
**************************************************************************/
static getCellDefsForPrivacyCell($td_i){
if($td_i.hasClass("privacy-cell")){
return $td_i.find("span:eq(0)").text();
} else {
return $td_i.text();
}
}
/**************************************************************************
* 프로그레스바 표시
**************************************************************************/
static fnProgress(sseKey, progressContent, progressEvent){
var eventSource = new EventSource(SSE_SUBSCRIBE_URL+"?sseKey="+sseKey);
eventSource.onopen = function(e) {
$.blockUI({
message : "<span id='progress-"+sseKey+"' >"+progressContent+"</span>",
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);
}
Write Preview
Loading…
Cancel
Save