foundation.offcanvas.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. ;(function ($, window, document, undefined) {
  2. 'use strict';
  3. Foundation.libs.offcanvas = {
  4. name : 'offcanvas',
  5. version : '5.3.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. if (this.settings.open_method === 'move') {
  20. move_class = 'move-';
  21. right_postfix = 'right';
  22. left_postfix = 'left';
  23. } else if (this.settings.open_method === 'overlap_single') {
  24. move_class = 'offcanvas-overlap-';
  25. right_postfix = 'right';
  26. left_postfix = 'left';
  27. } else if (this.settings.open_method === 'overlap') {
  28. move_class = 'offcanvas-overlap';
  29. }
  30. S(this.scope).off('.offcanvas')
  31. .on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
  32. self.click_toggle_class(e, move_class + right_postfix);
  33. if (self.settings.open_method !== 'overlap'){
  34. S(".left-submenu").removeClass(move_class + right_postfix);
  35. }
  36. })
  37. .on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {
  38. var settings = self.get_settings(e);
  39. var parent = S(this).parent();
  40. if(settings.close_on_click && !parent.hasClass("has-submenu") && !parent.hasClass("back")){
  41. self.hide.call(self, move_class + right_postfix, self.get_wrapper(e));
  42. parent.parent().removeClass(move_class + right_postfix);
  43. }else if(S(this).parent().hasClass("has-submenu")){
  44. e.preventDefault();
  45. S(this).siblings(".left-submenu").toggleClass(move_class + right_postfix);
  46. }else if(parent.hasClass("back")){
  47. e.preventDefault();
  48. parent.parent().removeClass(move_class + right_postfix);
  49. }
  50. })
  51. .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
  52. self.click_toggle_class(e, move_class + left_postfix);
  53. if (self.settings.open_method !== 'overlap'){
  54. S(".right-submenu").removeClass(move_class + left_postfix);
  55. }
  56. })
  57. .on('click.fndtn.offcanvas', '.right-off-canvas-menu a', function (e) {
  58. var settings = self.get_settings(e);
  59. var parent = S(this).parent();
  60. if(settings.close_on_click && !parent.hasClass("has-submenu") && !parent.hasClass("back")){
  61. self.hide.call(self, move_class + left_postfix, self.get_wrapper(e));
  62. parent.parent().removeClass(move_class + left_postfix);
  63. }else if(S(this).parent().hasClass("has-submenu")){
  64. e.preventDefault();
  65. S(this).siblings(".right-submenu").toggleClass(move_class + left_postfix);
  66. }else if(parent.hasClass("back")){
  67. e.preventDefault();
  68. parent.parent().removeClass(move_class + left_postfix);
  69. }
  70. })
  71. .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
  72. self.click_remove_class(e, move_class + left_postfix);
  73. S(".right-submenu").removeClass(move_class + left_postfix);
  74. if (right_postfix){
  75. self.click_remove_class(e, move_class + right_postfix);
  76. S(".left-submenu").removeClass(move_class + left_postfix);
  77. }
  78. });
  79. },
  80. toggle: function(class_name, $off_canvas) {
  81. $off_canvas = $off_canvas || this.get_wrapper();
  82. if ($off_canvas.is('.' + class_name)) {
  83. this.hide(class_name, $off_canvas);
  84. } else {
  85. this.show(class_name, $off_canvas);
  86. }
  87. },
  88. show: function(class_name, $off_canvas) {
  89. $off_canvas = $off_canvas || this.get_wrapper();
  90. $off_canvas.trigger('open').trigger('open.fndtn.offcanvas');
  91. $off_canvas.addClass(class_name);
  92. },
  93. hide: function(class_name, $off_canvas) {
  94. $off_canvas = $off_canvas || this.get_wrapper();
  95. $off_canvas.trigger('close').trigger('close.fndtn.offcanvas');
  96. $off_canvas.removeClass(class_name);
  97. },
  98. click_toggle_class: function(e, class_name) {
  99. e.preventDefault();
  100. var $off_canvas = this.get_wrapper(e);
  101. this.toggle(class_name, $off_canvas);
  102. },
  103. click_remove_class: function(e, class_name) {
  104. e.preventDefault();
  105. var $off_canvas = this.get_wrapper(e);
  106. this.hide(class_name, $off_canvas);
  107. },
  108. get_settings: function(e) {
  109. var offcanvas = this.S(e.target).closest('[' + this.attr_name() + ']');
  110. return offcanvas.data(this.attr_name(true) + '-init') || this.settings;
  111. },
  112. get_wrapper: function(e) {
  113. var $off_canvas = this.S(e ? e.target : this.scope).closest('.off-canvas-wrap');
  114. if ($off_canvas.length === 0) {
  115. $off_canvas = this.S('.off-canvas-wrap');
  116. }
  117. return $off_canvas;
  118. },
  119. reflow : function () {}
  120. };
  121. }(jQuery, window, window.document));