aron / annotator.touch.js

Touch device support for Annotator

Touch Annotator Plugin

A plugin for the OKFN Annotator that improves the usability of the tool on touch devices. It has been tested on the following devices.

• iPhone running iOS 5
• iPad running iOS 5
• Samsung Galaxy Tab running Android 3.2
• Android Emulator running Android 4

There is a demo available online.

Usage

The plugin requires the annotator.js and annotator.css to be included on the page. See the annotator Getting Started guide for instructions then simply include the annotator.touch.js and annotator.touch.css file in your page. These can be downloaded from the GitHub releases page.

<link rel="stylesheet" href="./annotator.css" />
<link rel="stylesheet" href="./annotator.touch.css" />
<script src="./jquery.js"></script>
<script src="./annotator.js"></script>
<script src="./annotator.touch.js"></script>

Then set up the annotator as usual calling "addPlugin".

jQuery('#content').annotator().annotator("addPlugin", "Touch");

Options

There are a few options that can be provided to the "addPlugin" call.

jQuery('#content').annotator().annotator("addPlugin", "Touch", {
  force: true,
  useHighlighter: true
});

• force: Forces the touch controls to be loaded into the page. This is useful for testing or if the annotator will always be used in a touch device (say when bundled into an application).
• useHighlighter: Some touch devices do not allow the browser access to the selected text using window.getSelection(). highlighter.js is provided in the /vendor/ directory to try and address this issue. If you wish to use this feature it needs to be manually enabled (as it can't be feature detected). Include the script in your page and set this option to true.

Example

The example.html file provided gives a demo of the plugin in action. The various options can be toggled by adding query string parameters.

For example http://localhost:8000/example.html?force&highlighter:

• force: Enable the plugin on desktop browsers.
• highlighter: Use the highlighter.js fallback.

Development

If you're interested in developing the plugin. You can install the developer dependancies by running the following command in the base directory:

$ npm install

Development requires node and npm binaries to be intalled on your system. It has been tested with node --version 0.10.7 and npm --version 1.2.21. Details on installation can be found on the node website.

Run the local server:

$ make serve

Then visit http://localhost:8000 in your browser.

There is a Makefile containing useful commands included.

$ make serve # serves the directory at http://localhost:8000 (requires python)
$ make watch # compiles .coffee files into lib/*.js when they change
$ make build # creates compiled JavaScript and CSS in the pkg directory
$ make pkg   # creates a zip file of production files

Repositories

The development branch should always contain the latest version of the plugin but it is not guaranteed to be in working order. The master branch should always have the latest stable code and each release can be found under an appropriately versioned tag.

Testing

Unit tests are located in the test/ directory and can be run by visiting http://localhost:8000/test/index.html in your browser.

Frameworks

The plugin uses the following libraries for development:

• Mocha: As a BDD unit testing framework.
• Sinon: Provides spies, stubs and mocks for methods and functions.
• Chai: Provides all common assertions.

License

This plugin was commissioned and open sourced by Compendio.

Copyright 2012, Compendio Bildungsmedien AG Neunbrunnenstrasse 50 8050 Zürich www.compendio.ch

Released under the [MIT license][#license]

annotator.touch.js's Issues

Related stackoverflow question with bounty

http://stackoverflow.com/questions/37956213/how-can-i-stop-my-page-from-scrolling-when-i-annotate-on-a-touch-device

Creating new annotations is not posting to the store

I'm using the touch plugin in addition to the standard annotator store plugin. With the touch plugin enabled, I am able to edit and delete existing annotations.

I am unable to create new annotations, though. In my browser's developer tools, I can see that there is no POST going to the server. Do you have any idea why the POST call is not happening?

I've tried this using various combinations of:

• annotator/master
• annotator v1.2.7
  and
• annotator.touch.js/master
• annotator.touch.js.1.0.1

And I've tried with the 'force' option as well as on an actual touch device.

Thanks,
Rouan

[iPad]: Injecting annotator inside iframe

I have an application that uses iframe to show contents in epub's format.
In every page I need to inject the file into the book to enable the annotations. In Android it works fine, but in iOS, when I select the text and press the button to annotate, it simply not showing the textarea.

In the code, I found that in a feel seconds before the _onAdderTap method is triggered, the 'range' property becomes null and the method cannot do it's work.

Any ideas for solving it?

Annotator Touch with offline

How do I use this with Annotator Offline? I tried importing Annotator offline but it throws an error saying that Highlighter or Annotator is not defined.

Undefined is not a function on line (6)

Hi.
In accordance with title.

This is my code:

<head>
    <link rel="stylesheet" href="css/annotator.min.css"/>
    <link rel="stylesheet" href="css/annotator.touch.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/annotator-full.min.js"></script>
    <script type="text/javascript" src="js/annotator.touch.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function()
        {
            var ann = jQuery("body").annotator();
            ann.annotator("addPlugin","Touch");
        });         
    </script>
</head>
    <div>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet 
    </div>

Any suggest?

Issue: Annotate button is not shown in Firefox

1. Select a word
2. Click "Annotate"
3. Click "Cancel"
4. Select the same word again
5. Annotate button is not shown as exxpected

tested on Firefox 11 (Ubuntu 11.04 with touch plugin enabled), Firefox Mobile 10.0.3 (Sony Tablet S - Android 3.2.1 )

bootstrap problem

When the pluggin is load with bootstrap this doesn't work

Not possible to add a new annotation inside an old annotation on the iPad

If I try to add a new annotation inside of an old annotation on desktop it's working properly but on the Ipad (or with ?force) it's not.
When I click on the "Annotate"-button, nothing happens.
I've made a screenshot to explain it better.

Need your help! :)

Uncaught TypeError: Cannot read property 'escape' of undefined

Uncaught TypeError: Cannot read property 'escape' of undefined - annotator.touch.min.js:6

I have jquery loaded before this plugin.

Is there anything I can do to fix this error?

Annotating the same place twice

Hi,

With annotator.js I was able to annotate the same section twice with two different annotations. But when using the touch version it doesn't seem to be possible to do this, is there a work around for this?

Noob question: compability latest annotator

Compiled the latest annotator from source because I'm in dire need of the destroy function.
It works together with the latest compile from Annotator Touch, except for a couple items:
_When canceling a selection the text becomes highlighted.
_And the store plugin doesn't seem to push the highlighted text.

Will this soon be resolved?
I'm not skilled enough yet to fix this issue.
Or can I get some pointers as to where and how?

Any help would be highly appreciated.

Multiple instances of annotator

For some reasons it is not possible to initiate the touch plugin for several instances of annotator.

Steps to reproduce:

1. Create test page with two divs

<div class="to-annotate">
some text
</div>
<div class="to-annotate">
some other text
</div>

1. Attach annotator and touch plugin

    jQuery('.to-annotate').annotator().annotator("addPlugin", "Touch", {
                force: true,
                useHighlighter: false
            });

1. Adding notes to second div is impossible. Reason for that is that when selection is made, both of the ANNOTATE button is shown (for each of the divs) and when clicked ONLY the first button is receives the events.
   The second button does not receive the event because it's being overlapped by the first one

How to make it compatible with iPhone 6 and 6 plus?

I have used your plugin inside my pub reader. I don't know much about css, can u please tell me the components i need to change for making dialog box appear inside my iPad or iPhone screen. Right now when I'm tapping on annotate button it is popping out the edit box larger than the screen itself! How to fix it?

Thanks in advance!

Port the plugin to Annotator 2

Hi, guys.
Somebody can guide me to port the plugin to the v2 alpha 3 version of Annotator?