Så här skapar du en meningsliknande flytande åtgärdsmeny
Populariteten av flytande åtgärder menyer har stigit, speciellt sedan Medium.com tog funktionen i mode. Kortfattat, menyn för flytande åtgärder dyker upp när du välj lite text på en webbsida. Menyn visas nära valet, visar olika åtgärder som låter dig snabbt formatera, markera eller dela den valda texten.
I denna handledning visar jag dig hur man visar en Åtgärdsmeny för en vald textbit på en webbsida. Vår handlingsmeny gör det möjligt för användare att tweet den valda texten till sina anhängare.
1. Skapa HTML
De start HTML är enkelt, vi behöver bara lite text användaren kan välja För demo ska jag använda “Hart och jägaren” godnattsaga som provtext.
Hart och jägaren
Hart var en gång ...
...
2. Skapa handlingsmenyns mall
Jag är lägger till HTML-koden tillhör åtgärdsmenyn inuti a element. Vad som än ligger inom tag det kommer inte att göras av webbläsare tills det läggs till i dokumentet använder JavaScript.
Lämna inte onödigt utrymme inuti taggen, eftersom det kan störa handlingsmenylayouten när den sätts in i dokumentet. Om du vill, lägg till fler knappar inuti #shareBox för fler alternativ.
3. Skapa CSS
CSS för #shareBox inline-behållare går så här:
#shareBox width: 30px; höjd: 30px; position: absolut;
De position: absolute; regel kommer att låta oss placera menyn vart vi vill på sidan.
Jag stylade också åtgärdsknapp inuti #shareBox med bakgrundsfärg och bild och i dess ::efter pseudo-element I lagt till en triangel för en nedåtpil.
#shareBox> knapp bredd: 100%; höjd: 100%; bakgrundsfärg: # 292A2B; gränsen: ingen; gränsstråle: 2px; kontur: ingen; markör: pekare; bakgrundsbild: url ('share.png'); bakgrundsrepetition: nej-repetera; bakgrundsställning: center; bakgrundsstorlek: 70%; #shareBox> knapp :: efter position: absolute; innehåll: "; gränsen-top: 10px solid # 292A2B; gränsen-vänster: 10px solid transparent, gränsen-höger: 10px solid transparent, vänster: 5px; topp: 30px; 4. Lägg till händelsehanterare med JS
Att flytta till JavaScript måste vi lägg till händelsehanterare för mousedown och mouseup händelser till fånga början och slutet av textvalet.
Du kan också göra forskning för andra val händelser som selectstart och använd dem istället för mushändelser (vilket skulle vara perfekt men ändå är deras webbläsare inte särskilt bra).
Också lägg till en referens till element med hjälp av querySelector () metod.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funktion onMouseDown () funktion onMouseUp () 5. Rensa tidigare val
I mousedown händelse, vi ska utföra vissa rengöring, d.v.s. rensa vilket tidigare val som helst och den tillhörande handlingsmenyn.
funktion onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); om (shareBox! == null) shareBox.remove (); De getSelection () Metoden returnerar a Urval objekt representerar textintervall för närvarande valda av användaren och removeAllRange () metodtar bort alla intervall från samma Urval objekt, sålunda rensa eventuella tidigare val.
6. Visa handlingsmenyn
Det är under mouseup händelse när vi kommer Bekräfta om ett textval gjordes och vidta ytterligare åtgärder.
funktion onMouseUp () var sel = document.getSelection (), txt = sel.toString (); om (txt! == "") var range = sel.getRangeAt (0); om (range.startContainer.parentElement.parentElement.localName === "artikel" || range.startContainer.parentElement.localName === "artikel") // någon text i artikeln valdes
Hämta den valda textsträngen genom att ringa att stränga() metod för Urval objekt. Om den markerade texten inte är tom, fortsätt och få det första sortimentet från Urval objekt.
Räckvidd är vald del av dokumentet. Vanligtvis kommer användarna att göra en singelval bara, inte multipel (genom att trycka på ctrl / cmd-tangenten), så få bara det första intervallobjektet (vid index 0) från valet med hjälp av getRangeAt (0).
När du har sortimentet, se om valet startade från ett ställe som är inuti artikeln. De startContainer egenskapen hos intervallet returnerar DOM-noden varifrån valet började.
Ibland (när du välj inom ett stycke), dess värde är bara en textnod, i vilket fall dess moderelementet kommer vara och föräldern till element kommer att vara (i provkoden i detta inlägg).
Andra tider, när du väljer över flera stycken, de startContainer kommer vara och dess moderkod kommer att vara . Därav två jämförelser på sekunden om villkor i ovanstående kod.
När om skick passerar, det är dags att hämta handlingsmenyn från mallen och lägg till den i dokumentet. Placera koden nedan inuti den andra om påstående.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
De importNode () metod returnerar noder från externa dokument (i vårt fall, noder från ). När det kallas med den andra parametern (Sann), kommer det importerade elementet / noden att kom med sina barnelement.
Du kan infoga #shareBox var som helst i dokumentkroppen, Jag har lagt till det före mallelementet.
7. Placera handlingsmenyn
Vi vill placera åtgärdsmenyn precis ovanför & mitt i det valda området. Att göra så, få rektangelvärdena av det valda området med hjälp av getBoundingClientRect () metod som returnerar storleken och läget för ett element.
Uppdatera sedan topp och vänster värden av #shareBox baserat på rektangelvärdena. I beräkningarna av den nya topp och vänster värden som jag använde ES6 mall bokstäver.
var rekt = 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. Lägg till funktionalitet
Nu när vi lagt till åtgärdsmenyn nära den valda texten är det dags att göra den markerade texten tillgänglig för menyalternativen så att vi kan utföra några åtgärder på den.
Tilldela den valda texten till en egen egenskap av delningsknappen kallad 'ShareTxt' och lägg till en mousedown händelse lyssnare på knappen.
var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ("mousedown", onShareClick, true); De Sann parameter för addeventlistener () förhindrar mousedown händelse från bubblor.
Inuti onShareClick () händelsehanterare, vi sätt in den valda texten i en tweet genom att komma åt shareTxt egenskapen hos knappen.
funktion onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () När knappen klickas, det gör vad den ska göra, ta bort sig från sidan. Det kommer också Rensa valet i dokumentet.
Källkod & demo
I Codepen demo nedan kan du testa hur handlingsmenyn fungerar. Du kan också hitta fullständig källkod i vårt Github repo.
