Drawers

A drawer is a view container that is located off the left or right side of the app view, and can revealed either by swiping across the screen or using the Supersonic API. The most common use case for a drawer is a side-menu: it is hidden by default and can be pulled into view when it is required, for e.g. navigating to another view. The drawer view can display HTML content just like any regular view. The Supersonic drawer responds to touch gestures just like a native drawer, so the opening gesture can be reversed or canceled at any point.

Defining drawers

Drawers can be defined before app startup in the /config/structure.coffee file. To enable a drawer, you define a drawers object. The drawers object has three possible properties: left for defining the left drawer, right for defining the right drawer and options for defining shared drawer configurations, such as the animation to use when displaying drawers. Defining a left drawer would look like the following:

  drawers:
    left:
      id: "leftDrawer"
      location: "example#drawer"
      showOnAppLoad: false
    options:
      animation: "swingingDoor"

The left or right properties define the respective drawers themselves, and contain three properties, id, location and showOnAppLoad. The id property can be used to set an id for your drawer. Because drawers are just like any other WebViews, you can use the defined id to reference your drawer view from other code.

The location property determines where your tab points to, and supports two kinds of syntax. In a default Supersonic app the syntax <module-name>#<view-name> works. In the above code example the defined drawer will render the contents of the drawer.html page in the example module. You can also use direct urls if need be:

  drawers:
    left:
      id: "leftDrawer"
      location: "http://localhost/app/example/drawer.html"
      showOnAppLoad: false

The showOnAppLoad property determines whether your drawer should be visible on screen when the app starts. This can be used e.g. to create a fixed side-menu for your app.

Programmatic APIs

Supersonic also provides JavaScript API access to drawers at app runtime, via the supersonic.ui.drawers.* namespace. See the available methods on the supersonic.ui.drawers API docs page