Меню приложения и контекстное (правый клик) меню с помощью Svelte


Введение

Это мой первый пост на dev.to.

Неделю назад я узнал о системе Grid и Flexbox в CSS3. Впервые я узнал о CSS 13 лет назад, и после этого я не так многому научился. Фронтенд — не моя стихия, и я много времени проводил в бэкенде.

Вообще-то, я инженер-строитель, поэтому веб-разработка не была моей основной работой в течение последних 10 лет.

В прошлом году я обнаружил, что Svelte может помочь вам быстро разработать frontend. Это было большим открытием, поскольку раньше я с трудом осваивал React или Vue из-за нехватки времени и сложности. С другой стороны, Svelte и Sveltekit отлично интегрировались в мой проект по веб-разработке.

В этом проекте веб-разработки я очень хочу создать меню приложения и контекстное меню правой кнопки мыши, как мы обычно видим на рабочем столе. Я не очень хорош в дизайне, поэтому мне нужно заново изучить CSS или CSS3, особенно систему сетки и/или flexbox.

Для создания такого меню приложения и контекстного меню, я считаю, лучше всего подходит flexbox. Но я уверен, что вы знаете лучше меня, и я думаю, что вы знаете другие способы добиться того же самого.

Контекстное меню

Вы можете увидеть фактическое контекстное меню и его исходный код в Svelte REPL здесь.

В Svelte REPL есть несколько проектов с аналогичной функциональностью. Один из них находится по этой ссылке.
Он хорош и послужил одним из вдохновений для создания моей собственной версии. Я хочу более простую версию, так как в моем случае мне не нужно много пунктов в меню.

Одна из сложных задач — правильно отображать контекстное меню, когда пользователь нажимает на край браузера, особенно на правую или нижнюю сторону браузера. Если часть отображаемого контекстного меню будет показана за пределами браузера, как если бы произошло увеличение высоты или ширины браузера, то необходимо изменить положение контекстного меню. В этом случае необходимо применить некоторые математические вычисления, чтобы расположить меню слева или сверху от исходного положения.

Кроме того, вы можете изменить набор иконок по своему вкусу. В данном примере я использую Font Awesome из CDN.

Пожалуйста, изучите код, так как это не очень сложно, когда вы сможете создать свою собственную версию.

Меню приложения

Вы можете увидеть настоящее контекстное меню и его исходный код в Svelte REPL здесь.

Меню приложения — это то, что есть в настольных приложениях. Но не так много дизайнеров используют их в Интернете. Обычно этот стиль меню используется для веб-приложений, которым требуется множество действий на одной веб-странице. Google Sheet и Google Docs являются примерами, использующими их в своих приложениях.

В моей собственной версии вы можете прослушивать функцию, когда пользователь нажимает на меню. К сожалению, ярлык (например, Ctrl +C) является лишь демонстрацией и не будет работать так, как задумано. Пожалуйста, предложите свою собственную реализацию этого.

Важной частью этого меню приложения является то, как обрабатывать состояние меню, чтобы оно появлялось и исчезало. Меню должно отображаться, когда пользователь нажимает на меню верхнего уровня, но должно исчезать, когда пользователь нажимает за пределами меню ИЛИ если пользователь снова нажимает на меню верхнего уровня. Я считаю это сложной задачей, так как это новая вещь для меня.

Я обнаружил эту статью о clickOutside от lihautan, которая помогла мне узнать больше о действиях в Svelte. Вы можете посмотреть его объяснение на Youtube.

Для того чтобы меню приложения работало так, как ожидается, необходимо, чтобы 2 условия были верны:

  • если меню приложения (узел 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 будет действием для этого меню приложения и будет обрабатывать то, что произойдет, если пользователь нажмет за пределами меню.

Заключение

Надеюсь, вам понравилась эта статья, и, пожалуйста, оставляйте комментарии, если у вас есть что-то лучшее.

Оцените статью
devanswers.ru
Добавить комментарий