Как создать плавающее меню действий среднего размера
Популярность всплывающих меню растет, особенно после того, как Medium.com ввел эту функцию в моду. Вкратце, всплывающее меню действий появляется при выборе текста на веб-странице. Меню появляется рядом с выбором, показывая различные действия, которые позволяют вам быстро отформатировать, выделить или поделиться выделенным текстом.
В этом руководстве я покажу вам, как отобразить меню действий для выбранного фрагмента текста на веб-странице. Наше меню действий позволит пользователям твитнуть выбранный текст своим подписчикам.
Читайте также: добавьте контекстное меню на ваш сайт с HTML5
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
- Создайте HTML
HTML-код прост — нам нужен только текст, который может выбрать пользователь. Для демонстрации я буду использовать «Харт и Охотник» сказка на ночь как образец текста.
Харт и Охотник
Харт был когда-то …
…
- Создайте шаблон меню действий
Я добавляю HTML-код, принадлежащий меню действий, внутри элемент. Что бы ни было внутри тэг, он не будет отображаться браузерами, пока не будет добавлен в документ с использованием JavaScript.
Не оставляйте лишнее пространство внутри тег, поскольку это может нарушить макет меню действий после его вставки в документ. Если хотите, добавьте больше кнопок внутри #shareBox для большего количества опций.
3. Создайте CSS
CSS для встроенного контейнера #shareBox выглядит следующим образом:
#shareBox {
ширина: 30 пикселей;
высота: 30 пикселей;
положение: абсолютное;
}
Позиция: абсолютная; Правило позволит нам разместить меню, где мы хотим на странице.
Я также стилизовал кнопку действия внутри #shareBox с цветом фона и изображения, а в псевдоэлементе :: after я добавил треугольник для стрелки вниз.
#shareBox> button {
ширина: 100%;
высота: 100%;
цвет фона: # 292A2B;
граница: нет;
радиус границы: 2 пикселя;
контур: нет;
курсор: указатель;
background-image: url (‘share.png’);
повторение фона: без повтора;
background-position: center;
размер фона: 70%;
}
#shareBox> button :: after {
положение: абсолютное;
содержание: »;
граница сверху: 10px solid # 292A2B;
рамка слева: 10px прозрачный;
граница справа: 10px прозрачный;
слева: 5 пикселей;
верх: 30 пикселей;
}
- Добавьте обработчики событий с JS
Переходя к JavaScript, нам нужно добавить обработчики событий для событий mousedown и mouseup, чтобы зафиксировать начало и конец выделения текста.
Вы также можете провести исследование для других событий отбора, таких как selectstart и использовать их вместо событий мыши (что было бы идеально, но пока их поддержка браузера не очень хорошая).
Также добавьте ссылку на элемент, использующий querySelector () метод.
document.addEventListener (‘mousedown’, onMouseDown);
document.addEventListener (‘mouseup’, onMouseUp);
var temp = document.querySelector (‘# shareBoxTemplate’);
function onMouseDown () {
}
function onMouseUp () {
}
- Очистить предыдущие выборы
В случае mousedown мы выполним некоторую очистку, то есть очистим любой предыдущий выбор и соответствующее меню действий.
function onMouseDown () {
document.getSelection () removeAllRanges ().
var shareBox = document.querySelector (‘# shareBox’);
if (shareBox! == null)
shareBox.remove ();
}
GetSelection () метод возвращает выбор объект, представляющий диапазоны текста, выбранного в данный момент пользователем, и removeAllRange () Метод удаляет все диапазоны из одного и того же объекта Selection, тем самым удаляя все предыдущие выделения.
6. Откройте меню действий
Это происходит во время события mouseup, когда мы подтвердим выбор текста и предпримем дальнейшие действия.
function onMouseUp () {
var sel = document.getSelection (),
txt = sel.toString ();
if (txt! == «») {
var range = sel.getRangeAt (0);
if (range.startContainer.parentElement.parentElement.localName
=== «статья»
|| range.startContainer.parentElement.localName
=== «статья») {
// какой-то текст в статье был выбран
}
}
}
Получить выделенную текстовую строку, вызвав нанизывать() метод выбора объекта. Если выделенный текст не пустой, продолжайте и получите первый диапазон от объекта Selection.
Диапазон — это выбранная часть документа. Как правило, пользователи будут делать только один выбор, а не несколько (нажатием клавиши ctrl / cmd), поэтому просто получите первый объект диапазона (с индексом 0) из выбора, используя getRangeAt (0),
Как только вы получите диапазон, посмотрите, начался ли выбор с места, которое находится внутри статьи. startContainer Свойство диапазона возвращает узел DOM, с которого начался выбор.
Иногда (когда вы выбираете внутри абзаца), его значение является просто текстовым узлом, и в этом случае его родительский элемент будет
и родитель
элемент будет
<
article> (в примере кода в этом посте).
В других случаях при выборе нескольких абзацев startContainer будет
и его родительский узел будет
<
article>, Отсюда два сравнения во втором условии if в приведенном выше коде.
Когда условие if выполнено, самое время извлечь меню действий из шаблона и добавить его в документ. Поместите код ниже внутри второго оператора if.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
importNode () метод возвращает узлы из внешних документов (в нашем случае узлы из ). Когда он вызывается со вторым параметром (true), импортированный элемент / узел будет иметь свои дочерние элементы.
Вы можете вставить #shareBox в любое место в теле документа, я добавил его перед элементом шаблона.
7. Поместите меню действий
Мы хотим разместить меню действий прямо над и в середине выбранной области. Для этого получите значения прямоугольника выбранной области, используя getBoundingClientRect () метод, который возвращает размер и положение элемента.
Затем обновите верхнее и левое значения #shareBox на основе значений прямоугольника. В вычислениях новых верхних и левых значений я использовал шаблонные литералы ES6.
var rect = range.getBoundingClientRect ();
var shareBox = document.querySelector (‘# shareBox’);
shareBox.style.top = calc ($ {rect.top} px - 38px);
shareBox.style.left = calc ($ {rect.left} px + calc ($ {rect.width} px / 2) - 30px);
- Добавьте функциональность
Теперь, когда мы добавили меню действий рядом с выделенным текстом, пришло время сделать выделенный текст доступным для пунктов меню, чтобы мы могли выполнить с ним некоторые действия.
Присвойте выделенный текст пользовательскому свойству кнопки «Поделиться», которая называется «shareTxt», и добавьте прослушиватель событий mousedown для кнопки.
var shareBtn = shareBox.querySelector (‘button’);
shareBtn[‘shareTxt’] = TXT;
shareBtn.addEventListener (‘mousedown’, onShareClick, true);
Истинный параметр addEventListener () предотвращает всплывающее событие mousedown.
Внутри обработчика события onShareClick () мы вставляем выделенный текст в твит, получая доступ к свойству shareTxt кнопки.
function onShareClick () {
window.open ( https://twitter.com/intent/tweet?text=$ {this.shareTxt});
this.remove ();
document.getSelection (). removeAllRanges ()
}
Как только кнопка нажата, она делает то, что должна, а затем удаляет себя со страницы. Это также очистит любой выбор в документе.
Исходный код и демо
В демонстрационной программе Codepen ниже вы можете проверить, как работает меню действий. Вы также можете найти полный исходный код в нашем Github репо,
Увидеть перо Плавающее меню действий, чтобы твитнуть выбранный текст HONGKIAT (@hkdc) на CodePen,
Читайте также: Как использовать литералы шаблонов ES6 в JavaScript
<script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
