AdminLTE/build/js/ControlSidebar.js

329 lines
9.4 KiB
JavaScript
Raw Normal View History

2016-10-19 15:23:34 +00:00
/**
* --------------------------------------------
* AdminLTE ControlSidebar.js
* License MIT
* --------------------------------------------
*/
2020-06-02 13:23:22 +00:00
import $ from 'jquery'
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
/**
* Constants
* ====================================================
*/
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
const NAME = 'ControlSidebar'
const DATA_KEY = 'lte.controlsidebar'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
const EVENT_COLLAPSED_DONE = `collapsed-done${EVENT_KEY}`
const EVENT_EXPANDED = `expanded${EVENT_KEY}`
const SELECTOR_CONTROL_SIDEBAR = '.control-sidebar'
const SELECTOR_CONTROL_SIDEBAR_CONTENT = '.control-sidebar-content'
const SELECTOR_DATA_TOGGLE = '[data-widget="control-sidebar"]'
const SELECTOR_HEADER = '.main-header'
const SELECTOR_FOOTER = '.main-footer'
const CLASS_NAME_CONTROL_SIDEBAR_ANIMATE = 'control-sidebar-animate'
const CLASS_NAME_CONTROL_SIDEBAR_OPEN = 'control-sidebar-open'
const CLASS_NAME_CONTROL_SIDEBAR_SLIDE = 'control-sidebar-slide-open'
const CLASS_NAME_LAYOUT_FIXED = 'layout-fixed'
const CLASS_NAME_NAVBAR_FIXED = 'layout-navbar-fixed'
const CLASS_NAME_NAVBAR_SM_FIXED = 'layout-sm-navbar-fixed'
const CLASS_NAME_NAVBAR_MD_FIXED = 'layout-md-navbar-fixed'
const CLASS_NAME_NAVBAR_LG_FIXED = 'layout-lg-navbar-fixed'
const CLASS_NAME_NAVBAR_XL_FIXED = 'layout-xl-navbar-fixed'
const CLASS_NAME_FOOTER_FIXED = 'layout-footer-fixed'
const CLASS_NAME_FOOTER_SM_FIXED = 'layout-sm-footer-fixed'
const CLASS_NAME_FOOTER_MD_FIXED = 'layout-md-footer-fixed'
const CLASS_NAME_FOOTER_LG_FIXED = 'layout-lg-footer-fixed'
const CLASS_NAME_FOOTER_XL_FIXED = 'layout-xl-footer-fixed'
2020-06-02 13:23:22 +00:00
const Default = {
controlsidebarSlide: true,
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'l',
target: SELECTOR_CONTROL_SIDEBAR,
animationSpeed: 300
2020-06-02 13:23:22 +00:00
}
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
/**
* Class Definition
* ====================================================
*/
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
class ControlSidebar {
constructor(element, config) {
this._element = element
this._config = config
}
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
// Public
2020-06-02 13:23:22 +00:00
collapse() {
2020-06-04 18:06:38 +00:00
const $body = $('body')
const $html = $('html')
2021-01-27 06:55:54 +00:00
const { target } = this._config
2020-06-04 18:06:38 +00:00
2020-06-02 13:23:22 +00:00
// Show the control sidebar
if (this._config.controlsidebarSlide) {
$html.addClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
$body.removeClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () {
2021-01-27 06:55:54 +00:00
$(target).hide()
$html.removeClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
2020-06-02 13:23:22 +00:00
$(this).dequeue()
})
} else {
$body.removeClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN)
2016-10-19 15:23:34 +00:00
}
$(this._element).trigger($.Event(EVENT_COLLAPSED))
setTimeout(() => {
$(this._element).trigger($.Event(EVENT_COLLAPSED_DONE))
}, this._config.animationSpeed)
2020-06-02 13:23:22 +00:00
}
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
show() {
2020-06-04 18:06:38 +00:00
const $body = $('body')
const $html = $('html')
2020-06-02 13:23:22 +00:00
// Collapse the control sidebar
if (this._config.controlsidebarSlide) {
$html.addClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
$(this._config.target).show().delay(10).queue(function () {
$body.addClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () {
$html.removeClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
$(this).dequeue()
})
2020-06-02 13:23:22 +00:00
$(this).dequeue()
})
} else {
$body.addClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN)
2016-10-19 15:23:34 +00:00
}
this._fixHeight()
this._fixScrollHeight()
$(this._element).trigger($.Event(EVENT_EXPANDED))
2020-06-02 13:23:22 +00:00
}
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
toggle() {
2020-06-04 18:06:38 +00:00
const $body = $('body')
const shouldClose = $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
$body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE)
2020-06-04 18:06:38 +00:00
2020-06-02 13:23:22 +00:00
if (shouldClose) {
// Close the control sidebar
this.collapse()
} else {
// Open the control sidebar
this.show()
2016-10-19 15:23:34 +00:00
}
2020-06-02 13:23:22 +00:00
}
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
// Private
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
_init() {
const $body = $('body')
const shouldNotHideAll = $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
$body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE)
if (shouldNotHideAll) {
$(SELECTOR_CONTROL_SIDEBAR).not(this._config.target).hide()
$(this._config.target).css('display', 'block')
} else {
$(SELECTOR_CONTROL_SIDEBAR).hide()
}
2020-06-02 13:23:22 +00:00
this._fixHeight()
this._fixScrollHeight()
$(window).resize(() => {
this._fixHeight()
this._fixScrollHeight()
2020-06-02 13:23:22 +00:00
})
2020-06-02 13:23:22 +00:00
$(window).scroll(() => {
2020-06-04 18:06:38 +00:00
const $body = $('body')
const shouldFixHeight = $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
$body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE)
2020-06-04 18:06:38 +00:00
2020-06-05 13:49:56 +00:00
if (shouldFixHeight) {
this._fixScrollHeight()
2020-06-02 13:23:22 +00:00
}
})
}
_isNavbarFixed() {
const $body = $('body')
return (
$body.hasClass(CLASS_NAME_NAVBAR_FIXED) ||
$body.hasClass(CLASS_NAME_NAVBAR_SM_FIXED) ||
$body.hasClass(CLASS_NAME_NAVBAR_MD_FIXED) ||
$body.hasClass(CLASS_NAME_NAVBAR_LG_FIXED) ||
$body.hasClass(CLASS_NAME_NAVBAR_XL_FIXED)
)
}
_isFooterFixed() {
const $body = $('body')
return (
$body.hasClass(CLASS_NAME_FOOTER_FIXED) ||
$body.hasClass(CLASS_NAME_FOOTER_SM_FIXED) ||
$body.hasClass(CLASS_NAME_FOOTER_MD_FIXED) ||
$body.hasClass(CLASS_NAME_FOOTER_LG_FIXED) ||
$body.hasClass(CLASS_NAME_FOOTER_XL_FIXED)
)
}
2020-06-02 13:23:22 +00:00
_fixScrollHeight() {
2020-06-04 18:06:38 +00:00
const $body = $('body')
const $controlSidebar = $(this._config.target)
2020-06-04 18:06:38 +00:00
if (!$body.hasClass(CLASS_NAME_LAYOUT_FIXED)) {
2020-06-02 13:23:22 +00:00
return
}
2020-06-02 13:23:22 +00:00
const heights = {
scroll: $(document).height(),
window: $(window).height(),
header: $(SELECTOR_HEADER).outerHeight(),
footer: $(SELECTOR_FOOTER).outerHeight()
2020-06-02 13:23:22 +00:00
}
const positions = {
bottom: Math.abs((heights.window + $(window).scrollTop()) - heights.scroll),
top: $(window).scrollTop()
}
const navbarFixed = this._isNavbarFixed() && $(SELECTOR_HEADER).css('position') === 'fixed'
2020-05-30 13:44:20 +00:00
const footerFixed = this._isFooterFixed() && $(SELECTOR_FOOTER).css('position') === 'fixed'
const $controlsidebarContent = $(`${this._config.target}, ${this._config.target} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
2020-06-04 18:06:38 +00:00
2020-06-02 13:23:22 +00:00
if (positions.top === 0 && positions.bottom === 0) {
2020-06-04 18:06:38 +00:00
$controlSidebar.css({
bottom: heights.footer,
top: heights.header
})
2020-06-04 18:06:38 +00:00
$controlsidebarContent.css('height', heights.window - (heights.header + heights.footer))
2020-06-02 13:23:22 +00:00
} else if (positions.bottom <= heights.footer) {
if (footerFixed === false) {
const top = heights.header - positions.top
$controlSidebar.css('bottom', heights.footer - positions.bottom).css('top', top >= 0 ? top : 0)
2020-06-04 18:06:38 +00:00
$controlsidebarContent.css('height', heights.window - (heights.footer - positions.bottom))
2020-06-02 13:23:22 +00:00
} else {
2020-06-04 18:06:38 +00:00
$controlSidebar.css('bottom', heights.footer)
2020-06-02 13:23:22 +00:00
}
} else if (positions.top <= heights.header) {
if (navbarFixed === false) {
2020-06-04 18:06:38 +00:00
$controlSidebar.css('top', heights.header - positions.top)
$controlsidebarContent.css('height', heights.window - (heights.header - positions.top))
2020-05-31 13:45:54 +00:00
} else {
2020-06-04 18:06:38 +00:00
$controlSidebar.css('top', heights.header)
}
2020-06-02 13:23:22 +00:00
} else if (navbarFixed === false) {
2020-06-04 18:06:38 +00:00
$controlSidebar.css('top', 0)
$controlsidebarContent.css('height', heights.window)
2020-06-02 13:23:22 +00:00
} else {
2020-06-04 18:06:38 +00:00
$controlSidebar.css('top', heights.header)
}
if (footerFixed && navbarFixed) {
$controlsidebarContent.css('height', '100%')
$controlSidebar.css('height', '')
} else if (footerFixed || navbarFixed) {
$controlsidebarContent.css('height', '100%')
$controlsidebarContent.css('height', '')
}
2020-06-02 13:23:22 +00:00
}
2020-06-02 13:23:22 +00:00
_fixHeight() {
2020-06-04 18:06:38 +00:00
const $body = $('body')
const $controlSidebar = $(`${this._config.target} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
2020-06-04 18:06:38 +00:00
if (!$body.hasClass(CLASS_NAME_LAYOUT_FIXED)) {
$controlSidebar.attr('style', '')
2020-06-02 13:23:22 +00:00
return
}
2020-05-31 13:45:54 +00:00
2020-06-02 13:23:22 +00:00
const heights = {
window: $(window).height(),
header: $(SELECTOR_HEADER).outerHeight(),
footer: $(SELECTOR_FOOTER).outerHeight()
2020-06-02 13:23:22 +00:00
}
2020-06-02 13:23:22 +00:00
let sidebarHeight = heights.window - heights.header
if (this._isFooterFixed() && $(SELECTOR_FOOTER).css('position') === 'fixed') {
sidebarHeight = heights.window - heights.header - heights.footer
2020-06-02 13:23:22 +00:00
}
2020-06-04 18:06:38 +00:00
$controlSidebar.css('height', sidebarHeight)
2020-05-30 13:44:20 +00:00
2020-06-02 13:23:22 +00:00
if (typeof $.fn.overlayScrollbars !== 'undefined') {
2020-06-04 18:06:38 +00:00
$controlSidebar.overlayScrollbars({
2020-06-02 13:23:22 +00:00
className: this._config.scrollbarTheme,
sizeAutoCapable: true,
scrollbars: {
autoHide: this._config.scrollbarAutoHide,
clickScrolling: true
}
})
2016-10-19 15:23:34 +00:00
}
2020-06-02 13:23:22 +00:00
}
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
// Static
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
static _jQueryInterface(operation) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
if (!data) {
data = new ControlSidebar(this, _options)
$(this).data(DATA_KEY, data)
}
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
if (data[operation] === 'undefined') {
throw new Error(`${operation} is not a function`)
}
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
data[operation]()
})
2016-10-19 15:23:34 +00:00
}
2020-06-02 13:23:22 +00:00
}
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
/**
*
* Data Api implementation
* ====================================================
*/
$(document).on('click', SELECTOR_DATA_TOGGLE, function (event) {
2020-06-02 13:23:22 +00:00
event.preventDefault()
2016-10-19 15:23:34 +00:00
2020-06-02 13:23:22 +00:00
ControlSidebar._jQueryInterface.call($(this), 'toggle')
})
2018-02-03 23:45:19 +00:00
$(document).ready(() => {
ControlSidebar._jQueryInterface.call($(SELECTOR_DATA_TOGGLE), '_init')
})
2020-06-02 13:23:22 +00:00
/**
* jQuery API
* ====================================================
*/
2020-05-30 13:44:20 +00:00
2020-06-02 13:23:22 +00:00
$.fn[NAME] = ControlSidebar._jQueryInterface
$.fn[NAME].Constructor = ControlSidebar
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return ControlSidebar._jQueryInterface
}
export default ControlSidebar