Svelte를 사용한 애플리케이션 메뉴 및 컨텍스트(오른쪽 클릭) 메뉴

소개

이것은 dev.to의 첫 번째 게시물입니다.

일주일 전에 CSS3의 Grid와 Flexbox 시스템에 대해 배웠습니다. CSS에 대해 처음 배운 것은 13년 전이었고 그 이후로는 배울 것이 별로 없었습니다. 프론트엔드는 내 것이 아니며 백엔드에서 많은 시간을 보냈습니다.

사실 저는 토목 기사이기 때문에 지난 10년 동안 웹 개발이 제 주요 업무가 아니었습니다.

작년에 저는 Svelte가 프런트 엔드를 빠르게 개발하는 데 도움이 된다는 사실을 발견했습니다. 시간 제약과 복잡성으로 인해 React 또는 Vue를 배우는 데 어려움을 겪었기 때문에 이것은 중요한 발견이었습니다. 반면에 Svelte와 Sveltekit은 내 웹 개발 프로젝트에 잘 통합되었습니다.

이 웹 개발 프로젝트에서는 데스크톱에서 일반적으로 볼 수 있는 애플리케이션 메뉴와 오른쪽 클릭 컨텍스트 메뉴를 정말 만들고 싶습니다. 저는 디자인에 소질이 없어서 CSS나 CSS3, 특히 그리드 시스템 및/또는 플랙스박스에 대해 다시 배워야 합니다.

이 애플리케이션 메뉴와 컨텍스트 메뉴를 만들려면 flexbox가 최고라고 생각합니다. 그러나 나는 당신이 나보다 더 잘 알고 있다고 확신하며 같은 것을 달성하는 다른 방법을 알고 있다고 믿습니다.

상황에 맞는 메뉴

Svelte REPL here에서 실제 상황에 맞는 메뉴와 해당 소스 코드를 볼 수 있습니다.



Svelte REPL에는 동일한 기능을 가진 여러 프로젝트가 있습니다. 그 중 하나는 this link에 있습니다.
그것은 멋지고 내 자신의 버전을 만드는 영감 중 하나였습니다. 제 경우에는 메뉴에 많은 항목이 필요하지 않기 때문에 더 간단한 버전을 원합니다.

까다로운 부분 중 하나는 사용자가 브라우저의 가장자리, 특히 브라우저의 오른쪽이나 하단을 클릭할 때 컨텍스트 메뉴를 제대로 표시하는 것입니다. 표시된 컨텍스트 메뉴의 일부가 브라우저 외부에 표시되면 브라우저의 높이나 너비가 추가된 것처럼 컨텍스트 메뉴의 위치를 ​​재정렬해야 합니다. 이 경우 메뉴를 원래 위치에서 왼쪽이나 위쪽에 배치하려면 일부 수학을 통합해야 합니다.

다른 점은 취향에 맞게 설정된 아이콘을 변경할 수 있다는 것입니다. 이 샘플에서는 CDN의 Font Awesome을 사용합니다.

일단 자신만의 버전을 만들면 그리 어렵지 않으니 코드를 살펴보세요.

애플리케이션 메뉴

Svelte REPL here에서 실제 상황에 맞는 메뉴와 해당 소스 코드를 볼 수 있습니다.



응용 프로그램 메뉴는 데스크톱 응용 프로그램에 있는 것입니다. 그러나 많은 디자이너가 웹에서 사용하지 않습니다. 일반적으로 이 스타일의 메뉴는 단일 웹 페이지에 많은 작업이 필요한 웹 응용 프로그램에 사용됩니다. Google 시트 및 Google 문서는 응용 프로그램에서 활용하는 예입니다.

내 버전에서는 사용자가 메뉴를 클릭할 때 기능을 들을 수 있습니다. 안타깝게도 단축키(예: Ctrl +C)는 데모일 뿐이며 의도한 대로 작동하지 않습니다. 이에 대한 구현을 직접 가져오십시오.

이 응용 프로그램 메뉴의 중요한 부분은 표시되고 사라지는 메뉴 상태를 처리하는 방법입니다. 메뉴는 사용자가 최상위 메뉴를 클릭할 때 표시되어야 하지만 사용자가 메뉴 외부를 클릭하거나 사용자가 최상위 메뉴를 다시 한 번 클릭하면 사라집니다. 이것은 저에게 새로운 일이기 때문에 어렵다고 생각합니다.

lihautan이 발견한 this article about clickOutside은 Svelte의 작업에 대해 자세히 알아보는 데 도움이 됩니다. 당신은 할 수 있습니다.

응용 프로그램 메뉴가 예상대로 작동하려면 두 가지 조건이 충족되어야 합니다.

응용 프로그램 메뉴(노드 ul)에 클릭 이벤트(대상)가 없으면 즉, 메뉴가 클릭되지 않습니다

.

최상위 수준(버튼)에 클릭 이벤트(대상)가 포함되지 않은 경우, 즉 최상위 수준 메뉴가 클릭되지 않습니다.

function clickOutside(node, params){
        function onClick(event){
            if (!node.contains(event.target)
                && !params.button.contains(event.target)){
                    params.f()
            } else {
                console.log("")
            }
        }

        window.addEventListener('click', onClick)
        ...
}  

<button on:click={() => menuItem.visibleState = true}
bind:this={menuItem.buttonName}>{menuItem.displayText}
</button>
{#if menuItem.visibleState}
<ul class="secondmenu" use:clickOutside={
   {
      f: () => menuItem.visibleState = false,
      button: menuItem.buttonName
   }
}>
....
{/if}

사용자가 클릭하여 메뉴를 열 때 창에 이벤트 리스너를 등록해야 합니다. clickOutside는 이 애플리케이션 메뉴에 대한 작업이며 사용자가 메뉴 외부를 클릭하면 발생하는 작업을 처리합니다.

결론

이 게시물을 즐기시기 바랍니다. 마음에 더 나은 것이 있으면 의견을 보내주십시오.