PushMenu.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. /* PushMenu()
  2. * ==========
  3. * Adds the push menu functionality to the sidebar.
  4. *
  5. * @usage: $('.btn').pushMenu(options)
  6. * or add [data-toggle="push-menu"] to any button
  7. * Pass any option as data-option="value"
  8. */
  9. +function ($) {
  10. 'use strict';
  11. var DataKey = 'lte.pushmenu';
  12. var Default = {
  13. collapseScreenSize : 767,
  14. expandOnHover : false,
  15. expandTransitionDelay: 200
  16. };
  17. var Selector = {
  18. collapsed : '.sidebar-collapse',
  19. open : '.sidebar-open',
  20. mainSidebar : '.main-sidebar',
  21. contentWrapper: '.content-wrapper',
  22. searchInput : '.sidebar-form .form-control',
  23. button : '[data-toggle="push-menu"]',
  24. mini : '.sidebar-mini',
  25. expanded : '.sidebar-expanded-on-hover',
  26. layoutFixed : '.fixed'
  27. };
  28. var ClassName = {
  29. collapsed : 'sidebar-collapse',
  30. open : 'sidebar-open',
  31. mini : 'sidebar-mini',
  32. expanded : 'sidebar-expanded-on-hover',
  33. expandFeature: 'sidebar-mini-expand-feature',
  34. layoutFixed : 'fixed'
  35. };
  36. var Event = {
  37. expanded : 'expanded.pushMenu',
  38. collapsed: 'collapsed.pushMenu'
  39. };
  40. // PushMenu Class Definition
  41. // =========================
  42. var PushMenu = function (options) {
  43. this.options = options;
  44. this.init();
  45. };
  46. PushMenu.prototype.init = function () {
  47. if (this.options.expandOnHover
  48. || ($('body').is(Selector.mini + Selector.layoutFixed))) {
  49. this.expandOnHover();
  50. $('body').addClass(ClassName.expandFeature);
  51. }
  52. $(Selector.contentWrapper).click(function () {
  53. // Enable hide menu when clicking on the content-wrapper on small screens
  54. if ($(window).width() <= this.options.collapseScreenSize && $('body').hasClass(ClassName.open)) {
  55. this.close();
  56. }
  57. }.bind(this));
  58. // __Fix for android devices
  59. $(Selector.searchInput).click(function (e) {
  60. e.stopPropagation();
  61. });
  62. };
  63. PushMenu.prototype.toggle = function () {
  64. var windowWidth = $(window).width();
  65. var isOpen = !$('body').hasClass(ClassName.collapsed);
  66. if (windowWidth <= this.options.collapseScreenSize) {
  67. isOpen = $('body').hasClass(ClassName.open);
  68. }
  69. if (!isOpen) {
  70. this.open();
  71. } else {
  72. this.close();
  73. }
  74. };
  75. PushMenu.prototype.open = function () {
  76. var windowWidth = $(window).width();
  77. if (windowWidth > this.options.collapseScreenSize) {
  78. $('body').removeClass(ClassName.collapsed)
  79. .trigger($.Event(Event.expanded));
  80. }
  81. else {
  82. $('body').addClass(ClassName.open)
  83. .trigger($.Event(Event.expanded));
  84. }
  85. };
  86. PushMenu.prototype.close = function () {
  87. var windowWidth = $(window).width();
  88. if (windowWidth > this.options.collapseScreenSize) {
  89. $('body').addClass(ClassName.collapsed)
  90. .trigger($.Event(Event.collapsed));
  91. } else {
  92. $('body').removeClass(ClassName.open + ' ' + ClassName.collapsed)
  93. .trigger($.Event(Event.collapsed));
  94. }
  95. };
  96. PushMenu.prototype.expandOnHover = function () {
  97. $(Selector.mainSidebar).hover(function () {
  98. if ($('body').is(Selector.mini + Selector.collapsed)
  99. && $(window).width() > this.options.collapseScreenSize) {
  100. this.expand();
  101. }
  102. }.bind(this), function () {
  103. if ($('body').is(Selector.expanded)) {
  104. this.collapse();
  105. }
  106. }.bind(this));
  107. };
  108. PushMenu.prototype.expand = function () {
  109. setTimeout(function () {
  110. $('body').removeClass(ClassName.collapsed)
  111. .addClass(ClassName.expanded);
  112. }, this.options.expandTransitionDelay);
  113. };
  114. PushMenu.prototype.collapse = function () {
  115. setTimeout(function () {
  116. $('body').removeClass(ClassName.expanded)
  117. .addClass(ClassName.collapsed);
  118. }, this.options.expandTransitionDelay);
  119. };
  120. // PushMenu Plugin Definition
  121. // ==========================
  122. function Plugin(option) {
  123. return this.each(function () {
  124. var $this = $(this);
  125. var data = $this.data(DataKey);
  126. if (!data) {
  127. var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option);
  128. $this.data(DataKey, (data = new PushMenu(options)));
  129. }
  130. if (option === 'toggle') data.toggle();
  131. });
  132. }
  133. var old = $.fn.pushMenu;
  134. $.fn.pushMenu = Plugin;
  135. $.fn.pushMenu.Constructor = PushMenu;
  136. // No Conflict Mode
  137. // ================
  138. $.fn.pushMenu.noConflict = function () {
  139. $.fn.pushMenu = old;
  140. return this;
  141. };
  142. // Data API
  143. // ========
  144. $(document).on('click', Selector.button, function (e) {
  145. e.preventDefault();
  146. Plugin.call($(this), 'toggle');
  147. });
  148. $(window).on('load', function () {
  149. Plugin.call($(Selector.button));
  150. });
  151. }(jQuery);