/* eslint-env jquery */
export default class OffCanvas {
constructor( args = {} ) {
this.toggler = args.toggler;
this.overlay = args.overlay;
this.sidebar = args.sidebar;
this.close = args.close;
this.initAction = this.initAction.bind( this );
this.openSidebar = this.openSidebar.bind( this );
this.closeSidebar = this.closeSidebar.bind( this );
this.init = this.init.bind( this );
this.handleMenu = this.handleMenu.bind( this );
this.init();
}
init() {
const that = this;
this.handleMenu();
$( this.toggler ).on( 'click', function( e ) {
e.preventDefault();
that.initAction();
} );
$( this.close ).on( 'click', function( e ) {
e.preventDefault();
that.closeSidebar();
} );
$( this.overlay ).on( 'click', function( e ) {
e.preventDefault();
that.closeSidebar();
} );
}
initAction() {
if ( $( this.sidebar ).hasClass( 'show' ) ) {
this.closeSidebar();
} else {
this.openSidebar();
}
}
openSidebar() {
$( this.sidebar ).addClass( 'show' );
$( this.sidebar ).removeClass( 'is-off' );
$( this.overlay ).removeClass( 'is-off' );
}
closeSidebar() {
$( this.sidebar ).removeClass( 'show' );
$( this.sidebar ).addClass( 'is-off' );
$( this.overlay ).addClass( 'is-off' );
}
handleMenu() {
$( this.sidebar ).find( 'li.menu-item-has-children' ).each( function() {
const parent = $( this );
$( this ).find( '.toggler-icon' ).first().on( 'click', function( e ) {
e.preventDefault();
$( this ).toggleClass( 'up' );
parent.find( 'ul.dropdown-menu' ).first().toggleClass( 'show' );
} );
$( this ).find( 'a' ).first().on( 'click', function( e ) {
e.preventDefault();
parent.find( '.toggler-icon' ).first().toggleClass( 'up' );
parent.find( 'ul.dropdown-menu' ).first().toggleClass( 'show' );
return false;
} );
} );
}
}