- rebuild table scss code to a correct scss/sass code (nesting) - added .table-head-fixed code for default table & dark table - removed unnecessary spaces in Layout.js
204 lines
5.4 KiB
JavaScript
204 lines
5.4 KiB
JavaScript
/**
|
|
* --------------------------------------------
|
|
* AdminLTE Layout.js
|
|
* License MIT
|
|
* --------------------------------------------
|
|
*/
|
|
|
|
const Layout = (($) => {
|
|
/**
|
|
* Constants
|
|
* ====================================================
|
|
*/
|
|
|
|
const NAME = 'Layout'
|
|
const DATA_KEY = 'lte.layout'
|
|
const EVENT_KEY = `.${DATA_KEY}`
|
|
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
|
|
|
const Event = {
|
|
SIDEBAR: 'sidebar'
|
|
}
|
|
|
|
const Selector = {
|
|
HEADER : '.main-header',
|
|
MAIN_SIDEBAR : '.main-sidebar',
|
|
SIDEBAR : '.main-sidebar .sidebar',
|
|
CONTENT : '.content-wrapper',
|
|
BRAND : '.brand-link',
|
|
CONTENT_HEADER : '.content-header',
|
|
WRAPPER : '.wrapper',
|
|
CONTROL_SIDEBAR: '.control-sidebar',
|
|
LAYOUT_FIXED : '.layout-fixed',
|
|
FOOTER : '.main-footer'
|
|
}
|
|
|
|
const ClassName = {
|
|
HOLD : 'hold-transition',
|
|
SIDEBAR : 'main-sidebar',
|
|
CONTENT_FIXED : 'content-fixed',
|
|
SIDEBAR_FOCUSED: 'sidebar-focused',
|
|
LAYOUT_FIXED : 'layout-fixed',
|
|
NAVBAR_FIXED : 'layout-navbar-fixed',
|
|
FOOTER_FIXED : 'layout-footer-fixed',
|
|
}
|
|
|
|
const Default = {
|
|
scrollbarTheme : 'os-theme-light',
|
|
scrollbarAutoHide: 'l'
|
|
}
|
|
|
|
/**
|
|
* Class Definition
|
|
* ====================================================
|
|
*/
|
|
|
|
class Layout {
|
|
constructor(element, config) {
|
|
this._config = config
|
|
this._element = element
|
|
|
|
this._init()
|
|
}
|
|
|
|
// Public
|
|
|
|
fixLayoutHeight() {
|
|
const heights = {
|
|
window : $(window).height(),
|
|
header : $(Selector.HEADER).outerHeight(),
|
|
footer : $(Selector.FOOTER).outerHeight(),
|
|
sidebar : $(Selector.SIDEBAR).height(),
|
|
}
|
|
|
|
const max = this._max(heights)
|
|
|
|
|
|
if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
|
|
$(Selector.CONTENT).css('min-height', max - heights.header - heights.footer)
|
|
// $(Selector.SIDEBAR).css('min-height', max - heights.header)
|
|
$(Selector.CONTROL_SIDEBAR + ' .control-sidebar-content').css('height', max - heights.header)
|
|
|
|
if (typeof $.fn.overlayScrollbars !== 'undefined') {
|
|
$(Selector.SIDEBAR).overlayScrollbars({
|
|
className : this._config.scrollbarTheme,
|
|
sizeAutoCapable : true,
|
|
scrollbars : {
|
|
autoHide: this._config.scrollbarAutoHide,
|
|
clickScrolling : true
|
|
}
|
|
})
|
|
$(Selector.CONTROL_SIDEBAR + ' .control-sidebar-content').overlayScrollbars({
|
|
className : this._config.scrollbarTheme,
|
|
sizeAutoCapable : true,
|
|
scrollbars : {
|
|
autoHide: this._config.scrollbarAutoHide,
|
|
clickScrolling : true
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
if (heights.window > heights.sidebar) {
|
|
$(Selector.CONTENT).css('min-height', heights.window - heights.header - heights.footer)
|
|
} else {
|
|
$(Selector.CONTENT).css('min-height', heights.sidebar - heights.header)
|
|
}
|
|
}
|
|
if ($('body').hasClass(ClassName.NAVBAR_FIXED)) {
|
|
$(Selector.BRAND).css('height', heights.header)
|
|
$(Selector.SIDEBAR).css('margin-top', heights.header)
|
|
$(Selector.SIDEBAR).css('margin-top', heights.header)
|
|
}
|
|
if ($('body').hasClass(ClassName.FOOTER_FIXED)) {
|
|
$(Selector.CONTENT).css('margin-bottom', heights.footer)
|
|
}
|
|
if ($('body').hasClass(ClassName.CONTENT_FIXED)) {
|
|
$(Selector.CONTENT).css('height', $(Selector.CONTENT).css('min-height'))
|
|
}
|
|
}
|
|
|
|
// Private
|
|
|
|
_init() {
|
|
// Enable transitions
|
|
$('body').removeClass(ClassName.HOLD)
|
|
|
|
// Activate layout height watcher
|
|
this.fixLayoutHeight()
|
|
$(Selector.SIDEBAR)
|
|
.on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', () => {
|
|
this.fixLayoutHeight()
|
|
})
|
|
|
|
$(window).resize(() => {
|
|
this.fixLayoutHeight()
|
|
})
|
|
|
|
$('body, html').css('height', 'auto')
|
|
}
|
|
|
|
_max(numbers) {
|
|
// Calculate the maximum number in a list
|
|
let max = 0
|
|
|
|
Object.keys(numbers).forEach((key) => {
|
|
if (numbers[key] > max) {
|
|
max = numbers[key]
|
|
}
|
|
})
|
|
|
|
return max
|
|
}
|
|
|
|
// Static
|
|
|
|
static _jQueryInterface(config) {
|
|
return this.each(function () {
|
|
let data = $(this).data(DATA_KEY)
|
|
const _config = $.extend({}, Default, $(this).data())
|
|
|
|
if (!data) {
|
|
data = new Layout($(this), _config)
|
|
$(this).data(DATA_KEY, data)
|
|
}
|
|
|
|
if (config === 'init') {
|
|
data[config]()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Data API
|
|
* ====================================================
|
|
*/
|
|
|
|
$(window).on('load', () => {
|
|
Layout._jQueryInterface.call($('body'))
|
|
})
|
|
|
|
$(Selector.SIDEBAR + ' a').on('focusin', () => {
|
|
$(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED);
|
|
})
|
|
|
|
$(Selector.SIDEBAR + ' a').on('focusout', () => {
|
|
$(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED);
|
|
})
|
|
|
|
/**
|
|
* jQuery API
|
|
* ====================================================
|
|
*/
|
|
|
|
$.fn[NAME] = Layout._jQueryInterface
|
|
$.fn[NAME].Constructor = Layout
|
|
$.fn[NAME].noConflict = function () {
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
|
return Layout._jQueryInterface
|
|
}
|
|
|
|
return Layout
|
|
})(jQuery)
|
|
|
|
export default Layout
|