GIS Developer

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