Regions: allow overriding of css styles of region div and handle divs.

[rewbs]

Short description

Allows for general CSS overrides for regions and their handles.

While this allows for a wide range of customisations, my immediate use-cases for adding this were:

• Creating wider handles
• Setting the z-offset to ensure some regions are always rendered "above" others.

It's very possible I missed a way to do this with existing code. I'm also conscious that you might not want to allow arbitrary CSS overrides, in favour of more controlled options or custom HTML elements (as is done for the region content).

Implementation details

Added additional fields to region params which are overlayed onto CSS options for the relevant divs on creation.

How to test it

Specify custom overrides as part of region params and ensure they render.

Screenshots

wavesurferPatch.mov

Checklist

Sorry, no tests yet – if there's consensus this is a good approach I'll happily help put tests together. :)

• This PR is covered by e2e tests
• It introduces no breaking API changes

[katspaugh]

Hey @rewbs, thanks for the PR!

Technically regions are already styleable via CSS as demonstrated here: https://wavesurfer.xyz/examples/?styling.js

Although it's not entirely the same as passing styles in JS, it's still pretty flexible. You can, for example, give a region an id, and use that to set a custom z-index. In the example I linked, the region with the id region-green is given custom styles this way.