• Robert Knight's avatar
    Re-implement the sidebar's vertical toolbar · a4d8fa7f
    Robert Knight authored
    This commit re-implements the vertical toolbar on the left edge of the sidebar
    to make future changes to the toolbar UI easier (eg. some upcoming a11y changes)
    and to decouple it from the rest of the annotator application (the toolbar and
    `Sidebar`/`Guest` classes currently access each other's internals in a rather
    haphazard way).
    
    The new implementation has a similar code structure to the `Adder` toolbar that is
    shown when selecting text. It consists of:
    
     1. A Preact component in `src/annotator/components/toolbar`
        which renders the toolbar UI according to the current state
    
     2. A controller class in `src/annotator/toolbar.js` which renders the
        Preact component into a container element and has provides properties
        that the `Sidebar` and `Guest` classes can use to update its state.
    
        The controller takes only the container element and callbacks
        associated with each button as inputs, so it no longer calls methods
        on the Guest/Sidebar.
    
        The sidebar and guest now update the toolbar UI by setting properties
        on the toolbar controller, rather than using a mixture of manual
        manipulation of the toolbar DOM and publishing events which get
        eventually translated to method calls on the toolbar.
    
        If we convert the remainder of the sidebar UI from jQuery/manual DOM
        updates to Preact in future, then we can remove the toolbar
        controller entirely and just render the toolbar component from
        within the sidebar component.
    a4d8fa7f
toolbar.js 3.24 KB