js-offcanvas

  

jQuery accessible Offcanvas plugin, using ARIA

Demo

Why it is accessible

- It relies on ARIA Design pattern for Dialogs
- The tab key loops through all of the keyboard focusable items within the offcanvas
- You can close it using Esc.

Features

- Uses CSS transforms & transitions.
- BEM c-offcanvas c-offcanvas--left is-open
- From Any Direction: left, right, top and bottom.
- Overlay, Reveal and Push.
- API & Events
- Package managers Bower & NPM

*

---

Getting Started

* Install with npm: npm install js-offcanvas
* Install with yarn: yarn add js-offcanvas

##### JS & CSS
Include the .css and .js files in your site.
``html


``
###### CDN
`html


`

##### HTML
Offcanvas works on a container element with no styles applied.
`html

Menu

`
##### Initialize
`js

$('#offCanvas').offcanvas({
modifiers: 'left, overlay', // default options
triggerButton: '#triggerButton' // btn to open offcanvas
});
`

##### Initialize with HTML
###### Trigger Button
Include the CSS-Class js-offcanvas-trigger and data-offcanvas-trigger="id-of-your-offcanvas"
`html
data-offcanvas-trigger="off-canvas-id"
href="#off-canvas">Menu
``
###### Offcanvas Element
Include the CSS-Class js-offcanvas and data-offcanvas-options="{options}"
`html

`
###### Trigger Enhance
`js
// you have to trigger enhance
$( function(){
$(document).trigger("enhance");
});
`

Options

`js
$('#offCanvas').offcanvas({
role: "dialog",
modifiers: "left,overlay",
baseClass: "c-offcanvas",
modalClass: "c-offcanvas-bg",
contentClass: "c-offcanvas-content-wrap",
closeButtonClass: "js-offcanvas-close",
bodyModifierClass: "has-offcanvas",
supportNoTransitionsClass: "support-no-transitions",
resize: false,
triggerButton: '#triggerButton' ,
modal: true,
onOpen: function() {},
onClose: function() {},
onInit: function() {}
})
.on( "create.offcanvas", function( e ){ } )
.on( "open.offcanvas", function( e ){ } )
.on( "opening.offcanvas", function( e ){ } )
.on( "close.offcanvas", function( e ){ } )
.on( "closing.offcanvas", function( e ){ } )
.on( "resizing.offcanvas", function( e ){ } );
`

Examples on Codepen

* Collection
* Codepen Template
* Demo Site Examples
* Full Width
* Codrops SVG Shape Overlays
#### Bootstrap v4
* Dashboard
* Starter
* Boxed Layout

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-offcanvas-options attribute to the target elment.
This attribute should contain the properly formatted JSON object representing the custom options.
`html
data-offcanvas-options='{ "modifiers": "left,overlay",... }'
`
| Name |Default |Type|
| --- |---|---|
| modifiers | "left,overlay" |string|
| baseClass | "c-offcanvas" |string|
| modalClass | "c-offcanvas-bg" |string|
| contentClass | "c-offcanvas-content-wrap" |string|
| closeButtonClass | "js-offcanvas-close" |string|
| role | "dialog" |string|
| bodyModifierClass | "has-offcanvas" |string|
| supportNoTransitionsClass | "support-no-transitions" |string|
| resize | false |boolean|
| triggerButton | null |string|
| onInit | null |function|
| onOpen | null |function|
| onClose | null |function|

API

The offcanvas API offers a couple of methods to control the offcanvas and are publicly available to all active instances.

`js
var dataOffcanvas = $('#off-canvas').data('offcanvas-component');
`

Methods

#### open
`js
dataOffcanvas.open();
`
#### close
`js
dataOffcanvas.close();
`
#### toggle
`js
dataOffcanvas.toggle();
`

$3

#### onInit
Fires an event when offcanvas is initialized.
`js
dataOffcanvas.onInit = function() {
console.log(this);
};
`
#### onOpen
Fires an event when offcanvas is opened.
`js
dataOffcanvas.onOpen = function() {
console.log('Callback onOpen');
};
`
#### onClose
Fires an event when offcanvas is closed.
`js
dataOffcanvas.onClose = function() {
console.log(this);
};
`

Events

jQuery.offcanvas fires several events. Simply listen for them with the jQuery.on function. All events are namespaced with offcanvas.

#### beforecreate
Fires an event before the offcanvas is initialized.
`js
$( document ).on( "beforecreate.offcanvas", function( e ){
var dataOffcanvas = $( e.target ).data('offcanvas-component');
console.log(dataOffcanvas);
dataOffcanvas.onInit = function() {
console.log(this);
};
} );
`
#### create
Fired once the Plugin is initialized.
`js
$( document ).on( "create.offcanvas", function( e ){ } );
`
#### open
Fired when the open method is called.
`js
$( document ).on( "open.offcanvas", function( e ){ } );
`
#### close
Fired when the close method is called.
`js
$( document ).on( "close.offcanvas", function( e ){ } );
`
#### resizing
Fired when the window is resized.
`js
$( document ).on( "resizing.offcanvas", function( e ){ } );
`
#### clicked
Fired when the trigger-btn is clicked.
`js
$( document ).on( "clicked.offcanvas-trigger", function( e ){
var dataBtnText = $( e.target ).text();
console.log(e.type + '.' + e.namespace + ': ' + dataBtnText);
} );
``

Dependencies

* jQuery

---

License

Licensed under the MIT license.