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