Customizable Popover On Text Selections – Selection-js

Preview:

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:

• Medium Style Text Selection Sharing Library – share-this
• Text Selection Popup With Pure JavaScript
• Medium Inspired Floating Popup For Selected Text – WebClip
• Medium Style Inline Rich Text Editor – Medium Editor
• Share Selected Text On Twitter And Facebook – sharect.js

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