The Hart and the Hunter
The Hart era una volta ...
...
it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori
Come creare un menu di azioni mobili di tipo medio
La popolarità dei menu di azione fluttuanti è aumentata, specialmente da quando Medium.com ha portato il film in voga. In breve, il menu di azione mobile si apre quando selezioni 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 twittare il testo selezionato ai propri follower.
1. Creare l'HTML L' HTML di base è semplice, abbiamo solo bisogno di un testo che l'utente può selezionare. Per la demo, userò la storia della buonanotte "The Hart and the Hunter" come testo di esempio .
2. Creare il modello del menu azione
Sto aggiungendo il codice HTML che appartiene al menu di azione all'interno di a elemento Qualunque cosa sia dentro tag, non verrà visualizzato dai browser fino a quando non verrà aggiunto al documento utilizzando JavaScript .
Non lasciare spazi inutili all'interno del tag, in quanto ciò potrebbe disturbare il layout del menu di azione una volta inserito nel documento. Se lo desideri, aggiungi altri pulsanti all'interno di #shareBox per ulteriori opzioni.
3. Crea il CSS
Il CSS per il contenitore in linea #shareBox così:
#shareBox {width: 30px; altezza: 30 px; posizione: assoluta; } La position:absolute; regola ci permetterà di posizionare il menu ovunque vogliamo sulla pagina.
Ho anche disegnato il pulsante di azione all'interno di #shareBox con un colore di sfondo e un'immagine e nel suo pseudo-elemento ::after ho aggiunto un triangolo per una freccia in giù .
#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 trasparente solido; border-right: 10px solid transparent; a sinistra: 5px; superiore: 30 px; } 4. Aggiungi gestori di eventi con JS
Passando a JavaScript, dobbiamo aggiungere gestori di eventi per gli eventi mouseup e mouseup per catturare l'inizio e la fine della selezione del testo.
Puoi anche fare ricerche per altri eventi di selezione, come ad esempio selectstart e selectstart al posto degli eventi del mouse (che sarebbe l'ideale ma a tutt'oggi il loro supporto browser non è molto buono).
Aggiungi anche un riferimento al elemento usando il metodo querySelector() .
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); function onMouseDown () {} function onMouseUp () {} 5. Cancella le selezioni precedenti
Nell'evento del mousedown, eseguiremo un po 'di pulizia, ovvero cancelleremo 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 metodo getSelection() restituisce un oggetto Selection che rappresenta gli intervalli di testo correntemente selezionati dall'utente e il metodo removeAllRange() rimuove tutti gli intervalli dallo stesso oggetto Selection, cancellando quindi qualsiasi selezione precedente .
6. Visualizza il menu azioni
È durante l'evento mouseup, quando confermeremo 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 metodo toString() dell'oggetto Selection . Se il testo selezionato non è vuoto, vai avanti e ottieni il primo intervallo dall'oggetto Selection .
L'intervallo è la porzione selezionata del documento. In genere, gli utenti effettueranno una sola selezione, non più (premendo il tasto ctrl / cmd), quindi otterrete 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 all'interno dell'articolo . La proprietà startContainer dell'intervallo restituisce il nodo DOM da cui è iniziata la selezione .
A volte (quando si seleziona all'interno di un paragrafo ), il suo valore è solo un nodo di testo, nel qual caso sarà l' elemento padre
e il genitore del
l'elemento sarà
Altre volte, quando si selezionano più paragrafi, lo startContainer sarà
e il suo nodo genitore sarà if nel codice precedente.
Una volta passata la condizione if, è ora di recuperare il menu azione dal modello e aggiungerlo al documento. Inserisci il codice qui sotto nella seconda istruzione if .
document.body.insertBefore (document.importNode (temp.content, true), temp);));
Il metodo importNode() restituisce nodi da documenti esterni (nel nostro caso, nodi da ). Quando viene chiamato con il secondo parametro ( true ), l'elemento / nodo importato verrà fornito con i relativi elementi figlio .
Puoi inserire #shareBox ovunque nel corpo del documento, l'ho aggiunto prima dell'elemento template.
7. Posiziona il menu azioni
Vogliamo posizionare il menu azioni sopra e al centro dell'area selezionata . Per fare ciò, ottenere i valori del rettangolo dell'area selezionata usando il metodo getBoundingClientRect() che restituisce la dimensione e la posizione di un elemento.
Quindi, aggiorna i valori top e left di #shareBox base ai valori del rettangolo . Nei calcoli dei nuovi valori top e left, ho utilizzato i letterali dei modelli 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, è tempo di rendere disponibile il testo selezionato per le opzioni del menu, in modo che possiamo eseguire qualche azione su di esso.
Assegna il testo selezionato a una proprietà personalizzata del pulsante di condivisione chiamato 'shareTxt' e aggiungi un listener di eventi per il mouse al pulsante.
var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); Il true parametro di addEventListener() impedisce che l'evento mousedown da bubbling .
All'interno del gestore di eventi onShareClick(), inseriamo il testo selezionato in un tweet accedendo alla proprietà shareTxt del pulsante.
function onShareClick () {window.open (`https://twitter.com/intent/tweet?text=$ {this.shareTxt}`); this.remove (); document.getSelection (). removeAllRanges ()} Una volta fatto clic sul pulsante, fa ciò che deve fare, quindi si rimuove dalla pagina. Cancellerà anche qualsiasi selezione nel documento.
Codice sorgente e demo
Nella demo di Codepen di seguito, puoi verificare come funziona il menu di azione. Puoi anche trovare il codice sorgente completo nel nostro repository Github.
Fresh Resource for Web Developers - Febbraio 2018
Avendo ricoperto questa serie per anni, ho visto gli strumenti andare e venire. Un paio di nuovi strumenti vengono rilasciati quasi ogni settimana . Tuttavia, nelle ultime settimane penso che si stia rallentando un po ', mi ci è voluto un po' più del solito per scavare verso Github e altre fonti per trovare nuovi strumenti gratuiti, open source e degni di essere menzionati in questa serie .N
Sfoglia i framework WordPress Open Source su IncludeWP
Dai progettisti di temi WordPress agli sviluppatori di plug-in, tutti traggono vantaggio dalla creazione di framework . Risparmia tempo per lavorare con il codice WP esistente e non devi preoccuparti di bug o difetti di sicurezza.Negli ultimi dieci anni, l'ecosistema di WordPress è cresciuto molto.
Articoli Interessanti
![Avvia i widget direttamente dalle impostazioni rapide con i quidgets [Android]](http://hideout-lastation.com/img/tech-design-tips/625/launch-widgets-directly-from-quick-settings-with-quidgets.jpg)