js/foundation/foundation.offcanvas.js

   1 ;
   2 (function ($, window, document, undefined) {
   3     'use strict';
   4
   5     Foundation.libs.offcanvas = {
   6         name: 'offcanvas',
   7
   8         version: '5.5.0',
   9
  10         settings: {
  11             open_method: 'move',
  12             close_on_click: false
  13         },
  14
  15         init: function (scope, method, options) {
  16             this.bindings(method, options);
  17         },
  18
  19         events: function () {
  20             var self = this,
  21                 S = self.S,
  22                 move_class = '',
  23                 right_postfix = '',
  24                 left_postfix = '';
  25
  26             if (this.settings.open_method === 'move') {
  27                 move_class = 'move-';
  28                 right_postfix = 'right';
  29                 left_postfix = 'left';
  30             } else if (this.settings.open_method === 'overlap_single') {
  31                 move_class = 'offcanvas-overlap-';
  32                 right_postfix = 'right';
  33                 left_postfix = 'left';
  34             } else if (this.settings.open_method === 'overlap') {
  35                 move_class = 'offcanvas-overlap';
  36             }
  37
  38             S(this.scope).off('.offcanvas')
  39                 .on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
  40                     self.click_toggle_class(e, move_class + right_postfix);
  41                     if (self.settings.open_method !== 'overlap') {
  42                         S('.left-submenu').removeClass(move_class + right_postfix);
  43                     }
  44                     $('.left-off-canvas-toggle').attr('aria-expanded', 'true');
  45                 })
  46                 .on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {
  47                     var settings = self.get_settings(e);
  48                     var parent = S(this).parent();
  49
  50                     if (settings.close_on_click && !parent.hasClass('has-submenu') && !parent.hasClass('back')) {
  51                         self.hide.call(self, move_class + right_postfix, self.get_wrapper(e));
  52                         parent.parent().removeClass(move_class + right_postfix);
  53                     } else if (S(this).parent().hasClass('has-submenu')) {
  54                         e.preventDefault();
  55                         S(this).siblings('.left-submenu').toggleClass(move_class + right_postfix);
  56                     } else if (parent.hasClass('back')) {
  57                         e.preventDefault();
  58                         parent.parent().removeClass(move_class + right_postfix);
  59                     }
  60                     $('.left-off-canvas-toggle').attr('aria-expanded', 'true');
  61                 })
  62                 .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
  63                     self.click_toggle_class(e, move_class + left_postfix);
  64                     if (self.settings.open_method !== 'overlap') {
  65                         S('.right-submenu').removeClass(move_class + left_postfix);
  66                     }
  67                     $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
  68                 })
  69                 .on('click.fndtn.offcanvas', '.right-off-canvas-menu a', function (e) {
  70                     var settings = self.get_settings(e);
  71                     var parent = S(this).parent();
  72
  73                     if (settings.close_on_click && !parent.hasClass('has-submenu') && !parent.hasClass('back')) {
  74                         self.hide.call(self, move_class + left_postfix, self.get_wrapper(e));
  75                         parent.parent().removeClass(move_class + left_postfix);
  76                     } else if (S(this).parent().hasClass('has-submenu')) {
  77                         e.preventDefault();
  78                         S(this).siblings('.right-submenu').toggleClass(move_class + left_postfix);
  79                     } else if (parent.hasClass('back')) {
  80                         e.preventDefault();
  81                         parent.parent().removeClass(move_class + left_postfix);
  82                     }
  83                     $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
  84                 })
  85                 .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
  86                     self.click_remove_class(e, move_class + left_postfix);
  87                     S('.right-submenu').removeClass(move_class + left_postfix);
  88                     if (right_postfix) {
  89                         self.click_remove_class(e, move_class + right_postfix);
  90                         S('.left-submenu').removeClass(move_class + left_postfix);
  91                     }
  92                     $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
  93                 })
  94                 .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
  95                     self.click_remove_class(e, move_class + left_postfix);
  96                     $('.left-off-canvas-toggle').attr('aria-expanded', 'false');
  97                     if (right_postfix) {
  98                         self.click_remove_class(e, move_class + right_postfix);
  99                         $('.right-off-canvas-toggle').attr('aria-expanded', 'false');
 100                     }
 101                 });
 102         },
 103
 104         toggle: function (class_name, $off_canvas) {
 105             $off_canvas = $off_canvas || this.get_wrapper();
 106             if ($off_canvas.is('.' + class_name)) {
 107                 this.hide(class_name, $off_canvas);
 108             } else {
 109                 this.show(class_name, $off_canvas);
 110             }
 111         },
 112
 113         show: function (class_name, $off_canvas) {
 114             $off_canvas = $off_canvas || this.get_wrapper();
 115             $off_canvas.trigger('open').trigger('open.fndtn.offcanvas');
 116             $off_canvas.addClass(class_name);
 117         },
 118
 119         hide: function (class_name, $off_canvas) {
 120             $off_canvas = $off_canvas || this.get_wrapper();
 121             $off_canvas.trigger('close').trigger('close.fndtn.offcanvas');
 122             $off_canvas.removeClass(class_name);
 123         },
 124
 125         click_toggle_class: function (e, class_name) {
 126             e.preventDefault();
 127             var $off_canvas = this.get_wrapper(e);
 128             this.toggle(class_name, $off_canvas);
 129         },
 130
 131         click_remove_class: function (e, class_name) {
 132             e.preventDefault();
 133             var $off_canvas = this.get_wrapper(e);
 134             this.hide(class_name, $off_canvas);
 135         },
 136
 137         get_settings: function (e) {
 138             var offcanvas = this.S(e.target).closest('[' + this.attr_name() + ']');
 139             return offcanvas.data(this.attr_name(true) + '-init') || this.settings;
 140         },
 141
 142         get_wrapper: function (e) {
 143             var $off_canvas = this.S(e ? e.target : this.scope).closest('.off-canvas-wrap');
 144
 145             if ($off_canvas.length === 0) {
 146                 $off_canvas = this.S('.off-canvas-wrap');
 147             }
 148             return $off_canvas;
 149         },
 150
 151         reflow: function () {
 152         }
 153     };
 154 }(jQuery, window, window.document));