El ciervo y el cazador
El ciervo fue una vez ...
...
es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores
Cómo crear un menú de acción flotante similar a medio
La popularidad de los menús de acción flotante ha ido en aumento, especialmente desde que Medium.com puso la función en boga. En resumen, el menú de acción flotante aparece cuando selecciona 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, le 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 les permitirá a los usuarios enviar tweets a sus seguidores.
1. Crea el HTML El HTML inicial es simple, solo necesitamos un texto que el usuario pueda seleccionar. Para la demostración, usaré el cuento "The Hart and the Hunter" como texto de muestra .
2. Crea la plantilla de menú de acciones
Estoy agregando el código HTML que pertenece al menú de acción dentro de un elemento . Lo que sea que esté dentro del etiqueta, no será procesada por los navegadores hasta que se agregue al documento mediante JavaScript .
No deje ningún espacio innecesario dentro del etiqueta, ya que podría alterar el diseño del menú de acción una vez que se inserta en el documento. Si lo desea, agregue más botones dentro de #shareBox para obtener más opciones.
3. Crea el CSS
El CSS para el #shareBox línea #shareBox es el siguiente:
#shareBox {ancho: 30px; altura: 30px; posición: absoluta; } La position:absolute; La regla nos permitirá colocar el menú donde queramos en la página.
También #shareBox botón de acción dentro de #shareBox con un color de fondo e imagen y en su ::after pseudo-elemento agregué un triángulo para una flecha hacia abajo .
Botón #shareBox> {ancho: 100%; altura: 100%; color de fondo: # 292A2B; borde: ninguno; radio del borde: 2px; esquema: ninguno; cursor: puntero; background-image: url ('share.png'); background-repeat: no-repeat; posición de fondo: centro; fondo de tamaño: 70%; } #shareBox> button :: after {position: absolute; contenido: ''; borde superior: 10px sólido # 292A2B; border-left: 10px sólido transparente; borde-derecha: 10px sólido transparente; izquierda: 5px; arriba: 30px; } 4. Agregue controladores de eventos con JS
Pasando a JavaScript, necesitamos agregar manejadores de eventos para los eventos mousedown y mouseup para capturar el comienzo y el final de la selección de texto.
También puede investigar otros eventos de selección, como el selectstart y usarlos en lugar de los eventos del mouse (lo que sería ideal, pero hasta el momento su soporte para navegadores no es muy bueno).
También agregue una referencia al elemento utilizando el método querySelector() .
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); función onMouseDown () {} función onMouseUp () {} 5. Borrar selecciones previas
En el evento mousedown, realizaremos algunas tareas de limpieza, es decir, mousedown 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 (); } El método getSelection() devuelve un objeto Selection que representa los rangos de texto actualmente seleccionados por el usuario y el método removeAllRange() elimina todos los rangos del mismo objeto Selection, borrando así cualquier selección previa .
6. Mostrar el menú de acción
Es durante el evento mouseup, cuando confirmaremos si se realizó una selección de texto y tomaremos medidas adicionales.
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ó algún texto en el artículo}}} Obtenga la cadena de texto seleccionada llamando al método toString() del objeto Selection . Si el texto seleccionado no está vacío, avance y obtenga el primer rango del objeto Selection .
El rango es la parte seleccionada del documento. Normalmente, los usuarios harán una sola selección, no múltiple (presionando la tecla ctrl / cmd), así que simplemente 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 está dentro del artículo . La propiedad startContainer del rango devuelve el nodo DOM desde donde comenzó la selección .
A veces (cuando selecciona dentro de un párrafo ), su valor es solo un nodo de texto, en cuyo caso su elemento padre será
y el padre de la
elemento será
Otras veces, cuando selecciona en varios párrafos, el startContainer será
y su nodo padre será if en el código anterior.
Una vez que se aprueba la condición if, es hora de buscar el menú de acciones desde la plantilla y agregarlo al documento. Coloque el código debajo dentro de la segunda declaración if .
document.body.insertBefore (document.importNode (temp.content, true), temp);));
El método importNode() devuelve nodos de documentos externos (en nuestro caso, nodos de ) Cuando se invoca con el segundo parámetro ( true ), el elemento / nodo importado vendrá con sus elementos secundarios .
Puede insertar #shareBox en cualquier lugar del cuerpo del documento, lo he agregado antes del elemento de la plantilla.
7. Coloque el menú de acción
Queremos colocar el menú de acción justo arriba y en el medio del área seleccionada . Para hacerlo, obtenga los valores rectangulares del área seleccionada utilizando el método getBoundingClientRect() que devuelve el tamaño y la posición de un elemento.
A continuación, actualice los valores top e left de #shareBox basado en los valores del rectángulo . En los cálculos de los nuevos valores top e left, hice uso de literales de plantilla de 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. Agregar funcionalidad
Ahora que hemos agregado el menú de acciones cerca del texto seleccionado, es hora de hacer que el texto seleccionado esté disponible para las opciones del menú, de modo que podamos realizar alguna acción en él.
Asigne el texto seleccionado a una propiedad personalizada del botón para compartir llamado 'shareTxt' y agregue un mousedown eventos mousedown al botón.
var shareBtn = shareBox.querySelector ('botón'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); El parámetro true de addEventListener() impide que el evento mousedown .
Dentro del controlador de eventos onShareClick(), insertamos el texto seleccionado en un tweet accediendo a la propiedad shareTxt del botón.
function onShareClick () {window.open (`https://twitter.com/intent/tweet?text=$ {this.shareTxt}`); this.remove (); document.getSelection (). removeAllRanges ()} Una vez que se hace clic en el botón, hace lo que se supone que debe hacer, luego se elimina de la página. También borrará cualquier selección en el documento.
Código fuente y demostración
En la demostración de Codepen a continuación, puede probar cómo funciona el menú de acción. También puede encontrar el código fuente completo en nuestro repositorio de Github.
20 diseños de invitación para eventos que impresionarán a tus invitados
Desde fiestas a la parrilla hasta bodas y cumpleaños, una tarjeta de invitación es casi tan esencial como el evento en sí. Aunque puede simplemente crear un evento en Facebook, enviar correos electrónicos personalizados o llamar a personas por teléfono . Sin embargo, en nuestro mundo digitalmente desordenado, se siente bastante especial recibir una invitación en papel de la vieja escuela por correo ordinario .Las t
28 Tutoriales de efectos de texto frescos de Photoshop
Gracias a la generosidad de los diseñadores gráficos, hemos presentado más de 150 tutoriales de efectos de texto en Photoshop en el pasado para que disfrutes diseñando tipografías muy divertidas para uso divertido o profesional. Sin embargo, estamos muy conmocionados al ver que más y más tutoriales de efectos de texto de calidad surgieron durante estos meses, por lo que decidimos no solo darle un escaparate, sino impresionarlo con una colección de tutoriales de Photoshop con efectos de texto de muy alta calidad. ellos
Artículos De Interés
