Slik lager du en middels flytende handlingsmeny
Populariteten til flytende handling menyer har vært på vei oppover, spesielt siden Medium.com brakte funksjonen til vogue. Kort sagt, den flytende handlingsmenyen popper opp når du velg litt tekst på en nettside. Menyen vises i nærheten av valget, viser forskjellige handlinger som lar deg raskt formatere, markere eller dele den valgte teksten.
I denne veiledningen viser jeg deg hvordan du viser en Handlingsmeny for en valgt tekstbit på en nettside. Vår handlingsmeny vil gjøre det mulig for brukerne å tweet den valgte teksten til sine etterfølgere.
1. Lag HTML
De starter HTML er enkel, vi trenger bare litt tekst brukeren kan velge. For demoen skal jeg bruke “The Hart og Hunter” godnatt historie som eksempeltekst.
The Hart og Hunter
The Hart var en gang ...
...
2. Lag handlingsmenemalens mal
Jeg er legger til HTML-koden som tilhører handlingsmenyen inne i a element. Hva som helst inni tag det vil ikke bli gjengitt av nettlesere til den legges til i dokumentet bruker JavaScript.
Ikke la noe unødvendig plass inne i tag, da det kan forstyrre handlingsmenyoppsettet når det er satt inn i dokumentet. Hvis du vil, legg til flere knapper innsiden #shareBox for flere alternativer.
3. Lag CSS
CSS for #shareBox inline container går slik:
#shareBox bredde: 30px; høyde: 30px; posisjon: absolutt;
De stilling: absolutt; regelen vil la oss plasser menyen hvor som helst vi vil på siden.
Jeg stylte også Handlingsknapp inne #shareBox med bakgrunnsfarge og bilde og i dens ::etter pseudo-element I lagt til en trekant for en nedpilen.
#shareBox> knapp bredde: 100%; høyde: 100%; bakgrunnsfarge: # 292A2B; grense: ingen; border-radius: 2px; disposisjon: ingen; markør: pointer; bakgrunnsbilde: url ('share.png'); Bakgrunn-gjenta: nei-gjenta; bakgrunnsposisjon: senter; bakgrunnsstørrelse: 70%; #shareBox> knapp :: etter posisjon: absolutt; innhold: "; border-top: 10px solid # 292A2B; border-left: 10px solid gjennomsiktig; grense-høyre: 10px solid gjennomsiktig; venstre: 5px; topp: 30px; 4. Legg til hendelsesbehandlere med JS
Flytter til JavaScript, må vi Legg til hendelseshåndterere for mousedown og mouseup hendelser til fange begynnelsen og slutten av tekstvalget.
Du kan også gjøre forskning for andre valg hendelser som for eksempel selectstart og bruk dem i stedet for mus hendelser (som ville være ideelt, men likevel er nettleserens støtte ikke veldig bra).
Også legg til en referanse til element ved hjelp av querySelector () metode.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funksjon onMouseDown () funksjon onMouseUp () 5. Fjern tidligere valg
I mousedown hendelse, vi vil utfør litt opprydding, dvs. slette et tidligere valg og tilhørende handlingsmeny.
funksjon onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); hvis (shareBox! == null) shareBox.remove (); De getSelection () metode returnerer a utvalg gjenstand som representerer tekstområdene nå valgt av brukeren og removeAllRange () metodefjerner alle områder fra det samme utvalg objekt, således rydder eventuelle tidligere valg.
6. Vis handlingsmenyen
Det er under mouseup arrangement, når vi vil Bekreft om et tekstvalg ble gjort og ta ytterligere tiltak.
funksjon onMouseUp () var sel = document.getSelection (), txt = sel.toString (); hvis (txt! == "") var range = sel.getRangeAt (0); hvis (range.startContainer.parentElement.parentElement.localName === "artikkel" || range.startContainer.parentElement.localName === "artikkel") // noen tekst i artikkelen ble valgt
Få den valgte tekststrengen ved å ringe toString () metode av utvalg gjenstand. Hvis den valgte teksten ikke er tom, fortsett og få det første spekteret fra utvalg gjenstand.
Område er den valgt del av dokumentet. Vanligvis vil brukerne lage en enkelt utvalg bare, ikke flere (ved å trykke på ctrl / cmd-tasten), så bare få det første områdeobjektet (ved indeks 0) fra valget ved å bruke getRangeAt (0).
Når du har rekkevidde, se om valget startet fra et sted som er inne i artikkelen. De startContainer Egenskapen til serien returnerer DOM-noden fra hvor utvalget begynte.
Noen ganger (når du velg i et avsnitt), verdien er bare en tekst node, i hvilket tilfelle dens foreldreelement vil være og foreldre til elementet vil være (i prøvekoden i dette innlegget).
Andre ganger, når du velger på tvers av flere avsnitt, de startContainer vil være og dens overordnede node vil være . Derav to sammenligninger i den andre hvis tilstand i ovennevnte kode.
Først når hvis tilstanden går, det er på tide å hente handlingsmenyen fra malen og legg den til dokumentet. Legg koden under innenfor den andre hvis uttalelse.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
De importNode () metode returnerer noder fra eksterne dokumenter (i vårt tilfelle, noder fra ). Når det kalles med den andre parameteren (ekte), vil det importerte elementet / noden kom med sine barnelementer.
Du kan sette inn #shareBox hvor som helst i dokumentlegemet, Jeg har lagt til det før malelementet.
7. Plasser handlingsmenyen
Vi ønsker å plassere handlingsmenyen rett ovenfor & midt på det valgte området. Å gjøre slik, få rektangelverdiene av det valgte området ved hjelp av getBoundingClientRect () metode som returnerer størrelsen og posisjonen til et element.
Oppdater deretter topp og venstre verdier av #shareBox basert på rektangelverdiene. I beregningene av den nye topp og venstre verdier, jeg benyttet ES6-maleriske bokstaver.
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. Legg til funksjonalitet
Nå da vi la til handlingsmenyen nær den valgte teksten, er det på tide å lage den valgte teksten tilgjengelig for menyalternativene slik at vi kan utføre noen handlinger på den.
Tilordne den valgte teksten til en egendefinert egenskap av delingsknappen kalt 'ShareTxt' og legg til en mousedown hendelseslytter til knappen.
var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); De ekte parameter av addEventListener () hindrer mousedown hendelse fra boblende.
Inne i onShareClick () hendelsehandler, vi sett inn den valgte teksten i en tweet ved å få tilgang til shareTxt egenskapen til knappen.
funksjon onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Først når knappen er klikket, det gjør hva den skal gjøre, og fjerner seg fra siden. Det vil også fjern eventuelle valg i dokumentet.
Kildekode og demo
I Codepen-demoen nedenfor kan du test hvordan handlingsmenyen fungerer. Du kan også finne full kildekode i vår Github repo.
