Run javascript after annotations have been highlighted?

[tomcritchlow]

Hey, I have hypothesis embedded on my blog website. I'm trying to style the annotations so that they have a little comment icon next to them (to better signal to readers that yellow highlight = annotation).

I have some code like this:

var ps = document.getElementsByTagName("p");
for(var i = 0; i < ps.length; i++){
  if(ps[i].querySelector("hypothesis-highlight") !== null){
    var clone = commenticon.cloneNode(true);
    ps[i].prepend(clone);
  }
}

Which adds a commenticon div next to the annotation highlight.

My question: how do I run this function only after the highlights have finished loading? Is there a callback or something I can hook into?

Thanks

[kael]

My question: how do I run this function only after the highlights have finished loading? Is there a callback or something I can hook into?

MutationObserver should be of help.

[kael]

style the annotations so that they have a little comment icon next to them (to better signal to readers that yellow highlight = annotation).

You could also use the CSS ::before pseudo-element with an emoji or a background image.