From 178adf5dc056ea5091d430eb2afbf7031dcf9939 Mon Sep 17 00:00:00 2001 From: Abdullah Almsaeed Date: Sun, 19 Feb 2017 10:43:39 -0500 Subject: [PATCH] Create PushMenu widget --- build/js/PushMenu.js | 177 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 build/js/PushMenu.js diff --git a/build/js/PushMenu.js b/build/js/PushMenu.js new file mode 100644 index 000000000..645ee4cca --- /dev/null +++ b/build/js/PushMenu.js @@ -0,0 +1,177 @@ +/* PushMenu() + * ========== + * Adds the push menu functionality to the sidebar. + * + * @type Function + * @usage: $('.btn').pushMenu(options) + * or add [data-toggle="offcanvas"] to any toggle button + * Pass any option as data-option="value" + */ ++function ($) { + 'use strict' + + var DataKey = 'lte.pushmenu' + + var Default = { + collapseScreenSize : 767, + expandOnHover : false, + expandTransitionDelay: 200 + } + + var Selector = { + collapsed : '.sidebar-collapse', + open : '.sidebar-open', + mainSidebar : '.main-sidebar', + contentWrapper: '.content-wrapper', + searchInput : '.sidebar-form .form-control', + button : '[data-toggle="offcanvas"]', + mini : '.sidebar-mini', + expanded : '.sidebar-expanded-on-hover', + layoutFixed : '.fixed' + } + + var ClassName = { + collapsed : 'sidebar-collapse', + open : 'sidebar-open', + mini : 'sidebar-mini', + expanded : 'sidebar-expanded-on-hover', + expandFeature: 'sidebar-mini-expand-feature', + layoutFixed : 'fixed' + } + + var Event = { + expanded : 'expanded.pushMenu', + collapsed: 'collapsed.pushMenu' + } + + // PushMenu Class Definition + // ========================= + var PushMenu = function (options) { + this.options = options + this.init() + } + + PushMenu.prototype.init = function () { + if (this.options.expandOnHover + || ($('body').is(Selector.mini + Selector.layoutFixed))) { + this.expandOnHover() + $('body').addClass(ClassName.expandFeature) + } + + $(Selector.contentWrapper).click(function () { + // Enable hide menu when clicking on the content-wrapper on small screens + if ($(window).width() <= this.options.collapseScreenSize && $('body').hasClass(ClassName.open)) { + this.close() + } + }.bind(this)) + + // __Fix for android devices + $(Selector.searchInput).click(function (e) { + e.stopPropagation() + }) + } + + PushMenu.prototype.toggle = function () { + var windowWidth = $(window).width() + var isOpen = !$('body').hasClass(ClassName.collapsed) + + if (windowWidth <= this.options.collapseScreenSize) { + isOpen = $('body').hasClass(ClassName.open) + } + + if (!isOpen) { + this.open() + } else { + this.close() + } + } + + PushMenu.prototype.open = function () { + var windowWidth = $(window).width() + + if (windowWidth > this.options.collapseScreenSize) { + $('body').removeClass(ClassName.collapsed) + .trigger($.Event(Event.expanded)) + } + else { + $('body').addClass(ClassName.open) + .trigger($.Event(Event.expanded)) + } + } + + PushMenu.prototype.close = function () { + var windowWidth = $(window).width() + if (windowWidth > this.options.collapseScreenSize) { + $('body').addClass(ClassName.collapsed) + .trigger($.Event(Event.collapsed)) + } else { + $('body').removeClass(ClassName.open + ' ' + ClassName.collapsed) + .trigger($.Event(Event.collapsed)) + } + } + + PushMenu.prototype.expandOnHover = function () { + $(Selector.mainSidebar).hover(function () { + if ($('body').is(Selector.mini + Selector.collapsed) + && $(window).width() > this.options.collapseScreenSize) { + this.expand() + } + }.bind(this), function () { + if ($('body').is(Selector.expanded)) { + this.collapse() + } + }.bind(this)) + } + + PushMenu.prototype.expand = function () { + setTimeout(function () { + $('body').removeClass(ClassName.collapsed) + .addClass(ClassName.expanded) + }, this.options.expandTransitionDelay) + } + + PushMenu.prototype.collapse = function () { + setTimeout(function () { + $('body').removeClass(ClassName.expanded) + .addClass(ClassName.collapsed) + }, this.options.expandTransitionDelay) + } + + // PushMenu Plugin Definition + // ========================== + function Plugin(option) { + return this.each(function () { + var $this = $(this) + var data = $this.data(DataKey) + + if (!data) { + var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option) + $this.data(DataKey, (data = new PushMenu(options))) + } + + if (option == 'toggle') data.toggle() + }) + } + + var old = $.fn.pushMenu + + $.fn.pushMenu = Plugin + $.fn.pushMenu.Constructor = PushMenu + + // No Conflict Mode + // ================ + $.fn.pushMenu.noConflict = function () { + $.fn.pushMenu = old + return this + } + + // Data API + // ======== + $(document).on('click', Selector.button, function (e) { + e.preventDefault() + Plugin.call($(this), 'toggle') + }) + $(window).on('load', function () { + Plugin.call($(Selector.button), {}) + }) +}(jQuery)