AdminLTE/build/js/PushMenu.js

177 lines
4.7 KiB
JavaScript
Raw Normal View History

2017-02-19 15:43:39 +00:00
/* PushMenu()
* ==========
* Adds the push menu functionality to the sidebar.
*
* @usage: $('.btn').pushMenu(options)
* or add [data-toggle="push-menu"] to any button
2017-02-19 15:43:39 +00:00
* Pass any option as data-option="value"
*/
+function ($) {
2017-10-26 20:53:11 +00:00
'use strict';
2017-02-19 15:43:39 +00:00
2017-10-26 20:53:11 +00:00
var DataKey = 'lte.pushmenu';
2017-02-19 15:43:39 +00:00
var Default = {
collapseScreenSize : 767,
expandOnHover : false,
expandTransitionDelay: 200
2017-10-26 20:53:11 +00:00
};
2017-02-19 15:43:39 +00:00
var Selector = {
collapsed : '.sidebar-collapse',
open : '.sidebar-open',
mainSidebar : '.main-sidebar',
contentWrapper: '.content-wrapper',
searchInput : '.sidebar-form .form-control',
button : '[data-toggle="push-menu"]',
2017-02-19 15:43:39 +00:00
mini : '.sidebar-mini',
expanded : '.sidebar-expanded-on-hover',
layoutFixed : '.fixed'
2017-10-26 20:53:11 +00:00
};
2017-02-19 15:43:39 +00:00
var ClassName = {
collapsed : 'sidebar-collapse',
open : 'sidebar-open',
mini : 'sidebar-mini',
expanded : 'sidebar-expanded-on-hover',
expandFeature: 'sidebar-mini-expand-feature',
layoutFixed : 'fixed'
2017-10-26 20:53:11 +00:00
};
2017-02-19 15:43:39 +00:00
var Event = {
expanded : 'expanded.pushMenu',
collapsed: 'collapsed.pushMenu'
2017-10-26 20:53:11 +00:00
};
2017-02-19 15:43:39 +00:00
// PushMenu Class Definition
// =========================
var PushMenu = function (options) {
2017-10-26 20:53:11 +00:00
this.options = options;
this.init();
};
2017-02-19 15:43:39 +00:00
PushMenu.prototype.init = function () {
if (this.options.expandOnHover
|| ($('body').is(Selector.mini + Selector.layoutFixed))) {
2017-10-26 20:53:11 +00:00
this.expandOnHover();
$('body').addClass(ClassName.expandFeature);
2017-02-19 15:43:39 +00:00
}
$(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)) {
2017-10-26 20:53:11 +00:00
this.close();
2017-02-19 15:43:39 +00:00
}
2017-10-26 20:53:11 +00:00
}.bind(this));
2017-02-19 15:43:39 +00:00
// __Fix for android devices
$(Selector.searchInput).click(function (e) {
2017-10-26 20:53:11 +00:00
e.stopPropagation();
});
};
2017-02-19 15:43:39 +00:00
PushMenu.prototype.toggle = function () {
2017-10-26 20:53:11 +00:00
var windowWidth = $(window).width();
var isOpen = !$('body').hasClass(ClassName.collapsed);
2017-02-19 15:43:39 +00:00
if (windowWidth <= this.options.collapseScreenSize) {
2017-10-26 20:53:11 +00:00
isOpen = $('body').hasClass(ClassName.open);
2017-02-19 15:43:39 +00:00
}
if (!isOpen) {
2017-10-26 20:53:11 +00:00
this.open();
2017-02-19 15:43:39 +00:00
} else {
2017-10-26 20:53:11 +00:00
this.close();
2017-02-19 15:43:39 +00:00
}
2017-10-26 20:53:11 +00:00
};
2017-02-19 15:43:39 +00:00
PushMenu.prototype.open = function () {
2017-10-26 20:53:11 +00:00
var windowWidth = $(window).width();
2017-02-19 15:43:39 +00:00
if (windowWidth > this.options.collapseScreenSize) {
$('body').removeClass(ClassName.collapsed)
2017-10-26 20:53:11 +00:00
.trigger($.Event(Event.expanded));
2017-02-19 15:43:39 +00:00
}
else {
$('body').addClass(ClassName.open)
2017-10-26 20:53:11 +00:00
.trigger($.Event(Event.expanded));
2017-02-19 15:43:39 +00:00
}
2017-10-26 20:53:11 +00:00
};
2017-02-19 15:43:39 +00:00
PushMenu.prototype.close = function () {
2017-10-26 20:53:11 +00:00
var windowWidth = $(window).width();
2017-02-19 15:43:39 +00:00
if (windowWidth > this.options.collapseScreenSize) {
$('body').addClass(ClassName.collapsed)
2017-10-26 20:53:11 +00:00
.trigger($.Event(Event.collapsed));
2017-02-19 15:43:39 +00:00
} else {
$('body').removeClass(ClassName.open + ' ' + ClassName.collapsed)
2017-10-26 20:53:11 +00:00
.trigger($.Event(Event.collapsed));
2017-02-19 15:43:39 +00:00
}
2017-10-26 20:53:11 +00:00
};
2017-02-19 15:43:39 +00:00
PushMenu.prototype.expandOnHover = function () {
$(Selector.mainSidebar).hover(function () {
if ($('body').is(Selector.mini + Selector.collapsed)
&& $(window).width() > this.options.collapseScreenSize) {
2017-10-26 20:53:11 +00:00
this.expand();
2017-02-19 15:43:39 +00:00
}
}.bind(this), function () {
if ($('body').is(Selector.expanded)) {
2017-10-26 20:53:11 +00:00
this.collapse();
2017-02-19 15:43:39 +00:00
}
2017-10-26 20:53:11 +00:00
}.bind(this));
};
2017-02-19 15:43:39 +00:00
PushMenu.prototype.expand = function () {
setTimeout(function () {
$('body').removeClass(ClassName.collapsed)
2017-10-26 20:53:11 +00:00
.addClass(ClassName.expanded);
}, this.options.expandTransitionDelay);
};
2017-02-19 15:43:39 +00:00
PushMenu.prototype.collapse = function () {
setTimeout(function () {
$('body').removeClass(ClassName.expanded)
2017-10-26 20:53:11 +00:00
.addClass(ClassName.collapsed);
}, this.options.expandTransitionDelay);
};
2017-02-19 15:43:39 +00:00
// PushMenu Plugin Definition
// ==========================
function Plugin(option) {
return this.each(function () {
2017-10-26 20:53:11 +00:00
var $this = $(this);
var data = $this.data(DataKey);
2017-02-19 15:43:39 +00:00
if (!data) {
2017-10-26 20:53:11 +00:00
var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option);
$this.data(DataKey, (data = new PushMenu(options)));
2017-02-19 15:43:39 +00:00
}
2017-10-26 20:53:11 +00:00
if (option === 'toggle') data.toggle();
});
2017-02-19 15:43:39 +00:00
}
2017-10-26 20:53:11 +00:00
var old = $.fn.pushMenu;
2017-02-19 15:43:39 +00:00
2017-10-26 20:53:11 +00:00
$.fn.pushMenu = Plugin;
$.fn.pushMenu.Constructor = PushMenu;
2017-02-19 15:43:39 +00:00
// No Conflict Mode
// ================
$.fn.pushMenu.noConflict = function () {
2017-10-26 20:53:11 +00:00
$.fn.pushMenu = old;
return this;
};
2017-02-19 15:43:39 +00:00
// Data API
// ========
$(document).on('click', Selector.button, function (e) {
2017-10-26 20:53:11 +00:00
e.preventDefault();
Plugin.call($(this), 'toggle');
});
2017-02-19 15:43:39 +00:00
$(window).on('load', function () {
2017-10-26 20:53:11 +00:00
Plugin.call($(Selector.button));
});
}(jQuery);