foundation.offcanvas.js 9.2 KB

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