Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Как написать контекстное меню выделенного текста

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Oleg Kiselevich (you can also view the original English article)

В этом уроке мы узнаем, как создать так называемое «контекстное меню обмена». Этот интерфейс предполагает вывод меню, которое позволяет читателям поделиться страницей, цитируя выделенный текст. Вы сможете найти аналогичный интерфейс на нескольких популярных сайтах, таких как Medium.

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

Поехали!

Анализ интерфейса Medium

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

Highlighted word with the sharing button in Mediumcom
Контекстное меню обмена пользовательского интерфейса Medium

Если взглянуть, что находится под капотом через инструменты разработчика браузера Chrome, мы заметим, что положение меню определяется через свойства top и left встроенного стиля элемента. Мы можем заметить, что кнопка "поделиться" также имеет дополнительный класс-модификатор highlightMenu--active, который делает его видимым.

Примечание: Если вы еще не знакомы с терминами модификатор, блок и элемент, вам стоит посмотреть вот этот более ранний урок: введение в методологию БЭМ.

Стили, которые определяют положение контекстного меню в Medium

На вкладке Стили мы видим, что начальное положение устанавливается с помощью CSS через абсолютное позиционирование (absolute), значение z-index для поднятия выше других элементов на странице, свойство top и свойство visibility для вывода кнопок меню за пределы видимой зоны.

Таким образом, нам нужно будет:

  1. Получить длину выделенной области, чтобы мы могли определить центральную точку выделения.
  2. Создать модификатор, который будет отображать элемент.
  3. Установить позицию меню через свойства top и left, добавленные с помощью встроенных стилей.

Создаем контекстное меню

В этом примере, мы будем использовать кнопки Facebook и Twitter в нашем меню. Мы используем значки Facebook и Twitter в формате SVG, завернутые в тег button и несколько элементов div. Кроме того, как вы можете видеть из следующего фрагмента, мы также добавили элемент span для отображения треугольника в нижней части меню.

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

Inline sharing menu size inspected through Chrome DevTools

Стили, которые определяют начальное положение и видимость.

И наконец, класс, который мы добавляем, чтобы сделать кнопки меню видимыми.

Делаем контекстное меню функциональным

На данный момент наше контекстное меню не должно быть видимым на странице. Кроме того, когда мы нажмем кнопку Twitter или Facebook, не видно, чтобы появилось диалоговое окно "поделиться". В этом разделе, мы будем писать JavaScript код, чтобы сделать наши кнопки функциональными. И мы начинаем с функции getHighlight().

Эта функция служит для:

  • Получения выделенной области с помощью встроенной функции JavaScript getSelection().
  • Возвращения объекта, содержащего выделенный текст, элемент, в котором находится текст и объект прямоугольника выбранной области, который содержит ее размер, а также ее позицию — top, bottom, left и right — в пределах страницы.

Наша следующая функция называется showMenu(). Как и предполагает название, эта функция будет выводить меню.

В частности код в этой функции выполняет следующие действия:

  1. Получает объект из функции getHighlighted().
  2. Скрывает меню и возвращает его в исходное положение, когда выделенная область является пустой и не содержит текста.
  3. Предотвращает появление кнопок, если выделенный текст не находится в пределах абзаца.
  4. Наконец, задает позицию через значения top и left  и добавляет класс sharing--show, чтобы сделать видимыми кнопки обмена. Я также добавил несколько строк комментариев, описывающих, откуда берутся некоторые из определяемых значений.

Мы будем считать, что большинство пользователей используют мышь, чтобы выделять содержимое в Интернете, таким образом мы можем привязать эту функцию к событию mouseup. Мобильные устройства обычно имеют свои собственные контекстные меню на выделение текста, поэтому в данном уроке мы сделаем упор на веб-сайтах.

safari ios
Выделение текста в Safari iOS

Мы устанавливаем задержку исполнения на 100ms с помощью функции setTimeout(), чтобы быть уверенным в точном завершении выделения.

Наша последняя функция, openShareWindow(), отвечает за запуск окна обмена при нажатии кнопки в меню. В этом уроке мы будем главным образом использовать это окно для того, чтобы поделиться в Twitter, поскольку Facebook имеет свой собственный JavaScript SDK.

Клик...Клик...

Далее мы привязываем событие click кнопок обмена к функции, которая запускает окно "поделиться".

Для кнопки Facebook мы используем Facebook JavaScript SDK. SDK позволяет нам передать текст для отображения в окне "поделиться" через параметр quote.

Twitter не предоставляет такой же JavaScript SDK. Так что, мы используем нашу функцию, openShareWindow() и передаем URL-адрес, отформатированный в соответствии с их правилами, а также передаем размер окна.

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

Подводя итоги

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

Дополнительные ресурсы

Существует несколько библиотек API JavaScript, которые мы использовали в работе нашего контекстного меню. Некоторые из них были упомянуты в предыдущих уроках на Envato Tuts+, в то время как другие могут быть совершенно новым для вас. Так что дополню этот урок некоторыми ссылками.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.