Cum se creează un meniu de acțiune plutitoare de tip Medium
Popularitatea lui aplicații plutitoare a fost în creștere, mai ales că Medium.com a adus această caracteristică în vogă. Pe scurt, meniul de acțiune plutitoare apare cand tu selectați un text pe o pagină web. Meniul apare aproape de selecție, care prezintă diferite acțiuni care vă permit să formatați, evidențiați sau partajați rapid textul selectat.
În acest tutorial, vă voi arăta cum să afișați un pentru un fragment de text selectat pe o pagină web. Meniul nostru de acțiune va permite utilizatorilor să tweet textul selectat la urmașii lor.
1. Creați codul HTML
HTML-ul inițial este simplu, avem nevoie doar un anumit text utilizatorul poate selecta. Pentru demo, o să folosesc “Hart și vânătorul” poveste de noapte bună ca exemplu de text.
Hart și vânătorul
Hart a fost odată ...
...
2. Creați șablonul de meniu de acțiune
Sunt adăugând codul HTML aparținând meniului de acțiune în interiorul a element. Orice este înăuntru etichetă, ea nu vor fi redate de către browsere până la adăugarea lor în document folosind JavaScript.
Nu lăsați niciun spațiu inutil în interiorul , deoarece aceasta ar putea perturba structura meniului de acțiune odată ce a fost inserată în document. Daca vrei, adăugați mai multe butoane interior #shareBox pentru mai multe opțiuni.
3. Creați CSS
CSS pentru #shareBox inline container merge astfel:
#shareBox width: 30px; înălțime: 30px; poziția: absolută;
Poziția: absolută; regula ne va permite plasați meniul oriunde dorim pe pagină.
Am, de asemenea, stilul butonul de acțiune din interior #shareBox cu o culoare de fundal și o imagine și în ::după pseudo-element I adăugați un triunghi pentru o săgeată în jos.
#shareBox> buton lățime: 100%; înălțime: 100%; fundal-culoare: # 292A2B; frontieră: nici una; raza de graniță: 2 pixeli; contur: nici unul; cursor: pointer; fundal-imagine: url ('share.png'); fundal-repet: nu-repeta; fundal-poziție: centru; dimensiunea fundalului: 70%; #shareBox> :: după position: absolute; conținut: "; frontieră-sus: 10px solid # 292A2B; margine-stânga: 10px solid transparent; margine-dreapta: 10px solid transparent; stânga: 5px; top: 30px; 4. Adăugați agenți de procesare a evenimentelor cu JS
Trecem la JavaScript, avem nevoie adăugați agenți de procesare a evenimentelor pentru mousedown și MouseUp evenimente la capturați începutul și sfârșitul din selecția textului.
De asemenea, puteți face cercetări pentru alte evenimente de selecție precum selectstart și să le folosească în loc de evenimente de mouse (care ar fi ideal, dar din moment ce suportul lor de browser nu este foarte bun).
De asemenea adăugați o referință la folosind elementul querySelector () metodă.
document.addEventListener ("mousedown", onMouseDown); document.addEventListener ("mouseup", onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funcția onMouseDown () funcția onMouseUp () 5. Ștergeți selecțiile anterioare
În mousedown eveniment, vom efectuați unele curățare, adică ștergeți orice selecție anterioară și meniul de acțiune al apartenenței.
funcția onMouseDown () document.getSelection () removeAllRanges (); var shareBox = document.querySelector ("# shareBox"); dacă (shareBox! == null) shareBox.remove (); getSelection () metoda returnează a Selecţie obiect reprezentând intervalele de text selectate în prezent de către utilizator și removeAllRange () metodăelimină toate intervalele de la aceleași Selecţie obiect, astfel ștergerea oricărei selecții anterioare.
6. Afișați meniul de acțiune
Este în timpul MouseUp eveniment, când vom confirmați dacă a fost efectuată o selecție de text și să ia măsuri suplimentare.
funcția onMouseUp () var sel = document.getSelecția (), txt = sel.toString (); dacă (txt! == "") var domeniu = sel.getRangeAt (0); dacă (range.startContainer.parentElement.parentElement.localName === "articolul" || range.startContainer.parentElement.localName === "articol") // a fost selectat un text din articol
Obțineți șirul de text selectat prin apelarea toString () metodă a Selecţie obiect. Dacă textul selectat nu este gol, continuați și obțineți prima gamă de la Selecţie obiect.
Gamă este porțiune selectată a documentului. De obicei, utilizatorii vor face o singură selecție doar nu, mai multe (prin apăsarea tastei ctrl / cmd), așa că obțineți primul obiect din interval (la index 0) din selecție utilizând getRangeAt (0).
Odată ce ați ajuns la interval, verificați dacă selecția a pornit dintr-un loc care este în interiorul articolului. startContainer proprietatea din intervalul returnează nodul DOM de unde a început selecția.
Uneori (când tu selectați într-un paragraf), valoarea sa este doar a nod text, caz în care elementul părinte va fi și părintele element va fi (în exemplul de cod din acest post).
Alteori, când selectați pe mai multe paragrafe, startContainer va fi și nodul părinte va fi . De aici două comparații in secunda dacă condiție din codul de mai sus.
Odata ce dacă condiția trece, e timpul să preluați meniul de acțiune din șablon și adăugați-l în document. Plasați codul de mai jos în al doilea dacă afirmație.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
importNode () metodă returnează noduri din documente externe (în cazul nostru, noduri de la ). Când se numește cu al doilea parametru (Adevărat), elementul / nodul importat va vin cu elementele sale copil.
Puteți introduce #shareBox oriunde în corpul documentului, Am adăugat-o înainte de elementul șablon.
7. Așezați meniul de acțiune
Vrem să introducem meniul de acțiune chiar deasupra & la mijlocul zonei selectate. Pentru a face acest lucru, obțineți valorile dreptunghiului din zona selectată folosind getBoundingClientRect () care returnează dimensiunea și poziția unui element.
Apoi, actualizați top și stânga valori ale #shareBox bazat pe valorile dreptunghiului. În calculele noului top și stânga valorile pe care le-am folosit ES6 literali șablon.
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. Adăugați funcționalitate
Acum, când am adăugat meniul de acțiune lângă textul selectat, este timpul să faceți textul selectat disponibile pentru opțiunile de meniu astfel încât să putem efectua niște acțiuni în acest sens.
Atribuiți textul selectat unui a proprietate particulară a butonului de distribuire denumit 'ShareTxt' și adăugați a mousedown ascultător de evenimente al butonului.
var shareBtn = shareBox.querySelector ("butonul"); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ("mousedown", onShareClick, true); Adevărat parametru de addEventListener () împiedică mousedown eveniment de bubble.
În interiorul onShareClick () manipulator de evenimente, noi inserați textul selectat într-un tweet accesând shareTxt proprietatea butonului.
funcția onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Odata ce butonul este apăsat, face ceea ce trebuie să facă, apoi se îndepărtează de pe pagină. Va fi, de asemenea ștergeți orice selecție în document.
Cod sursă și demo
În demonstrația Codepen de mai jos, puteți Test cum funcționează meniul de acțiune. Puteți găsi, de asemenea, codul sursă complet în replica noastră Github.
