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. - Source:
- See:
Properties:
Name Type Description offcanvas.selector
string JQ selector identifying the offcanvas 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. - Source:
- See:
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: defined by theme. 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. offcanvas.modality
string The modality of the offcanvas. Valid values are modal and modeless. Default: modeless. If the offcanvas is modal, interaction with the main content area is disabled like in a modal dialog. 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> setupPanToReveal(offcanvas)
-
Setup offcanvas for pan to reveal. This method adds a touch listener to handle revealing the offcanvas as user pans on the outer wrapper. The following events are fired by this method: ojpanstart - fired when pan to reveal gesture initiated by the user. The event includes the direction and distance of the pan. If it is vetoed then pan to reveal is terminated ojpanmove - fired as user continues the pan gesture. The event includes the direction and distance of the pan. ojpanend - fired when pan to reveal gesture ends. The event includes the direction and distance of the pan. If it is vetoed then the offcanvas will be closed.
Parameters:
Name Type Description offcanvas
Object An Object contains the properties in the following table. - Source:
- See:
Properties:
Name Type Argument Description offcanvas.selector
string JQ selector identifying the offcanvas offcanvas.edge
string <optional>
the edge of the offcanvas, valid values are start, end. This property is optional if the offcanvas element has a "oj-offcanvas-" + class specified. offcanvas.size
string <optional>
size width of the offcanvas. Default to the computed width of the offcanvas. Example
Setup the offcanvas:
var offcanvas = { "selector": "#startDrawer" }; oj.OffcanvasUtils.setupPanToReveal(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. - Source:
- See:
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. 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> tearDownPanToReveal(offcanvas)
-
Removes the listener that was added in setupPanToReveal. Page authors should call tearDownPanToReveal when the offcanvas is no longer needed.
Parameters:
Name Type Description offcanvas
Object An Object contains the properties in the following table. - Source:
- See:
Properties:
Name Type Description offcanvas.selector
string JQ selector identifying the offcanvas Example
TearDown the offcanvas:
var offcanvas = { "selector": "#startDrawer" }; oj.OffcanvasUtils.tearDownPanToReveal(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. - Source:
- See:
Properties:
Name Type Description offcanvas.selector
string JQ selector identifying the offcanvas 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. - Source:
- See:
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. 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);