Git Product home page Git Product logo

annotator's Introduction

Annotator

Popover that lets you highlight, share, add notes and tags to any selected text on a page

Requires jQuery to be loaded on the page. Autocompletion (for tags) requires awesomplete.js

Demo

Annotator Screenshot

Getting started
    var annotator = Object.create(Annotator);
    annotator.init({
        containerElement: "#book",
        annotations: annotations, // Serialized annotations
        existingTags: tags, // Array of tags
    });
    annotator.startListening();
TODO
  • AJAX call to save annotation to server
  • Write tests
Development
npm install
bowser install

gulp

Visit http://localhost:8080/

bharanim / dvnc

annotator's People

Contributors

bharani91 avatar

Stargazers

liuchen avatar Pony avatar Aaronphy avatar Henry Li avatar BuWenGuiQi_ avatar Luyuan avatar avatar Ting Yu Chen avatar RiverRunning avatar Moyi avatar Lynn avatar BeiXiao avatar Duo avatar avatar avatar 翟宇鑫 avatar avatar Andyfoo avatar avatar leeton avatar Jax avatar LiJianying avatar Hancel Lin avatar Md. Nur Alam avatar avatar Summer avatar FoxShuang avatar Joemar Tagpuno avatar Jose Alberto Esquivel avatar Daniel W. Hieber avatar Harvey Kandola avatar arkii avatar Alexey Pyltsyn avatar The avatar avatar Mo avatar Hiten Sharma avatar avatar avatar Marawan avatar Liz Krane avatar avatar Wenxuan avatar Roe Greene avatar avatar takumirie avatar avatar Yang Zhang avatar 孙茂胤 (Sun, Maoyin) avatar Alexandre Collin avatar Ravi avatar Jason Davis avatar 范晓 avatar Emily Martinez avatar vizavi21 avatar Emmanuel Château-Dutier avatar Per Størup Lauridsen avatar Alex Boorman avatar avatar Gruber avatar Humanismusic avatar kazaff avatar 虚梦浮华 avatar avatar Anatoly Tarnavsky avatar avatar Waseem avatar Kostas Minaidis avatar Greg McClure avatar Cary Dunn avatar Angus H. avatar avatar Alexander Khlebnikov avatar Fernando Sánchez avatar avatar avatar avatar Yury Tsukerman avatar avatar Giovanni Pensa avatar Adrian Badiu avatar Andrii Gubanov avatar emawebdesign avatar Nicolas Ramy avatar agz deberny gomes avatar avatar Daniel Lewandowski avatar Jonathan Mendes avatar NoDesireMonk avatar Arpit Shah avatar Joohun, Maeng avatar TheKnarf avatar Michał Świtoń avatar avatar Shrutesh avatar Caleb Sylvest avatar Sergio Araki avatar Marcus Relacion avatar Betul avatar Vadym Okun avatar

Watchers

Jason Davis avatar 情封 avatar kazaff avatar James Cloos avatar avatar Per Størup Lauridsen avatar Sathish Pammi avatar avatar avatar Thom Lee avatar

Forkers

rygbee shwetamatkar deberny umarmughal zerocoder1 fsanchezro outboundexplorer antrepo semtle saurya3579 suyilun ting-dev-coder

annotator's Issues

Show note on hover

Hello,

I just saw this awesome work! But i think it would be a nice idea to show the not on hover after you have created one.

What do you think?

[Feature Request] Separate View and Edit modes

I would like to have it where when viewing a page it can show the annotation without the color picker, text input, tag input, save button, etc!

Instead there would be a separate trigger to go into edit mode. Even if it was a tiny little spot on the view to click and go into edit mode.
Any thoughts?

I am thinking that maybe where it calls editor.showEditor(opts) it could either:

  1. have another function editor.showAnnotation(opts) and use a Flag variable in the app to determine if we are in Edit mode or View mode
  2. Instead of having another function similar to the editor.showEditor(opts) function. It could instead pass in the view mode into this existing function...
var mode = 'view'; // 'view' or 'edit'
editor.showEditor(opts, mode)`

And again have a Flag to set the current mode for the page.

When in view mode inside the function it can show the text inputs as <span> elements instead.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.