Kako stvoriti srednje-poput plutajući izbornik akcije
Popularnost izbornici plutajuće akcije je u porastu, pogotovo jer Medium.com donio značajku u modi. Ukratko, izbornik plutajuće akcije iskoči kada ti odaberite neki tekst na web stranici. Izbornik se pojavljuje pored odabira, pokazuju različite akcije koji vam omogućuju brzo formatiranje, označavanje ili dijeljenje odabranog teksta.
U ovom vodiču pokazat ću vam kako prikazati izbornik akcija za odabrani isječak teksta na web stranici. Naš će izbornik akcija omogućiti korisnicima tweetanje odabranog teksta svojim sljedbenicima.
1. Izradite HTML
Početni HTML je jednostavan, samo trebamo neki tekst korisnik može odabrati. Za demo, ja ću koristiti “Hart i Hunter” priča za laku noć kao uzorak teksta.
Hart i Hunter
Hart je nekada bio ...
...
2. Izradite predložak izbornika akcije
Ja sam dodavanje HTML koda koji pripadaju izborniku akcija unutar a element. Što god je unutar tag neće se prikazati preglednicima dok se ne doda u dokument pomoću JavaScripta.
Ne ostavljajte nepotreban prostor unutar kao što bi to moglo poremetiti raspored izbornika akcije kada se umetne u dokument. Ako želiš, dodajte još gumba u #shareBox za više opcija.
3. Stvorite CSS
CSS za #shareBox inline kontejner ide ovako:
#shareBox width: 30px; visina: 30px; položaj: apsolutni;
Položaj: na; pravilo će nas pustiti stavite izbornik gdje god želimo na stranici.
Također sam oblikovao unutarnji gumb akcije #shareBox s bojom pozadine i slikom te u svojoj ::nakon pseudo-element I dodao je trokut za strelicu prema dolje.
#shareBox> gumb width: 100%; visina: 100%; boja pozadine: # 292A2B; granica: nema; granični radijus: 2px; pregled: nema; pokazivač: pokazivač; background-image: url ("share.png"); pozadina-ponavljanje: nema ponavljanja; položaj pozadine: centar; veličina pozadine: 70%; #shareBox> button :: after position: absolute; sadržaj: "; border-top: 10px solid # 292A2B; granica lijevo: 10px čvrsto transparentno; granično-desno: 10px čvrsto transparentno; lijevo: 5px; vrh: 30px; 4. Dodajte rukovatelje događajima s JS-om
Prelazimo na JavaScript, moramo dodajte rukovatelje događajima za mousedown i mouseup događaja uhvatite početak i kraj odabira teksta.
Također možete napraviti istraživanje za druge događaje odabira kao što su selectstart i koristiti ih umjesto događaja s mišem (što bi bilo idealno, ali za sada podrška za preglednik nije jako dobra).
Također dodajte referencu prema pomoću elementa querySelector () način.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funkcija onMouseDown () funkcija onMouseUp () 5. Obrišite prethodne odabire
U mousedown događaj, mi ćemo obaviti čišćenje, tj. očisti bilo koji prethodni odabir i pripadajući izbornik akcije.
funkcija onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); ako (shareBox! == null) shareBox.remove (); getSelection () metoda vraća a Izbor objekt koji predstavljaju raspone teksta trenutno odabran od strane korisnika i removeAllRange () načinuklanja sve raspone iz istog Izbor objekt brisanje svih prethodnih odabira.
6. Prikažite izbornik akcija
To je tijekom mouseup događaj, kada ćemo potvrdite je li izvršen odabir teksta i poduzeti daljnje akcije.
funkcija 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") // odabran je tekst u članku
Nabavite odabrani tekstni niz pozivom na toString () metoda Izbor objekt. Ako odabrani tekst nije prazan, idite naprijed i dobiti prvi raspon od Izbor objekt.
opseg je odabranog dijela dokumenta. Tipično, korisnici će napraviti jedan odabir samo, ne višestruko (pritiskom na tipku ctrl / cmd), tako da od objekta odaberete prvi objekt raspona (na indeksu 0) pomoću getRangeAt (0).
Kada dobijete raspon, provjerite je li odabir počeo s mjesta koje je unutar članka. startContainer svojstvo raspona vraća DOM čvor odakle je počeo odabir.
Ponekad (kada odaberite unutar stavka), njegova vrijednost je samo a čvor teksta, u tom slučaju njegova osnovni element bit će i roditelj element će biti (u primjeru koda u ovom postu).
U drugim slučajevima, kada odaberete u više odlomaka, startContainer bit će i njegov nadređeni čvor će biti . Odatle i dvije usporedbe u drugom ako uvjet u gornjem kodu.
Jednom ako vrijeme prolazi, vrijeme je dohvatite izbornik akcija iz predloška i dodajte ga u dokument. Postavite kôd u nastavku unutar drugog ako izjava.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
importNode () način vraća čvorove iz vanjskih dokumenata (u našem slučaju iz čvorova ). Kada se pozove s drugim parametrom (pravi), uvezeni element / čvor će dolaze s dječjim elementima.
Možete umetnuti #shareBox bilo gdje u tijelu dokumenta, Dodao sam ga prije elementa predloška.
7. Postavite izbornik akcija
Želimo postaviti izbornik akcija desno iznad & na sredini odabranog područja. Učiniti tako, dobiti vrijednosti pravokutnika odabranog područja pomoću gumba getBoundingClientRect () metoda koja vraća veličinu i položaj elementa.
Zatim ažurirajte vrh i lijevo vrijednosti #shareBox na temelju vrijednosti pravokutnika. U izračunima novog vrh i lijevo koristio sam ES6 predložak literala.
var rect = 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. Dodajte funkcionalnost
Sada kada smo pored odabranog teksta dodali izbornik akcija, vrijeme je da odabrani tekst izradite dostupne za opcije izbornika tako da možemo izvršiti neku akciju na njoj.
Dodijelite odabrani tekst a prilagođeno svojstvo gumba za dijeljenje zvao 'ShareTxt' i dodajte a mousedown slušatelja događaja na gumb.
var shareBtn = shareBox.querySelector ('gumb'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); pravi parametar od addEventListener () sprječava mousedown događaj iz mjehurića.
Unutar onShareClick () događaj, mi umetnite odabrani tekst u cvrkut pristupanjem shareTxt svojstva gumba.
funkcija onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Jednom kliknut, radi ono što bi trebao raditi, a zatim se uklonio sa stranice. Također očistite bilo koji odabir u dokumentu.
Izvorni kôd i demo
U prikazu Codepen u nastavku možete test kako radi izbornik akcija. Također možete pronaći puni izvorni kod u našem Github repo.
