Cómo Crear un Menú Para Compartir en una Línea

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En este tutorial, aprenderemos a crear lo que se ha dado en llamar "un menú en línea para compartir". Este tipo de interface funciona haciendo emerger un menú que permite a los lectores compartir la página, citando el texto resaltado. Encontrarás una interfaz similar en algunas webs populares como Medium.

Antes de empezar a crear nuestro menú para compartir, examinaremos más de cerca cómo funciona la interfaz similar de Medium, por ejemplo, cómo se consigue que se muestre y como está posicionado respecto al área resaltada. Este es un paso útil que nos proporcionará la información técnica adecuada, eventualmente también determinar cómo vamos a escribir nuestros códigos de nuestro propio código.

¡Vamos!

Examinando la Interfaz de Medium

En la siguiente imagen, podemos ver que el menú compartido en Medium aparece en el centro del texto resaltado, independientemente de la longitud; Si seleccionamos sólo una sola palabra, una oración o todo el párrafo.

Highlighted word with the sharing button in Mediumcom — UI del Menu en Medium

Si miramos bajo el capó a través de Chrome DevTools, podemos encontrar la posición del menú se da a través de la top y left la propiedad en el estilo de la línea. Podemos ver el botón de compartir también se da con una clase de modificador adicional, highlightMenu--active, que lo hace visible.

Nota: Si todavía no está familiarizado con términos como Modificador, Bloqueo y Elemento, debería echar un vistazo a este tutorial anterior: Introducción a la Metodología BEM.

Estilos que posicionan el menú en línea para compartir en Medium

En la pestaña Estilos, podemos ver que su posición inicial se establece a través de CSS con la posición absoluta, la propiedad z-index para sobreponerse sobre los otros elementos de la página, el top y con la propiedad de visibility para poner los botones de visión.

Para resumir, tendremos que:

Recuperar la longitud del área seleccionada para poder determinar el punto central de la selección.
Cree un modificador para mostrar el elemento.
Establezca la posición del menú para compartir con la propiedad top y left añadida a través de los estilos en línea.

Construir el menú para compartir

En este ejemplo, incluiremos los botones de Facebook y Twitter en el menú. Entregamos el icono de Facebook y Twitter con SVG, envuelto en un botón y un par de elementos div. Además, como se puede ver en el fragmento siguiente, también agregamos un elemento span para formar el triángulo en la parte inferior de los menús.

1	<div class="sharing">
2	<div class="sharing__buttons">
3	<button id="share" title="Share">
4	<svg class="icon icon--facebook" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; width: 24px; height: 24px" xml:space="preserve"><g></g><g><g><path d="M426.8,64H85.2C73.5,64,64,73.5,64,85.2l0,341.6c0,11.7,9.5,21.2,21.2,21.2H256V296h-45.9v-56H256v-41.4 c0-49.6,34.4-76.6,78.7-76.6c21.2,0,44,1.6,49.3,2.3v51.8l-35.3,0c-24.1,0-28.7,11.4-28.7,28.2V240h57.4l-7.5,56H320v152h106.8 c11.7,0,21.2-9.5,21.2-21.2V85.2C448,73.5,438.5,64,426.8,64z"/></g></g></svg>
5	</button>
6	<button id="tweet" title="Tweet">
7	<svg class='icon icon--twitter' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512; width: 24px; height: 24px' xml:space='preserve'><path d='M492,109.5c-17.4,7.7-36,12.9-55.6,15.3c20-12,35.4-31,42.6-53.6c-18.7,11.1-39.4,19.2-61.5,23.5
8	C399.8,75.8,374.6,64,346.8,64c-53.5,0-96.8,43.4-96.8,96.9c0,7.6,0.8,15,2.5,22.1c-80.5-4-151.9-42.6-199.6-101.3
9	c-8.3,14.3-13.1,31-13.1,48.7c0,33.6,17.2,63.3,43.2,80.7C67,210.7,52,206.3,39,199c0,0.4,0,0.8,0,1.2c0,47,33.4,86.1,77.7,95c-8.1,2.2-16.7,3.4-25.5,3.4c-6.2,0-12.3-0.6-18.2-1.8c12.3,38.5,48.1,66.5,90.5,67.3c-33.1,26-74.9,41.5-120.3,41.5
10	c-7.8,0-15.5-0.5-23.1-1.4C62.8,432,113.7,448,168.3,448C346.6,448,444,300.3,444,172.2c0-4.2-0.1-8.4-0.3-12.5
11	C462.6,146,479,129,492,109.5z'/>
12	</svg>
13	</button>
14	</div>
15	<span class="sharing__triangle"></span>
16	</div>

No hay una regla definitiva en términos de los colores y la forma del menú; No dude en diseñar el menú para que coincida con el diseño de su sitio. Vale la pena prestar atención a son el tamaño del botón; La altura y el ancho. Nuestro menú para compartir es, como se puede ver a continuación, 84px de ancho y 40px de altura. Utilizaremos estos dos valores para situar el menú compartido en el centro del área resaltada más adelante.

Inline sharing menu size inspected through Chrome DevTools

Los estilos que establecen la posición inicial y la visibilidad.

.sharing {
  position: absolute;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 500;
}

Y por último, la clase que vamos a anexar para hacer visible el botón de compartir.

1	.sharing--shown {
2	visibility: visible;
3	}

Hacer que el menú para compartir funcione

En este punto, nuestro menú en línea para compartir no debe ser visible en la página. Además, cuando hacemos clic en el botón de Facebook y Twitter, la ventana para compartir no aparece en ninguna parte. Por lo tanto, en esta sección, escribiremos el JavaScript para que nuestros botones funcionen. Y comenzamos con la siguiente función getHighlight().

function getHighlight() {

    var selection = window.getSelection(); // 1.

    var object = {
		parent : null,
		text   : '',
		rect   : null
    };

	// If selection is not empty.
    if ( selection.rangeCount > 0 ) {
        object = {
            text   : selection.toString().trim(), // get the text.
            parent : selection.anchorNode.parentNode, // get the element wrapping the text.
            rect   : selection.getRangeAt(0).getBoundingClientRect() // get the bounding box.
        };
    }

    return object; // 2.
}

Esta función hará lo siguiente:

Recuperara el área resaltada usando la función JavaScript nativa, getSelection().
Devuelve un objeto que contiene el texto seleccionado, el elemento que envuelve el texto y el objeto Rectángulo del área seleccionada que nos da el tamaño, así como su posición—top, bottom, left y right—dentro de la página.

Nuestra siguiente función se llamara showMenu(). Como su nombre indica, esta función revelará el menú para compartir.

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.
	/**
	 * Only show the sharing button if the selected is a paragraph.
	 */
    if ( highlight.parent.nodeName !== 'P' ) {
        return;
    }

	// 4.
    var width = ( highlight.rect.width / 2 ) - 42;
    /**
     * The "42" is acquired from our sharing buttons width devided by 2.
     */

    sharing.setAttribute( 'class', 'sharing sharing--shown' );
	sharing.style.left = ( highlight.rect.left + width ) + 'px';
	sharing.style.top  = ( highlight.rect.top - 40 ) + 'px';
	/**
	 * "40" is the height of our sharing buttons.
	 * Herein, we lift it up above the higlighted area top position.
	 */
}

Específicamente, el código en esta función hace lo siguiente:

Obtener un objecto desde la función getHighlighted().
Ocultar y configurar el menú en su posición inicial cuando el área resaltada está vacía; no contiene texto.
Evite que los botones aparezcan si el texto resaltado no está envuelto dentro de un párrafo.
Por último, establezca la posición top y left, añada la clase sharing--shown para mostrar los botones para compartir. También he añadido unas pocas líneas de comentarios en línea que describen dónde se derivan algunos de los números definidos.

Vamos a suponer que la mayoría de los usuarios utilizan el ratón para resaltar el contenido en la web, por lo que vincular esta función en el evento mouseup. Los dispositivos móviles suelen tener sus propios menús contextuales sobre la selección de texto, por lo que nos estamos centrando en la web para este tutorial.

safari ios — Selección de texto en Safari iOS

Retrasamos la ejecución por 100ms usando la función setTimeout(), para asegurar que el contenido esté correctamente seleccionado.

1	document.body.addEventListener( 'mouseup', function() {
2	setTimeout( showMenu, 100 );
3	} );

Nuestra última función, openShareWindow(), es iniciar la ventana de compartir cuando se hace clic en los botones del menú. En este tutorial, lo usaremos principalmente para publicar la ventana para compartir de Twitter ya que Facebook tiene su propio SDK en 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();
	}
}

Click...Click...

A continuación, enlazamos los botones de uso compartido con el evento click y adjuntamos una función que iniciará la ventana para compartir.

// 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',
            quote  : highlight.text // pass the text as Quote
        });
    }

    event.preventDefault();
} );

Para el botón de compartir en Facebook, usamos el SDK en JavaScript de Facebook. El SDK nos permite pasar el texto para que aparezca en la ventana para compartir a través del parámetro quote.

Twitter no proporciona un SDK de JavaScript de esta manera. Así que aquí usamos nuestra función, openShareWindow(), y pasamos una URL formateada que cumple con sus directrices junto con el tamaño de la ventana.

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();
} );

Cuando hacemos clic en el botón de Twitter, se debe iniciar una ventana que aparece de la siguiente manera.

Concluyendo

¡Estamos listos con nuestro menú en línea para compartir! Vaya a la demostración para verla en acción, o el código fuente para ver las funciones en su totalidad. A continuación, puede mejorar el menú en línea para compartir con transiciones o animaciones para ofrecer una experiencia más atractiva.

Recursos adicionales

Hay varias APIs de JavaScripts que utilizamos para poner en marcha el menú para compartir. Algunos de ellos han sido mencionados en anteriores tutoriales de Envato Tuts+, mientras que otros pueden ser completamente nuevos para usted. Por lo tanto, aquí he incluido referencias para complementar este tutorial.