2015-11-11 20:29:54 +01:00
|
|
|
/**
|
|
|
|
* --------------------------------------------
|
|
|
|
* AdminLTE PushMenu.js
|
|
|
|
* License MIT
|
|
|
|
* --------------------------------------------
|
|
|
|
*/
|
|
|
|
|
|
|
|
const PushMenu = (($) => {
|
|
|
|
/**
|
|
|
|
* Constants
|
|
|
|
* ====================================================
|
|
|
|
*/
|
|
|
|
|
2018-03-17 18:07:55 +01:00
|
|
|
const NAME = 'PushMenu'
|
|
|
|
const DATA_KEY = 'lte.pushmenu'
|
|
|
|
const EVENT_KEY = `.${DATA_KEY}`
|
2015-11-11 20:29:54 +01:00
|
|
|
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
|
|
|
|
|
|
|
const Event = {
|
|
|
|
COLLAPSED: `collapsed${EVENT_KEY}`,
|
2019-08-19 14:03:05 +02:00
|
|
|
SHOWN: `shown${EVENT_KEY}`
|
2018-03-17 18:07:55 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const Default = {
|
2019-10-08 12:02:43 +02:00
|
|
|
autoCollapseSize: 992,
|
2019-08-19 14:03:05 +02:00
|
|
|
enableRemember: false,
|
|
|
|
noTransitionAfterReload: true
|
2015-11-11 20:29:54 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const Selector = {
|
2019-08-19 14:03:05 +02:00
|
|
|
TOGGLE_BUTTON: '[data-widget="pushmenu"]',
|
|
|
|
SIDEBAR_MINI: '.sidebar-mini',
|
2018-03-17 18:07:55 +01:00
|
|
|
SIDEBAR_COLLAPSED: '.sidebar-collapse',
|
2019-08-19 14:03:05 +02:00
|
|
|
BODY: 'body',
|
|
|
|
OVERLAY: '#sidebar-overlay',
|
|
|
|
WRAPPER: '.wrapper'
|
2018-03-17 18:07:55 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const ClassName = {
|
|
|
|
SIDEBAR_OPEN: 'sidebar-open',
|
2019-08-19 14:03:05 +02:00
|
|
|
COLLAPSED: 'sidebar-collapse',
|
2019-09-19 13:34:26 +02:00
|
|
|
OPEN: 'sidebar-open'
|
2015-11-11 20:29:54 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Class Definition
|
|
|
|
* ====================================================
|
|
|
|
*/
|
|
|
|
|
|
|
|
class PushMenu {
|
2018-03-17 18:07:55 +01:00
|
|
|
constructor(element, options) {
|
2015-11-11 20:29:54 +01:00
|
|
|
this._element = element
|
2018-03-17 18:07:55 +01:00
|
|
|
this._options = $.extend({}, Default, options)
|
|
|
|
|
|
|
|
if (!$(Selector.OVERLAY).length) {
|
|
|
|
this._addOverlay()
|
|
|
|
}
|
2019-09-19 13:34:26 +02:00
|
|
|
|
|
|
|
this._init()
|
2015-11-11 20:29:54 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// Public
|
|
|
|
|
|
|
|
show() {
|
2019-10-12 11:41:11 +02:00
|
|
|
if (this._options.autoCollapseSize) {
|
|
|
|
if ($(window).width() <= this._options.autoCollapseSize) {
|
|
|
|
$(Selector.BODY).addClass(ClassName.OPEN)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$(Selector.BODY).removeClass(ClassName.COLLAPSED)
|
2015-11-11 20:29:54 +01:00
|
|
|
|
2019-08-19 14:03:05 +02:00
|
|
|
if(this._options.enableRemember) {
|
2019-10-19 12:01:46 +02:00
|
|
|
localStorage.setItem(`remember${EVENT_KEY}`, ClassName.OPEN)
|
2019-08-19 14:03:05 +02:00
|
|
|
}
|
|
|
|
|
2018-02-04 00:45:19 +01:00
|
|
|
const shownEvent = $.Event(Event.SHOWN)
|
2015-11-11 20:29:54 +01:00
|
|
|
$(this._element).trigger(shownEvent)
|
|
|
|
}
|
|
|
|
|
|
|
|
collapse() {
|
2019-10-12 11:41:11 +02:00
|
|
|
if (this._options.autoCollapseSize) {
|
|
|
|
if ($(window).width() <= this._options.autoCollapseSize) {
|
|
|
|
$(Selector.BODY).removeClass(ClassName.OPEN)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$(Selector.BODY).addClass(ClassName.COLLAPSED)
|
2015-11-11 20:29:54 +01:00
|
|
|
|
2019-08-19 14:03:05 +02:00
|
|
|
if(this._options.enableRemember) {
|
2019-10-19 12:01:46 +02:00
|
|
|
localStorage.setItem(`remember${EVENT_KEY}`, ClassName.COLLAPSED)
|
2019-08-19 14:03:05 +02:00
|
|
|
}
|
|
|
|
|
2018-02-04 00:45:19 +01:00
|
|
|
const collapsedEvent = $.Event(Event.COLLAPSED)
|
2015-11-11 20:29:54 +01:00
|
|
|
$(this._element).trigger(collapsedEvent)
|
|
|
|
}
|
|
|
|
|
2019-06-05 14:02:11 +02:00
|
|
|
toggle() {
|
2019-10-12 11:41:11 +02:00
|
|
|
if (!$(Selector.BODY).hasClass(ClassName.COLLAPSED )) {
|
2015-11-11 20:29:54 +01:00
|
|
|
this.collapse()
|
|
|
|
} else {
|
|
|
|
this.show()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-10-19 12:01:46 +02:00
|
|
|
autoCollapse(resize = false) {
|
2019-06-05 14:02:11 +02:00
|
|
|
if (this._options.autoCollapseSize) {
|
|
|
|
if ($(window).width() <= this._options.autoCollapseSize) {
|
2019-10-12 11:41:11 +02:00
|
|
|
if (!$(Selector.BODY).hasClass(ClassName.OPEN)) {
|
|
|
|
this.collapse()
|
2019-06-05 14:02:11 +02:00
|
|
|
}
|
2019-10-19 12:01:46 +02:00
|
|
|
} else if (resize == true) {
|
2019-09-19 13:34:26 +02:00
|
|
|
if (!$(Selector.BODY).hasClass(ClassName.OPEN)) {
|
2019-10-12 11:41:11 +02:00
|
|
|
this.show()
|
|
|
|
} else {
|
|
|
|
$(Selector.BODY).removeClass(ClassName.OPEN)
|
2019-06-05 14:02:11 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-19 14:03:05 +02:00
|
|
|
remember() {
|
|
|
|
if(this._options.enableRemember) {
|
2019-09-19 13:34:26 +02:00
|
|
|
let toggleState = localStorage.getItem(`remember${EVENT_KEY}`)
|
2019-08-19 14:03:05 +02:00
|
|
|
if (toggleState == ClassName.COLLAPSED){
|
|
|
|
if (this._options.noTransitionAfterReload) {
|
2019-09-05 08:15:35 +02:00
|
|
|
$("body").addClass('hold-transition').addClass(ClassName.COLLAPSED).delay(50).queue(function() {
|
2019-09-19 13:34:26 +02:00
|
|
|
$(this).removeClass('hold-transition')
|
2019-09-05 08:15:35 +02:00
|
|
|
$(this).dequeue()
|
2019-09-19 13:34:26 +02:00
|
|
|
})
|
2019-09-05 08:15:35 +02:00
|
|
|
} else {
|
2019-09-19 13:34:26 +02:00
|
|
|
$("body").addClass(ClassName.COLLAPSED)
|
2019-09-05 08:15:35 +02:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (this._options.noTransitionAfterReload) {
|
|
|
|
$("body").addClass('hold-transition').removeClass(ClassName.COLLAPSED).delay(50).queue(function() {
|
2019-09-19 13:34:26 +02:00
|
|
|
$(this).removeClass('hold-transition')
|
2019-08-19 14:03:05 +02:00
|
|
|
$(this).dequeue()
|
2019-09-19 13:34:26 +02:00
|
|
|
})
|
2019-08-19 14:03:05 +02:00
|
|
|
} else {
|
2019-09-19 13:34:26 +02:00
|
|
|
$("body").removeClass(ClassName.COLLAPSED)
|
2019-08-19 14:03:05 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-03-17 18:07:55 +01:00
|
|
|
// Private
|
2019-06-05 14:02:11 +02:00
|
|
|
|
|
|
|
_init() {
|
2019-08-19 14:03:05 +02:00
|
|
|
this.remember()
|
2019-06-05 14:02:11 +02:00
|
|
|
this.autoCollapse()
|
|
|
|
|
|
|
|
$(window).resize(() => {
|
2019-10-19 12:01:46 +02:00
|
|
|
this.autoCollapse(true)
|
2019-06-05 14:02:11 +02:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2018-03-17 18:07:55 +01:00
|
|
|
_addOverlay() {
|
|
|
|
const overlay = $('<div />', {
|
|
|
|
id: 'sidebar-overlay'
|
|
|
|
})
|
|
|
|
|
|
|
|
overlay.on('click', () => {
|
|
|
|
this.collapse()
|
|
|
|
})
|
|
|
|
|
|
|
|
$(Selector.WRAPPER).append(overlay)
|
|
|
|
}
|
|
|
|
|
2015-11-11 20:29:54 +01:00
|
|
|
// Static
|
|
|
|
|
|
|
|
static _jQueryInterface(operation) {
|
|
|
|
return this.each(function () {
|
|
|
|
let data = $(this).data(DATA_KEY)
|
2019-06-05 13:34:15 +02:00
|
|
|
const _options = $.extend({}, Default, $(this).data())
|
2015-11-11 20:29:54 +01:00
|
|
|
|
|
|
|
if (!data) {
|
2019-06-05 13:34:15 +02:00
|
|
|
data = new PushMenu(this, _options)
|
2015-11-11 20:29:54 +01:00
|
|
|
$(this).data(DATA_KEY, data)
|
|
|
|
}
|
|
|
|
|
2019-06-10 17:39:15 +02:00
|
|
|
if (operation === 'toggle') {
|
2015-11-11 20:29:54 +01:00
|
|
|
data[operation]()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Data API
|
|
|
|
* ====================================================
|
|
|
|
*/
|
|
|
|
|
|
|
|
$(document).on('click', Selector.TOGGLE_BUTTON, (event) => {
|
|
|
|
event.preventDefault()
|
|
|
|
|
2016-01-16 17:27:23 +01:00
|
|
|
let button = event.currentTarget
|
2015-11-11 20:29:54 +01:00
|
|
|
|
|
|
|
if ($(button).data('widget') !== 'pushmenu') {
|
|
|
|
button = $(button).closest(Selector.TOGGLE_BUTTON)
|
|
|
|
}
|
|
|
|
|
|
|
|
PushMenu._jQueryInterface.call($(button), 'toggle')
|
|
|
|
})
|
|
|
|
|
2019-06-05 14:02:11 +02:00
|
|
|
$(window).on('load', () => {
|
|
|
|
PushMenu._jQueryInterface.call($(Selector.TOGGLE_BUTTON))
|
|
|
|
})
|
|
|
|
|
2015-11-11 20:29:54 +01:00
|
|
|
/**
|
|
|
|
* jQuery API
|
|
|
|
* ====================================================
|
|
|
|
*/
|
|
|
|
|
|
|
|
$.fn[NAME] = PushMenu._jQueryInterface
|
|
|
|
$.fn[NAME].Constructor = PushMenu
|
2018-03-17 18:07:55 +01:00
|
|
|
$.fn[NAME].noConflict = function () {
|
2015-11-11 20:29:54 +01:00
|
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
|
|
|
return PushMenu._jQueryInterface
|
|
|
|
}
|
|
|
|
|
|
|
|
return PushMenu
|
|
|
|
})(jQuery)
|
2018-02-04 00:45:19 +01:00
|
|
|
|
|
|
|
export default PushMenu
|