enpaul.net/content/_archive/1/js/foundation/foundation.offcanvas.js

153 lines
5.7 KiB
JavaScript

;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.offcanvas = {
name : 'offcanvas',
version : '5.4.7',
settings : {
open_method: 'move',
close_on_click: false
},
init : function (scope, method, options) {
this.bindings(method, options);
},
events : function () {
var self = this,
S = self.S,
move_class = '',
right_postfix = '',
left_postfix = '';
if (this.settings.open_method === 'move') {
move_class = 'move-';
right_postfix = 'right';
left_postfix = 'left';
} else if (this.settings.open_method === 'overlap_single') {
move_class = 'offcanvas-overlap-';
right_postfix = 'right';
left_postfix = 'left';
} else if (this.settings.open_method === 'overlap') {
move_class = 'offcanvas-overlap';
}
S(this.scope).off('.offcanvas')
.on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
self.click_toggle_class(e, move_class + right_postfix);
if (self.settings.open_method !== 'overlap'){
S(".left-submenu").removeClass(move_class + right_postfix);
}
$('.left-off-canvas-toggle').attr('aria-expanded', 'true');
})
.on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {
var settings = self.get_settings(e);
var parent = S(this).parent();
if(settings.close_on_click && !parent.hasClass("has-submenu") && !parent.hasClass("back")){
self.hide.call(self, move_class + right_postfix, self.get_wrapper(e));
parent.parent().removeClass(move_class + right_postfix);
}else if(S(this).parent().hasClass("has-submenu")){
e.preventDefault();
S(this).siblings(".left-submenu").toggleClass(move_class + right_postfix);
}else if(parent.hasClass("back")){
e.preventDefault();
parent.parent().removeClass(move_class + right_postfix);
}
$('.left-off-canvas-toggle').attr('aria-expanded', 'true');
})
.on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
self.click_toggle_class(e, move_class + left_postfix);
if (self.settings.open_method !== 'overlap'){
S(".right-submenu").removeClass(move_class + left_postfix);
}
$('.right-off-canvas-toggle').attr('aria-expanded', 'true');
})
.on('click.fndtn.offcanvas', '.right-off-canvas-menu a', function (e) {
var settings = self.get_settings(e);
var parent = S(this).parent();
if(settings.close_on_click && !parent.hasClass("has-submenu") && !parent.hasClass("back")){
self.hide.call(self, move_class + left_postfix, self.get_wrapper(e));
parent.parent().removeClass(move_class + left_postfix);
}else if(S(this).parent().hasClass("has-submenu")){
e.preventDefault();
S(this).siblings(".right-submenu").toggleClass(move_class + left_postfix);
}else if(parent.hasClass("back")){
e.preventDefault();
parent.parent().removeClass(move_class + left_postfix);
}
$('.right-off-canvas-toggle').attr('aria-expanded', 'true');
})
.on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
self.click_remove_class(e, move_class + left_postfix);
S(".right-submenu").removeClass(move_class + left_postfix);
if (right_postfix){
self.click_remove_class(e, move_class + right_postfix);
S(".left-submenu").removeClass(move_class + left_postfix);
}
$('.right-off-canvas-toggle').attr('aria-expanded', 'true');
})
.on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
self.click_remove_class(e, move_class + left_postfix);
$('.left-off-canvas-toggle').attr('aria-expanded', 'false');
if (right_postfix) {
self.click_remove_class(e, move_class + right_postfix);
$('.right-off-canvas-toggle').attr('aria-expanded', "false");
}
});
},
toggle: function(class_name, $off_canvas) {
$off_canvas = $off_canvas || this.get_wrapper();
if ($off_canvas.is('.' + class_name)) {
this.hide(class_name, $off_canvas);
} else {
this.show(class_name, $off_canvas);
}
},
show: function(class_name, $off_canvas) {
$off_canvas = $off_canvas || this.get_wrapper();
$off_canvas.trigger('open').trigger('open.fndtn.offcanvas');
$off_canvas.addClass(class_name);
},
hide: function(class_name, $off_canvas) {
$off_canvas = $off_canvas || this.get_wrapper();
$off_canvas.trigger('close').trigger('close.fndtn.offcanvas');
$off_canvas.removeClass(class_name);
},
click_toggle_class: function(e, class_name) {
e.preventDefault();
var $off_canvas = this.get_wrapper(e);
this.toggle(class_name, $off_canvas);
},
click_remove_class: function(e, class_name) {
e.preventDefault();
var $off_canvas = this.get_wrapper(e);
this.hide(class_name, $off_canvas);
},
get_settings: function(e) {
var offcanvas = this.S(e.target).closest('[' + this.attr_name() + ']');
return offcanvas.data(this.attr_name(true) + '-init') || this.settings;
},
get_wrapper: function(e) {
var $off_canvas = this.S(e ? e.target : this.scope).closest('.off-canvas-wrap');
if ($off_canvas.length === 0) {
$off_canvas = this.S('.off-canvas-wrap');
}
return $off_canvas;
},
reflow : function () {}
};
}(jQuery, window, window.document));