Как создать плавающее меню действий среднего размера
Популярность меню с плавающим действием растет, особенно после того, как Medium.com ввел эту функцию в моду. Вкратце, плавающее меню действий всплывает когда ты выберите текст на веб-странице. Меню появляется рядом с выбором, показывая разные действия которые позволяют быстро форматировать, выделять или делиться выбранным текстом.
В этом уроке я покажу вам, как отображать меню действий для выбранного фрагмента текста на веб-странице. Наше меню действий позволит пользователям чирикать выбранный текст своим последователям.
1. Создайте HTML
стартер HTML прост, нам нужно только некоторый текст пользователь может выбрать. Для демонстрации я буду использовать “Харт и Охотник” сказка на ночь как образец текста.
Харт и Охотник
Харт был когда-то ...
...
2. Создайте шаблон меню действий
я добавление кода HTML принадлежность к меню действий внутри элемент. Что бы ни было внутри тег это не будет оказано браузерами, пока он не будет добавлен в документ используя JavaScript.
Не оставляйте ненужное место внутри тег, поскольку это может нарушить макет меню действий после его вставки в документ. Если ты хочешь, добавить больше кнопок внутри #shareBox для большего количества вариантов.
3. Создайте CSS
CSS для #shareBox встроенный контейнер выглядит так:
#shareBox width: 30px; высота: 30 пикселей; положение: абсолютное;
позиция: абсолютная; Правило позволит нам разместите меню там, где мы хотим на странице.
Я также разработал кнопка действия внутри #shareBox с цветом фона и изображения и в его ::после псевдоэлемент I добавлен треугольник для стрелки вниз.
#shareBox> button width: 100%; высота: 100%; цвет фона: # 292A2B; граница: нет; радиус границы: 2 пикселя; контур: нет; курсор: указатель; background-image: url ('share.png'); повторение фона: без повтора; background-position: center; размер фона: 70%; #shareBox> button :: after position: absolute; содержимое: "; border-top: 10px solid # 292A2B; border-left: 10px solid прозрачный; border-right: 10px solid прозрачный; слева: 5px; верх: 30px; 4. Добавьте обработчики событий с JS
Переходя к JavaScript, нам нужно добавить обработчики событий для MouseDown а также MouseUp события в захватить начало и конец выбора текста.
Вы также можете сделать исследование для другие отборочные мероприятия такие как selectstart и использовать их вместо событий мыши (что было бы идеально, но пока их поддержка браузера не очень хорошая).
Также добавить ссылку к элемент, использующий querySelector () метод.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); function onMouseDown () function onMouseUp () 5. Очистить предыдущие выборы
в MouseDown событие, мы будем выполнить некоторую очистку, то есть очистить любой предыдущий выбор и соответствующее меню действий.
function onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); GetSelection () метод возвращает выбор объект представляя диапазоны текста в настоящее время выбирается пользователем и removeAllRange () методудаляет все диапазоны из того же выбор объект, таким образом очистка любого предыдущего выбора.
6. Откройте меню действий
Это во время MouseUp событие, когда мы будем подтвердить выбор текста и принять дальнейшие меры.
function onMouseUp () var sel = document.getSelection (), txt = sel.toString (); if (txt! == "") var range = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "article" || range.startContainer.parentElement.localName === "article") // был выбран некоторый текст в статье
Получить выделенную текстовую строку позвонив нанизывать() метод выбор объект. Если выделенный текст не пустой, продолжайте и получить первый диапазон от выбор объект.
Спектр это выбранная часть документа. Как правило, пользователи будут делать одиночный выбор только не несколько (нажатием клавиши ctrl / cmd), так что просто получите первый объект диапазона (с индексом 0) из выделения, используя getRangeAt (0).
Получив диапазон, посмотрите, начался ли выбор с места, которое внутри статьи. startContainer свойство диапазона возвращает узел DOM откуда начался отбор.
Иногда (когда ты выбрать внутри абзаца), его значение просто текстовый узел, в этом случае его родительский элемент будет и родитель элемент будет (в примере кода в этом посте).
В других случаях, когда вы выбираете через несколько абзацев, startContainer будет и его родительский узел будет . Следовательно два сравнения во-вторых если условие в приведенном выше коде.
Однажды если условие проходит, пора получить меню действий из шаблона и добавить его в документ. Поместите код ниже внутри второго если заявление.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
importNode () метод возвращает узлы из внешних документов (в нашем случае узлы из ). Когда он вызывается со вторым параметром (правда), импортированный элемент / узел будет приходят со своими дочерними элементами.
Вы можете вставить #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)'; 8. Добавить функциональность
Теперь, когда мы добавили меню действий рядом с выделенным текстом, пришло время сделать выделенный текст доступно для пунктов меню чтобы мы могли выполнить какое-то действие.
Назначить выделенный текст пользовательское свойство кнопки поделиться называется '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.
