Cómo crear un menú de acción flotante de tipo medio
La popularidad de menús de acción flotantes ha ido en aumento, especialmente desde que Medium.com puso la característica en boga. En resumen, el menú de acciones flotantes. aparece cuando tú selecciona un texto en una página web. El menú aparece cerca de la selección., mostrando diferentes acciones que le permiten formatear, resaltar o compartir rápidamente el texto seleccionado.
En este tutorial, te mostraré cómo mostrar un menú de acción para un fragmento de texto seleccionado en una página web. Nuestro menú de acción permitirá a los usuarios tuitea el texto seleccionado a sus seguidores.
1. Crea el HTML
los HTML de inicio es simple, solo necesitamos algún texto El usuario puede seleccionar. Para la demo, usaré “El ciervo y el cazador” cuento antes de dormir como texto de muestra.
El ciervo y el cazador
El Hart fue una vez ...
...
2. Crea la plantilla del menú de acciones.
soy añadiendo el código HTML Perteneciente al menú de acciones. dentro de una elemento. Lo que sea que esté dentro del etiqueta, no será renderizado Por los navegadores hasta que se agregue al documento. usando JavaScript.
No dejes espacio innecesario. dentro de etiqueta, ya que puede perturbar el diseño del menú de acción una vez que se inserta en el documento. Si tu quieres, agregar mas botones dentro #shareBox para mas opciones.
3. Crea el CSS
El CSS para el #shareBox contenedor en linea va así:
#shareBox width: 30px; altura: 30px; posición: absoluta;
los posición: absoluta; la regla nos dejara Coloca el menú donde queramos. en la pagina.
También le puse estilo botón de acción dentro #shareBox Con un fondo de color e imagen y en su ::después pseudo-elemento I agregó un triángulo para una flecha hacia abajo.
botón #shareBox> ancho: 100%; altura: 100%; color de fondo: # 292A2B; frontera: ninguna; radio del borde: 2px; esquema: ninguno; cursor: puntero; imagen de fondo: url ('share.png'); repetición de fondo: no repetición; posición de fondo: centro; tamaño de fondo: 70%; #shareBox> button :: after position: absolute; contenido: "; borde superior: 10 píxeles sólidos # 292A2B; borde izquierdo: 10 píxeles sólidos transparentes; borde derecho: 10 píxeles sólidos transparentes; izquierdo: 5 píxeles; arriba: 30 píxeles; 4. Añadir controladores de eventos con JS
Pasando a JavaScript, necesitamos agregar controladores de eventos Para el ratón hacia abajo y mouseup eventos a captura el principio y el final de la seleccion de texto.
También puedes hacer investigación para otros eventos de selección como inicio selecto y usarlos en lugar de eventos del mouse (Lo que sería ideal pero hasta el momento el soporte de su navegador no es muy bueno).
también añadir una referencia al elemento usando el querySelector () método.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); function onMouseDown () function onMouseUp () 5. Borrar selecciones anteriores
En el ratón hacia abajo evento, vamos realizar un poco de limpieza, es decir, borrar cualquier selección previa y el menú de acción correspondiente.
function onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); los getSelection () método devuelve un Selección objeto representando los rangos de texto seleccionado actualmente por el usuario y el removeAllRange () métodoelimina todos los rangos de la misma Selección objeto, asi borrando cualquier selección previa.
6. Muestra el menú de acciones.
Es durante el mouseup evento, cuando estemos confirmar si se realizó una selección de texto y tomar mas medidas.
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") // se seleccionó texto en el artículo
Obtener la cadena de texto seleccionada llamando al Encadenar() método de la Selección objeto. Si el texto seleccionado no está vacío, siga adelante y obtener el primer rango desde el Selección objeto.
Distancia es el porción seleccionada del documento. Típicamente, los usuarios harán una selección única solo, no múltiple (presionando la tecla ctrl / cmd), así que solo obtenga el primer objeto de rango (en el índice 0) de la selección usando getRangeAt (0).
Una vez que tenga el rango, vea si la selección comenzó desde un lugar que es dentro del articulo. los startContainer propiedad del rango devuelve el nodo DOM de donde comenzó la selección.
A veces (cuando seleccionar dentro de un párrafo), su valor es solo un nodo de texto, en cuyo caso es elemento padre estarán y el padre de la el elemento será (en el código de muestra en esta publicación).
Otras veces, cuando seleccionas a través de varios párrafos, la startContainer estarán y su nodo padre será . Por lo tanto, la dos comparaciones en el segundo Si Condición en el código anterior.
Una vez el Si la condición pasa, es hora de buscar el menú de acción Desde la plantilla y agregarlo al documento.. Coloque el código debajo dentro del segundo Si declaración.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
los importNode () método Devuelve nodos desde documentos externos. (en nuestro caso, nodos de ). Cuando se llama con el segundo parámetro (cierto), el elemento / nodo importado vienen con sus elementos hijos.
Puede insertar #shareBox en cualquier parte del cuerpo del documento, Lo he añadido antes del elemento plantilla..
7. Coloca el menú de acciones.
Queremos colocar el menú de acción. justo encima Y en el medio del área seleccionada. Para hacerlo, obtener los valores del rectángulo del área seleccionada usando el getBoundingClientRect () Método que devuelve el tamaño y la posición de un elemento..
Luego, actualice el parte superior y izquierda valores de #shareBox basado en los valores del rectángulo. En los cálculos de los nuevos. parte superior y izquierda valores, hice uso de ES6 plantillas literales.
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. Añadir funcionalidad
Ahora que agregamos el menú de acción cerca del texto seleccionado, es hora de hacer el texto seleccionado disponible para las opciones de menú para que podamos realizar alguna acción en él.
Asignar el texto seleccionado a una propiedad personalizada del botón compartir llamado 'shareTxt' y agrega un ratón hacia abajo oyente del evento al botón.
var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); los cierto parámetro de addEventListener () previene el ratón hacia abajo evento de burbujeo.
Dentro de onShareClick () manejador de eventos, nosotros inserta el texto seleccionado en un tweet accediendo a la shareTxt propiedad del botón.
funcion onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Una vez el se hace clic en el botón, hace lo que se supone que debe hacer y luego se elimina de la página. También lo hará Borrar cualquier selección en el documento.
Código fuente y demo
En la demostración de Codepen a continuación, puede prueba Cómo funciona el menú de acción. También puedes encontrar el código fuente completo en nuestro repo de Github.
