github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

✨ OverlayScrollbars move js to html

pull/4172/head
Daniel 2022-01-09 16:49:21 +05:30
parent e02f7cf5a8
commit 36e775c3ee
2 changed files with 27 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/partials/_scripts.html
View File

@ -9,3 +9,25 @@
<!-- AdminLTE App --> <!-- AdminLTE App -->
<script src="@@path/js/adminlte.js"></script> <script src="@@path/js/adminlte.js"></script>
<!-- OPTIONAL SCRIPTS -->
<script>
const SELECTOR_SIDEBAR = '.sidebar'
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave'
}
document.addEventListener("DOMContentLoaded", function() {
if (typeof OverlayScrollbars !== 'undefined') {
OverlayScrollbars(document.querySelectorAll(SELECTOR_SIDEBAR), {
className: Default.scrollbarTheme,
sizeAutoCapable: true,
scrollbars: {
autoHide: Default.scrollbarAutoHide,
clickScrolling: true
}
})
}
})
</script>

37
src/ts/layout.ts
View File

@ -17,18 +17,6 @@ import {
const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition' const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition'
const SELECTOR_SIDEBAR = '.sidebar'
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave'
}
interface Config {
scrollbarTheme: string;
scrollbarAutoHide: string;
}
/** /**
* Class Definition * Class Definition
* ==================================================== * ====================================================
@ -36,15 +24,15 @@ interface Config {
class Layout { class Layout {
_element: HTMLElement _element: HTMLElement
_config: Config _config: undefined
constructor(element: HTMLElement, config: Config) { constructor(element: HTMLElement, config: undefined) {
this._element = element this._element = element
this._config = { ...Default, ...config } this._config = config as unknown as undefined
} }
holdTransition(): void { holdTransition(): void {
let resizeTimer: number | undefined let resizeTimer: ReturnType<typeof setTimeout>
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
document.body.classList.add(CLASS_NAME_HOLD_TRANSITIONS) document.body.classList.add(CLASS_NAME_HOLD_TRANSITIONS)
clearTimeout(resizeTimer) clearTimeout(resizeTimer)
@ -56,23 +44,8 @@ class Layout {
} }
domReady(() => { domReady(() => {
const data = new Layout(document.body, Default) const data = new Layout(document.body, undefined)
data.holdTransition() data.holdTransition()
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
if (typeof OverlayScrollbars !== 'undefined') {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
OverlayScrollbars(document.querySelectorAll(SELECTOR_SIDEBAR), { // eslint-disable-line new-cap
className: Default.scrollbarTheme,
sizeAutoCapable: true,
scrollbars: {
autoHide: Default.scrollbarAutoHide,
clickScrolling: true
}
})
}
}) })
export default Layout export default Layout