2016-01-16 17:27:23 +01:00
|
|
|
/**
|
|
|
|
* --------------------------------------------
|
|
|
|
* AdminLTE Layout.js
|
|
|
|
* License MIT
|
|
|
|
* --------------------------------------------
|
|
|
|
*/
|
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
import $ from 'jquery'
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
/**
|
|
|
|
* Constants
|
|
|
|
* ====================================================
|
|
|
|
*/
|
|
|
|
|
|
|
|
const NAME = 'Layout'
|
|
|
|
const DATA_KEY = 'lte.layout'
|
|
|
|
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
|
|
|
|
|
|
|
const Selector = {
|
|
|
|
HEADER: '.main-header',
|
|
|
|
MAIN_SIDEBAR: '.main-sidebar',
|
|
|
|
SIDEBAR: '.main-sidebar .sidebar',
|
|
|
|
CONTENT: '.content-wrapper',
|
|
|
|
CONTROL_SIDEBAR_CONTENT: '.control-sidebar-content',
|
|
|
|
CONTROL_SIDEBAR_BTN: '[data-widget="control-sidebar"]',
|
|
|
|
FOOTER: '.main-footer',
|
|
|
|
PUSHMENU_BTN: '[data-widget="pushmenu"]',
|
|
|
|
LOGIN_BOX: '.login-box',
|
|
|
|
REGISTER_BOX: '.register-box'
|
|
|
|
}
|
|
|
|
|
|
|
|
const ClassName = {
|
|
|
|
SIDEBAR_FOCUSED: 'sidebar-focused',
|
|
|
|
LAYOUT_FIXED: 'layout-fixed',
|
|
|
|
CONTROL_SIDEBAR_SLIDE_OPEN: 'control-sidebar-slide-open',
|
|
|
|
CONTROL_SIDEBAR_OPEN: 'control-sidebar-open'
|
|
|
|
}
|
|
|
|
|
|
|
|
const Default = {
|
|
|
|
scrollbarTheme: 'os-theme-light',
|
|
|
|
scrollbarAutoHide: 'l',
|
|
|
|
panelAutoHeight: true,
|
|
|
|
loginRegisterAutoHeight: true
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Class Definition
|
|
|
|
* ====================================================
|
|
|
|
*/
|
|
|
|
|
|
|
|
class Layout {
|
|
|
|
constructor(element, config) {
|
|
|
|
this._config = config
|
|
|
|
this._element = element
|
2019-06-05 13:34:15 +02:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
this._init()
|
2016-01-16 17:27:23 +01:00
|
|
|
}
|
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
// Public
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
fixLayoutHeight(extra = null) {
|
|
|
|
let controlSidebar = 0
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || extra === 'control_sidebar') {
|
|
|
|
controlSidebar = $(Selector.CONTROL_SIDEBAR_CONTENT).height()
|
2016-01-16 17:27:23 +01:00
|
|
|
}
|
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
const heights = {
|
|
|
|
window: $(window).height(),
|
|
|
|
header: $(Selector.HEADER).length !== 0 ? $(Selector.HEADER).outerHeight() : 0,
|
|
|
|
footer: $(Selector.FOOTER).length !== 0 ? $(Selector.FOOTER).outerHeight() : 0,
|
|
|
|
sidebar: $(Selector.SIDEBAR).length !== 0 ? $(Selector.SIDEBAR).height() : 0,
|
|
|
|
controlSidebar
|
|
|
|
}
|
|
|
|
|
|
|
|
const max = this._max(heights)
|
|
|
|
let offset = this._config.panelAutoHeight
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
if (offset === true) {
|
|
|
|
offset = 0
|
|
|
|
}
|
2019-11-22 10:23:17 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
if (offset !== false) {
|
|
|
|
if (max === heights.controlSidebar) {
|
|
|
|
$(Selector.CONTENT).css('min-height', (max + offset))
|
|
|
|
} else if (max === heights.window) {
|
|
|
|
$(Selector.CONTENT).css('min-height', (max + offset) - heights.header - heights.footer)
|
|
|
|
} else {
|
|
|
|
$(Selector.CONTENT).css('min-height', (max + offset) - heights.header)
|
2019-11-22 10:23:17 +01:00
|
|
|
}
|
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
if (this._isFooterFixed()) {
|
|
|
|
$(Selector.CONTENT).css('min-height', parseFloat($(Selector.CONTENT).css('min-height')) + heights.footer)
|
2018-03-17 18:07:55 +01:00
|
|
|
}
|
2020-06-02 15:23:22 +02:00
|
|
|
}
|
2019-06-05 13:34:15 +02:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
if (!$('body').hasClass(ClassName.LAYOUT_FIXED)) {
|
|
|
|
return
|
|
|
|
}
|
2016-10-15 19:18:29 +02:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
if (offset !== false) {
|
|
|
|
$(Selector.CONTENT).css('min-height', (max + offset) - heights.header - heights.footer)
|
|
|
|
}
|
2020-03-10 09:28:26 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
if (typeof $.fn.overlayScrollbars !== 'undefined') {
|
|
|
|
$(Selector.SIDEBAR).overlayScrollbars({
|
|
|
|
className: this._config.scrollbarTheme,
|
|
|
|
sizeAutoCapable: true,
|
|
|
|
scrollbars: {
|
|
|
|
autoHide: this._config.scrollbarAutoHide,
|
|
|
|
clickScrolling: true
|
2020-03-10 09:28:26 +01:00
|
|
|
}
|
2020-06-02 15:23:22 +02:00
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2020-05-30 15:44:20 +02:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
fixLoginRegisterHeight() {
|
|
|
|
if ($(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).length === 0) {
|
|
|
|
$('body, html').css('height', 'auto')
|
|
|
|
} else {
|
|
|
|
const boxHeight = $(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).height()
|
2019-10-12 11:36:52 +02:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
if ($('body').css('min-height') !== boxHeight) {
|
|
|
|
$('body').css('min-height', boxHeight)
|
2020-05-31 15:45:54 +02:00
|
|
|
}
|
2020-06-02 15:23:22 +02:00
|
|
|
}
|
|
|
|
}
|
2019-10-12 11:36:52 +02:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
// Private
|
2020-05-31 15:45:54 +02:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
_init() {
|
|
|
|
// Activate layout height watcher
|
|
|
|
this.fixLayoutHeight()
|
|
|
|
|
|
|
|
if (this._config.loginRegisterAutoHeight === true) {
|
|
|
|
this.fixLoginRegisterHeight()
|
|
|
|
} else if (this._config.loginRegisterAutoHeight === parseInt(this._config.loginRegisterAutoHeight, 10)) {
|
|
|
|
setInterval(this.fixLoginRegisterHeight, this._config.loginRegisterAutoHeight)
|
2016-01-16 17:27:23 +01:00
|
|
|
}
|
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
$(Selector.SIDEBAR)
|
|
|
|
.on('collapsed.lte.treeview expanded.lte.treeview', () => {
|
|
|
|
this.fixLayoutHeight()
|
|
|
|
})
|
2020-02-25 14:25:05 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
$(Selector.PUSHMENU_BTN)
|
|
|
|
.on('collapsed.lte.pushmenu shown.lte.pushmenu', () => {
|
|
|
|
this.fixLayoutHeight()
|
|
|
|
})
|
2020-02-25 14:25:05 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
$(Selector.CONTROL_SIDEBAR_BTN)
|
|
|
|
.on('collapsed.lte.controlsidebar', () => {
|
|
|
|
this.fixLayoutHeight()
|
|
|
|
})
|
|
|
|
.on('expanded.lte.controlsidebar', () => {
|
|
|
|
this.fixLayoutHeight('control_sidebar')
|
|
|
|
})
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
$(window).resize(() => {
|
2016-01-16 17:27:23 +01:00
|
|
|
this.fixLayoutHeight()
|
2020-06-02 15:23:22 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
$('body.hold-transition').removeClass('hold-transition')
|
|
|
|
}, 50)
|
|
|
|
}
|
|
|
|
|
|
|
|
_max(numbers) {
|
|
|
|
// Calculate the maximum number in a list
|
|
|
|
let max = 0
|
2020-02-25 14:25:05 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
Object.keys(numbers).forEach(key => {
|
|
|
|
if (numbers[key] > max) {
|
|
|
|
max = numbers[key]
|
2020-02-25 14:25:05 +01:00
|
|
|
}
|
2020-06-02 15:23:22 +02:00
|
|
|
})
|
2020-02-25 14:25:05 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
return max
|
|
|
|
}
|
2016-10-22 21:32:28 +02:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
_isFooterFixed() {
|
|
|
|
return $('.main-footer').css('position') === 'fixed'
|
|
|
|
}
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
// Static
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
static _jQueryInterface(config = '') {
|
|
|
|
return this.each(function () {
|
|
|
|
let data = $(this).data(DATA_KEY)
|
|
|
|
const _options = $.extend({}, Default, $(this).data())
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
if (!data) {
|
|
|
|
data = new Layout($(this), _options)
|
|
|
|
$(this).data(DATA_KEY, data)
|
|
|
|
}
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
if (config === 'init' || config === '') {
|
|
|
|
data._init()
|
|
|
|
} else if (config === 'fixLayoutHeight' || config === 'fixLoginRegisterHeight') {
|
|
|
|
data[config]()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2020-04-27 19:28:05 +02:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
/**
|
|
|
|
* Data API
|
|
|
|
* ====================================================
|
|
|
|
*/
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
$(window).on('load', () => {
|
|
|
|
Layout._jQueryInterface.call($('body'))
|
|
|
|
})
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
$(Selector.SIDEBAR + ' a').on('focusin', () => {
|
|
|
|
$(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED)
|
|
|
|
})
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
$(Selector.SIDEBAR + ' a').on('focusout', () => {
|
|
|
|
$(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED)
|
|
|
|
})
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
/**
|
|
|
|
* jQuery API
|
|
|
|
* ====================================================
|
|
|
|
*/
|
2016-01-16 17:27:23 +01:00
|
|
|
|
2020-06-02 15:23:22 +02:00
|
|
|
$.fn[NAME] = Layout._jQueryInterface
|
|
|
|
$.fn[NAME].Constructor = Layout
|
|
|
|
$.fn[NAME].noConflict = function () {
|
|
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
|
|
|
return Layout._jQueryInterface
|
|
|
|
}
|
2018-02-04 00:45:19 +01:00
|
|
|
|
2019-06-05 14:02:11 +02:00
|
|
|
export default Layout
|