Skip to content

JavaScript API

Jory Hogeveen edited this page Jan 17, 2022 · 20 revisions

Global Object ocsOffCanvasSidebars

Properties

site_close (boolean)
This will close the sidebar when clicking on the main website (true by default)

link_close (boolean)
(since 0.5) This will close the sidebar when clicking on a link (true by default)

disable_over (numeric / pixels)
This will disable the off-canvas sidebars when the window width is above the set pixels

hide_control_classes (boolean)
This will hide the off-canvas sidebars control elements by their classes when the window width is above the value set in disable_over

scroll_lock (boolean)
This will disable scrolling in the main website when a off-canvas sidebar is active

sidebars (object of objects)
The off-canvas sidebars and their settings

slidebarsController (object)
The Slidebars instance

container (jQuery object)
The site container element (top level)

useAttributeSettings (boolean)
This will use the attributes as settings instead of this objects settings

legacy_css (boolean)
Is OCS in legacy CSS (CSS2) mode?

events (internal object, do not overwrite)
Event handler. (since 0.5.7)

_toolbar (boolean)
Is the WP Admin Bar shown?

_touchmove (boolean)
Used to prevent an actual swipe event to behave like a click. (bug in some browsers)
If set to true the user is swiping

_debug (boolean)
Since: 0.4
Is debug mode enabled? (WP_DEBUG)


Methods:

initTriggers (overwritable, prev: setupTriggers)
Setup all default triggers.

initEvents (overwritable)
Setup default events handlers.

initCompatibility (overwritable)
Setup compatibility code.

setSidebarDefaultSettings (overwritable) Set the default settings for sidebars (by default only if they are not found).

_getSetting (internal function, do not overwrite)
Get the global setting or the sidebar setting (if set to overwrite).

_checkDisableOver (internal function, do not overwrite)
Validate the disable_over setting ( using _getSetting() ).


Hooks

Event Triggers

Since: 0.4

There are several triggers available at different staged in initialization.

  • ocs_before Triggers before Slidebars is loaded
  • ocs_loaded Triggers after Slidebars is loaded
  • ocs_initialized: Triggers after Slidebars is initialized
  • ocs_after: Triggers after full initialization

All of these are triggered from the window element and the first param that is passed is the main plugin JS object. Example:

// Oldschool
window.addEventListener( 'ocs_initialized', function( ocs ) {
    // Your code.
} );

// jQuery
$(window).on( 'ocs_initialized', function( ocs ) {
    // Your code.
} );

Event Actions

Since 0.5.7

There are four types of events for off-canvas sidebars:

  • opening: Fires at the start of the opening animation.
  • opened: Fires at the end of the opening animation.
  • closing: Fires at the start of the closing animation.
  • closed: Fires at the end of the closing animation.

To add hooks on these evens you can use the events property methods:

  • add_action: Add an action callback.
  • remove_action: Remove an existing action callback
  • do_action: Run callbacks (internal use only).

Example:

var opening_event = function( event, sidebar_id, sidebar ) {
    // Code for `opening` event.
};

// Add your action callback.
ocsOffCanvasSidebars.events.add_action( 'opening', 'action_identifier', opening_event, 10 ); // 10 = priority