소스 정리
parent
72b3f91120
commit
53bacb86f9
@ -1,215 +1,226 @@
|
|||||||
/**************************************************************************
|
class FimsComponentization {
|
||||||
* 버튼으로 조작가능한 셀렉트박스
|
|
||||||
**************************************************************************/
|
static help(){
|
||||||
function fnMakeSpinnerSelect(selectEl, prevBtnEl, nextBtnEl){
|
console.log("fnMakeSpinnerSelect(셀렉트박스,이전버튼,다음버튼) : 특정 셀렉트박스를 버튼클릭으로 옵션 선택 가능한 셀렉트박스로 만든다.");
|
||||||
|
console.log("fnMakeOptionStyleSelect(셀렉트박스) : 특정 셀렉트박스를 선택된 옵션의 스타일이 적용된 셀렉트박스로 만든다.");
|
||||||
$(selectEl).on("animationend", function(){
|
console.log("fnMakeRowSpinner(테이블row,up버튼,down버튼,스크롤컨테이너,validator) : 특정 테이블을 행 위치 이동이 가능한 테이블로 만든다.");
|
||||||
$(selectEl).removeClass("highlight-once");
|
console.log("fnMakeSingleImageViewer(img태그,fileInput태그,파일경로속성명,파일이름속성명) : 특정 이미지 태그를 단일 업로드 이미지 뷰어로 만든다.");
|
||||||
});
|
}
|
||||||
$(prevBtnEl).on("click", function(){
|
|
||||||
var selected = $(selectEl).find("option:selected");
|
/**************************************************************************
|
||||||
var prev = selected.prev();
|
* 특정 셀렉트박스를 버튼클릭으로 옵션 선택 가능한 셀렉트박스로 만든다.
|
||||||
if(prev.length >= 1){
|
**************************************************************************/
|
||||||
$(selectEl).val(prev.val());
|
static fnMakeSpinnerSelect(selectEl, prevBtnEl, nextBtnEl){
|
||||||
} else {
|
|
||||||
$(selectEl).addClass("highlight-once");
|
$(selectEl).on("animationend", function(){
|
||||||
}
|
$(selectEl).removeClass("highlight-once");
|
||||||
});
|
});
|
||||||
$(nextBtnEl).on("click", function(){
|
$(prevBtnEl).on("click", function(){
|
||||||
var selected = $(selectEl).find("option:selected");
|
var selected = $(selectEl).find("option:selected");
|
||||||
var next = selected.next();
|
var prev = selected.prev();
|
||||||
if(next.length >= 1){
|
if(prev.length >= 1){
|
||||||
$(selectEl).val(next.val());
|
$(selectEl).val(prev.val());
|
||||||
} else {
|
} else {
|
||||||
$(selectEl).addClass("highlight-once");
|
$(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");
|
||||||
function fnMakeOptionStyleSelect(selectEl){
|
|
||||||
$(selectEl).addClass("option-style-select");
|
if(selected.length <= 0){
|
||||||
|
selectEl.dataset.optionStyle = "";
|
||||||
|
selectEl.title = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
selectEl.changeUI = function(){
|
selectEl.dataset.optionStyle = selected.val();
|
||||||
|
selectEl.title = selected[0].title;
|
||||||
var selected = $(this).find("option:selected");
|
};
|
||||||
|
|
||||||
if(selected.length <= 0){
|
$(selectEl).on("change", function(){
|
||||||
selectEl.dataset.optionStyle = "";
|
selectEl.changeUI();
|
||||||
selectEl.title = "";
|
});
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
selectEl.dataset.optionStyle = selected.val();
|
|
||||||
selectEl.title = selected[0].title;
|
|
||||||
};
|
|
||||||
|
|
||||||
$(selectEl).on("change", function(){
|
|
||||||
selectEl.changeUI();
|
selectEl.changeUI();
|
||||||
});
|
|
||||||
|
|
||||||
selectEl.changeUI();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**************************************************************************
|
|
||||||
* 행 위치 이동 가능한 테이블
|
|
||||||
**************************************************************************/
|
|
||||||
function 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 = 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
function fnMakeRowSpinner(tableRowEl, upBtnEl, downBtnEl, scrollEl, validFunc){
|
|
||||||
|
|
||||||
if(validFunc != undefined && validFunc != null){
|
|
||||||
tableRowEl.validForComponent = validFunc;
|
|
||||||
} else {
|
|
||||||
tableRowEl.validForComponent = function(eventInfo){
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**************************************************************************
|
||||||
|
* 특정 테이블을 행 위치 이동 가능한 테이블로 만든다.
|
||||||
|
**************************************************************************/
|
||||||
|
static fnMakeRowSpinner(tableRowEl, upBtnEl, downBtnEl, scrollEl, validFunc){
|
||||||
|
|
||||||
$(upBtnEl).on("click", function(){
|
if(validFunc != undefined && validFunc != null){
|
||||||
var tbody = $(tableRowEl).parent();
|
tableRowEl.validForComponent = validFunc;
|
||||||
|
} else {
|
||||||
var theadHeight = $(scrollEl).find("thead").outerHeight();
|
tableRowEl.validForComponent = function(eventInfo){
|
||||||
var scrollElStart = $(scrollEl).offset().top + theadHeight;
|
return true;
|
||||||
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 = {
|
$(upBtnEl).on("click", function(){
|
||||||
clickedButtonType : "up",
|
var tbody = $(tableRowEl).parent();
|
||||||
currentRow : tableRowEl,
|
|
||||||
siblingRow : beforeTr
|
var theadHeight = $(scrollEl).find("thead").outerHeight();
|
||||||
};
|
var scrollElStart = $(scrollEl).offset().top + theadHeight;
|
||||||
if(!tableRowEl.validForComponent(eventInfo)){
|
var scrollElHeight = $(scrollEl).height() - theadHeight - VERTICAL_SCROLL_HEIGHT;
|
||||||
return;
|
var scrollMiddle = scrollElStart + (scrollElHeight/2);
|
||||||
}
|
|
||||||
|
if($(tableRowEl).index() == 0){
|
||||||
|
return;
|
||||||
var rowStart = beforeTr.offset().top;
|
}
|
||||||
var rowHeight = beforeTr.outerHeight();
|
|
||||||
var rowMiddle = rowStart+(rowHeight/2);
|
var beforeIndex = $(tableRowEl).index() - 1;
|
||||||
|
var beforeTr = $(tbody).find("tr").eq(beforeIndex);
|
||||||
beforeTr.before(tableRowEl);
|
|
||||||
|
|
||||||
if(rowMiddle < scrollMiddle){
|
var eventInfo = {
|
||||||
var move = scrollMiddle - rowMiddle;
|
clickedButtonType : "up",
|
||||||
$(scrollEl).scrollTop($(scrollEl).scrollTop() - move);
|
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);
|
||||||
|
|
||||||
$(tbody).find("tr").removeClass("current-row");
|
if(rowMiddle < scrollMiddle){
|
||||||
$(tableRowEl).addClass("current-row");
|
var move = scrollMiddle - rowMiddle;
|
||||||
});
|
$(scrollEl).scrollTop($(scrollEl).scrollTop() - move);
|
||||||
|
}
|
||||||
$(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;
|
$(tbody).find("tr").removeClass("current-row");
|
||||||
var afterTr = $(tbody).find("tr").eq(afterIndex);
|
$(tableRowEl).addClass("current-row");
|
||||||
|
});
|
||||||
|
|
||||||
var eventInfo = {
|
|
||||||
clickedButtonType : "down",
|
|
||||||
currentRow : tableRowEl,
|
|
||||||
siblingRow : afterTr
|
|
||||||
};
|
|
||||||
if(!tableRowEl.validForComponent(eventInfo)){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
$(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");
|
||||||
|
});
|
||||||
|
|
||||||
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");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**************************************************************************
|
|
||||||
* 단일 업로드 이미지 뷰어
|
|
||||||
**************************************************************************/
|
|
||||||
function fnMakeSingleImageViewer(imgEl, fileInputEl, dataAttributeForFilePath, dataAttributeForFileName){
|
|
||||||
|
|
||||||
$(imgEl).on("click", function(){
|
|
||||||
$(fileInputEl).click();
|
|
||||||
});
|
|
||||||
|
|
||||||
$(fileInputEl).on("change", function(){
|
/**************************************************************************
|
||||||
|
* 특정 이미지 태그를 단일 업로드 이미지 뷰어로 만든다.
|
||||||
|
**************************************************************************/
|
||||||
|
static fnMakeSingleImageViewer(imgEl, fileInputEl, dataAttributeForFilePath, dataAttributeForFileName){
|
||||||
|
|
||||||
if(this.files != null && this.files.length > 0){
|
$(imgEl).on("click", function(){
|
||||||
$(imgEl).attr("alt", this.files[0].name);
|
$(fileInputEl).click();
|
||||||
$(imgEl).attr("src", (window.URL || window.webkitURL).createObjectURL(this.files[0]));
|
});
|
||||||
|
|
||||||
} else {
|
$(fileInputEl).on("change", function(){
|
||||||
|
|
||||||
var orgnName = $(imgEl).attr("data-"+dataAttributeForFileName);
|
|
||||||
var orgnPath = $(imgEl).attr("data-"+dataAttributeForFilePath);
|
|
||||||
|
|
||||||
if(orgnPath != undefined && orgnPath != null && orgnPath != ""){
|
if(this.files != null && this.files.length > 0){
|
||||||
$(imgEl).attr("alt", orgnName);
|
$(imgEl).attr("alt", this.files[0].name);
|
||||||
$(imgEl).attr("src", orgnPath);
|
$(imgEl).attr("src", (window.URL || window.webkitURL).createObjectURL(this.files[0]));
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
$(imgEl).attr("alt", "파일이 없습니다.");
|
|
||||||
$(imgEl).attr("src", "/resources/img/no-image.svg");
|
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", "/resources/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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue