Come codificare un menu di condivisione in linea

In questo tutorial, impareremo come creare un cosiddetto "menu di condivisione in linea". Questa interfaccia funziona aprendo un menu che consente ai lettori di condividere la pagina, citando il testo evidenziato. Troverai un'interfaccia simile su alcuni siti popolari come Medium.

Prima di iniziare a creare il nostro menu di condivisione, esamineremo come questa interfaccia simile in Medium funzioni più da vicino, ad esempio quando viene mostrata e come viene posizionata rispetto all'area evidenziata. Questo è un passo utile che ci fornirà un'analisi tecnica adeguata, determinando infine anche come scriveremo i nostri codici con il nostro codice.

Andiamo!

Esaminando l'interfaccia media

Nell'immagine seguente, possiamo vedere che il menu di condivisione in Medio appare al centro del testo evidenziato, indipendentemente dalla lunghezza; se selezioniamo solo una singola parola, una frase o l'intero paragrafo.

Interfaccia utente di condivisione in linea in Medio 

Se guardiamo sotto il cofano tramite Chrome DevTools, possiamo trovare la posizione del menu di condivisione data attraverso superiore e sinistra proprietà nello stile in linea. Possiamo vedere anche il pulsante di condivisione con un altro modificatore classe, highlightMenu - attiva, che lo rende visibile.

Nota: Se non hai ancora familiarità con termini come Modificatore, Bloccare, e Elemento, dovresti dare un'occhiata a questo tutorial precedente: Introduzione alla metodologia BEM.

Stili che posizionano il menu di condivisione in linea in Medio

Nel stili scheda, possiamo vedere la sua posizione iniziale è impostata tramite CSS con il assoluto posizione, il z-index proprietà da sollevare sopra gli altri elementi della pagina, il superiore, e con il visibilità proprietà per mettere i pulsanti di condivisione fuori dalla vista.

Per riassumere, dovremo:

1. Recupera la lunghezza dell'area selezionata in modo che possiamo determinare il punto centrale della selezione.
2. Crea un modificatore per mostrare l'elemento.
3. Imposta la posizione del menu di condivisione con superiore e sinistra proprietà aggiunta tramite stili incorporati.

Costruisci il menu di condivisione 

In questo esempio includeremo i pulsanti Facebook e Twitter all'interno del menu di condivisione. Forniamo l'icona Facebook e Twitter con SVG, racchiusa all'interno di a pulsante e un paio di div elementi. Inoltre, come puoi vedere dal seguente snippet, aggiungiamo anche a campata elemento per formare il triangolo nella parte inferiore dei menu.

Non esiste una regola definitiva in termini di colori e forma del menu; sentiti libero di personalizzare il menu in modo che corrisponda al design del tuo sito. Vale la pena prestare attenzione alla dimensione del pulsante; l'altezza e la larghezza. Il nostro menu di condivisione è, come puoi vedere qui sotto, 84px largo e 40px alto. Utilizzeremo questi due valori per posizionare successivamente il menu di condivisione al centro dell'area evidenziata.

Gli stili che impostano la posizione iniziale e la visibilità.

.condivisione posizione: assoluta; visibilità: nascosta; inizio: 0; a sinistra: 0; z-index: 500;  

E infine, la classe che aggiungeremo per rendere visibile il pulsante di condivisione.

.condivisione - mostrato visibilità: visibile; 

Rendi funzionale il menu di condivisione

A questo punto, il nostro menu di condivisione in linea non dovrebbe essere visibile sulla pagina. Inoltre, quando clicchiamo su Facebook e sul pulsante Twitter, la finestra di condivisione non si vede da nessuna parte. Quindi, in questa sezione, scriveremo JavaScript per rendere i nostri pulsanti funzionali. E iniziamo con il seguente, getHighlight () funzione.

function getHighlight () var selection = window.getSelection (); // 1. var object = parent: null, text: ", rect: null; // Se la selezione non è vuota. If (selection.rangeCount> 0) object = text: selection.toString (). Trim (), // ottiene il testo parent: selection.anchorNode.parentNode, // ottiene l'elemento che avvolge il testo. rect: selection.getRangeAt (0) .getBoundingClientRect () // ottiene la bounding box.; return object ; // 2.

Questa funzione:

• Recupera l'area evidenziata utilizzando la funzione JavaScript nativa, getSelection ().
• Restituisce un Oggetto contenente il testo selezionato, l'elemento che avvolge il testo e l'Oggetto Rettangolo dell'area selezionata che ci dà la dimensione e la sua posizione -superiore, parte inferiore, sinistra, e destra - all'interno della pagina.

La nostra prossima funzione è chiamata showMenu (). Come suggerisce il nome, questa funzione mostrerà il menu di condivisione.

var sharing = document.querySelector ('.sharing'); function showMenu () // 1. var highlight = getHighlight (); // 2. if (highlight.text === ") sharing.setAttribute ('class', 'sharing'); sharing.style.left = 0; sharing.style.top = 0; return; // 3 . / ** * Mostra solo il pulsante di condivisione se l'elemento selezionato è un paragrafo. * / If (highlight.parent.nodeName! == 'P') return; // 4. var width = (highlight.rect.width / 2) - 42; / ** * Il "42" viene acquisito dalla larghezza dei nostri pulsanti di condivisione divisa per 2. * / sharing.setAttribute ('class', 'sharing sharing - shown'); sharing.style.left = (highlight.rect.left + width) + 'px'; sharing.style.top = (highlight.rect.top - 40) + 'px'; / ** * "40" è l'altezza dei nostri pulsanti di condivisione. * Qui, lo solleviamo sopra la posizione superiore della zona evidenziata. * /

Nello specifico, il codice in questa funzione procede come segue:

1. Ottieni l'Oggetto getHighlighted () funzione.
2. Nascondere e impostare il menu di condivisione nella sua posizione iniziale quando l'area evidenziata è vuota; non contiene testo.
3. Impedire che i pulsanti vengano visualizzati se il testo evidenziato non è racchiuso all'interno di un paragrafo.
4. Infine, imposta il superiore e il sinistra posizione, e aggiungere il condivisione - mostrato classe per rendere visibili i pulsanti di condivisione. Ho anche aggiunto alcune righe di commenti in linea che descrivono da dove derivano alcuni dei numeri definiti.

Daremo per scontato che la maggior parte degli utenti utilizzi il mouse per evidenziare il contenuto sul Web, quindi associamo questa funzione al MouseUp evento. I dispositivi mobili di solito hanno i loro menu contestuali sulla selezione del testo, quindi ci stiamo concentrando sul web per questo tutorial.

Selezione del testo in Safari iOS

Ritardiamo comunque l'esecuzione 100ms usando il setTimeout () funzione, per garantire che il contenuto sia selezionato correttamente.

document.body.addEventListener ('mouseup', function () setTimeout (showMenu, 100););

La nostra ultima funzione, openShareWindow (), è avviare la finestra di condivisione quando si fa clic sui pulsanti nel menu. In questo tutorial, lo utilizzeremo principalmente per fornire la finestra di condivisione di Twitter poiché Facebook ha il proprio SDK JavaScript.

function openShareWindow (url, w, h) var screenLeft = window.screenLeft! == undefined? window.screenLeft: screen.left; var screenTop = window.screenTop! == undefined? window.screenTop: screen.top; var width = window.innerWidth? window.innerWidth: doc.documentElement.clientWidth? doc.documentElement.clientWidth: screen.width; var height = window.innerHeight? window.innerHeight: doc.documentElement.clientHeight? doc.documentElement.clientHeight: screen.height; var left = ((width / 2) - (w / 2)) + screenLeft; var top = ((height / 2) - (h / 2)) + screenTop; var newWin = window.open (url, "", "scrollbars = no, width =" + w + ", height =" + h + ", top =" + top + ", left =" + left); if (newWin) newWin.focus (); 

Fare clic ... Fare clic ...

Successivamente, associamo i pulsanti di condivisione con il clic evento e allega una funzione che avvierà la finestra di condivisione.

// Facebook. document.getElementById ('share') .addEventListener ('click', function () var highlight = getHighlight (); if (highlight.text! == "&& highlight.parent.nodeName === 'P') FB .ui (method: 'share', mobile_iframe: true, href: 'http://bitly.com/2aiHmCs', citazione: highlight.text // passa il testo come Quote); event.preventDefault (); ); 

Per il pulsante di condivisione di Facebook, utilizziamo l'SDK JavaScript di Facebook. L'SDK ci consente di passare il testo a comparire nella finestra di condivisione attraverso il citazione parametro.

Twitter non fornisce un SDK JavaScript in questo modo. Quindi qui usiamo la nostra funzione, openShareWindow (), e passare un URL formattato conforme alle loro linee guida insieme alla dimensione della finestra.

document.getElementById ('tweet') .addEventListener ('click', function () var highlight = getHighlight (); if (highlight.text! == "&& highlight.parent.nodeName === 'P') var docURL = encodeURIComponent ('http://bitly.com/2aiHmCs'); var tweetText = encodeURIComponent (highlight.text); var tweetURL = 'https://twitter.com/intent/tweet?via=wdtuts&url=' + docURL + '& text =' + tweetText; openShareWindow (tweetURL, 600, 420); event.preventDefault ();); 

Quando clicchiamo sul pulsante di condivisione di Twitter, dovrebbe lanciare una finestra che appare, come segue.

Avvolgendo

Siamo tutti impostati con il nostro menu di condivisione in linea! Vai alla demo per vederlo in azione, o il codice sorgente per vedere le funzioni in pieno. Successivamente, puoi migliorare il menu di condivisione in linea con transizioni o animazioni per offrire un'esperienza più coinvolgente.

Ulteriori risorse

Ci sono diverse API JavaScripts che abbiamo usato per ottenere il menu di condivisione attivo e funzionante. Alcuni di essi sono stati citati in precedenti tutorial Envato Tuts +, mentre altri potrebbero essere completamente nuovi per te. Quindi, qui ho incluso i riferimenti per completare questo tutorial.

• BEM: Block Element Modifier, Introduzione
• Facebook JavaScript SDK
• Facebook Social Plugin - Quote
• URL Web Intent di Twitter
• API Web di selezione
• Range Web API
• Codifica componente URL
• "Copia negli appunti" Made Easy con Clipboard.js