웹 UI 라이브러리인 GWC에서 제공하는 ResizablePanel 컴포넌트에 대한 예제 코드입니다.

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

    

        
GWC Library
        

        
GWC 라이브러리는 Geoservice Web Components로 웹 GIS 개발에 최적화된 Web UI를 제공합니다.
        

        

            이미지 컴포넌트 
            
        
        

        

            
            버튼 컴포넌트
        
        

        

            
                
                    라디오
                    옵션A
                    옵션B
                
            
        
        

        

            
            
            
        
        

        

            슬라이더
            
        
        

        
등등..
        

        
웹 소프트웨어 개발에 필요한 많은 컴포넌트들을 제공하며 사용자 경험 향상을 위해 계속 개선되고 추가됩니다.
    



    
GWC
    
GEOSERVICE WEB COMPONENTS

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

#panel {
    box-shadow: 0 0 2px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,1), 
        0 0 10px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,1);
    left: calc(100% - 30em);
    right: 0;
    top: 0;
    width: 30em;
    height: 100vh;
    color: white;
    background: rgba(0,0,0,0.3);
}

#panel2 {
    left: 300px;
    top: 300px;
    width: 400px;
    height: 300px;
    border-radius: 8px;
    box-shadow: 0 0 2px white, 0 0 8px rgba(0,0,0,1), 
        0 0 10px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,1);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    font-size: 1em;
    color: white;
    justify-content: center;
    align-items: center;
}

.content {
    height: 100%;
    overflow: hidden;
    padding: 1em 2em;
    width: 100%;
    line-height: 1.5em;
}

gwc-image {
    width: 15em;
    height: 15em;
}

.vcenter {
    color: rgb(160,160,160);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding: 0.5em 0;
 }

 gwc-slider {
    width: 10em;
 }

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

window.onload = () => {
    document.querySelector("gwc-button").onclick = () => {
        gwcMessage("안녕하세요.");
    }

    panel.addEventListener("change", (event) => {
        console.log(event.detail);
        // event.cancel = true;
    });

    window.addEventListener("resize", () => {
        panel.style.right = 0;
        const width = panel.offsetWidth;
        panel.style.left = `calc(100% - ${width}px)`;
    });

    GeoServiceWebComponentManager.instance.update();
};

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

이 컴포넌트는 크기 제어를 제어하기 위해 다음과 같은 코드를 사용할 수 있습니다.

dlg.resizablePanel.resizableLeft = false; // 왼쪽 모서리로 크기 조정 불가능
dlg.resizablePanel.resizableRight = false; // 오른쪽 모서리로 크기 조정 불가능
dlg.resizablePanel.resizableTop = true; // 위 모서리로 크기 조정 가능
dlg.resizablePanel.resizableBottom = true; // 아래 모서리로 크기 조정 가능

이 컴포넌트는 resizing get 속성을 통해 마우스를 이용해 현재 크기 조절 중 인지를 파악할 수 있습니다.

웹 UI 라이브러리인 GWC에서 제공하는 SearchInput 컴포넌트에 대한 예제 코드입니다.

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

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

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

.input {
    width: 25em; /* 포커스를 받으면 커지는 크기 */
}

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

window.onload = () => {
    input.addEventListener("enter", () => {
        const v = input.value;

        gwcMessage(`"${v}"(으)로 검색을 수행합니다.`);
        
        input.addHistory(v);
    });

    GeoServiceWebComponentManager.instance.update();
};

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

이 컴포넌트는 사용자가 클릭할 때 입력이 활성화되는데요. 항상 활성화되도록 하기 위해서는 다음처럼 always-open 속성을 “true”로 지정하면 됩니다.

이 컴포넌트는 키워드를 입력하다가 포커스를 잃어버리면 입력창이 닫히게 되는데 이때 close 이벤트를 제공합니다. 상대적인 이벤트로 open 이벤트는 입력창이 열릴때 호출됩니다.

웹 UI 라이브러리인 GWC에서 제공하는 Accordion 컴포넌트에 대한 예제 코드입니다.

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

<div class="center">
    <gwc-label id="label" content="Accordion 이벤트"></gwc-label>
    <gwc-accordion id="accordion">
        <parts>
            <part title="툴버튼" count=32 icon="./images/icon1.png" open=true>
                <div class="part1">
                    <gwc-toolbutton icon="images/icon2.png"></gwc-toolbutton>
                    <gwc-toolbutton icon="images/icon3.png"></gwc-toolbutton>
                    <gwc-toolbutton icon="images/icon1.png"></gwc-toolbutton>                            
                </div>
            </part>
            <part title="메세지" count=0>
                <div class="part2">
                    <div class="part2-sub">
                        <gwc-checkbox title="사과"></gwc-checkbox>
                        <gwc-checkbox title="토마토"></gwc-checkbox>
                        <gwc-checkbox title="귤"></gwc-checkbox>
                        <gwc-checkbox title="당근"></gwc-checkbox>
                        <gwc-checkbox title="바나나"></gwc-checkbox>
                    </div>
                    <gwc-slider label="볼륨" unit="dB" to-fixed=1 min=0 max=100 value=45></gwc-slider>
                </div>
            </part>
            <part title="설정" icon="./images/icon2.png">
                <div class="part3">
                    <gwc-radiogroup>
                        <items>
                            <item>CSS</item>
                            <item>JS</item>
                            <item>HTML</item>
                        </items>
                    </gwc-radiogroup>
                    <div>
                        <gwc-label content="진행율" outline-type="concave"></gwc-label>
                        <gwc-progress auto="true"></gwc-progress>
                    </div>
                </div>
            </part>                                        
        </parts>
    </gwc-accordion>

    <gwc-button id="button" title="2번째 열기/닫기"></gwc-button>
</div>

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

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

.part1 {
    display: flex;
    width: 100%;
    height: 8em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
}

.part2 {
    display: flex;
    width: 100%;
    height: 13em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1em;
}

.part2-sub {
    display: flex;
    width: 100%;
    height: 7em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    _gap: 1em;
}

.part3 {
    display: flex;
    width: 100%;
    height: 8em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    _gap: 1em;
}

.vcenter {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1em;
}

#accordion {
    width: 20em;
}

gwc-vscrollview {
    width: 90%;
    height: 90%;
}

p:nth-child(2n) {
    color: greenyellow;
    font-size: 0.9em;
}

p:nth-child(2n+1) {
    color: yellow;
}

gwc-progress {
    width: 9em
}

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

window.onload = () => {
    setInterval(() => {
        const count = accordion.getCount(2);
        accordion.setCount(2, count+1);
    }, 100);

    button.onclick = () => {
        if(accordion.isClosed(2)) accordion.open(2);
        else accordion.close(2);
    }

    accordion.addEventListener("change", (event) => {
        label.content = `${event.detail.partIndex}번째가 
            ${event.detail.state === "opened" ? "열렸습니다." : "닫혔습니다."}`;
    });

    GeoServiceWebComponentManager.instance.update();
};

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