Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

js-offcanvas

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

js-offcanvas

jQuery Accesible Offcanvas Panels

1.1.0
npm

Version published: 8 years ago

Weekly downloads: 3.5K; decreased by-2.63%

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

js-offcanvas

jQuery accessible Offcanvas plugin, using ARIA

View Demo | Edit on Codepen

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

######Table of Contents

Getting Started

#####CDN Include the Offcanvas .css and .js files in your site. Link directly to Offcanvas files on npmcdn.

<script src="https://npmcdn.com/js-offcanvas@1.0/dist/_js/js-offcanvas.pkgd.min.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/js-offcanvas@1.0/dist/_css/minified/js-offcanvas.css">

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

<body>
    <div class="c-offcanvas-content-wrap">
        ...
        <a href="#off-canvas" data-offcanvas-trigger="off-canvas">Menu</a>
        ...
    </div>
    <aside id="off-canvas"></aside>
</body>

#####JS

$( function(){
    $(document).trigger("enhance");
});

Initialize with Vanilla JavaScript

$('#off-canvas').offcanvas({
// options
});

Initialize with jQuery

var elem = document.getElementById('#off-canvas');
var offcanvas = new w.componentNamespace.Offcanvas( elem, {
    // options
    modifiers: 'left,overlay'
});

offcanvas.init();

Initialize with HTML

<a class="js-offcanvas-trigger" data-offcanvas-trigger="off-canvas" href="#off-canvas">Menu</a>
<aside class="js-offcanvas" data-offcanvas-options='{ "modifiers": "left,overlay" }' id="off-canvas"></aside>

#####Enhance Typically the enhancement is triggered on DOM ready.

$( function(){
    $(document).trigger("enhance");
});

#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.

 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	true	boolean
target	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.

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

##Methods ####open

dataOffcanvas.open();

####close

dataOffcanvas.close();

####toggle

dataOffcanvas.toggle();

###Callbacks ####onInit Fires an event when offcanvas is initialized.

dataOffcanvas.onInit = function() {
    console.log(this);
};

####onOpen Fires an event when offcanvas is opened.

dataOffcanvas.onOpen = function() {
    console.log('Callback onOpen');
};

####onClose Fires an event when offcanvas is closed.

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.

$( 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.

$( document ).on( "create.offcanvas", function( e ){ } );

####open Fired when the open method is called.

$( document ).on( "open.offcanvas", function( e ){ } );

####close Fired when the close method is called.

$( document ).on( "close.offcanvas", function( e ){ } );

####resizing Fired when the window is resized.

$( document ).on( "resizing.offcanvas", function( e ){ } );

####clicked Fired when the trigger-btn is clicked.

$( document ).on( "clicked.offcanvas-trigger", function( e ){
    var dataBtnText = $( e.target ).text();
    console.log(e.type + '.' + e.namespace + ': ' + dataBtnText);
} );

##Examples ####Left With HTML

<button data-offcanvas-trigger="off-canvas-left">Left</button>
<aside id="off-canvas-left"></aside>

With jQuery

$('#off-canvas-left').offcanvas({
    modifiers: 'left' // default
});

####Right With HTML

<button data-offcanvas-trigger="off-canvas-right">Right</button>
<aside id="off-canvas-right" data-offcanvas-options='{ "modifiers": "right" }'></aside>

With jQuery

$('#off-canvas-right').offcanvas({
    modifiers: 'right'
});

####Top With HTML


<button data-offcanvas-trigger="off-canvas-top">Top</button>
<aside id="off-canvas-top" data-offcanvas-options='{ "modifiers": "top" }'></aside>

With jQuery

$('#off-canvas-top').offcanvas({
    modifiers: 'top'
});

####Bottom With HTML

<button data-offcanvas-trigger="off-canvas-bottom">Bottom</button>
<aside id="off-canvas-bottom" data-offcanvas-options='{ "modifiers": "bottom" }'></aside>

With jQuery

$('#off-canvas-bottom').offcanvas({
    modifiers: 'bottom'
});

##Package managers

Install with Bower: bower install js-offcanvas --save
Install with npm: npm install js-offcanvas

##Dependencies

jQuery
Modernizr
js-utils
js-trap-tab
js-button

View Demo

Feel free to let me know if you use js-offcanvas in one of your websites.

Release History

v1.0.0: Initial release.

License

Licensed under the MIT license.

Keywords

FAQs

What is js-offcanvas?

Is js-offcanvas popular?

Is js-offcanvas well maintained?

Package last updated on 24 Mar 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install