하나의 모달 대화상자를 gwcCreateModalDialog 함수를 이용해 만들때 class 단위로 만들면 전체적인 시스템의 UI 기능이 효과적으로 분리됩니다. 먼저 모달 대화상자에 대한 코드를 class로 만듭니다.
class ArchiveManagerDialog {
constructor() {
const dlg = gwcCreateModalDialog("아카이브 관리자");
dlg.content = `
<div class="archive-manager-dialog h-center content">
<div class="vertical-linear-layout">
<div class="horizontal-linear-layout v-center">
<gwc-toolbutton icon="../images/add.svg"></gwc-toolbutton>
<gwc-toolbutton icon="../images/search.svg"></gwc-toolbutton>
<gwc-space size="10px"></gwc-space>
<div class="horizontal-linear-layout v-center search-part">
<gwc-label content="소유자 이름" outline-type="none"></gwc-label>
<gwc-textinput></gwc-textinput>
<gwc-toolbutton icon="../images/reset.svg"></gwc-toolbutton>
</div>
</div>
<gwc-vscrollview>
<content>
<gwc-tree></gwc-tree>
</content>
</gwc-vscrollview>
</div>
</div>
`;
dlg.width = "50em";
dlg.resizablePanel.resizableLeft = true;
dlg.resizablePanel.resizableRight = true;
dlg.resizablePanel.resizableTop = true;
dlg.resizablePanel.resizableBottom = true;
dlg.resizablePanel.minWidth = 450;
dlg.resizablePanel.minHeight = 300;
dlg.resizablePanel.addEventListener("change", (event) => {
if(event.target === dlg.resizablePanel) {
const { mode, oldHeight, newHeight } = event.detail;
if(mode === "BOTTOM" || mode == "TOP") {
const domScrollView = dlg.content.querySelector("gwc-vscrollview");
const height = parseFloat(window.getComputedStyle(domScrollView).getPropertyValue("height"));
domScrollView.style.height = `${height - (oldHeight - newHeight)}px`;
domScrollView.refresh();
}
}
});
dlg.show();
GeoServiceWebComponentManager.instance.update();
}
}
class ArchiveManagerDialog {
constructor() {
const dlg = gwcCreateModalDialog("아카이브 관리자");
dlg.content = `
<div class="archive-manager-dialog h-center content">
<div class="vertical-linear-layout">
<div class="horizontal-linear-layout v-center">
<gwc-toolbutton icon="../images/add.svg"></gwc-toolbutton>
<gwc-toolbutton icon="../images/search.svg"></gwc-toolbutton>
<gwc-space size="10px"></gwc-space>
<div class="horizontal-linear-layout v-center search-part">
<gwc-label content="소유자 이름" outline-type="none"></gwc-label>
<gwc-textinput></gwc-textinput>
<gwc-toolbutton icon="../images/reset.svg"></gwc-toolbutton>
</div>
</div>
<gwc-vscrollview>
<content>
<gwc-tree></gwc-tree>
</content>
</gwc-vscrollview>
</div>
</div>
`;
dlg.width = "50em";
dlg.resizablePanel.resizableLeft = true;
dlg.resizablePanel.resizableRight = true;
dlg.resizablePanel.resizableTop = true;
dlg.resizablePanel.resizableBottom = true;
dlg.resizablePanel.minWidth = 450;
dlg.resizablePanel.minHeight = 300;
dlg.resizablePanel.addEventListener("change", (event) => {
if(event.target === dlg.resizablePanel) {
const { mode, oldHeight, newHeight } = event.detail;
if(mode === "BOTTOM" || mode == "TOP") {
const domScrollView = dlg.content.querySelector("gwc-vscrollview");
const height = parseFloat(window.getComputedStyle(domScrollView).getPropertyValue("height"));
domScrollView.style.height = `${height - (oldHeight - newHeight)}px`;
domScrollView.refresh();
}
}
});
dlg.show();
GeoServiceWebComponentManager.instance.update();
}
}
class ArchiveManagerDialog { constructor() { const dlg = gwcCreateModalDialog("아카이브 관리자"); dlg.content = ``; dlg.width = "50em"; dlg.resizablePanel.resizableLeft = true; dlg.resizablePanel.resizableRight = true; dlg.resizablePanel.resizableTop = true; dlg.resizablePanel.resizableBottom = true; dlg.resizablePanel.minWidth = 450; dlg.resizablePanel.minHeight = 300; dlg.resizablePanel.addEventListener("change", (event) => { if(event.target === dlg.resizablePanel) { const { mode, oldHeight, newHeight } = event.detail; if(mode === "BOTTOM" || mode == "TOP") { const domScrollView = dlg.content.querySelector("gwc-vscrollview"); const height = parseFloat(window.getComputedStyle(domScrollView).getPropertyValue("height")); domScrollView.style.height = `${height - (oldHeight - newHeight)}px`; domScrollView.refresh(); } } }); dlg.show(); GeoServiceWebComponentManager.instance.update(); } }
CSS에 대한 코드는 다음과 같습니다.
.vertical-linear-layout {
display: flex;
flex-direction: column;
gap: 0.3em;
}
.horizontal-linear-layout {
display: flex;
gap: 0.3em;
flex-direction: row;
_padding: 0 1em;
}
.v-center {
align-items: center;
}
.h-center {
justify-content: center;
}
.v-space {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.archive-manager-dialog {
padding: 0.5em 0.5em 0.5em 0.5em;
}
.archive-manager-dialog gwc-textinput {
width: 10em;
}
.archive-manager-dialog .search-part {
margin-left: auto;
}
.archive-manager-dialog gwc-vscrollview {
height: 30em; /* js 코드로 크기를 조정해야 함 */
margin: 0 0.2em;
background: rgba(0,0,0,0.3);
box-shadow: inset -0.6px -0.6px 0.6px rgba(255,255,255,0.4),
inset 0.6px 0.6px 0.6px rgba(0,0,0,0.5);
border-radius: 0.5em;
}
.archive-manager-dialog gwc-tree {
width: 100%;
padding: 0.5em 0.5em 0.5em 0.5em;
_border: 1px solid red;
}
.vertical-linear-layout {
display: flex;
flex-direction: column;
gap: 0.3em;
}
.horizontal-linear-layout {
display: flex;
gap: 0.3em;
flex-direction: row;
_padding: 0 1em;
}
.v-center {
align-items: center;
}
.h-center {
justify-content: center;
}
.v-space {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.archive-manager-dialog {
padding: 0.5em 0.5em 0.5em 0.5em;
}
.archive-manager-dialog gwc-textinput {
width: 10em;
}
.archive-manager-dialog .search-part {
margin-left: auto;
}
.archive-manager-dialog gwc-vscrollview {
height: 30em; /* js 코드로 크기를 조정해야 함 */
margin: 0 0.2em;
background: rgba(0,0,0,0.3);
box-shadow: inset -0.6px -0.6px 0.6px rgba(255,255,255,0.4),
inset 0.6px 0.6px 0.6px rgba(0,0,0,0.5);
border-radius: 0.5em;
}
.archive-manager-dialog gwc-tree {
width: 100%;
padding: 0.5em 0.5em 0.5em 0.5em;
_border: 1px solid red;
}
.vertical-linear-layout { display: flex; flex-direction: column; gap: 0.3em; } .horizontal-linear-layout { display: flex; gap: 0.3em; flex-direction: row; _padding: 0 1em; } .v-center { align-items: center; } .h-center { justify-content: center; } .v-space { margin-top: 0.5em; margin-bottom: 0.5em; } .archive-manager-dialog { padding: 0.5em 0.5em 0.5em 0.5em; } .archive-manager-dialog gwc-textinput { width: 10em; } .archive-manager-dialog .search-part { margin-left: auto; } .archive-manager-dialog gwc-vscrollview { height: 30em; /* js 코드로 크기를 조정해야 함 */ margin: 0 0.2em; background: rgba(0,0,0,0.3); box-shadow: inset -0.6px -0.6px 0.6px rgba(255,255,255,0.4), inset 0.6px 0.6px 0.6px rgba(0,0,0,0.5); border-radius: 0.5em; } .archive-manager-dialog gwc-tree { width: 100%; padding: 0.5em 0.5em 0.5em 0.5em; _border: 1px solid red; }
실행 결과는 다음과 같습니다.