Собственное контекстное меню с использованием JavaScript / forpes.ru

Главная
Собственное контекстное меню с использованием JavaScript

Собственное контекстное меню с использованием JavaScript +7

18.05.2015 07:07

gwer 12 10406 Источник

Веб-приложения на сегодняшний день становятся новым шагом на пути развития веба. Это уже далеко не обычные информационные сайты. В качестве примера передовых веб-приложений можно привести 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, который в реальности брался бы из БД. Также каждая задача будет содержать список действий. Вот важные части разметки:

<body>
  <ul class="tasks">
    <li class="task" data-id="3">
      <div class="task__content">
        Go To Grocery
      </div>
      <div class="task__actions">
        <i class="fa fa-eye"></i>
        <i class="fa fa-edit"></i>
        <i class="fa fa-times"></i>
      </div>
    </li>
    <!-- more task items here... -->
  </ul>
  <script src="main.js"></script>
</body>

Если вы используете CodePen, можете в настройках включить автопрефиксер и подключение CSS-сброса. В противном случае придется делать все руками, если еще не автоматизировали этот процесс. Не забывайте, что наша цель — создание контекстного меню, так что обработка действий не будет реализована. А теперь давайте добавим еще немного CSS:

/* tasks */
 
.tasks {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
.task {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: solid 1px #dfdfdf;
}
 
.task:last-child {
  border-bottom: none;
}

Полный набор стилей (да и всего остального) представлен на CodePen. А здесь будут самые важные части кода, разметки и оформления. Но давайте уже наконец приблизимся к нашему контекстному меню.

Набросаем наше контекстное меню — разметка

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

Просмотр задачи.
Редактирование задачи.
Удаление задачи.

Накидаем разметку:

<nav class="context-menu">
  <ul class="context-menu__items">
    <li class="context-menu__item">
      <a href="#" class="context-menu__link">
        <i class="fa fa-eye"></i> View Task
      </a>
    </li>
    <li class="context-menu__item">
      <a href="#" class="context-menu__link">
        <i class="fa fa-edit"></i> Edit Task
      </a>
    </li>
    <li class="context-menu__item">
      <a href="#" class="context-menu__link">
        <i class="fa fa-times"></i> Delete Task
      </a>
    </li>
  </ul>
</nav>

Если не представляете, куда поместить эту разметку, помещайте перед закрывающим тегом body. Прежде чем перейти к CSS, уточним пару моментов:

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

А теперь стили.

Приводим наше меню в порядок — CSS

Уже была упомянута необходимость абсолютного позиционирования разрабатываемого меню. Кроме того, установим свойство z-index в 10. Не забывайте, что в вашем приложении может потребоваться другое значение. Это не все возможные стили, в демке наведены прочие красивости, но они уже зависят от ваших потребностей и не являются обязательными. Прежде чем переходить к JS, сделаем меню невидимым по умолчанию и добавим дополнительный класс для его отображения.


.context-menu {
  display: none;
  position: absolute;
  z-index: 10;
}
 
.context-menu--active {
  display: block;
}

Разворачиваем наше контекстное меню — JavaScript

Начнем с того, что посмотрим, как зарегистрировать событие contextmenu. Откроем самовыполняющуюся функцию и отловим событие на всем документе. Также будем логировать событие в консоль, чтобы получить какую-то информацию:

(function() {
 
  "use strict";
 
  document.addEventListener( "contextmenu", function(e) {
    console.log(e);
  });
 
})();

Если откроете консоль и кликнете где-нибудь правой кнопкой мыши, то увидите, что событие действительно там отображается. Тут много разной информации, которую мы можем использовать. Особенно нас интересуют координаты. Прежде чем отменять поведение по умолчанию, давайте учитывать, что делать это надо не на всем документе, а лишь для элементов списка задач. С учетом этого, потребуется выполнить следующие шаги:

Потребуется цикл по всем элементам списка задач и добавление обработчика события contextmenu к каждому из них.
Для каждого обработчика отменим стандартное поведение.
Будем логировать в консоли событие и элемент, к которому оно относится.

В общем, делаем что-то такое:

(function() {
 
  "use strict";
 
  var taskItems = document.querySelectorAll(".task");
 
  for ( var i = 0, len = taskItems.length; i < len; i++ ) {
    var taskItem = taskItems[i];
    contextMenuListener(taskItem);
  }
 
  function contextMenuListener(el) {
    el.addEventListener( "contextmenu", function(e) {
      console.log(e, el);
    });
  }
 
})();

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

Но для начала давайте добавим к меню ID, чтобы его проще было получать посредством JS. Также добавим переменную состояния меню menuState и и переменную с активным классом. Получились три переменных:

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 и выбранное действие. Для этого отредактируем разметку меню:

<nav id="context-menu" class="context-menu">
  <ul class="context-menu__items">
    <li class="context-menu__item">
      <a href="#" class="context-menu__link" data-action="View">
        <i class="fa fa-eye"></i> View Task
      </a>
    </li>
    <li class="context-menu__item">
      <a href="#" class="context-menu__link" data-action="Edit">
        <i class="fa fa-edit"></i> Edit Task
      </a>
    </li>
    <li class="context-menu__item">
      <a href="#" class="context-menu__link" data-action="Delete">
        <i class="fa fa-times"></i> Delete Task
      </a>
    </li>
  </ul>
</nav>

Далее давайте закэшируем все нужные объекты:

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.

От переводчика

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

Комментарии (12)

lolmaus
18.05.2015 10:12
#8421737
+1
> display: flex;

Завидую людям, которые могут отказаться от поддержки IE 10 и ниже.
1. gwer Автор
  18.05.2015 10:19
  #8421751
  В данном случае оно не имеет большого значения, ибо относится к элементу списка задач. А узкий круг поддерживаемых браузеров хоть и развязывает руки, но возможен разве что для каких-то внутренних продуктов.

lolmaus
18.05.2015 10:16
#8421745
А как насчет поддержки устройств, не имеющих мыши? Больше половины пользователей останутся за бортом?
1. gwer Автор
  18.05.2015 10:21
  #8421757
  Еще один важный момент заключается в том, что мы рассмотрели только полноценные настольные веб-приложения с мышью в качестве устройства ввода. Пользователи могут пользоваться клавиатурой или мобильными устройствами, поэтому не забудьте предусмотреть альтернативные способы взаимодействия для сохранения дружественного интерфейса.
  Либо вешать свои обработчики, либо дублировать действия в панели команд.
  1. lolmaus
    18.05.2015 10:29
    #8421769
    +2
    Либо использовать целостное решение, которое одинаково хорошо и очевидно работает с любым типом ввода. :/
    
    movl
    18.05.2015 17:57
    #8422617
    +1
    Не могу согласиться. Достаточно простой пример это продукты google, тот же Google Drive. На десктопе на интуитивном уровне нажимаю правой кнопкой, чтобы произвести некоторые действия над файлом (как впрочем и клацаю по горячим клавишам), это удобнее чем каждый раз искать иконки в тулбаре и достаточно очевидно. На телефоне же приходится удерживать тап, чтобы можно было выделить файл и произвести над ним манипуляции, для телефона это тоже достаточно очевидный подход. Как создать из этого целостное решение, которое будет одинаково удобно и для тач устройств, и для обычной мышки, мне не совсем понятно. Но я и не UX специалист, мне просто нравится пользоваться понятными и удобными интерфейсами, к которым давно привык.
    
    lolmaus
    18.05.2015 18:06
    #8422633
    Просто добавить треугольничек Ў в правой части каждого элемента.
    
    Такой подход гораздо очевиднее для неискушенных пользователей. Все-таки правый клик — крайне малораспространенный на вэб-сайтах прием. И на тач-устойствах треугольничек сразу сделает очевидным, что у этих элементов есть выпадающая менюшка и как до нее добраться — без необходимости ощупывать интерфейс на предмет скрытых возможностей как в pixel hunting-квесте.
    
    Заметьте, отказываться от правого клика никто не заставляет. А удержание пальцем останется полезно для выделения нескольких файлов.

Everlier
18.05.2015 19:08
#8422717
Немного не хватает клавиатурной навигации, 508 Section и, банально, модульности.
1. gwer Автор
  19.05.2015 05:21
  #8424219
  Полученный результат не является каким-то завершенным программным продуктом, который рекомендуется использовать именно в таком виде. Как заготовку — да. Тут автор, скорее, не выставляет на всеобщее обозрение очередную библиотеку, а демонстрирует итерационный процесс разработки и ход своих мыслей. Отсюда много текста и кода, устаревающего уже в процессе чтения.
  1. Everlier
    19.05.2015 18:20
    #8425597
    Отправленный комментарий не является каким-то завершенным продуктом сознания, который рекомендуется подвергать критическому анализу, как срез впечатлений — да. Тут автор, скорее, не выставляет на всеобщее обозрение очередной оценочное суждение, а демонстрирует что автор статьи в силу объективных для него обстоятельств пропустил три важных вещи для индустриальных приложений. Отсюда сухость комментария.

PerlPower
19.05.2015 02:22
#8424139
Веб-приложения на сегодняшний день становятся новым шагом на пути развития веба. Это уже далеко не обычные информационные сайты.

Я только-только освоился с созданием обычных информационных сайтов, а теперь вот вам пожалуйста — опять переучиваться.
1. gwer Автор
  19.05.2015 05:39
  #8424229
  Это IT, тут ничего не поделаешь. Но, если честно, лично я очень люблю обычные информационные сайты. Без хитровы… деланного оформления и всяких современных плюшек. Многим сайтам не хватает именно информации.
  
  Веб-приложения — это из другой оперы. Это сайты, призванные заменить обычные приложения. Это особая отрасль, которая пересекается с информационными сайтами разве что технологиями и средой запуска.

Собственное контекстное меню с использованием JavaScript +7

Что есть контекстное меню?

Список задач

Создание базовой структуры

Набросаем наше контекстное меню — разметка

Приводим наше меню в порядок — CSS

Разворачиваем наше контекстное меню — JavaScript

Рефакторинг нашего кода

Позиционирование нашего контекстного меню

Цепляем события к пунктам контекстного меню

Некоторые замечания

Большой вопрос

Совместимость с браузерами

Заключение и демо

От переводчика

Комментарии (12)

gwer Автор

gwer Автор

gwer Автор

gwer Автор