123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225 |
- ;(function ($, window, document, undefined) {
- 'use strict';
- Foundation.libs.offcanvas = {
- name : 'offcanvas',
- version : '5.5.3',
- 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 = '',
- top_postfix = '',
- bottom_postfix = '';
- if (this.settings.open_method === 'move') {
- move_class = 'move-';
- right_postfix = 'right';
- left_postfix = 'left';
- top_postfix = 'top';
- bottom_postfix = 'bottom';
- } else if (this.settings.open_method === 'overlap_single') {
- move_class = 'offcanvas-overlap-';
- right_postfix = 'right';
- left_postfix = 'left';
- top_postfix = 'top';
- bottom_postfix = 'bottom';
- } 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');
- })
- //end of left canvas
- .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');
- })
- //end of right canvas
- .on('click.fndtn.offcanvas', '.top-off-canvas-toggle', function (e) {
- self.click_toggle_class(e, move_class + bottom_postfix);
- if (self.settings.open_method !== 'overlap') {
- S('.top-submenu').removeClass(move_class + bottom_postfix);
- }
- $('.top-off-canvas-toggle').attr('aria-expanded', 'true');
- })
- .on('click.fndtn.offcanvas', '.top-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 + bottom_postfix, self.get_wrapper(e));
- parent.parent().removeClass(move_class + bottom_postfix);
- } else if (S(this).parent().hasClass('has-submenu')) {
- e.preventDefault();
- S(this).siblings('.top-submenu').toggleClass(move_class + bottom_postfix);
- } else if (parent.hasClass('back')) {
- e.preventDefault();
- parent.parent().removeClass(move_class + bottom_postfix);
- }
- $('.top-off-canvas-toggle').attr('aria-expanded', 'true');
- })
- //end of top canvas
- .on('click.fndtn.offcanvas', '.bottom-off-canvas-toggle', function (e) {
- self.click_toggle_class(e, move_class + top_postfix);
- if (self.settings.open_method !== 'overlap') {
- S('.bottom-submenu').removeClass(move_class + top_postfix);
- }
- $('.bottom-off-canvas-toggle').attr('aria-expanded', 'true');
- })
- .on('click.fndtn.offcanvas', '.bottom-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 + top_postfix, self.get_wrapper(e));
- parent.parent().removeClass(move_class + top_postfix);
- } else if (S(this).parent().hasClass('has-submenu')) {
- e.preventDefault();
- S(this).siblings('.bottom-submenu').toggleClass(move_class + top_postfix);
- } else if (parent.hasClass('back')) {
- e.preventDefault();
- parent.parent().removeClass(move_class + top_postfix);
- }
- $('.bottom-off-canvas-toggle').attr('aria-expanded', 'true');
- })
- //end of bottom
- .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');
- }
- })
- .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
- self.click_remove_class(e, move_class + top_postfix);
- S('.bottom-submenu').removeClass(move_class + top_postfix);
- if (bottom_postfix) {
- self.click_remove_class(e, move_class + bottom_postfix);
- S('.top-submenu').removeClass(move_class + top_postfix);
- }
- $('.bottom-off-canvas-toggle').attr('aria-expanded', 'true');
- })
- .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
- self.click_remove_class(e, move_class + top_postfix);
- $('.top-off-canvas-toggle').attr('aria-expanded', 'false');
- if (bottom_postfix) {
- self.click_remove_class(e, move_class + bottom_postfix);
- $('.bottom-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.fndtn.offcanvas');
- $off_canvas.addClass(class_name);
- },
- hide : function (class_name, $off_canvas) {
- $off_canvas = $off_canvas || this.get_wrapper();
- $off_canvas.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));
|