webclip's Introduction

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

webclip's People

Contributors

Stargazers

Watchers

webclip's Issues

Not working in FF 46.0.1 @ OSX El Capitan

Demo not worked in FF, just in Google Chrome

How to use with Browserify

I'm using Browserify to load webclip and build my js bundle. All is working, no errors but the action function is never called when text is selected. Can you provide any advice? Thanks in advance.

Here's my code:

"use strict";

var WebClip = require("webclip");
var clip;

module.exports = {
  //ui/share.js

  initialize: function() {
    var transcript = document.querySelector(".transcript");
    console.log("share init");

    //setup sharing feature
    if (transcript) {
      var search = {
        name: "Search",
        description: "Search this site",
        icon: "search",
        action: function(value) {
          location.href = "/search/?q=" + value;
        }
      };

      clip = new WebClip(transcript);
      clip.use(search);
    }
  }
};

Recommend Projects