The Hart and the Hunter
The Hart was ooit ...
...
nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars
Hoe maak je een medium-achtig zwevend actiemenu
De populariteit van menu's met zwevende acties is in opkomst, vooral omdat Medium.com de functie in zwang bracht. Kortom, het zwevende actiemenu verschijnt wanneer u wat tekst op een webpagina selecteert . Het menu verschijnt in de buurt van de selectie en toont verschillende acties waarmee u snel de geselecteerde tekst kunt opmaken, markeren of delen.
In deze zelfstudie laat ik u zien hoe u een actiemenu weergeeft voor een geselecteerd tekstfragment op een webpagina. Ons actiemenu stelt gebruikers in staat de geselecteerde tekst te tweeten aan hun volgers.
1. Maak de HTML De HTML van de starter is eenvoudig, we hebben alleen wat tekst nodig die de gebruiker kan selecteren. Voor de demo gebruik ik het bedtijdverhaal 'The Hart and the Hunter' als voorbeeldtekst .
2. Maak de actie menusjabloon
Ik voeg de HTML-code toe die hoort bij het actiemenu in a element . Wat er ook in zit tag, wordt deze niet door browsers weergegeven totdat deze met JavaScript aan het document is toegevoegd.
Laat geen onnodige ruimte achter in de tag, omdat dit de lay-out van het actiemenu kan verstoren wanneer het in het document wordt ingevoegd. Voeg desgewenst meer knoppen toe aan #shareBox voor meer opties.
3. Maak de CSS
De CSS voor de #shareBox inline-container gaat als volgt:
#shareBox {width: 30px; hoogte: 30 px; positie: absoluut; } De position:absolute; regel laat ons het menu plaatsen waar we maar willen op de pagina.
Ik heb ook de #shareBox in #shareBox met een achtergrondkleur en afbeelding en in het ::after pseudo-element heb ik een driehoek toegevoegd voor een pijl naar beneden .
#shareBox> knop {width: 100%; hoogte: 100%; achtergrondkleur: # 292A2B; rand: 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 transparant; border-right: 10px solide transparant; links: 5px; top: 30px; } 4. Voeg event handlers toe met JS
mouseup in JavaScript moeten mouseup toegevoegd voor de mouseup en mouseup om het begin en het einde van de mouseup vast te leggen .
Je kunt ook onderzoek doen voor andere selectiegebeurtenissen zoals selectstart en deze gebruiken in plaats van muisgebeurtenissen (wat ideaal zou zijn, maar tot nu toe is hun browserondersteuning niet erg goed).
Voeg ook een verwijzing toe naar de element met behulp van de methode querySelector() .
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); function onMouseDown () {} function onMouseUp () {} 5. Wis vorige selecties
In het mousedown voeren we enige opruiming uit, dwz wissen we een eerdere selectie en het bijbehorende actiemenu.
function onMouseDown () {document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); } De methode getSelection() retourneert een Selection object dat de tekstbereiken vertegenwoordigt die momenteel door de gebruiker zijn geselecteerd en de methode removeAllRange() verwijdert alle bereiken uit hetzelfde Selection object en wist zo een eerdere selectie .
6. Geef het actiemenu weer
Het is tijdens de mouseup gebeurtenis, wanneer we zullen bevestigen of een mouseup is gemaakt en verdere actie ondernemen.
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}}} Haal de geselecteerde tekenreeks op door de methode toString() van het Selection object aan te roepen. Als de geselecteerde tekst niet leeg is, ga je gang en haal je het eerste bereik van het Selection object.
Bereik is het geselecteerde gedeelte van het document. Gebruikers maken meestal slechts één selectie, niet meerdere (door op de toets ctrl / cmd te drukken), dus haal het eerste getRangeAt(0) op index 0) uit de selectie met getRangeAt(0) .
Zodra je het bereik hebt, kijk dan of de selectie is begonnen vanaf een plek in het artikel . De eigenschap startContainer van het bereik retourneert het DOM-knooppunt van waaruit de selectie is gestart .
Soms (wanneer u binnen een alinea selecteert ), is de waarde ervan slechts een tekstknooppunt, in welk geval het bovenliggende element zal zijn
en de ouder van de
element zal zijn
Andere keren, wanneer u meerdere paragrafen selecteert, zal de startContainer zijn
en het bovenliggende knooppunt zal zijn if voorwaarde in de bovenstaande code.
Zodra de if voorwaarde is verstreken, wordt het tijd om het actiemenu uit de sjabloon op te halen en toe te voegen aan het document. Plaats de onderstaande code in het tweede if statement.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
De methode importNode() retourneert knooppunten van externe documenten (in ons geval knooppunten van ). Wanneer het wordt aangeroepen met de tweede parameter ( true ), zal het geïmporteerde element / knooppunt worden geleverd met onderliggende elementen .
U kunt #shareBox overal in de hoofdtekst van het document invoegen, ik heb het vóór het sjabloonelement toegevoegd.
7. Plaats het actiemenu
We willen het actiemenu precies boven en in het midden van het geselecteerde gebied plaatsen . Hiertoe haalt u de rechthoekwaarden van het geselecteerde gebied op met de methode getBoundingClientRect() die de grootte en de positie van een element retourneert.
#shareBox vervolgens de top en left van #shareBox basis van de rechthoekwaarden . In de berekeningen van de nieuwe top en left heb ik ES6-sjabloonliteralen gebruikt .
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 naast de geselecteerde tekst hebben toegevoegd, is het tijd om de geselecteerde tekst beschikbaar te maken voor de menu-opties, zodat we er wat actie op kunnen uitvoeren.
Wijs de geselecteerde tekst toe aan een aangepaste eigenschap van de share-knop 'shareTxt' en voeg een mousedown gebeurtenislistener toe aan de knop.
var shareBtn = shareBox.querySelector ('knop'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); De true parameter van addEventListener() voorkomt dat de mousedown borrelt .
In de gebeurtenishandler onShareClick() voegen we de geselecteerde tekst in een tweet in via de eigenschap shareTxt van de knop.
function onShareClick () {window.open (`https://twitter.com/intent/tweet?text=$ {this.shareTxt}`); this.remove (); document.getSelection (). removeAllRanges ()} Zodra op de knop is geklikt, doet het wat het zou moeten doen en wordt het zichzelf van de pagina verwijderd. Het zal ook elke selectie in het document wissen .
Broncode & demo
In de onderstaande Codepen-demo kun je testen hoe het actiemenu werkt. U kunt ook de volledige broncode vinden in onze Github-repo.
5 Analytische hulpmiddelen voor betere Twitter-marketing
Social media is een handige methode voor elke persoon om de marketing een stap verder te brengen. Twitter is een optie als je dit wilt doen, maar soms kan het een beetje ingewikkeld worden om erachter te komen wat wel en wat niet werkt. Onlangs heeft Twitter Twitter Analytics vrijgegeven om ons te helpen met dat kleine probleem
Hoe stressvrij te blijven in een stressvolle werklijn
De meeste bedrijven zijn op zoek naar een team van mensen die met gratie onder druk kunnen werken, in een snel veranderende omgeving werken, een zelfstarter, een teamspeler en al die met juwelen getooide woorden die in feite betekenen dat we u en u te veel zullen overwerken. wordt benadrukt aan het einde van uw eerste week "
