GIS Developer

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