Medium-Like Floating Action -valikon luominen
Suosio kelluvat toimintovalikot on ollut kasvussa, varsinkin kun Medium.com toi ominaisuuden muodikkaaksi. Lyhyesti, kelluva toimintovalikko ponnahtaa ylös kun sinä valitse jokin teksti Web-sivulla. Valikko näkyy lähellä valintaa, näyttää erilaisia toimia voit muotoilla, korostaa tai jakaa valitun tekstin nopeasti.
Tässä opetusohjelmassa näytän, miten näytetään valitun tekstinpätkän toimintovalikko Web-sivulla. Toimintovalikko antaa käyttäjille mahdollisuuden piilottaa valitun tekstin heidän seuraajilleen.
1. Luo HTML
Starter HTML on yksinkertainen, tarvitsemme vain tekstiä käyttäjä voi valita. Demoa varten käytän “Hart ja metsästäjä” iltasatu näytteen tekstinä.
Hart ja metsästäjä
Hart oli kerran…
...
2. Luo toimintovalikon malli
Olen HTML-koodin lisääminen kuuluvat toimintovalikkoon sisällä elementti. Mikä tahansa sen sisällä on tag, se ei tule näkyviin selaimilla, kunnes se lisätään asiakirjaan JavaScriptin avulla.
Älä jätä tarpeetonta tilaa sisällä tunniste, koska se saattaa häiritä toimintovalikon asettelua, kun se on lisätty asiakirjaan. Jos haluat, lisää painikkeita sisällä #shareBox lisää vaihtoehtoja.
3. Luo CSS
CSS: lle #shareBox inline-kontti menee näin:
#shareBox leveys: 30px; korkeus: 30px; asema: absoluuttinen;
kanta: absoluuttinen; sääntö antaa meille sijoita valikko mihin tahansa haluamme sivulla.
Olen myös tyylistänyt toimintopainike sisällä #shareBox jossa on taustaväri ja kuva ja sen ::jälkeen pseudoelementti I lisäsi alaspäin osoittavan nuolen kolmion.
#shareBox> -painike leveys: 100%; korkeus: 100%; taustaväri: # 292A2B; raja: ei; raja-säde: 2px; ääriviivat: ei; kohdistin: osoitin; taustakuva: url ('share.png'); tausta-toisto: ei-toista; tausta-asema: keskus; taustakoko: 70%; #shareBox> -painike :: jälkeen sijainti: absoluuttinen; sisältö: "; border-top: 10px kiinteä # 292A2B; reunan vasen: 10px kiinteä läpinäkyvä; reunus oikealla: 10px kiinteä läpinäkyvä; vasen: 5px; ylhäällä: 30px; 4. Lisää tapahtumakäsittelijät JS: llä
Siirtyminen JavaScriptiin on tarpeen lisää tapahtumakäsittelijöitä varten mousedown ja mouseup tapahtumia kaapata alku ja loppu tekstin valinnan.
Voit myös tehdä tutkimuksia muita valintatapahtumia kuten selectstart ja käyttää niitä hiiren tapahtumien sijaan (joka olisi ihanteellinen, mutta selaimen tuki ei vielä ole kovin hyvä).
Myös lisää viittaus että elementtiä käyttäen querySelector () menetelmä.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); toiminto onMouseDown () -toiminto onMouseUp () 5. Tyhjennä edelliset valinnat
Vuonna mousedown tapahtuma, me suorittaa joitakin puhdistuksia, eli tyhjennä kaikki aikaisemmat valinnat ja siihen liittyvä toimintovalikko.
toiminto onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); jos (shareBox! == null) shareBox.remove (); getSelection () menetelmä palauttaa a Valinta esine edustavat tekstialueita käyttäjä on valinnut tällä hetkellä removeAllRange () menetelmäpoistaa kaikki alueet samasta Valinta näin ollen tyhjentää kaikki edelliset valinnat.
6. Näytä toimintovalikko
Se on aikana mouseup tapahtuma, kun me vahvista, jos teksti on valittu ja toteuttaa lisätoimia.
toiminto onMouseUp () var sel = document.getSelection (), txt = sel.toString (); jos (txt! == "") var range = sel.getRangeAt (0); jos (range.startContainer.parentElement.parentElement.localName === "artikkeli" || range.startContainer.parentElement.localName === "artikkeli") // jonkin artikkelin teksti on valittu
Hanki valittu tekstirivi soittamalla toString () menetelmän Valinta esine. Jos valittu teksti ei ole tyhjä, siirry eteenpäin saat ensimmäisen valikoiman alkaen Valinta esine.
alue on valittu osa asiakirjan. Yleensä käyttäjät tekevät a yksi valinta vain, ei moninkertainen (painamalla ctrl / cmd-näppäintä), niin saat vain ensimmäisen alueen objektin (indeksissä 0) valinnasta käyttämällä getRangeAt (0).
Kun olet saanut valikoiman, katso, onko valinta aloitettu paikasta, jossa artikkelin sisällä. startContainer alueen ominaisuus palauttaa DOM-solmun mistä valinta alkoi.
Joskus (kun valitse kappale), sen arvo on vain a tekstisolmu, tässä tapauksessa sen vanhemman elementin tulee olemaan ja vanhemman elementti on (näytteen koodissa tässä postissa).
Muina aikoina, kun valitset monissa kohdissa, startContainer tulee olemaan ja sen vanhempi solmu on . Näin ollen kaksi vertailua toisessa jos ehto edellä olevassa koodissa.
Kun jos kunto kulkee, on aika hae toimintovalikko mallista ja lisää se asiakirjaan. Aseta alla oleva koodi toisen sisällä jos selvitys.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
importNode () menetelmä palauttaa solmuja ulkoisista asiakirjoista (meidän tapauksessamme solmut ). Kun sitä kutsutaan toisella parametrilla (totta), tuotu elementti / solmu tulevat lapsen elementteineen.
Voit lisätä #shareBox missä tahansa asiakirjan rungossa, Olen lisännyt sen ennen mallin elementtiä.
7. Aseta toimintovalikko
Haluamme sijoittaa toimintovalikon suoraan yläpuolella & valitun alueen keskellä. Tehdä niin, saat suorakulmion arvot valitun alueen avulla getBoundingClientRect () menetelmä, joka palauttaa elementin koon ja sijainnin.
Päivitä sitten ylin ja vasen arvot #shareBox suorakulmion arvojen perusteella. Uuden laskelmissa ylin ja vasen arvoja käytin ES6-mallipohjat.
var rect = range.getBoundingClientRect (); var shareBox = document.querySelector ('# shareBox'); shareBox.style.top = 'calc ($ rect.top px - 38px)'; shareBox.style.left = 'laskettu ($ rect.left px + calc ($ rect.width px / 2) - 30px)'; 8. Lisää toimintoja
Nyt kun lisäsimme toimintovalikon lähellä valittua tekstiä, on aika tehdä valittu teksti käytettävissä valikkovaihtoehtoja varten jotta voimme tehdä joitakin toimia.
Määritä valittu teksti a jaetun painikkeen mukautettu ominaisuus olla nimeltään 'ShareTxt' ja lisää a mousedown tapahtuman kuuntelija.
var shareBtn = shareBox.querySelector ('painike'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, totta); totta parametrin addEventListener () estää mousedown tapahtuma kuplivasta.
Sisällä onShareClick () tapahtumakäsittelijä, me aseta valittu teksti tweetiksi käyttämällä shareTxt painikkeen ominaisuus.
toiminto onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Kun painiketta napsautetaan, se tekee sen, mitä sen pitäisi tehdä, ja poista itsensä sivulta. Se tulee myös tyhjennä valinta asiakirjassa.
Lähdekoodi & demo
Alla olevassa Codepen-demossa voit testata miten toimintovalikko toimii. Voit myös löytää koko lähdekoodin Github-repossa.
