PushMenu.js 4.6 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)