[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-0003.html>
More information about the annotator-dev
mailing list