diff --git a/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css b/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css index ddf3b2a1..09e1743a 100644 --- a/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css +++ b/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css @@ -559,6 +559,14 @@ span.skeleton { min-width: auto !important; } +.resize-handle { + position: absolute; + top: 0; width: 7px; height: 102%; + background: transparent; + cursor: col-resize; +} + + /* 배경색, 외곽선 */ .traffic { diff --git a/src/main/webapp/resources/js/fims/framework/cmm/componentization.js b/src/main/webapp/resources/js/fims/framework/cmm/componentization.js index 89a3d8e2..d0d0bf47 100644 --- a/src/main/webapp/resources/js/fims/framework/cmm/componentization.js +++ b/src/main/webapp/resources/js/fims/framework/cmm/componentization.js @@ -286,19 +286,18 @@ function fnMakeSingleImageViewer(imgEl, fileInputEl, dataAttributeForFilePath, d **************************************************************************/ function fnMakeDraggableDialog(dialogEl) { + var currentDialog; var currentPosX = 0, currentPosY = 0, previousPosX = 0, previousPosY = 0; - $(dialogEl).find(".modal-header")[0].onmousedown = fnDragMouseDown; - function fnDragMouseDown(e) { e.preventDefault(); - + + currentDialog = this.targetDialog; previousPosX = e.clientX; previousPosY = e.clientY; document.onmouseup = fnCloseDragElement; - document.onmousemove = fnElementDrag; } @@ -312,12 +311,101 @@ function fnMakeDraggableDialog(dialogEl) { previousPosX = e.clientX; previousPosY = e.clientY; - dialogEl.style.top = (dialogEl.offsetTop - currentPosY) + 'px'; - dialogEl.style.left = (dialogEl.offsetLeft - currentPosX) + 'px'; + currentDialog.style.top = (currentDialog.offsetTop - currentPosY) + 'px'; + currentDialog.style.left = (currentDialog.offsetLeft - currentPosX) + 'px'; } function fnCloseDragElement() { document.onmouseup = null; document.onmousemove = null; } + + $(dialogEl).find(".modal-header")[0].targetDialog = dialogEl; + $(dialogEl).find(".modal-header")[0].onmousedown = fnDragMouseDown; +} + +/************************************************************************** +* 컬럼 크기 조절 테이블 +**************************************************************************/ +function fnMakeResizableTable(containerEl){ + + var cur_container, cur_handle, cur_index, cur_col, cur_col_width; + var cursorStart = 0, dragStart = false; + + function fnMouseDown(e){ + + e.preventDefault(); + + cur_handle = this; + cur_container = cur_handle.tableContainer; + + cur_index = parseInt(cur_handle.getAttribute("data-resizecol"))-1; + + var thEls = $(cur_container.getElementsByTagName("table")[0]).find("th").not(".dummy-th"); + cur_col = thEls[cur_index]; + cur_col_width = cur_col.getBoundingClientRect().width; + + dragStart = true; + cursorStart = event.pageX; + + document.onmouseup = fnCloseResize; + document.onmousemove = fnMouseMove; + + } + + function fnMouseMove(e){ + e.preventDefault(); + + if(dragStart){ + var cursorPosition = event.pageX; + var mouseMoved = (cursorPosition - cursorStart); + var newWidth = cur_col_width + mouseMoved; + + if(newWidth > 30){ + cur_col.style.width = newWidth+"px"; + } + } + } + + function fnCloseResize(e){ + document.onmousemove = null; + document.onmouseup = null; + cur_container.removeHandle(); + cur_container.addHandle(); + } + + containerEl.style.position = "relative"; + + containerEl.addHandle = function(){ + var thEls = $(this.getElementsByTagName("table")[0]).find("th").not(".dummy-th"); + var th_length = thEls.length; + var widthAcc = 0; + for(var i=0; i < th_length; i++){ + widthAcc += thEls[i].getBoundingClientRect().width; + var yDiv = document.createElement("div"); + yDiv.className = "resize-handle"; + yDiv.setAttribute("data-resizecol",i+1); + yDiv.style.cssText = "left: "+widthAcc+"px;"; + this.append(yDiv); + } + + handleEls = this.getElementsByClassName("resize-handle"); + var handle_length = handleEls.length; + for(var i = 0; i < handle_length; i++){ + handleEls[i].tableContainer = this; + handleEls[i].onmousedown = fnMouseDown; + } + }; + + containerEl.removeHandle = function(){ + $(this).find(".resize-handle").remove(); + } + + containerEl.changeColumn = function(ths){ + this.removeHandle(); + $(this).find("table thead tr").html(ths); + this.addHandle(); + } + + containerEl.addHandle(); } \ No newline at end of file