Hide-Away Side Panel with Toggle and Radio Buttons

Making a Collapsible Panel

PanelOpenButton opens and closes the wrapped panel when the “open button” is clicked.

let panel = new cpanel.Panel("panel")
panel.style = "Panel"
panel.appendToParent(document.getElementById("container"))

let openButton = new cpanel.PanelOpenButton(panel)
openButton.style = "PanelOpenButton"
openButton.appendToParent(document.getElementById("container"))

Making a Fixed-Width Panel

The panel has to be opened, since it is closed by default (in Panel.css)

let panel = new cpanel.Panel("panel")
panel.style = "Panel"
panel.appendToParent(document.getElementById("container"))
panel.open()

Button Categories

Adding a Toggle Button Category

let annotationCategory = new cpanel.ToggleButtonCategory("Annotation")
annotationCategory.addButton("Foo")
annotationCategory.addButton("Bar")
panel.addCategory(annotationCategory)

Adding a Radio Button Category

let frameCategory = new cpanel.RadioButtonCategory("Frame")
frameCategory.addButton("Foo")
frameCategory.addButton("Bar")
panel.addCategory(frameCategory)

Default Button State

let frameCategory = new cpanel.RadioButtonCategory("Frame")
frameCategory.addButton("Bar")
frameCategory.turnOnButton("Bar") //"Bar" button manually turned on
panel.addCategory(frameCategory)

JSON Button Change Listening

panel.addButtonChangeListener((change) => {
    console.log(change)
})

The resulting “change” is represented as an object literal:

{
    Annotation: ["Boo", "Foo"],
    Frame: "Foo"
}

We can interpret this object as, we have “Boo” and “Foo” annotation buttons selected, and the current frame button selected is “Foo”.

LewisCollum/buttonSidePanel