Ako vytvoriť ponuku s pohyblivými akciami
Obľúbenosť plávajúce akčné menu je na vzostupe, a to najmä preto, že spoločnosť Medium.com priniesla túto funkciu do módy. Stručne povedané, menu s pohyblivou akciou vyskočí keď ty vyberte niektorý text na webovej stránke. V blízkosti výberu sa zobrazí ponuka, zobrazujú rôzne akcie ktoré vám umožnia rýchlo formátovať, zvýrazniť alebo zdieľať vybratý text.
V tomto návode vám ukážem, ako zobraziť Akcia pre vybraný útržok textu na webovej stránke. Naše menu akcií umožní používateľom vytlačiť vybraný text svojim nasledovníkom.
1. Vytvorte HTML
štartovací HTML je jednoduchý, potrebujeme len nejaký text používateľ si môže vybrať. Pre demo použijem “Hart a Hunter” rozprávka na dobrú noc ako ukážkový text.
Hart a Hunter
Hart bol raz ...
...
2. Vytvorte šablónu ponuky akcií
som pridaním kódu HTML patriacim do ponuky akcií vnútri a element. Čokoľvek je vnútri tag, to nebudú vykreslené prehliadačmi, kým sa nepridá do dokumentu pomocou jazyka JavaScript.
Nenechávajte zbytočný priestor vnútri značku, pretože by to mohlo narušiť rozloženie ponuky akcií po vložení do dokumentu. Ak chceš, pridať ďalšie tlačidlá vnútri #shareBox pre viac možností.
3. Vytvorte CSS
CSS pre #shareBox inline kontajner ide takto:
#shareBox šírka: 30px; výška: 30px; poloha: absolútna;
pozície: absolútna; pravidlo nám to dovolí miesto menu kdekoľvek chceme na stránke.
Tiež som navrhol tlačidlo akcie vo vnútri #shareBox s farbou pozadia a obrázkom a vo svojom :: po pseudo-prvok I pridal trojuholník pre šípku nadol.
#shareBox> tlačidlo šírka: 100%; výška: 100%; farba pozadia: # 292A2B; hranica: žiadna; okraj polomeru: 2px; obrys: žiadny; kurzor: ukazovateľ; pozadie-obrázok: url ('share.png'); opakovanie pozadia: opakovanie; pozadie pozadia: centrum; veľkosť pozadia: 70%; #shareBox>: po position: absolute; obsah: "; okraj: 10px solid # 292A2B; border-left: 10px solid transparent; okraj-doprava: 10px solid transparentný; left: 5px; top: 30px; 4. Pridajte manipulátory udalostí s JS
Keď prejdeme do jazyka JavaScript, musíme to pridať obslužné rúry udalostí pre mousedown a mouseup udalosti do zachytiť začiatok a koniec výberu textu.
Môžete tiež robiť výskum pre ďalšie udalosti výberu ako napr selectstart a používať ich namiesto udalostí myši (čo by bolo ideálne, ale zatiaľ nie je ich podpora prehliadača veľmi dobrá).
tiež pridať odkaz na element pomocou querySelector () metóda.
dokument.addEventListener ("mousedown", onMouseDown); dokument.addEventListener ('mouseup', onMouseUp); var temp = dokument.querySelector ('# shareBoxTemplate'); funkcia onMouseDown () funkcia onMouseUp () 5. Vymažte predchádzajúce výbery
V mousedown udalosť, budeme vykonajte nejaké vyčistenie, tzn. vymažte akýkoľvek predchádzajúci výber a menu príslušnej akcie.
funkcia onMouseDown () document.getSelection () removeAllRanges (); var shareBox = dokument.querySelector ('# shareBox'); ak (shareBox! == null) shareBox.remove (); getSelection () metóda vráti a výber objekt reprezentujú rozsahy textu aktuálne vybrané používateľom a removeAllRange () metódaodstráni všetky rozsahy z toho istého výber objekt, teda vymazanie predchádzajúceho výberu.
6. Zobrazte ponuku akcií
Je to počas mouseup udalosť, kedy budeme potvrďte, či bol vykonaný výber textu a podniknúť ďalšie kroky.
funkcia onMouseUp () var sel = document.getSelection (), txt = sel.toString (); ak (txt! == "") var rozsah = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "article" || range.startContainer.parentElement.localName === "článok") // bol vybratý text v článku
Získajte vybraný textový reťazec zavolaním natiahnuť() metóda výber objekt. Ak vybraný text nie je prázdny, pokračujte a získať prvý rozsah z výber objekt.
rozsah je vybraná časť dokumentu. Zvyčajne používatelia urobia a jediný výber ale nie viacnásobné (stlačením klávesu ctrl / cmd), takže získate objekt prvého radu (v indexe 0) z výberu pomocou getRangeAt (0).
Akonáhle máte rozsah, uvidíte, či výber začal z miesta, ktoré je vnútri článku. startContainer vlastnosť rozsahu vráti uzol DOM odkedy sa výber začal.
Niekedy (keď vy vyberte v rámci odseku), jeho hodnota je len a textový uzol, v tomto prípade jeho rodičovský prvok bude a rodičia prvkom bude (vo vzorovom kóde v tomto príspevku).
Inokedy, keď vyberiete naprieč viacerými odsekmi, startContainer bude a jej rodičovský uzol bude . Z toho dôvodu dve porovnania v druhom ak v uvedenom kóde.
Raz ak stav prechádza, je čas na to načítať ponuku akcií z šablóny a pridajte ju do dokumentu. Umiestnite kód nižšie vnútri druhej ak výkaz.
document.body.insertBefore (dokument.importNode (temp.content, true), temp);));
importNode () metóda vráti uzly z externých dokumentov (v našom prípade uzly z ). Keď sa volá s druhým parametrom (pravdivý), importovaný element / uzol bude prísť s jeho detskými prvkami.
Môžete vložiť #shareBox kdekoľvek v tele dokladu, Pridal som ho pred prvok šablóny.
7. Umiestnite ponuku akcií
Chceme umiestniť ponuku akcií hore & v strede vybranej oblasti. Urobiť tak, získať hodnoty obdĺžnika vybranej oblasti pomocou getBoundingClientRect () metóda, ktorá vracia veľkosť a polohu prvku.
Potom aktualizujte top a ľavý hodnoty #shareBox založené na hodnotách obdĺžnika. Vo výpočtoch nového top a ľavý hodnoty, ktoré som využil Šablóny šablóny ES6.
var rect = range.getBoundingClientRect (); var shareBox = dokument.querySelector ('# shareBox'); shareBox.style.top = 'vypočítať ($ rect.top px - 38px)'; shareBox.style.left = 'vypočítať ($ rect.left px + calc ($ rect.width px / 2) - 30px)'; 8. Pridajte funkčnosť
Teraz, keď sme pridali ponuku akcií v blízkosti vybratého textu, je čas urobiť vybraný text k dispozícii pre možnosti ponuky aby sme na ňom mohli vykonať nejaké kroky.
Priraďte vybraný text a Vlastná vlastnosť tlačidla Zdieľať volal 'ShareTxt' a pridajte položku a mousedown poslucháča udalosti na tlačidlo.
var shareBtn = shareBox.querySelector ('tlačidlo'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); pravdivý parameter of addEventListener () zabraňuje mousedown udalosť z prebublávania.
Vnútri onShareClick () obsluha udalosti, my vložte vybraný text do tweetu prístupom k serveru shareTxt vlastnosť tlačidla.
funkcia onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); dokument.getSelection () removeAllRanges () Raz kliknite na tlačidlo, robí to, čo má robiť, potom sa odstráni zo stránky. Bude to tiež vymažte akýkoľvek výber v dokumente.
Zdrojový kód a demo
V demoverze Codepen nižšie môžete test ako funguje ponuka akcií. Môžete tiež nájsť úplný zdrojový kód v našom repo Github.
