Sådan oprettes en mellemliggende flydende handling menu
Populariteten af flydende handling menuer har været stigende, især siden Medium.com bragte træk i mode. Kort sagt, menuen for flydende handling popper op når du vælg nogle tekst på en webside. Menuen vises i nærheden af markeringen, viser forskellige handlinger Det giver dig mulighed for hurtigt at formatere, fremhæve eller dele den markerede tekst.
I denne vejledning viser jeg dig, hvordan du viser en Handlingsmenu for et valgt tekstuddrag på en webside. Vores handlingsmenu vil gøre det muligt for brugerne at tweet den valgte tekst til deres tilhængere.
1. Opret HTML'en
Det starter HTML er simpel, vi har kun brug for nogle tekst brugeren kan vælge. Til demoen bruger jeg “The Hart and the Hunter” godnathistorie som eksempeltekst.
The Hart and the Hunter
The Hart was once ...
...
2. Opret handlingsmenuskabelonen
Jeg er tilføjer HTML-koden der tilhører handlingsmenuen inde i a element. Hvad der er indenfor tag det vil ikke blive gengivet med browsere, indtil den er føjet til dokumentet ved hjælp af JavaScript.
Forlad ikke nogen unødvendig plads inde i tag, da det kan forstyrre handlingsmenulayoutet, når det er indsat i dokumentet. Hvis du vil, Tilføj flere knapper inde #shareBox for flere muligheder.
3. Opret CSS
CSS for #shareBox inline container går som dette:
#shareBox width: 30px; højde: 30px; position: absolut;
Det position: absolut; regel vil lade os Placer menuen, hvor vi vil på siden.
Jeg stylede også handlingsknap indeni #shareBox med baggrundsfarve og billede og i dens ::efter pseudo-element I tilføjede en trekant for en pil ned.
#shareBox> knap bredde: 100%; højde: 100%; baggrundsfarve: # 292A2B; grænse: ingen; grænse-radius: 2px; disposition: ingen; markør: pointer; baggrundsbillede: url ('share.png'); background-repeat: no-repeat; baggrundsstilling: center; Baggrundsstørrelse: 70%; #shareBox> knap :: efter position: absolut; indhold: "; border-top: 10px solid # 292A2B; grænse-venstre: 10px solid gennemsigtig; grænse-højre: 10px solid gennemsigtig; venstre: 5px; top: 30px; 4. Tilføj event handlers med JS
Flytter til JavaScript, skal vi tilføj hændelseshåndteringsprogrammer for mouseDown og mouseUp begivenheder til fange begyndelsen og slutningen af tekstvalget.
Du kan også gøre forskning for andre udvalgshændelser såsom selectstart og brug dem i stedet for mushændelser (som ville være ideel, men fra og med deres browsersupport er ikke særlig god).
Også tilføj en reference til element ved hjælp af querySelector () metode.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funktion onMouseDown () funktion onMouseUp () 5. Ryd tidligere valg
I mouseDown begivenhed, vi vil udfør nogle oprydning, dvs. slet ethvert tidligere valg og tilhørende handlingsmenu.
funktion onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); hvis (shareBox! == null) shareBox.remove (); Det getSelection () metode returnerer a Udvælgelse objekt repræsenterer tekstområderne aktuelt valgt af brugeren og removeAllRange () metodefjerner alle områder fra det samme Udvælgelse objekt, således rydder ethvert tidligere valg.
6. Vis handlingsmenuen
Det er under mouseUp begivenhed, når vi vil Bekræft, om et tekstvalg blev foretaget og tage yderligere handlinger.
funktion onMouseUp () var sel = document.getSelection (), txt = sel.toString (); hvis (txt! == "") var range = sel.getRangeAt (0); hvis (range.startContainer.parentElement.parentElement.localName === "article" || range.startContainer.parentElement.localName === "artikel") // en del af teksten i artiklen blev valgt
Få den valgte tekststreng ved at ringe til toString () metode af Udvælgelse objekt. Hvis den valgte tekst ikke er tom, skal du gå videre og få det første interval fra Udvælgelse objekt.
Rækkevidde er valgt del af dokumentet. Brugerne vil typisk lave en enkeltvalg kun, ikke flere (ved at trykke på ctrl / cmd-tasten), så få først det første interval objekt (ved indeks 0) fra udvælgelsen ved hjælp af getRangeAt (0).
Når du har fået rækkevidde, skal du se, om markeringen startede fra et sted, der er inde i artiklen. Det startContainer Egenskaben af intervallet returnerer DOM-noden hvorfra udvælgelsen begyndte.
Nogle gange (når du vælg inden for et afsnit), dens værdi er kun en tekstknude, i hvilket tilfælde dens overordnet element vil være og forældrene af element vil være (i prøvekode i dette indlæg).
Andre gange, når du vælger på tværs af flere afsnit, det startContainer vil være og dens overordnede node vil være . Dermed to sammenligninger i den anden hvis betingelse i ovenstående kode.
En gang hvis tilstand passerer, det er tid til hent handlingsmenuen fra skabelonen og tilføj den til dokumentet. Placer koden nedenfor inde i den anden hvis udmelding.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
Det importNode () metode returnerer noder fra eksterne dokumenter (i vores tilfælde knuder fra ). Når det kaldes med den anden parameter (rigtigt), vil det importerede element / knudepunkt kom med sine barnelementer.
Du kan indsætte #shareBox hvor som helst i dokumentets krop, Jeg har tilføjet det før skabelonelementet.
7. Placer handlingsmenuen
Vi vil placere handlingsmenuen lige ovenfor & i midten af det valgte område. For at gøre det, få rektangelværdierne af det valgte område ved hjælp af getBoundingClientRect () metode, der returnerer størrelsen og placeringen af et element.
Derefter skal du opdatere top og venstre værdier af #shareBox baseret på rektangelværdierne. I beregningerne af den nye top og venstre værdier, jeg har brugt ES6 template bogstaver.
var rekt = interval.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. Tilføj funktionalitet
Nu da vi tilføjede handlingsmenuen nær den valgte tekst, er det tid til at lave den valgte tekst til rådighed for menuindstillingerne så vi kan udføre nogle handlinger på det.
Tildel den valgte tekst til en Brugerdefineret egenskab af deleknappen hedder 'ShareTxt' og tilføj en mouseDown Hændelseslytter til knappen.
var shareBtn = shareBox.querySelector ('knap'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); Det rigtigt parameter af addEventListener () forhindrer mouseDown begivenhed fra boblende.
Inde i onShareClick () hændelseshandler, vi indsæt den valgte tekst i en tweet ved at få adgang til shareTxt egenskaben af knappen.
funktion onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () En gang knappen er klikket, det gør hvad det skal gøre, fjern derefter sig fra siden. Det vil også ryd et valg i dokumentet.
Kildekode & demo
I Codepen demo nedenfor kan du prøve hvordan handlingsmenuen virker. Du kan også finde fuld kildekode i vores Github repo.
