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