Як створити середньо-подібне плаваюче меню дій
Популярність Росії меню плаваючої дії був на підйомі, тим більше, що Medium.com приніс цю функцію в моду. Коротше кажучи, плаваюче меню дій з'являється коли ти виберіть текст на веб-сторінці. Меню з'являється біля вибору, з різними діями які дозволяють швидко форматувати, виділяти або обмінюватися вибраним текстом.
У цьому підручнику я покажу вам, як відобразити меню дій для вибраного фрагмента тексту на веб-сторінці. Наше меню дій дозволить користувачам tweet вибраного тексту їхнім послідовникам.
1. Створіть HTML
The Стартовий HTML простий, нам тільки потрібно текст користувач може вибрати. Для демо, я буду використовувати “Харт і мисливець” казка на ніч як зразок тексту.
Харт і мисливець
Харт був колись…
…
2. Створіть шаблон меню дій
Я додавання HTML-коду що належать до меню дій всередині a елемент. Все, що знаходиться всередині тег не буде відображено браузерами, поки він не буде доданий до документа використовуючи JavaScript.
Не залишайте зайвого простору всередині тег, оскільки це може порушити розташування меню дій після його вставлення в документ. Якщо хочете, додайте більше кнопок всередині #shareBox для додаткових опцій.
3. Створіть CSS
CSS для #shareBox вбудований контейнер виглядає так:
#shareBox width: 30px; висота: 30px; позиція: абсолютна;
The позиція: абсолютна; Правило дозволить нам розміщуйте меню, де б ми не хотіли на сторінці.
Я також розписав кнопка дії всередині #shareBox з кольором тла і зображенням і в його :: після псевдоелемент I додав трикутник для стрілки вниз.
#shareBox> button width: 100%; висота: 100%; фоновий колір: # 292A2B; кордон: немає; кордон-радіус: 2px; контур: немає; курсор: покажчик; background-image: url ('share.png'); фон-повтор: без повтору; фонове положення: центр; розмір фону: 70%; #shareBox> button :: after position: absolute; content: "; border-top: 10px solid # 292A2B; ліворуч: 10px твердий прозорий; праворуч: 10px твердий прозорий; лівий: 5px; верхній: 30px; 4. Додайте обробники подій з JS
Переходячи до JavaScript, нам потрібно додавати обробники подій для mousedown і миші події захопити початок і кінець вибору тексту.
Ви також можете зробити дослідження для інші події відбору як от виберітьзапуск і використовувати їх замість подій миші (що було б ідеально, але на сьогодні їх підтримка у браузері не дуже хороша).
Також додати посилання до елемент за допомогою querySelector () метод.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); Функція onMouseDown () функція onMouseUp () 5. Очистіть попередній вибір
В mousedown Події, ми виконати деяку очистку, очистити будь-який попередній вибір і відповідне меню дій.
function onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); The getSelection () Метод повертає a Вибір об'єкт представляє діапазони тексту поточно вибраний користувачем і removeAllRange () методвидаляє всі діапазони від того ж Вибір об'єкт, таким чином очищення будь-якого попереднього вибору.
6. Відкрийте меню дій
Це під час миші подія, коли ми підтвердьте, чи було зроблено вибір тексту і вживати подальших дій.
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") // вибрано деякий текст у статті
Отримати вибраний текстовий рядок за допомогою виклику toString () Метод Вибір об'єкт. Якщо виділений текст не порожній, перейдіть і отримати перший діапазон від Вибір об'єкт.
Діапазон є обраної частини документа. Як правило, користувачі роблять єдиний вибір тільки, не множинні (натисканням клавіші ctrl / cmd), так що просто отримайте перший об'єкт діапазону (за індексом 0) з вибору, використовуючи getRangeAt (0).
Отримавши діапазон, переконайтеся, що вибір розпочався з місця всередині статті. The startContainer властивість діапазону повертає вузол DOM звідки почався відбір.
Іноді (коли ви виберіть у межах абзацу), його значення просто a текстовий вузол, в цьому випадку його батьківський елемент буде і батька елементом буде (у зразку коду цієї публікації).
Інший час, коли ви виберете на кілька абзаців, startContainer буде і його батьківський вузол буде . Звідси і два порівняння у другому якщо умова в наведеному вище коді.
Один раз якщо стан проходить, пора отримати меню дій з шаблону та додати його до документа. Помістіть код нижче всередині другого якщо заяву.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
The 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. Додайте функціональність
Тепер, коли до вибраного тексту додано меню дій, настав час зробити вибраний текст доступні для опцій меню щоб ми могли виконати певні дії.
Призначте виділений текст a користувальницьке властивість кнопки спільного доступу називається "shareTxt" і додати a mousedown слухача подій на кнопку.
var shareBtn = shareBox.querySelector ('кнопка'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); The вірно параметр addEventListener () запобігає mousedown подія від булькання.
Всередині onShareClick () обробник подій ми вставити виділений текст у твіт шляхом доступу до shareTxt властивість кнопки.
function onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Один раз натиснута кнопка, він робить те, що він повинен робити, а потім видаляє себе зі сторінки. Це також очистити будь-який вибір у документі.
Вихідний код і демо
У демонстраційному коді Codepen нижче тест як працює меню дій. Ви також можете знайти повний вихідний код в нашому Github repo.
