153 lines
		
	
	
		
			5.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
		
		
			
		
	
	
			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)); |