API Accesible Offcanvas

Methods

open
close
toggle

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');

dataOffcanvas.open();
dataOffcanvas.close();
dataOffcanvas.toggle();

// callbacks
dataOffcanvas.onInit = function() {
	console.log(this);
};
dataOffcanvas.onOpen = function() {
	console.log('Callback onOpen');
};
dataOffcanvas.onClose = function() {
	console.log('Callback onClose');
};


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

offcanvas.init();

offcanvas.open();
offcanvas.close();
offcanvas.toggle();

Events

beforecreate
create
open
close
resizing
clicked

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


$( document ).on( "beforecreate.offcanvas", function( e ){
	var dataOffcanvas = $( e.target ).data('offcanvas-component');
	console.log(dataOffcanvas);
	dataOffcanvas.onInit =  function() {
		console.log(this);
	};
} );

$( document ).on( "create.offcanvas", function( e ){
	var dataOffcanvas = $( e.target ).data('offcanvas-component');
	console.log(dataOffcanvas);
	dataOffcanvas.onOpen =  function() {
		console.log('Callback onOpen');
	};
	dataOffcanvas.onClose =  function() {
		console.log('Callback onClose');
	};
} );

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

$( document ).on( "open.offcanvas", function( e ){
	var dataOffcanvasID = $( e.target ).attr('id');
	console.log(e.type + ': #' + dataOffcanvasID);
} );

$( document ).on( "resizing.offcanvas", function( e ){
	var dataOffcanvasID = $( e.target ).attr('id');
	console.log(e.type + ': #' + dataOffcanvasID);
} );

$( document ).on( "close.offcanvas", function( e ){
	var dataOffcanvasID = $( e.target ).attr('id');
	console.log(e.type + ': #' + dataOffcanvasID);
} );

$( '#offcanvas-right' ).on( "create.offcanvas", function( e ){
	var dataOffcanvas = $(this).data('offcanvas-component');
	setTimeout(function(){
		dataOffcanvas.open();
	}, 500);

} );