Come creare un menu di azione fluttuante di tipo medio
La popolarità di menu di azione fluttuanti è in aumento, specialmente da quando Medium.com ha portato il film in voga. In breve, il menu di azione fluttuante si apre quando tu seleziona del testo su una pagina web. Il menu appare vicino alla selezione, mostrando diverse azioni che ti consentono di formattare, evidenziare o condividere rapidamente il testo selezionato.
In questo tutorial, ti mostrerò come visualizzare un menu di azione per uno snippet di testo selezionato su una pagina web. Il nostro menu di azione consentirà agli utenti di tweet il testo selezionato ai loro seguaci.
1. Creare l'HTML
Il l'HTML di avvio è semplice, abbiamo solo bisogno un po 'di testo l'utente può selezionare. Per la demo, userò “The Hart and the Hunter” favola della buonanotte come testo di esempio.
The Hart and the Hunter
The Hart era una volta ...
...
2. Creare il modello del menu azione
sono aggiungendo il codice HTML appartenente al menu azione dentro a elemento. Qualunque cosa sia dentro tag, it non sarà reso dai browser fino a quando non viene aggiunto al documento usando JavaScript.
Non lasciare spazi inutili dentro il tag, in quanto ciò potrebbe disturbare il layout del menu di azione una volta inserito nel documento. Se vuoi, aggiungi altri pulsanti dentro #shareBox per più opzioni.
3. Crea il CSS
Il CSS per il #shareBox contenitore in linea va così:
#shareBox width: 30px; altezza: 30 px; posizione: assoluta;
Il position: absolute; la regola ci lascerà posiziona il menu dove vogliamo sulla pagina.
Ho anche disegnato lo stile pulsante di azione all'interno #shareBox con un colore di sfondo e un'immagine e nella sua ::dopo pseudo-elemento I aggiunto un triangolo per una freccia verso il basso.
#shareBox> button width: 100%; altezza: 100%; background-color: # 292A2B; confine: nessuno; border-radius: 2px; contorni: nessuno; cursore: puntatore; background-image: url ('share.png'); background-repeat: no-repeat; posizione di sfondo: centro; dimensione dello sfondo: 70%; Pulsante #shareBox> after position: absolute; contenuto: "; border-top: 10px solid # 292A2B; border-left: 10px solid transparent; border-right: 10px solid transparent; left: 5px; top: 30px; 4. Aggiungi gestori di eventi con JS
Passando a JavaScript, abbiamo bisogno di aggiungi gestori di eventi per il mousedown e MouseUp eventi a Cattura l'inizio e la fine della selezione del testo.
Puoi anche fare ricerca per altri eventi di selezione ad esempio selectstart e usali invece di eventi del mouse (che sarebbe l'ideale ma a tutt'oggi il supporto del browser non è molto buono).
Anche aggiungi un riferimento al elemento usando il querySelector () metodo.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); function onMouseDown () function onMouseUp () 5. Cancella le selezioni precedenti
Nel mousedown evento, lo faremo eseguire un po 'di pulizia, Cancellare qualsiasi selezione precedente e il menu di azione di appartenenza.
function onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); Il getSelection () metodo restituisce a Selezione oggetto che rappresenta le gamme di testo attualmente selezionato dall'utente e il removeAllRange () metodorimuove tutti gli intervalli dallo stesso Selezione oggetto, quindi cancellare qualsiasi selezione precedente.
6. Visualizza il menu azioni
È durante il MouseUp evento, quando lo faremo confermare se è stata effettuata una selezione di testo e intraprendere ulteriori azioni.
function 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") // un testo nell'articolo è stato selezionato
Ottieni la stringa di testo selezionata chiamando il accordare() metodo del Selezione oggetto. Se il testo selezionato non è vuoto, andare avanti e ottenere il primo intervallo dal Selezione oggetto.
Gamma è il porzione selezionata del documento. In genere, gli utenti eseguiranno a selezione singola solo, non più (premendo il tasto ctrl / cmd), quindi basta ottenere l'oggetto del primo intervallo (all'indice 0) dalla selezione usando getRangeAt (0).
Una volta ottenuto l'intervallo, verifica se la selezione è iniziata da un luogo che è all'interno dell'articolo. Il startContainer la proprietà dell'intervallo restituisce il nodo DOM da dove è iniziata la selezione.
A volte (quando tu selezionare all'interno di un paragrafo), il suo valore è solo a nodo di testo, nel qual caso il suo elemento genitore sarà e il genitore del l'elemento sarà (nel codice di esempio in questo post).
Altre volte, quando si seleziona attraverso più paragrafi, il startContainer sarà e il suo nodo genitore sarà . Quindi il due confronti nel secondo Se condizione nel codice sopra.
Una volta il Se la condizione passa, è tempo di recupera il menu di azione dal modello e aggiungerlo al documento. Inserisci il codice qui sotto dentro il secondo Se dichiarazione.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
Il importNode () metodo restituisce nodi da documenti esterni (nel nostro caso, i nodi da ). Quando viene chiamato con il secondo parametro (vero), l'elemento / nodo importato lo farà vieni con i suoi elementi figli.
Puoi inserire #shareBox ovunque nel corpo del documento, L'ho aggiunto prima dell'elemento template.
7. Posiziona il menu azioni
Vogliamo posizionare il menu di azione proprio sopra & al centro dell'area selezionata. Fare così, ottieni i valori del rettangolo dell'area selezionata usando il getBoundingClientRect () metodo che restituisce la dimensione e la posizione di un elemento.
Quindi, aggiorna il superiore e sinistra valori di #shareBox in base ai valori del rettangolo. Nei calcoli del nuovo superiore e sinistra valori, ho usato Letterali del modello ES6.
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. Aggiungi funzionalità
Ora che abbiamo aggiunto il menu di azione vicino al testo selezionato, è ora di creare il testo selezionato disponibile per le opzioni di menu in modo che possiamo eseguire qualche azione su di esso.
Assegna il testo selezionato a a proprietà personalizzata del pulsante di condivisione chiamato 'ShareTxt' e aggiungere un mousedown ascoltatore di eventi del pulsante.
var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); Il vero parametro di addEventListener () impedisce il mousedown evento dal ribollire.
Dentro il onShareClick () gestore di eventi, noi inserisci il testo selezionato in un tweet accedendo al shareTxt proprietà del pulsante.
function onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Una volta il il pulsante viene cliccato, fa quello che dovrebbe fare, quindi si rimuove dalla pagina. Sarà anche deselezionare qualsiasi selezione nel documento.
Codice sorgente e demo
Nella demo di Codepen qui sotto puoi farlo test come funziona il menu di azione. Puoi anche trovare il codice sorgente completo nel nostro repository Github.
