offcanvas-callback-js

Offcanvas

npm install offcanvas-callback-js

The initializing function for this module takes several properties:

• "trigger" expects the string value of an HTML attribute (required);
• "triggerType" accepts either "id", "class" or "data" (defaults to the data value);
• "callback" inserts a function before the offcanvas panel opens (optional);
• "class" appends a class to the trigger and offcanvas panel in the opened state (defaults to "opened");
• "watcher" determines if the offcanvas panel will close automatically on clicks registered outside of it (defaults to true);
• "siblings" tells the module to watch other triggers with the same target (default true - see below for more information).

The only required HTML markup for this module is the data-offcanvas-target attribute, which lets the module know what the trigger's target is. This module will also automatically search for related triggers in the document using this attribute. An open and close button, for example, will also be synchronized.

Example

import offcanvas from 'offcanvas-callback-js';

offcanvas.init({
  trigger: 'demo',
  triggerType: 'id',
  callback: function(e){ // click event
    console.log('Hi there'); // code to execute after click
    if (this.state) this.toggle(true); // let's the module resume its sequencing if the offcanvas is opened
  },
  class: 'custom_class_name_here',
  watcher: false,
  siblings: true
});