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

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

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;    
}

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

#GWC UI Library : gwcCreateProgressDialog

웹 UI 라이브러리인 GWC에서 제공하는 gwcCreateProgressDialog 함수에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    button.onclick = event => { 
        const dlg = gwcCreateProgressDialog({
            // onCancel 이벤트를 지정하지 않을 경우 "취소" 버튼 클릭시 remove 매서드가 자동으로 호출됨
            onCancel: () => {
                gwcMessage("사용자가 진행을 중단했습니다.", true);
                dlg.remove(); // onCancel 이벤트 지정했을 경우 의도적으로 remove 매서드를 호촐해야 함
            }
        });

        dlg.show();

        let p = 0;
        setInterval(() => {
            dlg.percent = p;
                if(p++ === 100) dlg.remove();
        }, 50);

        //dlg.label = "텍스트 메시지";
    };
};

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

cancel() 매서드를 호출하면 onCancel 이벤트가 호출됩니다.

#GWC UI Library : gwcCreateModalDialog 함수

웹 UI 라이브러리인 GWC에서 제공하는 gwcCreateModalDialog 함수에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}

.hcenter {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.5em;
}
 
.content {
    padding: .5em;
}

.vcenter {
    display: flex;
    align-items: center;
}

gwc-textinput {
    width: 20em;
}

.something {
    width: 100%;
    height: 100px;
    background: rgba(0,0,0,0.4);
    border: 1px dashed rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: wheat;
    padding: 20px;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    btn.addEventListener("click", () => {
        const dlg = gwcCreateModalDialog("모달 대화상자");
        dlg.content = `
            
앨든링(Elden Ring)..
그대가 왕이될지.. 아니 어쩌면 신이될지..
`; dlg.resizablePanel.style.width = "30em"; // 대화상자의 크기 지정(대화상자 자체에 대한 크기 조절로는 안됨) dlg.resizablePanel.minWidth = 400; // 대화창의 크기 조절 시 가로 최소 크기 dlg.resizablePanel.minHeight = 200; // 대화창의 크기 조절 시 세로 최소 크기 // 대화 상자의 크기 조절에 따른 구성 UI의 크기 조절 // CSS 만으로 제어할 수 없는 구성 UI는 크기 변경 이벤트를 통해 제어할 수 있음 dlg.resizablePanel.addEventListener("change", (event) => { const { mode, oldHeight, newHeight } = event.detail; if(mode === "BOTTOM" || mode == "TOP") { const domSomething = dlg.content.querySelector(".something"); const height = parseFloat(window.getComputedStyle(domSomething).getPropertyValue("height")); domSomething.style.height = `${height - (oldHeight - newHeight)}px`; } }); dlg.content.querySelector("gwc-button").addEventListener("click", () => { dlg.remove(); }); dlg.show(); GeoServiceWebComponentManager.instance.update(); }); };

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

대화창을 구성하는 UI의 상태(값)이 변경되면 변경에 대한 처리를 한곳에서 처리할 수 있는 state 관리가 가능합니다. 코드의 예는 다음과 같습니다.

dlg.setState((ui) => {
    console.log("변경통지", typeof ui);
});

setState로 상태 변경에 대한 이벤트를 등록할 수 있으며 변경 이벤트는 다음처럼 직접적으로 호출할 수도 있습니다.

this.#dialog.state.change(this.#selectedFile);

대화창이 닫힐때 수동이든 자동이든 remove 매서드가 호출되는데요. 이때 close 이벤트가 발생합니다. 이 이벤트를 통해 창이 닫힐때 무언가를 처리할 수 있고, 창을 정말로 닫을지 제어할 수 있습니다.

this.#dialog.addEventListener("close", (event) => {
    // cancel을 true로 설정하면 대화창이 닫히지 않습니다.
    event.cancel = true;
});

#GWC UI Library : gwcInput 함수

웹 UI 라이브러리인 GWC에서 제공하는 gwcInput 함수에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 3em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    button.onclick = event => { 
        gwcInput({
            message: "폴더 이름을 입력하세요",
            value: "이름", // optional
            onOkay: (value) => { // 확인 버튼 처리
                console.log(value);
                if(value.trim().length === 0) {
                    gwcMessage("값을 입력하세요.", true);
                    return false; // false를 반환하면 입력창이 닫히지 않음
                } else {
                    gwcMessage(`입력한 값은 ${value} 입니다.`);
                }
            },
            onCancel: (value) => { // 취소 버튼 처리
                // false를 반환하면 입력창이 닫히지 않음
                //return false; 
            }
        });
    };
};

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

gwcInput 함수는 표시되는 대화상자에 대한 객체를 반환합니다. 이 객체가 dlg라고 할때 내부에 표시되는 메세지를 1초마다 변경하다가 수초 경과 후 자동으로 닫히게 하는 코드는 다음과 같습니다.

let i = 0;
setInterval(() => {
    i++;
    dlg.message = i;

    if(i === 4) dlg.remove();
}, 1000);