[annotator-dev] How do I change an annotations colour?

Fri Jun 3 18:55:09 UTC 2016

You might want to look at my Categories plugin. It's for the 1.x branch, 
but it adds new classes to highlights, which I then provide custom 
colors for via a new stylesheet:

https://github.com/PoeticMediaLab/Annotator-Categories

I haven't done any development on the 2.x branch yet, but I suspect 
adding classes to the highlight spans is pretty similar.

Mike

On 6/3/16 11:41 AM, Walker, Bernard wrote:
>
> If anyone is curious / looking for a way to do this, my solution to 
> this was to modify the highlighter.js file; specifically the method 
> highlightRange. I added the following code:
>
> if(annotation.hasOwnProperty('color')){
>
>                 hl.style.background = annotation.color;
>
> }
>
> Additionally, I included this function when loading annotator:
>
> function() {
>
>                 return {
>
> beforeAnnotationCreated: function (annotation) {
>
> annotation.color = currentlySelectedColour;
>
>                                 }
>
>                 };
>
> }
>
> I rebuilt annotator and used this new build.  If there is a better 
> way, I’d like to hear suggestions, but this works fine for my purposes.
>
> *From:*annotator-dev [mailto:annotator-dev-bounces at lists.okfn.org] *On 
> Behalf Of *Walker, Bernard
> *Sent:* Friday, June 03, 2016 8:04 AM
> *To:* 'Randall Leeds'; annotator-dev at lists.okfn.org
> *Subject:* Re: [annotator-dev] How do I change an annotations colour?
>
> Modifying/overriding the “.annotator-hl” stylesheet isn’t what I’m 
> looking to do.  I was hoping to give individual annotations specific 
> colours.
>
> For example, annotations by Bob could appear in blue, whereas 
> annotations by Milton could be red.  Another possible usage scenario 
> would be to give priorities to annotations via their colour.  Red 
> being the most important annotations on the page and so on.
>
> I have determined that I can get all the currently existing annotation 
> elements on a page document.getElementsByClassName(.annotator-hl).  I 
> can iterate through this list and assign the colour based upon the 
> data-annotation-id for that annotation element.
>
> The above approach works, but I do not know when to do it.  The 
> annotationCreated event fires after my annotation has been sent to the 
> storage, but before it is drawn on the page – I cannot apply the 
> colour to the annotation as it is not a page element yet, and thus 
> cannot be found.  The annotationsLoaded event fires after I have 
> fetches the annotations from storage, but before they are elements on 
> the page.
>
> Is there some way to get a list of all the annotations from storage?  
> I could possibly use a ‘then’ to apply the colour to the annotation 
> elements after the app.annotations.load() promise completes?
>
> Suggestions are welcome.
>
> *From:*Randall Leeds [mailto:randall at bleeds.info]
> *Sent:* Friday, June 03, 2016 12:19 AM
> *To:* Walker, Bernard; annotator-dev at lists.okfn.org 
> <mailto:annotator-dev at lists.okfn.org>
> *Subject:* Re: [annotator-dev] How do I change an annotations colour?
>
> Trivial or not depends on your goals.
>
> Presently, there is not a way to specify an inline style, though it 
> could be added.
>
> Annotator uses its own, external stylesheet.
>
> Whether the stylesheet or an inline style is appropriate depends on 
> the environment.
>
> Being able to set a custom class on a particular highlight span would 
> also be an acceptable enhancement to enable more granular styling.
>
> If your need is simply to change the color of all highlights, you can 
> modify the CSS to change the ".annotator-hl" class styles, or leverage 
> the manner in which stylesheets augment and override to provide 
> different styles for that class in your own, external or embedded 
> stylesheet.
>
> On Thu, Jun 2, 2016, 07:30 Walker, Bernard <Bernard.Walker at lsec.dnd.ca 
> <mailto:Bernard.Walker at lsec.dnd.ca>> wrote:
>
>     I am currently using Annotator 2.x, and I’m trying to change the
>     colour of an annotation.  The only listing of the annotation
>     format I can find is for the 1.2 version
>     (http://docs.annotatorjs.org/en/v1.2.x/annotation-format.html).
>     Nowhere in that format do I see a way to specify the colour. 
>     Annotorious has a style field; does the 2.X version of Annotator
>     have something similar?
>
>     One would assume this would be trivial?
>
>     Bernard Walker, MSc.
>
>     Land Software Engineering Centre (LSEC)
>
>     Senior System Software Analyst - ICE
>
>     Phone 613-995-5627
>
>     Cha toir a’bhòidhchead goil air a’ phoit.
>
>     _______________________________________________
>     annotator-dev mailing list
>     annotator-dev at lists.okfn.org <mailto:annotator-dev at lists.okfn.org>
>     https://lists.okfn.org/mailman/listinfo/annotator-dev
>     Unsubscribe: https://lists.okfn.org/mailman/options/annotator-dev
>     <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