[annotator-dev] linking to annotations within annotated document
Ben Leinfelder
leinfelder at nceas.ucsb.edu
Wed Mar 4 04:37:36 UTC 2015
Hi Shauna,
I probably should have given more context for that code snippet to save you some confusion. Instead of polling the page for the annotations to load (yikes!), you should subscribe to annotator's 'annotationsLoaded' event and then do the rest of your work with the annotations (which will be loaded at that point and the highlights with div ids created, etc):
$('someDiv').annotator('subscribe', 'annotationsLoaded', doSomethingWithTheAnnotations);
Where doSomethingWithTheAnnotations is a function that you define that, uh, does whatever you want to the annotations on the page.
Hope that helps simplify things,
-ben
On Mar 2, 2015, at 8:13 PM, Shauna Gordon-McKeon <shaunagm at gmail.com> wrote:
> 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
>
>
More information about the annotator-dev
mailing list