webclip
v0.1.1 popclip medium popup tooltip
WebClip
Plugable popup in browser. Inspired by PopClip and Medium
Demo
http://djyde.github.io/WebClip
Installtion
$ npm install webclip
Usage
import WebClip from 'webclip'
let webclip = new WebClip(document.querySelector('#your-container'))
const google = {
name: 'Google',
description: 'Search on Google',
action(value) {
// `value` is the selected content
window.open(`https://www.google.com.hk/#safe=strict&q=${value}`)
}
}
const bing = {
name: 'Bing',
description: 'Search on Bing',
action(value) {
window.open(`http://bing.com/search?q=${value}`)
}
}
webclip.use([google, bing])
WebClip will pass the Range in action(). You can use it to do a lot, such as wrapping a highlight wrapper:
const highlight = {
name: 'highlight',
description: 'Highlight content',
action(value, range) {
const $highlight = document.createElement('span')
$highlight.style.backgroundColor = 'rgba(92,255,160,.5)'
// or just add a class
// $highlight.classList.add('your-class')
range.surroundContents($highlight)
}
}
webclip.use([highlight, google, bing])
You can config a font-awesome icon for a plugin, instead of the uppercase-first-character:
const highlight = {
name: 'highlight',
description: 'Highlight content',
icon: 'pencil',
action(value, range) {
const $highlight = document.createElement('span')
$highlight.style.backgroundColor = 'rgba(92,255,160,.5)'
// or just add a class
// $highlight.classList.add('your-class')
range.surroundContents($highlight)
}
}
const remove = {
name: 'remove',
description: 'Remove content',
icon: 'trash',
action(value, range) {
range.deleteContents()
}
}
webclip.use([highlight, remove, google, bing])
License
MIT License