Customizable Popover On Text Selections – Selection-js

Category: Javascript , Text | May 30, 2018
Author:prateekkalra
Views Total:905 views
Official Page:Go to website
Last Update:May 30, 2018
License:MIT

Preview:

Customizable Popover On Text Selections – Selection-js

Description:

Yet another JavaScript plugin to create a popover that displays on the top of your text selection.

Ideal for creating a social share popover that enables your users to share their text selections to social networks.

Also can be used as an inline editor that lets your users edit text selections.

See also:

Default popover items:

  • Twitter share link.
  • Facebook share link.
  • Search on Google.
  • Copy link.
  • Speak link.

How to use it:

Insert the minified version of the Selection-js library at the bottom of the webpage.

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

Initialize the Selection-js library to enable the Popover on all text selections within the document.

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

Config the 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
  
})

Add your own links to the popover as these:

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>'
}

Changelog:

05/30/2018

  • Some changes

You Might Be Interested In:


Leave a Reply