Multiple instances of annotator

[stanbellcom]

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

[AndersonTaborga]

I'm going through the same problem =/

[arjun-pp]

Facing the same issue. Please fix.

[melissajeon]

Hi @stanbellcom , @AndersonTaborga , @arjun-pp ,

I'm stuck, facing the same issue too. Have anybody found a way around it? Please share. Thanks.

[rossiter10]

Here's what I did that seemed to resolve the issue. Basically instead of adding a new button to the DOM with every instance, just look for an existing button and use that one for all instances of the plugin.

So in Touch.prototype._setupControls(), swap this line: this.controls = jQuery(this.template).appendTo("body");

with this block:

if (jQuery('.annotator-touch-widget.annotator-touch-controls').length > 0) {
    this.controls = jQuery('.annotator-touch-widget.annotator-touch-controls'); //use existing button
}
else {
    this.controls = jQuery(this.template).appendTo("body"); //no button yet, add one
}

Hope this helps!

[melissajeon]

Hi @rossiter10

Thank you so much for sharing. It works!

[melissajeon]

Hi @stanbellcom , @AndersonTaborga , @arjun-pp , @rossiter10

I just found that in _onHighlightTap function it's calling event.currentTarget multiple times every time I called the destroy and load annotator.

Let's say I have 2 tabs and each tab have one passage for each annotator. If I click on the 2nd tab then destroy the annotator for the 1st tab and initiate an annotator for the current tab [2nd tab] - the event.currentTarget value is increment for another tab.

Refer to the screenshot, the same annotation is called multiple times when I switch between the tab and after which it would not work anymore as it showing #document...

Where is this hide method referring to?

Touch.prototype.pluginDestroy = function() { if (this.controls) this.controls.remove(); if (this.highlighter) this.highlighter.disable(); if (this.annotator) { return this.annotator.editor.unsubscribe("hide", this._watchForSelection); // hide? } };

return this.annotator.editor.unsubscribe("hide", this._watchForSelection);

I am suspecting the destroy method is not called on touch devices. This problem doesn't happen on desktop/pc only on touch devices.

Is there any way I can manually call the destroy method for on touch devices only?