Class: OffcanvasUtils

Oracle® JavaScript Extension Toolkit (JET)
1.2.0

E65435-01

QuickNav

oj. OffcanvasUtils

Version:
  • 1.2.0
Since:
  • 1.1.0
This class provides functions used for controlling offcanvas regions. Offcanvas regions can be used in either static (simply displaying and hiding in response to user interactions) or responsive (using media queries to dynamically move application content between the main viewport and offcanvas regions) contexts. The open, close and toggle methods can be used to directly control the display of an offcanvas region in both the static and responsive cases. The setupResponsive and tearDownResponsive methods are only needed for responsive usages and are used to add and remove listeners that use the specified media queries to configure the offcanvas in response to changes in browser size.
  • open: show the offcanvas by sliding it into the viewport.
  • close: hide the offcanvas by sliding it out of the viewport.
  • toggle: toggle the offcanvas in or out of the viewport.
  • setupResponsive: setup offcanvas for the responsive layout.
  • tearDownResponsive: remove listeners that were added in setupResponsive.

Styling

Class(es) Description
oj-offcanvas-outer-wrapper Applied to the outer most element of the offcanvas.
oj-offcanvas-inner-push-wrapper
Applied to the inner wrapper of the offcanvas in push mode.
oj-offcanvas-start
Applied to the offcanvas on the start edge.
oj-offcanvas-end
Applied to the offcanvas on the end edge.
oj-offcanvas-top
Applied to the offcanvas on the top edge.
oj-offcanvas-bottom
Applied to the offcanvas on the bottom edge.

Constructor

new OffcanvasUtils()

Source:

Methods

<static> close(offcanvas) → {Promise}

Hides the offcanvas by sliding it out of the viewport. This method fires an ojbeforeclose event which can be vetoed by attaching a listener and returning false. If the close is not vetoed, this method will fire an ojclose event once animation has completed.
Parameters:
Name Type Description
offcanvas Object An Object contains the properties in the following table.
Properties:
Name Type Description
offcanvas.selector string JQ selector identifying the offcanvas
Source:
See:
Returns:
A promise that is resolved when all transitions have completed. The promise is rejected if the ojbeforeclose event is vetoed.
Type
Promise
Example

Slide the offcanvas out of the viewport:

   var offcanvas = {
     "selector": "#startDrawer"
   };

oj.OffcanvasUtils.close(offcanvas);

<static> open(offcanvas) → {Promise}

Shows the offcanvas by sliding it into the viewport. This method fire an ojbeforeopen event which can be vetoed by attaching a listener and returning false. If the open is not vetoed, this method will fire an ojopen event once animation has completed.

Upon opening an offcanvas, focus is automatically moved to the offcanvas itself.

Parameters:
Name Type Description
offcanvas Object An Object contains the properties in the following table.
Properties:
Name Type Description
offcanvas.selector string JQ selector identifying the offcanvas
offcanvas.edge string the edge of the offcanvas, valid values are start, end, top, bottom. This property is optional if the offcanvas element has a "oj-offcanvas-" + class specified.
offcanvas.displayMode string how to show the offcanvas, valid values are push or overlay. Default: push
offcanvas.autoDismiss string close behavior, valid values are focusLoss and none. If autoDismiss is default(focusLoss) then any click outside the offcanvas will close it.
offcanvas.size string size width or height of the offcanvas: width if edge is start or end and height if edge is to and bottom. Default to the computed width or height of the offcanvas.
Source:
See:
Returns:
A promise that is resolved when all transitions have completed. The promise is rejected if the ojbeforeopen event is vetoed.
Type
Promise
Example

Slide the offcanvas into the viewport:

   var offcanvas = {
     "selector": "#startDrawer",
     "edge": "start",
     "displayMode": "overlay",
     "size": "200px"
   };

oj.OffcanvasUtils.open(offcanvas);

<static> setupResponsive(offcanvas)

Setup offcanvas for the responsive layout. This method adds a listener based on the media query specified in offcanvas.query. When the media query matches the listener is called and offcanvas behavior is removed. When the media query does not match the listener is called and off canvas behavior is added.
Parameters:
Name Type Description
offcanvas Object An Object contains the properties in the following table.
Properties:
Name Type Description
offcanvas.selector string JQ selector identifying the offcanvas
offcanvas.edge string the edge of the offcanvas, valid values are start, end, top, bottom. This property is optional if the offcanvas element has a "oj-offcanvas-" + class specified.
offcanvas.query string the media query determine when the offcanvas is fixed inside the viewport.
Source:
See:
Example

Setup the offcanvas:

   var offcanvas = {
     "selector": "#startDrawer",
     "edge": "start",
     "query": oj.ResponsiveUtils.getFrameworkQuery(oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP)
   };

oj.OffcanvasUtils.setupResponsive(offcanvas);

<static> tearDownResponsive(offcanvas)

Removes the listener that was added in setupResponsive. Page authors should call tearDownResponsive when the offcanvas is no longer needed.
Parameters:
Name Type Description
offcanvas Object An Object contains the properties in the following table.
Properties:
Name Type Description
offcanvas.selector string JQ selector identifying the offcanvas
Source:
See:
Example

TearDown the offcanvas:

   var offcanvas = {
     "selector": "#startDrawer"
   };

oj.OffcanvasUtils.tearDownResponsive(offcanvas);

<static> toggle(offcanvas) → {Promise}

Toggles the offcanvas in or out of the viewport. This method simply delegates to the open or close methods as appropriate.
Parameters:
Name Type Description
offcanvas Object An Object contains the properties in the following table.
Properties:
Name Type Description
offcanvas.selector string JQ selector identifying the offcanvas
offcanvas.edge string the edge of the offcanvas, valid values are start, end, top, bottom. This property is optional if the offcanvas element has a "oj-offcanvas-" + class specified.
offcanvas.displayMode string how to show the offcanvas, valid values are push or overlay. Default: push
offcanvas.autoDismiss string close behavior, valid values are focusLoss and none. If autoDismiss is default(focusLoss) then any click outside the offcanvas will close it.
offcanvas.size string size width or height of the offcanvas: width if edge is start or end and height if edge is top and bottom. Default to the computed width or height of the offcanvas.
Source:
See:
Returns:
A promise that is resolved when all transitions have completed
Type
Promise
Example

Toggle the offcanvas in or out of the viewport:

   var offcanvas = {
     "selector": "#startDrawer",
     "edge": "start",
     "displayMode": "overlay"
   };

oj.OffcanvasUtils.toggle(offcanvas);