sidebar-overlay.ts 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. /**
  2. * --------------------------------------------
  3. * AdminLTE treeview.ts
  4. * License MIT
  5. * --------------------------------------------
  6. */
  7. import {
  8. domReady
  9. } from './util/index'
  10. /**
  11. * ------------------------------------------------------------------------
  12. * Constants
  13. * ------------------------------------------------------------------------
  14. */
  15. const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
  16. const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close'
  17. const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
  18. const CLASS_NAME_SIDEBAR_SM = 'sidebar-sm'
  19. const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_SIDEBAR_SM}`
  20. const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
  21. class SidebarOverlay {
  22. addSidebaBreakPoint(): void {
  23. const bodyClass = document.body.classList
  24. const widthOutput: number = window.innerWidth
  25. if (widthOutput > 576) {
  26. bodyClass.remove(CLASS_NAME_SIDEBAR_SM)
  27. } else {
  28. bodyClass.add(CLASS_NAME_SIDEBAR_SM)
  29. }
  30. }
  31. removeOverlaySidebar(): void {
  32. const bodyClass = document.body.classList
  33. if (bodyClass.contains(CLASS_NAME_SIDEBAR_SM)) {
  34. bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
  35. bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
  36. bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
  37. }
  38. }
  39. init(): void {
  40. const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
  41. const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
  42. selContentWrapper?.addEventListener('touchstart', this.removeOverlaySidebar)
  43. selContentWrapper?.addEventListener('click', this.removeOverlaySidebar)
  44. }
  45. }
  46. domReady(() => {
  47. const data = new SidebarOverlay()
  48. data.addSidebaBreakPoint()
  49. data.init()
  50. window.addEventListener('resize', () => {
  51. data.addSidebaBreakPoint()
  52. data.init()
  53. })
  54. })
  55. export default SidebarOverlay