[Перевод] Собственное контекстное меню с использованием JavaScript
Веб-приложения на сегодняшний день становятся новым шагом на пути развития веба. Это уже далеко не обычные информационные сайты. В качестве примера передовых веб-приложений можно привести Gmail и Dropbox. С ростом функциональности, доступности и полезности веб-приложений растет и потребность в увеличении эффективности их использования. В данном руководстве будет рассмотрено создание такой полезной штуки, как собственное контекстное меню, и в частности: Разберемся, что такое контекстное меню и зачем оно нужно. Реализуем свое контекстное меню, используя JS и CSS. Затронем недостатки и ограничения используемого подхода, чтобы знать, какие проблемы могут нас предостерегать при выкатывании всего этого в продакшн. Что есть контекстное меню? Если верить Википедии, контекстное меню — меню, появляющееся при взаимодействии пользователя с графическим интерфейсом (при нажатии правой кнопки мыши). Контекстное меню содержит ограниченный набор возможных действий, который обычно связаны с выбранным объектом.На вашем компьютере клик правой кнопкой мыши на рабочем столе вызовет контекстное меню операционной системы. Отсюда вы, вероятно, можете создать новую папку, получить какую-то информацию и сделать что-нибудь еще. Контекстное меню в браузере позволяет, например, получить информацию о странице, посмотреть ее исходники, сохранить изображение, открыть ссылку в новой вкладке, поработать с буфером обмена и всякое такое. Причем набор доступных действий зависит от того, куда именно вы кликнули, то есть от контекста. Это стандартное поведение, закладываемое разработчиками браузера [И расширений к нему].
Веб-приложения постепенно начинают заменять стандартные контекстные меню своими собственными. Отличными примерами являются все те же Gmail и Dropbox. Вопрос лишь в том, как сделать свое контекстное меню? В браузере при клике правой кнопкой мыши срабатывает событие contextmenu. Нам придется отменить поведение по умолчанию и сделать так, чтобы вместо стандартного меню выводилось наше собственное. Это не так уж сложно, но разбираться будем пошагово, так что выйдет довольно объемно. Для начала создадим базовую структуру приложения, чтоб разрабатываемый пример не был совсем уж оторван от реальности.
Список задач Представим, что мы создаем приложение, позволяющее вести список задач. Я понимаю, вы уже наверняка неимоверно устали от всех этих списков задач, но пусть будет. Страница приложения содержит список незавершенных задач. Для каждой задачи доступен типичный набор действий CRUD: получить информацию о задаче, добавить новую, редактировать, удалить.Пример результата есть на CodePen. Можете заглянуть туда сразу, если лень читать или хотите убедиться, что действительно заинтересованы в дальнейшем чтении. Ну, а пока приступим к пошаговой разработке задуманного. Я буду использовать некоторые современные фишки CSS и создам простейший список задач на data-атрибутах. Также воспользуюсь сбросом стилей от Эрика Мейера и сброшу свойство box-sizing для всех элементов в border-box:
*, *:: before, *:: after { box-sizing: border-box; } Я не буду использовать префиксы в CSS, но в демо на CodePen включен автопрефиксер.Создание базовой структуры Откроем наш HTML-документ, накидаем шапку, контентную часть с некотормым списком задач и подвал. Я также подтяну Font Awesome и шрифт Roboto, чтобы сделать оформление немного лучше. Каждая задача должна содержать атрибут data-id, который в реальности брался бы из БД. Также каждая задача будет содержать список действий. Вот важные части разметки:
-
Go To Grocery
var menu = document.querySelector (»#context-menu»); var menuState = 0; var active = «context-menu--active»; Едем дальше. Пересмотрим функцию contextMenuListener и добавим toggleMenuOn, отображающую меню: function contextMenuListener (el) { el.addEventListener («contextmenu», function (e) { e.preventDefault (); toggleMenuOn (); }); } function toggleMenuOn () { if (menuState!== 1) { menuState = 1; menu.classList.add (active); } } На данный момент правой кнопкой мыши уже можно вызвать наше контекстное меню. Но нельзя сказать, что оно работает правильно. Во-первых, оно находится совсем не там, где хотелось бы. Для устранения проблемы понадобится немного математики. Во-вторых, закрыть это меню пока невозможно. С учетом того, как работают обычные контекстные меню, хотелось бы, чтоб наша его реализация закрывалась при клике не меню и при нажатии Escape. Помимо этого при правом клике вне нашего меню оно должно закрыться, а вместо него требуется открытие меню по умолчанию. Давайте попробуем все это решить.Рефакторинг нашего кода Очевидно, что за все действия будут отвечать три основных события: contextmenu — Проверка состояния и раскрытие контекстного меню. click — Скрытие меню. keyup — Обработка нажатий клавиш. В данном руководстве интересна только ESC. Нам также потребуется несколько вспомогательных функций, так что добавим в код раздел для них. Таким образом имеем: Много кода (function () { «use strict»; /////////////////////////////////////// /////////////////////////////////////// // // H E L P E R F U N C T I O N S // ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ // /////////////////////////////////////// /////////////////////////////////////// /** * Some helper functions here. * Здесь сами вспомогательные функции. */ /////////////////////////////////////// /////////////////////////////////////// // // C O R E F U N C T I O N S // ФУНКЦИИ ЯДРА // /////////////////////////////////////// /////////////////////////////////////// /** * Variables. * Переменные. */ var taskItemClassName = 'task'; var menu = document.querySelector (»#context-menu»); var menuState = 0; var activeClassName = «context-menu--active»; /** * Initialise our application’s code. * Инициализация кода нашего приложения. */ function init () { contextListener (); clickListener (); keyupListener (); } /** * Listens for contextmenu events. * Обработка события contextmenu. */ function contextListener () { } /** * Listens for click events. * Обработка события click. */ function clickListener () { } /** * Listens for keyup events. * Обработка события keyup. */ function keyupListener () { } /** * Turns the custom context menu on. * Отображение контекстного меню. */ function toggleMenuOn () { if (menuState!== 1) { menuState = 1; menu.classList.add (activeClassName); } } /** * Run the app. * Запуск приложения. */ init (); })(); Теперь мы не перебираем элементы списка. Вместо этого будем обрабатывать событие contextmenu по всему документу, проверяя, относится ли оно к одной из задач. Поэтому введена переменная taskItemClassName. Делать это мы будем, используя вспомогательную функцию clickInsideElement, принимающую два параметра: Само проверяемое событие. Имя класса для сравнения. Если событие произошло внутри элемента, имеющего указанный класс, или родитель этого элемента имеет такой класс, то нужно вернуть этот элемент. Вот и первая вспомогательная функция: function clickInsideElement (e, className) { var el = e.srcElement || e.target; if (el.classList.contains (className)) { return el; } else { while (el = el.parentNode) { if (el.classList && el.classList.contains (className)) { return el; } } } return false; } Вернемся и отредактируем contextListener: function contextListener () { document.addEventListener («contextmenu», function (e) { if (clickInsideElement (e, taskItemClassName)) { e.preventDefault (); toggleMenuOn (); } }); } Имея вспомогательную функцию, делающую за нас часть грязной работы, и отлавливая событие contextmenu на всем документе, мы можем теперь закрывать меню при клике вне его. Для этого добавим функцию toggleMenuOff и отредактируем contextListener: function contextListener () { document.addEventListener («contextmenu», function (e) { if (clickInsideElement (e, taskItemClassName)) { e.preventDefault (); toggleMenuOn (); } else { toggleMenuOff (); } }); } function toggleMenuOff () { if (menuState!== 0) { menuState = 0; menu.classList.remove (activeClassName); } } Теперь нажмите правой кнопкой по элементу списка. А после — где-нибудь в другом месте документа. Вуаля! Наше меню закрылось и открылось стандартное. Затем сделаем нечто похожее самое для события click, чтобы не от одной правой кнопки оно закрывалось: function clickListener () { document.addEventListener («click», function (e) { var button = e.which || e.button; if (button === 1) { toggleMenuOff (); } }); } Этот кусок кода несколько отличается от предыдущего, потому что Firefox. После того, как правая кнопка мыши отжата, в Firefox срабатывает событие click, так что здесь нам приходится дополнительно убеждаться, что произошел действительно клик левой кнопкой. Теперь меню не моргает при правом клике. Давайте добавим похожий обработчик и на нажатие клавиши ESC: function keyupListener () { window.onkeyup = function (e) { if (e.keyCode === 27) { toggleMenuOff (); } } } Мы получили меню, которое открывается и закрывается как задумано, взаимодействующее с пользователем естественным образом. Давайте наконец отпозиционируем меню и попробуем обрабатывать события внутри него.Позиционирование нашего контекстного меню С учетом текущих HTML и CSS, наше меню отображается в нижней части экрана. Но нам-то хотелось бы, чтоб оно появлялось там, где произошел клик. Давайте исправим сие досадное упущение. Во-первых, добавим еще одну вспомогательную функцию, получающую точные координаты клика. Назовем ее getPosition и попробуем заставить обрабатывать разные причуды браузеров: function getPosition (e) { var posx = 0; var posy = 0; if (! e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return { x: posx, y: posy } } Наш первый шаг в позиционировании меню — подготовка трех переменных. Добавим их в соответствующий блок кода: var menuPosition; var menuPositionX; var menuPositionY; Создадим функцию positionMenu, принимающую единственный аргумент — событие. Пока что пусть она выводит координаты меню в консоль: function positionMenu (e) { menuPosition = getPosition (e); console.log (menuPosition); } Отредактируем contextListener, чтобы начать процесс позиционирования: function contextListener () { document.addEventListener («contextmenu», function (e) { if (clickInsideElement (e, taskItemClassName)) { e.preventDefault (); toggleMenuOn (); positionMenu (e); } else { toggleMenuOff (); } }); } Снова повтыкайте в контекстное меню и загляните в консоль. Убедитесь, что позиция действительно доступна и логируется. Мы можем использовать встроенные стили для задания свойств top и left посредством JS. Вот и новая версия positionMenu: function positionMenu (e) { menuPosition = getPosition (e); menuPositionX = menuPosition.x + «px»; menuPositionY = menuPosition.y + «px»; menu.style.left = menuPositionX; menu.style.top = menuPositionY; } Покликайте теперь везде. Меню появляется везде! Это потрясающе, но есть пара моментов, которые надо бы решить: Что будет, если пользователь кликнет близко к правому краю окна? Контекстное меню выйдет за его пределы. Что делать, если пользователя меняет размеры окна при открытом контекстном меню? Возникает та же проблема. Dropbox решает эту проблему скрытием переполнения по оси x (x-overflow: hidden). Давайте решать первую проблему. Воспользуемся JS, чтобы определить ширину и высоту нашего меню, и проверим, что меню полностью влезает. В противном случае немного сместим его. Это потребует небольшого количества математики и размышлений, но мы сделаем это просто и по шагам. Для начала проверим ширину и высоту окна. Затем найдем ширину и высоту меню. А после убедимся, что разница между координатами клика и шириной окна с отступом больше, чем ширина меню. И то же самое сделаем для высоты. Если меню не умещается на экране, скорректируем его координаты. Начнем с добавления двух переменных: var menuWidth; var menuHeight; Как вы помните, по умолчанию наше меню скрыто, так что нельзя просто взять и посчитать его размеры. В нашем случае меню статическое, но при реальном применении его содержимое может меняться в зависимости от контекста, так что рассчитывать ширину и высоту лучше в момент открытия. Получим нужные величины внутри функции positionMenu: menuWidth = menu.offsetWidth; menuHeight = menu.offsetHeight; Введем еще две переменных, но на этот раз для размеров окна: var windowWidth; var windowHeight; Посчитаем их значения похожим образом: windowWidth = window.innerWidth; windowHeight = window.innerHeight; В конечном счете давайте предположим, что хотим показывать меню не ближе, чем в 4 пикселях от края окна. Можно сравнить значения, как я говорил выше, и скорректировать позицию как-то так: var clickCoords; var clickCoordsX; var clickCoordsY; // updated positionMenu function function positionMenu (e) { clickCoords = getPosition (e); clickCoordsX = clickCoords.x; clickCoordsY = clickCoords.y; menuWidth = menu.offsetWidth + 4; menuHeight = menu.offsetHeight + 4; windowWidth = window.innerWidth; windowHeight = window.innerHeight; if ((windowWidth — clickCoordsX) < menuWidth ) { menu.style.left = windowWidth - menuWidth + "px"; } else { menu.style.left = clickCoordsX + "px"; } if ( (windowHeight - clickCoordsY) < menuHeight ) { menu.style.top = windowHeight - menuHeight + "px"; } else { menu.style.top = clickCoordsY + "px"; } } Сейчас наше меню ведет себя совсем хорошо. Осталось что-то сделать с ресайзом окна. Я уже говорил, как поступает Dropbox, но вместо этого мы будем закрывать контекстное меню. [Такое поведение куда ближе к стандартному] Добавим в функцию init следующую строку: resizeListener(); И напишем саму функцию: function resizeListener() { window.onresize = function(e) { toggleMenuOff(); }; } Великолепно.Цепляем события к пунктам контекстного меню Если ваше приложение сложнее данного примера, и у вас планируется динамическое содержимое контекстного меню, придется подробнее вникнуть в происходящее далее, чтобы самому додумать недостающие детали. В нашем приложении все проще, и есть всего одно меню с постоянным набором действий. Таким образом, можно быстро проверить, какой именно элемент был выбран, и обработать этот выбор. В нашем примере просто сохраним выбранный элемент в переменную и запишем в консоль его data-id и выбранное действие. Для этого отредактируем разметку меню: Далее давайте закэшируем все нужные объекты: var contextMenuClassName = «context-menu»; var contextMenuItemClassName = «context-menu__item»; var contextMenuLinkClassName = «context-menu__link»; var contextMenuActive = «context-menu--active»; var taskItemClassName = «task»; var taskItemInContext; var clickCoords; var clickCoordsX; var clickCoordsY; var menu = document.querySelector (»#context-menu»); var menuItems = menu.querySelectorAll (».context-menu__item»); var menuState = 0; var menuWidth; var menuHeight; var menuPosition; var menuPositionX; var menuPositionY; var windowWidth; var windowHeight; Появилась переменная taskItemInContext, которой присваивается значение при правом клике по элементу списка. Она нам потребуется для логирования ID элементов. Также появились новые имена классов. Теперь пройдемся по функциональности.Функция инициализации остается такой же. Первое изменение затрагивает contextListener, ведь мы хотим сохранять в taskItemInContext элемент, на который кликнул пользователь, а функция clickInsideElement как раз его и возвращает:
function contextListener () { document.addEventListener («contextmenu», function (e) { taskItemInContext = clickInsideElement (e, taskItemClassName); if (taskItemInContext) { e.preventDefault (); toggleMenuOn (); positionMenu (e); } else { taskItemInContext = null; toggleMenuOff (); } }); } Мы сбрасываем ее в null, если правый клик произошел не по элементу списка. Ну и возьмемся за clickListener. Как я упоминал ранее, для простоты мы просто будем выводить информацию в консоль. Сейчас при отлавливании события click производится несколько проверок и меню закрывается. Внесем коррективы и начнем обрабатывать клик внутри контекстного меню, выполняя некоторое действие и лишь после этого закрывая меню: function clickListener () { document.addEventListener («click», function (e) { var clickeElIsLink = clickInsideElement (e, contextMenuLinkClassName); if (clickeElIsLink) { e.preventDefault (); menuItemListener (clickeElIsLink); } else { var button = e.which || e.button; if (button === 1) { toggleMenuOff (); } } }); } Вы могли заметить, что вызывается функция menuItemListener. Ее мы определим чуть позже. Функции keyupListener, resizeListener и positionMenu оставляем без изменений. Функции toggleMenuOn и toggleMenuOff отредактируем незначительно, изменив имена переменных для лучшей читаемости кода: function toggleMenuOn () { if (menuState!== 1) { menuState = 1; menu.classList.add (contextMenuActive); } } function toggleMenuOff () { if (menuState!== 0) { menuState = 0; menu.classList.remove (contextMenuActive); } } Наконец реализуем menuItemListener: function menuItemListener (link) { console.log («Task ID — » + taskItemInContext.getAttribute («data-id») + », Task action — » + link.getAttribute («data-action»)); toggleMenuOff (); } На этом разработка функциональности заканчивается.Некоторые замечания Прежде чем закончить, давайте учтем некоторые моменты: На протяжении всей статьи я упоминал правый клик как событие для открытия контекстного меню. Не все являются правшами и не у всех выставлены стандартные настройки мыши. Но вне зависимости от этого, событие contextmenu действует именно в соответствии с настройками мыши, а не привязано жестко к именно правой кнопке. Еще один важный момент заключается в том, что мы рассмотрели только полноценные настольные веб-приложения с мышью в качестве устройства ввода. Пользователи могут пользоваться клавиатурой или мобильными устройствами, поэтому не забудьте предусмотреть альтернативные способы взаимодействия для сохранения дружественного интерфейса. Большой вопрос Я выделил эту проблему в отдельный пункт, потому что это действительно важно после всего, что мы проделали. Задайтесь вопросом: действительно ли вам нужно собственное контекстное меню? Такие штуки — это круто, но прежде чем их использовать, вы должны убедиться, что это действительно полезно в вашем случае. Обычно пользователи ожидают привычного поведения приложения. Например, после правого клика по фотографии они ожидают получения возможности сохранить ее, скопировать ссылку и т. д. Отсутствие нужных пунктов в кастомном меню может их огорчить.Совместимость с браузерами В руководстве использовались некоторые современные штуки из CSS и JS, а именно display: flex в стилях и classList для переключения классов в JS. Также стоит упомянуть, что используются теги HTML5. Если требуется обратная совместимость с более старыми браузерами, вам придется реализовать ее самостоятельно. Примеры из данного руководства протестированы в следующих браузерах: Chrome 39 Safari 7 Firefox 33 Заключение и демо Если вы тщательно все обдумали и уверены, что такая функциональность нужна вашему приложению, вы можете использовать разработанное меню. Конечно, оно может потребовать каких-либо изменений, но данное руководство подробно описывает процесс разработки, так что реализовывать свои поправки должно быть не так сложно.Кодовая база этого руководства залита на GitHub и будет поддерживаться и, возможно, обновляться в течение долгого времени. А полное рабочее демо можно потыкать на CodePen.
От переводчика Перевод местами достаточно вольный, но не в ущерб смыслу или содержанию. Все, что не относится напрямую к оригиналу, вынесено в примечания.С предложениями, пожеланиями и замечаниями, как обычно, в ЛС.
