gwcCreateModalDialog의 resizing 코드 예 (gwc-card에도 적용됨)

하나의 모달 대화상자를 gwcCreateModalDialog 함수를 이용해 만들때 class 단위로 만들면 전체적인 시스템의 UI 기능이 효과적으로 분리됩니다. 먼저 모달 대화상자에 대한 코드를 class로 만듭니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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에 대한 코드는 다음과 같습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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;    
}

실행 결과는 다음과 같습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다