[annotator-dev] linking to annotations within annotated document

Shauna Gordon-McKeon shaunagm at gmail.com
Tue Mar 3 04:13:30 UTC 2015


Thanks for the code, Ben, it was an excellent starting point.  I altered it
a bit to suit my needs, and am attaching it below in case it's useful for
anyone.

The three main changes I made were:
- switched position() to offset(), since position() gets offset from parent
and offset() gets offset from the whole document
- wrapped the code in a function that checks for the existence of
data-annotation-id every quarter second, since even using document.ready()
the code was still getting called before the annotator had finished adding
things
- it now gets the id in question from an anchor (and checks that it's an
appropriate anchor)

~ Shauna

    // get ID from anchor
    hash = $(location).attr('hash').replace(/^#/, "");
    dai_start = hash.search("dai");  // returns -1 if dai not found

                if (dai_start > -1) {

                                id = hash.replace(/dai/g, "");
                                var highlight = $('[data-annotation-id=' +
id + ']');

                                function waitForElement(){ // Have to wait
until annotator.js adds data-annotation-ids
                                                if(highlight.length > 0){
                                                                // scroll
to the location in page
                                                                var
highlightLocation = highlight.offset();
                                                                $("html,
body").animate({ scrollTop: highlightLocation.top - 250 }, "fast");

                                                                // trigger
the hover event

highlight.trigger({

        type: "mouseover",

        pageY: highlightLocation.top,

        pageX: highlightLocation.left + highlight.width(),
                                                                });
                                                }
                                                else{

setTimeout(waitForElement,250);

highlight = $('[data-annotation-id=' + id + ']');
                                                }
                                }

                                waitForElement();

    }




On Thu, Feb 26, 2015 at 12:20 PM, Ben Leinfelder <leinfelder at nceas.ucsb.edu>
wrote:

> Hi Shauna,
> I did something similar to what you are after; using the 1.2.x codebase
> with data-annotation-id.
> In my case I wanted to mimic hovering on highlighted regions when a user
> clicked from a sidebar listing of all annotations (like a table of
> contents).
> This, of course, also meant scrolling to the location in the page so that
> the highlight and the hover would be visible.
>
> Here's the basic code for that using jQuery and such:
>
> // get the highlight element for your given annotation
> var highlight = $("[data-annotation-id='" + annotationId + "']");
>
> // scroll to the location in page
> var highlightLocation = highlight.position();
> $("html, body").animate({ scrollTop: highlightLocation.top - 50 }, "fast");
>
> //[optionally]  trigger the hover event if you want
> highlight.trigger({
>         type: "mouseover",
>         pageY: highlightLocation.top + 50,
>         pageX: highlightLocation.left + highlight.width() + 100,
> });
>
> Hope that helps,
> -ben
>
> On Feb 25, 2015, at 4:15 PM, Shauna Gordon-McKeon <shaunagm at gmail.com>
> wrote:
>
> > Randall: Sweet! Thanks for being so responsive.
> >
> > Mike: Is your code available somewhere?  Even if I don't end up using
> your method, it would be interesting to see how you solved the problem.
> >
> > On Wed, Feb 25, 2015 at 6:45 PM, Michael Widner <mikewidner at stanford.edu>
> wrote:
> > Hi Shauna,
> >
> > I looked for a similar solution in the 1.2.x branch and ended up writing
> my own code to scroll to an annotation and pop up the Viewer as part of a
> plugin that fires after annotations are loaded. It doesn't require adding
> ids to the spans, but instead just loads the first highlight from the
> selected annotation, then uses jQuery animate() to select the highlight's
> offset and scroll to it.
> >
> > Hope this helps.
> >
> > Best,
> >
> > Mike
> >
> > On 2/25/15 3:27 PM, Shauna Gordon-McKeon wrote:
> > Sounds great.  I'll hold off on messing with the annotator internals,
> then.  :)
> >
> > Do you have any kind of eta on when you'll have 1.2.10 published?  I'm
> not in a rush, but it would be good to have an estimate for planning
> purposes.
> >
> >
> >
> > On Wed, Feb 25, 2015 at 6:20 PM, Randall Leeds <tilgovi at hypothes.is
> <mailto:tilgovi at hypothes.is>> wrote:
> >
> >     Quick response.
> >
> >     I think you understood everything perfectly. As much as we'd like
> >     to have people testing out what will become Annotator 2.0, it's a
> >     bit different and not well documented yet, so I'm hesitant to
> >     suggest you move to that.
> >
> >     On the other hand, the 1.2.x branch had a change (almost a year
> >     ago!) to add a data-annotation-id attribute to the highlights.
> >     This seems to be exactly what we just discussed and what would
> >     work for you.
> >
> >     I'm going to try to publish v1.2.10 shortly since it's long
> >     overdue, which will have this change, and that should get you going.
> >
> >     Cheers!
> >
> >     On Wed, Feb 25, 2015 at 3:15 PM, Shauna Gordon-McKeon
> >     <shaunagm at gmail.com <mailto:shaunagm at gmail.com>> wrote:
> >
> >         Thanks for the quick reply.
> >
> >
> >
> >
> >             First question is whether you've built your own annotator
> >             from the source or if you've used a pre-packaged version.
> >             Since we haven't yet had a 2.0 release the code you linked
> >             to has not been published as a built annotator.js yet. If
> >             you've built it yourself from git, that's great and I'm
> >             really glad to see people kicking the tires on master. If
> >             you're working from a 1.2 series release, then the code is
> >             a bit different.
> >
> >
> >         I've been using the pre-packaged version.  It seems like
> >         there's no way to do what I want with the existing code, so it
> >         probably makes sense for me to try building from git.
> >
> >
> >
> >                 Do folks have any suggestions?  I'm new to JQuery and
> >                 pretty inexperienced with Javascript generally, so my
> >                 apologies if these are questions with obvious answers.
> >
> >
> >             I've stayed away from assigning ids to highlights because
> >             there is sometimes more than one highlight span associated
> >             with an annotation. This happens frequently when
> >             annotations overlap and the text needs to be split into
> >             several spans. Technically, there should only be one
> >             element with a given id on any page. Browsers are pretty
> >             tolerant, but I've nonetheless avoided adding ids for this
> >             reason.
> >
> >             However, it might be very reasonable to add another
> >             attribute. For instance, maybe using jQuery to select for
> >             a different attribute would make this work for you.
> >
> >             $('[annotation-id^=12345]')
> >
> >             or something like this.
> >
> >
> >         Are you suggesting that a new attribute, annotation-id, be
> >         added to span?  I think that's what you're saying, but I want
> >         to make sure we're on the same page.  If attribute-id got
> >         duplicated due to dicing and splitting of spans, that would be
> >         fine for my purposes -- I could easily use the first and
> >         ignore any subsequent ones.
> >
> >
> >             Unfortunately, that would not get the scroll-to behavior
> >             that having an id / anchor gets, where the URL can simply
> >             be set to #someid. However, since Annotator loads after
> >             the page is rendered this would not allow linking users
> >             directly to an annotation using the built-in browser
> >             support for anchors anyway. That may not be a concern,
> though.
> >
> >
> >         That would be the simplest way to do it, but it seems like one
> >         could link directly by using JQuery again, something like
> >         scrollIntoView?
> >
> >
> >             Hopefully, that helps explain the problem space a bit and
> >             gives you a sense of where to look next. If there's
> >             anything we can add to the highlighter to make this
> >             easier, I'd be glad to help with those modifications.
> >
> >
> >         It does help, thank you.  If an annotation-id was added to the
> >         highlighted spans, then I think I could create the
> >         functionality I need via a plugin. Without it, I'm not sure
> >         where I'd begin.
> >
> >         How would you like to proceed?  It seems like until 2.0 is
> >         released I'm going to have to build from git to get this
> >         functionality, so I might as well go ahead and do that.  I can
> >         take a stab at modifying the highlighter once I've done that,
> >         although I'm also perfectly happy to have you add it in - I
> >         bet you'd be much faster.  :)
> >
> >         - Shauna
> >
> >
> >
> >             Randall
> >
> >
> >
> >
> >
> >
> > _______________________________________________
> > annotator-dev mailing list
> > annotator-dev at lists.okfn.org
> > https://lists.okfn.org/mailman/listinfo/annotator-dev
> > Unsubscribe: https://lists.okfn.org/mailman/options/annotator-dev
> >
> > --
> > Michael Widner, Ph.D.
> > Academic Technology Specialist
> > Division of Literatures, Cultures, and Languages
> > Stanford University Libraries
> > Pigott Hall, Room 108
> > 450 Serra Mall
> > Stanford, CA 94305
> > t: 650-798-9485
> >
> >
> > _______________________________________________
> > annotator-dev mailing list
> > annotator-dev at lists.okfn.org
> > https://lists.okfn.org/mailman/listinfo/annotator-dev
> > Unsubscribe: https://lists.okfn.org/mailman/options/annotator-dev
> >
> > _______________________________________________
> > annotator-dev mailing list
> > annotator-dev at lists.okfn.org
> > https://lists.okfn.org/mailman/listinfo/annotator-dev
> > Unsubscribe: https://lists.okfn.org/mailman/options/annotator-dev
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.okfn.org/pipermail/annotator-dev/attachments/20150302/950a6472/attachment-0002.html>


More information about the annotator-dev mailing list