Hoe maak je een medium-achtig zwevend actiemenu
De populariteit van zwevende actiemenu's is in opkomst, vooral sinds Medium.com de functie in zwang bracht. Kortom, het zwevende actiemenu opduikt wanneer je selecteer wat tekst op een webpagina. Het menu verschijnt in de buurt van de selectie, verschillende acties tonen waarmee u snel de geselecteerde tekst kunt opmaken, markeren of delen.
In deze zelfstudie laat ik u zien hoe u een kunt weergeven actiemenu voor een geselecteerd tekstfragment op een webpagina. Ons actiemenu zal gebruikers in staat stellen om tweet de geselecteerde tekst aan hun volgers.
1. Maak de HTML
De starter HTML is eenvoudig, we hebben alleen nodig wat tekst de gebruiker kan selecteren. Voor de demo zal ik gebruiken “The Hart and the Hunter” verhaaltje voor het slapengaan als voorbeeldtekst.
The Hart and the Hunter
Het Hart was ooit ...
...
2. Maak de actie menusjabloon
Im de HTML-code toevoegen behorend bij het actiemenu in een element. Wat er ook in zit tag, it wordt niet weergegeven door browsers totdat het aan het document wordt toegevoegd met behulp van JavaScript.
Laat geen onnodige ruimte achter binnen in de tag, omdat dit de lay-out van het actiemenu kan verstoren wanneer het in het document wordt ingevoegd. Als je wilt, voeg meer knoppen toe binnen #shareBox voor meer opties.
3. Maak de CSS
De CSS voor de #shareBox inline container gaat zoals dit:
#shareBox width: 30px; hoogte: 30 px; positie: absoluut;
De positie: absoluut; regel zal ons toestaan plaats het menu waar we willen op de pagina.
Ik heb ook het actieknop binnen #shareBox met een achtergrondkleur en afbeelding en in zijn ::na pseudo-element I een driehoek toegevoegd voor een pijl naar beneden.
#shareBox> knop width: 100%; hoogte: 100%; achtergrondkleur: # 292A2B; grens: geen; grensradius: 2px; overzicht: geen; cursor: pointer; background-image: url ('share.png'); achtergrondherhaling: geen herhaling; achtergrond-positie: midden; achtergrondgrootte: 70%; #shareBox> knop :: after position: absolute; inhoud: "; border-top: 10px solid # 292A2B; border-left: 10px solid transparent; border-right: 10px solid transparent; links: 5px; top: 30px; 4. Voeg event handlers toe met JS
Verder naar JavaScript, dat moeten we doen event handlers toevoegen voor de mouseDown en mouseUp evenementen naar vang het begin en het einde van de tekstselectie.
U kunt ook onderzoek doen voor andere selectiegebeurtenissen zoals selectstart en gebruik ze in plaats van muisgebeurtenissen (wat ideaal zou zijn maar tot nu toe is hun browserondersteuning niet erg goed).
Ook voeg een referentie toe naar de element met behulp van de querySelector () methode.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); function onMouseDown () function onMouseUp () 5. Wis vorige selecties
In de mouseDown evenement, we zullen enige schoonmaak uitvoeren, d.w.z. alle vorige selectie en het bijbehorende actiemenu wissen.
function onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); De getSelection () methode geeft a terug Selectie voorwerp de reeksen van tekst vertegenwoordigen momenteel geselecteerd door de gebruiker en de removeAllRange () methodeverwijdert alle bereiken van hetzelfde Selectie object, dus wissen van een eerdere selectie.
6. Geef het actiemenu weer
Het is tijdens de mouseUp evenement, wanneer we zullen bevestig of er een tekstselectie is gemaakt en onderneem verdere actie.
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") // een tekst in het artikel is geselecteerd
Pak de geselecteerde tekstreeks door het te bellen toString () methode van de Selectie voorwerp. Als de geselecteerde tekst niet leeg is, ga je gang en haal het eerste bereik van de Selectie voorwerp.
reeks is de geselecteerde gedeelte van het document. Meestal maken gebruikers een enkele selectie alleen, niet meerdere (door op de ctrl / cmd-toets te drukken), dus haal het eerste bereikobject (bij index 0) uit de selectie met getRangeAt (0).
Zodra je het bereik hebt, kijk dan of de selectie is gestart vanuit een plaats die dat wel is in het artikel. De startContainer eigenschap van het bereik retourneert het DOM-knooppunt van waaruit de selectie begon.
Soms (wanneer jij selecteer binnen een paragraaf), de waarde ervan is slechts een tekstknooppunt, in welk geval zijn ouder element zal zijn en de ouder van de element zal zijn (in de voorbeeldcode in dit bericht).
Andere tijden, wanneer u selecteert over meerdere paragrafen, de startContainer zal zijn en het bovenliggende knooppunt zal zijn . Vandaar de twee vergelijkingen in de seconde als voorwaarde in de bovenstaande code.
Zodra de als conditie gaat voorbij, het is tijd om haal het actiemenu van de sjabloon en voeg het toe aan het document. Plaats de onderstaande code in de tweede als uitspraak.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
De importNode () methode retourneert knooppunten van externe documenten (in ons geval knooppunten van ). Wanneer het wordt aangeroepen met de tweede parameter (waar), zal het geïmporteerde element / knooppunt kom met zijn kindelementen.
U kunt invoegen #shareBox overal in de hoofdtekst van het document, Ik heb het vóór het sjabloonelement toegevoegd.
7. Plaats het actiemenu
We willen het actiemenu plaatsen rechtsboven & in het midden van het geselecteerde gebied. Om dit te doen, verkrijg de rechthoekwaarden van het geselecteerde gebied met behulp van de getBoundingClientRect () methode die de grootte en de positie van een element retourneert.
Werk vervolgens het top en links waarden van #shareBox op basis van de rechthoekwaarden. In de berekeningen van het nieuwe top en links waarden, waar ik gebruik van heb gemaakt ES6-sjabloonlettertypen.
var rect = range.getBounding ClientRect (); 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. Voeg functionaliteit toe
Nu we het actiemenu bij de geselecteerde tekst hebben toegevoegd, is het tijd om de geselecteerde tekst te maken beschikbaar voor de menu-opties zodat we wat actie kunnen ondernemen.
Wijs de geselecteerde tekst toe aan a aangepaste eigenschap van de knop Delen riep 'ShareTxt' en voeg een toe mouseDown gebeurtenisluisteraar naar de knop.
var shareBtn = shareBox.querySelector ('knop'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); De waar parameter van addEventListener () voorkomt het mouseDown evenement van borrelen.
Binnen in de onShareClick () event handler, wij plaats de geselecteerde tekst in een tweet door toegang te krijgen tot de shareTxt eigendom van de knop.
function onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Zodra de knop is geklikt, het doet wat het zou moeten doen en verwijdert zichzelf dan van de pagina. Het zal ook Wis elke selectie in het document.
Broncode & demo
In de onderstaande Codepen-demo kun je test hoe het actiemenu werkt. U kunt ook de volledige broncode in onze Github repo.
