Customize CSS classes in drawHandle

[AlexMili]

Hi, I need to customize the CSS of the starting/closing handle using BetterPolygon to apply a specific style. I did a POC here, do you think this something that could be added to Annotorious ?

[rsimon]

I'd approach it from a slightly different angle. The method should really just create the handle, IMO. Since it returns the SVG g element, the calling method can still attach custom CSS classes outside of the drawHandle method.

But regardless of this problem: I like the thought of being able to apply different styles to start and closing handles. Perhaps there should be default built-in behavior that attaches an extra a9s-first-handle and a9s-last-handle (or something like that)?

FWIW: as a workaround, you could also use CSS :first-child and :last-child selectors to apply custom styles I think.

[AlexMili]

Indeed another function adding the class would be better for consistency.

I would write something like that:

extraClass = (container, extraClasses) => {
    let newClass = container.className+ " ";

    if (typeof extraClasses == "string") {
        newClass += extraClasses;
    }
    else if (extraClasses instanceof Array) {
        newClass += extraClasses.join(" ");
    }

    container.setAttribute("class", newClass);
}

What do you think ?

Since I already have an opened PR, I don't think I can create a new one without the code of the previous one. Let me know if it is possible, I will gladly open a new one.