Popover personalizable en selecciones de texto-selección-JS

Vista prévia

Descripción

Sin embargo, otro plugin de JavaScript para crear un ventana emergente que se muestra en la parte superior de la selección de texto.

Ideal para crear un ventana emergente social share que permita a sus usuarios compartir sus selecciones de texto en las redes sociales.

También se puede utilizar como un editor en línea que permite a los usuarios editar selecciones de texto.

See also:

• biblioteca de uso compartido de la selección de texto de estilo mediano â & #128; & #147; Share-Esta
• selección de texto emergente con JavaScript puro
• elemento emergente flotante de inspiración media para el texto seleccionado â & #128; & #147; WebClip
• Editor de texto enriquecido en línea de estilo mediano â & #128; & #147; editor mediano
• comparte el texto seleccionado en Twitter y Facebook â & #128; & #147; sharect. js

Default popover items:

• Enlace compartido de Twitter.
• Enlace compartido de Facebook.
• Busca en Google.
• Copiar enlace.
• Hablar enlace.

Funcionamiento

Inserte la versión minimizada de la biblioteca Selection-JS en la parte inferior de la Página Web.

<script type="text/javascript" src="selection.min.js"></script>

Inicialice la biblioteca Selection-JS para habilitar el popover en todas las selecciones de texto dentro del documento.

var selection = new Selection();
selection.init();

Config el popover.

selection.config({


// enable/disable links

facebook: true,

twitter: true,

search:true,

copy:true,

speak:true,


// background color

backgroundColor: 'crimson',


// icon color

iconColor: '#fff',


// arrow size

arrowsize:0


})

Agregue sus propios links al ventana emergente como éstos:

const menu = {

twitter: true,

facebook: true,

search:true,

copy:true,

speak:true,

disable:false
}
const twitterConfig = {

url: 'https://twitter.com/intent/tweet?text=',

icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="selection__icon"><path d="M8.2,20.2c6.5,0,11.7-5.2,11.8-11.6c0-0.1,0-0.1,0-0.2c0-0.2,0-0.4,0-0.5c0.8-0.6,1.5-1.3,2.1-2.2c-0.8,0.3-1.6,0.6-2.4,0.7c0.9-0.5,1.5-1.3,1.8-2.3c-0.8,0.5-1.7,0.8-2.6,1c-1.6-1.7-4.2-1.7-5.9-0.1c-1.1,1-1.5,2.5-1.2,3.9C8.5,8.7,5.4,7.1,3.3,4.6c-1.1,1.9-0.6,4.3,1.3,5.5c-0.7,0-1.3-0.2-1.9-0.5l0,0c0,2,1.4,3.7,3.3,4.1c-0.6,0.2-1.2,0.2-1.9,0.1c0.5,1.7,2.1,2.8,3.9,2.9c-1.7,1.4-3.9,2-6.1,1.7C3.8,19.5,6,20.2,8.2,20.2"/></svg>'
}
const facebookConfig = {


url:'https://www.facebook.com/sharer/sharer.php?quote=',

 icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><path d="M20,2H4C2.9,2,2,2.9,2,4v16c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M18.4,7.4H17c-0.9,0-1,0.3-1,1l0,1.3 h2.1L18,12h-1.9v7h-3.2v-7h-1.2V9.6h1.2V8.1c0-2,0.8-3.1,3.1-3.1h2.4V7.4z"/></svg>'

}
const searchConfig = {

 url:'https://www.google.co.in/search?q=',

 icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><path d="M23.111 20.058l-4.977-4.977c.965-1.52 1.523-3.322 1.523-5.251 0-5.42-4.409-9.83-9.829-9.83-5.42 0-9.828 4.41-9.828 9.83s4.408 9.83 9.829 9.83c1.834 0 3.552-.505 5.022-1.383l5.021 5.021c2.144 2.141 5.384-1.096 3.239-3.24zm-20.064-10.228c0-3.739 3.043-6.782 6.782-6.782s6.782 3.042 6.782 6.782-3.043 6.782-6.782 6.782-6.782-3.043-6.782-6.782zm2.01-1.764c1.984-4.599 8.664-4.066 9.922.749-2.534-2.974-6.993-3.294-9.922-.749z"/></svg>'
}
const copyConfig = {

 icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><path d="M18 6v-6h-18v18h6v6h18v-18h-6zm-12 10h-4v-14h14v4h-10v10zm16 6h-14v-14h14v14z"/></svg>'
}
const speakConfig = {

 icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><path d="M16 11c0 2.209-1.791 4-4 4s-4-1.791-4-4v-7c0-2.209 1.791-4 4-4s4 1.791 4 4v7zm4-2v2c0 4.418-3.582 8-8 8s-8-3.582-8-8v-2h2v2c0 3.309 2.691 6 6 6s6-2.691 6-6v-2h2zm-7 13v-2h-2v2h-4v2h10v-2h-4z"/></svg>'
}

Registro de cambios

05/30/2018

• Algunos cambios