From 86d48cddb3b63e21ef7cbed17558b8d09849856e Mon Sep 17 00:00:00 2001 From: leebj Date: Wed, 21 Aug 2024 13:15:24 +0900 Subject: [PATCH] =?UTF-8?q?1.=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EC=9E=90=EB=B0=94=EC=8A=A4=ED=81=AC=EB=A6=BD?= =?UTF-8?q?=ED=8A=B8=20=EC=86=8C=EC=8A=A4=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81(function=EC=97=90=EC=84=9C=20=20class=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD)=202.=20HTML=ED=85=8C=EC=9D=B4=EB=B8=94?= =?UTF-8?q?=EC=9D=98=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EC=9D=84=20=EB=82=B4?= =?UTF-8?q?=EB=A6=B0=20=EC=83=81=ED=83=9C=EC=97=90=EC=84=9C=20=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EC=97=B4=EB=84=88=EB=B9=84=EB=A5=BC=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=88=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../webapp/resources/applib/css/applib.css | 10 +- .../resources/applib/js/componentization.js | 275 ++++++++++-------- 2 files changed, 154 insertions(+), 131 deletions(-) diff --git a/src/main/webapp/resources/applib/css/applib.css b/src/main/webapp/resources/applib/css/applib.css index b81f673..e095e39 100644 --- a/src/main/webapp/resources/applib/css/applib.css +++ b/src/main/webapp/resources/applib/css/applib.css @@ -185,10 +185,16 @@ table:has(.sticky-thead) td { float:right; } - +.resize-handle-container { + position: sticky; + top: 0; + display: inline; + z-index: 1; +} .resize-handle { position: absolute; - top: 0; width: 7px; height: 40px; + width: 7px; + height: 40px; background: transparent; cursor: col-resize; } diff --git a/src/main/webapp/resources/applib/js/componentization.js b/src/main/webapp/resources/applib/js/componentization.js index 6fd1166..324fa30 100644 --- a/src/main/webapp/resources/applib/js/componentization.js +++ b/src/main/webapp/resources/applib/js/componentization.js @@ -1,153 +1,170 @@ -/************************************************************************** -* 스크롤 테이블 -**************************************************************************/ -function fnMakeScrollableTable(tableScrollEl, thisScrollendEvent){ - - tableScrollEl.thisScrollendEvent = thisScrollendEvent; +class Componentization { - tableScrollEl.changeContent = function(content, initScrollPosition, noMore){ - var beforeRender = this.scrollTop; - - $(this).find("tbody").html(content); - - this.scrollTop = 0; - var min = this.scrollTop; - this.scrollTop = this.scrollHeight; - var max = this.scrollTop; - var hasScroll = (min != max); - - var more = document.createElement("tr"); - - if(hasScroll && !noMore){ - more.classList.add("h-px-30"); + static help(){ + console.log("fnMakeScrollableTable(테이블 컨테이너 엘리먼트, 스크롤 이벤트 처리 메소드) : 특정 테이블을 무한스크롤 페이징 테이블로 만든다."); + console.log("fnMakeResizableTable(테이블 컨테이너 엘리먼트) : 특정 테이블을 마우스드래그로 열너비 조정 가능한 테이블로 만든다."); + console.log("fnMakeRowNumberingTable(tbody엘리먼트, 행번호를 표시할 영역을 구하는 메소드, 행번호 표시 영역에 행번호를 넣는 메소드) : 특정 테이블을 행 번호를 자동으로 표시하는 테이블로 만든다."); + } + + /************************************************************************** + * 스크롤 테이블 + **************************************************************************/ + static fnMakeScrollableTable(containerEl, thisScrollendEvent){ + containerEl.thisScrollendEvent = thisScrollendEvent; - $(this).find("tbody").append(more); + containerEl.changeContent = function(content, initScrollPosition, noMore){ + let beforeRender = this.scrollTop; - var ioCallbackFunc = function(entries, observer){ - var entry = entries[0]; - var target = entry.target; - if(entry.isIntersecting){ - observer.unobserve(target); - tableScrollEl.thisScrollendEvent(); - } - }; + $(this).find("tbody").html(content); - var io = new IntersectionObserver(ioCallbackFunc, {threshold : 0}); - io.observe(more); - } - - if(initScrollPosition){ this.scrollTop = 0; - } else { + let min = this.scrollTop; + this.scrollTop = this.scrollHeight; + let max = this.scrollTop; + let hasScroll = (min != max); - var afterRender = this.scrollTop; + let more = document.createElement("tr"); - if(beforeRender < afterRender){ - this.scrollTop = beforeRender; + if(hasScroll && !noMore){ + more.classList.add("h-px-30"); + + $(this).find("tbody").append(more); + + let ioCallbackFunc = function(entries, observer){ + let entry = entries[0]; + let target = entry.target; + if(entry.isIntersecting){ + observer.unobserve(target); + containerEl.thisScrollendEvent(); + } + }; + + let io = new IntersectionObserver(ioCallbackFunc, {threshold : 0}); + io.observe(more); } - } - - }; -} - -/************************************************************************** -* 컬럼 크기 조절 테이블 -**************************************************************************/ -function fnMakeResizableTable(containerEl){ + + if(initScrollPosition){ + this.scrollTop = 0; + } else { + + let afterRender = this.scrollTop; + + if(beforeRender < afterRender){ + this.scrollTop = beforeRender; + } + } + + }; + } - var cur_container, cur_handle, cur_index, cur_col, cur_col_width; - var cursorStart = 0, dragStart = false; - function fnMouseDown(e){ - - e.preventDefault(); + /************************************************************************** + * 컬럼 크기 조절 테이블 + **************************************************************************/ + static fnMakeResizableTable(containerEl){ + + var cur_container, cur_handle, cur_index, cur_col, cur_col_width; + var cursorStart = 0, dragStart = false; - cur_handle = this; - cur_container = cur_handle.tableContainer; + function fnMouseDown(e){ + + e.preventDefault(); + + cur_handle = this; + cur_container = cur_handle.tableContainer; + + cur_index = parseInt(cur_handle.getAttribute("data-resizecol"))-1; + + let 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){ + let cursorPosition = event.pageX; + let mouseMoved = (cursorPosition - cursorStart); + let 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(); + } - cur_index = parseInt(cur_handle.getAttribute("data-resizecol"))-1; + containerEl.style.position = "relative"; + + let handleContainer = document.createElement("span"); + handleContainer.className = "resize-handle-container"; + let table = containerEl.querySelector("table") + containerEl.insertBefore(handleContainer, table); - 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; + containerEl.addHandle = function(){ + let thEls = $(this.getElementsByTagName("table")[0]).find("th").not(".dummy-th"); + let th_length = thEls.length; + let widthAcc = 0; + for(let i=0; i < th_length; i++){ + widthAcc += thEls[i].getBoundingClientRect().width; + let yDiv = document.createElement("div"); + yDiv.className = "resize-handle"; + yDiv.setAttribute("data-resizecol",i+1); + yDiv.style.cssText = "left: "+widthAcc+"px;"; + this.querySelector(".resize-handle-container").append(yDiv); + } - if(newWidth > 30){ - cur_col.style.width = newWidth+"px"; + let handleEls = this.getElementsByClassName("resize-handle"); + let handle_length = handleEls.length; + for(let i = 0; i < handle_length; i++){ + handleEls[i].tableContainer = this; + handleEls[i].onmousedown = fnMouseDown; } - } - } - - 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); + }; + + containerEl.removeHandle = function(){ + $(this).find(".resize-handle").remove(); } - 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.changeColumn = function(ths){ + this.removeHandle(); + $(this).find("table thead tr").html(ths); + this.addHandle(); } - }; - - containerEl.removeHandle = function(){ - $(this).find(".resize-handle").remove(); + + containerEl.addHandle(); + } - containerEl.changeColumn = function(ths){ - this.removeHandle(); - $(this).find("table thead tr").html(ths); - this.addHandle(); + /************************************************************************** + * 행 번호 표시 테이블 + **************************************************************************/ + static fnMakeRowNumberingTable(tbody, markerFinder, markerSetter){ + + let moCallbackFunc = function(mutationList, observer){ + let target = mutationList[0].target; + + $(target).find("tr").each(function(idx, item){ + markerSetter(markerFinder(item),idx+1); + }); + }; + let mo = new MutationObserver(moCallbackFunc); + mo.observe(tbody, {childList : true}); } - containerEl.addHandle(); } - -/************************************************************************** -* 행 번호 표시 테이블 -**************************************************************************/ -function fnMakeRowNumberingTable(tbody, markerFinder, markerSetter){ - - var moCallbackFunc = function(mutationList, observer){ - var target = mutationList[0].target; - - $(target).find("tr").each(function(idx, item){ - markerSetter(markerFinder(item),idx+1); - }); - }; - var mo = new MutationObserver(moCallbackFunc); - mo.observe(tbody, {childList : true}); -} \ No newline at end of file