admin-lte 4.0.0-alpha1 → 4.0.0-alpha3

package/src/ts/push-menu.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady
+  onDOMContentLoaded
 } from './util/index'
 
 /**
@@ -15,29 +15,33 @@ import {
  * ------------------------------------------------------------------------
  */
 
+const DATA_KEY = 'lte.push-menu'
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_OPEN = `open${EVENT_KEY}`
+const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
+
 const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
-const CLASS_NAME_SIDEBAR_MINI_HAD = 'sidebar-mini-had'
-const CLASS_NAME_SIDEBAR_HORIZONTAL = 'sidebar-horizontal'
 const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
-const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close'
 const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
-const CLASS_NAME_SIDEBAR_OPENING = 'sidebar-is-opening'
-const CLASS_NAME_SIDEBAR_COLLAPSING = 'sidebar-is-collapsing'
-const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover'
+const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand'
+const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay'
 const CLASS_NAME_MENU_OPEN = 'menu-open'
-const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile'
 
-const SELECTOR_SIDEBAR = '.sidebar'
-const SELECTOR_NAV_SIDEBAR = '.nav-sidebar'
+const SELECTOR_APP_SIDEBAR = '.app-sidebar'
+const SELECTOR_SIDEBAR_MENU = '.sidebar-menu'
 const SELECTOR_NAV_ITEM = '.nav-item'
 const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
-const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]'
-const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]'
-const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_LAYOUT_MOBILE}`
-const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
+const SELECTOR_APP_WRAPPER = '.app-wrapper'
+const SELECTOR_SIDEBAR_EXPAND = `[class*="${CLASS_NAME_SIDEBAR_EXPAND}"]`
+const SELECTOR_SIDEBAR_TOGGLE = '[data-lte-toggle="sidebar"]'
+
+type Config = {
+  sidebarBreakpoint: number;
+}
 
 const Defaults = {
-  onLayouMobile: 992
+  sidebarBreakpoint: 992
 }
 
 /**
@@ -46,138 +50,73 @@ const Defaults = {
  */
 
 class PushMenu {
-  _element: HTMLElement | undefined
-  _config: undefined
-  _bodyClass: DOMTokenList
-  constructor(element: HTMLElement | undefined, config: undefined) {
-    this._element = element
+  _element: HTMLElement
+  _config: Config
 
-    const bodyElement = document.body as HTMLBodyElement
-    this._bodyClass = bodyElement.classList
-
-    this._config = config
-  }
-
-  sidebarOpening(): void {
-    this._bodyClass.add(CLASS_NAME_SIDEBAR_OPENING)
-    setTimeout(() => {
-      this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPENING)
-    }, 1000)
-  }
-
-  sidebarColllapsing(): void {
-    this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSING)
-    setTimeout(() => {
-      this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSING)
-    }, 1000)
+  constructor(element: HTMLElement, config: Config) {
+    this._element = element
+    this._config = { ...Defaults, ...config }
   }
 
-  menusClose(): void {
+  // TODO
+  menusClose() {
     const navTreeview = document.querySelectorAll<HTMLElement>(SELECTOR_NAV_TREEVIEW)
 
-    for (const navTree of navTreeview) {
+    navTreeview.forEach(navTree => {
       navTree.style.removeProperty('display')
       navTree.style.removeProperty('height')
-    }
+    })
 
-    const navSidebar = document.querySelector(SELECTOR_NAV_SIDEBAR)
+    const navSidebar = document.querySelector(SELECTOR_SIDEBAR_MENU)
     const navItem = navSidebar?.querySelectorAll(SELECTOR_NAV_ITEM)
 
     if (navItem) {
-      for (const navI of navItem) {
+      navItem.forEach(navI => {
         navI.classList.remove(CLASS_NAME_MENU_OPEN)
-      }
-    }
-  }
-
-  expand(): void {
-    this.sidebarOpening()
-
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
-    this._bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
-  }
-
-  collapse(): void {
-    this.sidebarColllapsing()
-
-    this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
-  }
-
-  close(): void {
-    this._bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
-
-    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
-      this.menusClose()
+      })
     }
   }
 
-  sidebarHover(): void {
-    const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
+  expand() {
+    const event = new Event(EVENT_OPEN)
 
-    if (selSidebar) {
-      selSidebar.addEventListener('mouseover', () => {
-        this._bodyClass.add(CLASS_NAME_SIDEBAR_IS_HOVER)
-      })
+    document.body.classList.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
+    document.body.classList.add(CLASS_NAME_SIDEBAR_OPEN)
 
-      selSidebar.addEventListener('mouseout', () => {
-        this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
-      })
-    }
+    this._element.dispatchEvent(event)
   }
 
-  addSidebaBreakPoint(): void {
-    const bodyClass = document.body.classList
-    const widthOutput = window.innerWidth
+  collapse() {
+    const event = new Event(EVENT_COLLAPSE)
 
-    if (widthOutput < Defaults.onLayouMobile) {
-      bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
-    }
+    document.body.classList.remove(CLASS_NAME_SIDEBAR_OPEN)
+    document.body.classList.add(CLASS_NAME_SIDEBAR_COLLAPSE)
 
-    if (widthOutput >= Defaults.onLayouMobile) {
-      bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
-      this.expand()
-    }
+    this._element.dispatchEvent(event)
   }
 
-  removeOverlaySidebar(): void {
-    const bodyClass = document.body.classList
-    if (bodyClass.contains(CLASS_NAME_LAYOUT_MOBILE)) {
-      bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
-      bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
-      bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
-    }
-  }
+  addSidebarBreakPoint() {
+    const sidebarExpandList = document.querySelector(SELECTOR_SIDEBAR_EXPAND)?.classList ?? []
+    const sidebarExpand = Array.from(sidebarExpandList).find(className => className.startsWith(CLASS_NAME_SIDEBAR_EXPAND)) ?? ''
+    const sidebar = document.getElementsByClassName(sidebarExpand)[0]
+    const sidebarContent = window.getComputedStyle(sidebar, '::before').getPropertyValue('content')
+    this._config = { ...this._config, sidebarBreakpoint: Number(sidebarContent.replace(/[^\d.-]/g, '')) }
 
-  closeSidebar(): void {
-    const widthOutput: number = window.innerWidth
-    if (widthOutput < Defaults.onLayouMobile) {
-      document.body.classList.add(CLASS_NAME_SIDEBAR_CLOSE)
-    }
-  }
-
-  toggleFull(): void {
-    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
-      this.expand()
+    if (window.innerWidth <= this._config.sidebarBreakpoint) {
+      this.collapse()
     } else {
-      this.close()
-    }
+      if (!document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
+        this.expand()
+      }
 
-    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
-      this._bodyClass.remove(CLASS_NAME_SIDEBAR_MINI)
-      this._bodyClass.add(CLASS_NAME_SIDEBAR_MINI_HAD)
+      if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI) && document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
+        this.collapse()
+      }
     }
   }
 
-  toggleMini(): void {
-    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_MINI_HAD)) {
-      this._bodyClass.remove(CLASS_NAME_SIDEBAR_MINI_HAD)
-      this._bodyClass.add(CLASS_NAME_SIDEBAR_MINI)
-    }
-
-    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
+  toggle() {
+    if (document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
       this.expand()
     } else {
       this.collapse()
@@ -185,18 +124,7 @@ class PushMenu {
   }
 
   init() {
-    this.addSidebaBreakPoint()
-    this.sidebarHover()
-
-    const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
-    const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
-
-    if (selContentWrapper) {
-      selContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
-      selContentWrapper.addEventListener('click', this.removeOverlaySidebar)
-    }
-
-    this.closeSidebar()
+    this.addSidebarBreakPoint()
   }
 }
 
@@ -206,50 +134,54 @@ class PushMenu {
  * ------------------------------------------------------------------------
  */
 
-domReady(() => {
-  const data = new PushMenu(undefined, undefined)
-  data.init()
+onDOMContentLoaded(() => {
+  const sidebar = document?.querySelector(SELECTOR_APP_SIDEBAR) as HTMLElement | undefined
 
-  window.addEventListener('resize', () => {
+  if (sidebar) {
+    const data = new PushMenu(sidebar, Defaults)
     data.init()
-  })
-
-  const fullBtn = document.querySelectorAll(SELECTOR_FULL_TOGGLE)
 
-  for (const btn of fullBtn) {
-    btn.addEventListener('click', event => {
-      event.preventDefault()
-
-      let button = event.currentTarget as HTMLElement | undefined
-
-      if (button?.dataset.lteToggle !== 'sidebar-full') {
-        button = button?.closest(SELECTOR_FULL_TOGGLE) as HTMLElement | undefined
-      }
-
-      if (button) {
-        const data = new PushMenu(button, undefined)
-        data.toggleFull()
-      }
+    window.addEventListener('resize', () => {
+      data.init()
     })
   }
 
-  const miniBtn = document.querySelectorAll(SELECTOR_MINI_TOGGLE)
+  const sidebarOverlay = document.createElement('div')
+  sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
+  document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
+
+  sidebarOverlay.addEventListener('touchstart', event => {
+    event.preventDefault()
+    const target = event.currentTarget as HTMLElement
+    const data = new PushMenu(target, Defaults)
+    data.collapse()
+  })
+  sidebarOverlay.addEventListener('click', event => {
+    event.preventDefault()
+    const target = event.currentTarget as HTMLElement
+    const data = new PushMenu(target, Defaults)
+    data.collapse()
+  })
+
+  const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE)
 
-  for (const btn of miniBtn) {
+  fullBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
 
       let button = event.currentTarget as HTMLElement | undefined
-      if (button?.dataset.lteToggle !== 'sidebar-mini') {
-        button = button?.closest(SELECTOR_FULL_TOGGLE) as HTMLElement | undefined
+
+      if (button?.dataset.lteToggle !== 'sidebar') {
+        button = button?.closest(SELECTOR_SIDEBAR_TOGGLE) as HTMLElement | undefined
       }
 
       if (button) {
-        const data = new PushMenu(button, undefined)
-        data.toggleMini()
+        event?.preventDefault()
+        const data = new PushMenu(button, Defaults)
+        data.toggle()
       }
     })
-  }
+  })
 })
 
 export default PushMenu

package/src/ts/treeview.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady,
+  onDOMContentLoaded,
   slideDown,
   slideUp
 } from './util/index'
@@ -26,8 +26,8 @@ const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
 // const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
 
 const CLASS_NAME_MENU_OPEN = 'menu-open'
-const CLASS_NAME_MENU_IS_OPEN = 'menu-is-open'
 const SELECTOR_NAV_ITEM = '.nav-item'
+const SELECTOR_NAV_LINK = '.nav-link'
 const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
 const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
 
@@ -47,46 +47,40 @@ type Config = {
 class Treeview {
   _element: HTMLElement
   _config: Config
-  _navItem: HTMLElement | undefined
-  _childNavItem: HTMLElement | undefined | undefined
 
   constructor(element: HTMLElement, config: Config) {
     this._element = element
     this._config = { ...Default, ...config }
-    this._navItem = this._element?.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
-    this._childNavItem = this._navItem?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
   }
 
   open(): void {
     const event = new Event(EVENT_EXPANDED)
 
-    if (this._navItem) {
-      this._navItem.classList.add(CLASS_NAME_MENU_OPEN)
-      this._navItem.classList.add(CLASS_NAME_MENU_IS_OPEN)
-    }
+    this._element.classList.add(CLASS_NAME_MENU_OPEN)
 
-    if (this._childNavItem) {
-      slideDown(this._childNavItem, this._config.animationSpeed)
-      this._element.dispatchEvent(event)
+    const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    if (childElement) {
+      slideDown(childElement, this._config.animationSpeed)
     }
+
+    this._element.dispatchEvent(event)
   }
 
   close(): void {
     const event = new Event(EVENT_COLLAPSED)
 
-    if (this._navItem) {
-      this._navItem.classList.remove(CLASS_NAME_MENU_IS_OPEN)
-      this._navItem.classList.remove(CLASS_NAME_MENU_OPEN)
-    }
+    this._element.classList.remove(CLASS_NAME_MENU_OPEN)
 
-    if (this._childNavItem) {
-      slideUp(this._childNavItem, this._config.animationSpeed)
-      this._element.dispatchEvent(event)
+    const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    if (childElement) {
+      slideUp(childElement, this._config.animationSpeed)
     }
+
+    this._element.dispatchEvent(event)
   }
 
   toggle(): void {
-    if (this._navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
+    if (this._element.classList.contains(CLASS_NAME_MENU_OPEN)) {
       this.close()
     } else {
       this.open()
@@ -100,19 +94,25 @@ class Treeview {
  * ------------------------------------------------------------------------
  */
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
 
-  for (const btn of button) {
+  button.forEach(btn => {
     btn.addEventListener('click', event => {
-      // event.preventDefault()
-
-      const treeviewMenu = event.target as HTMLElement
-
-      const data = new Treeview(treeviewMenu, Default)
-      data.toggle()
+      const target = event.target as HTMLElement
+      const targetItem = target.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
+      const targetLink = target.closest(SELECTOR_NAV_LINK) as HTMLAnchorElement | undefined
+
+      if (target?.getAttribute('href') === '#' || targetLink?.getAttribute('href') === '#') {
+        event.preventDefault()
+      }
+
+      if (targetItem) {
+        const data = new Treeview(targetItem, Default)
+        data.toggle()
+      }
     })
-  }
+  })
 })
 
 export default Treeview

package/src/ts/util/index.ts

@@ -1,16 +1,19 @@
-const domReady = (callBack: () => void): void => {
+const domContentLoadedCallbacks: Array<() => void> = []
+
+const onDOMContentLoaded = (callback: () => void): void => {
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', callBack)
-  } else {
-    callBack()
-  }
-}
+    // add listener on the first call when the document is in loading state
+    if (!domContentLoadedCallbacks.length) {
+      document.addEventListener('DOMContentLoaded', () => {
+        for (const callback of domContentLoadedCallbacks) {
+          callback()
+        }
+      })
+    }
 
-const windowReady = (callBack: () => void): void => {
-  if (document.readyState === 'complete') {
-    callBack()
+    domContentLoadedCallbacks.push(callback)
   } else {
-    window.addEventListener('load', callBack)
+    callback()
   }
 }
 
@@ -91,8 +94,7 @@ const slideToggle = (target: HTMLElement, duration = 500) => {
 }
 
 export {
-  domReady,
-  windowReady,
+  onDOMContentLoaded,
   slideUp,
   slideDown,
   slideToggle

package/src/utils/index.js

@@ -0,0 +1,28 @@
+function convertPathToHtml(path) {
+  let count = 0
+  let htmlPath = ''
+  while (path.startsWith('../')) {
+    count++
+    path = path.slice(3)
+  }
+
+  if (count === 2) {
+    htmlPath = '.'
+  }
+
+  if (count === 3) {
+    htmlPath = '..'
+  }
+
+  if (count === 4) {
+    htmlPath = '../..'
+  }
+
+  if (count === 5) {
+    htmlPath = '../../..'
+  }
+
+  return htmlPath
+}
+
+export { convertPathToHtml }

package/tsconfig.json

@@ -1,16 +1,25 @@
 {
+  "root": true,
   "compilerOptions": {
+    "noFallthroughCasesInSwitch": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noUnusedLocals": true,
     "noImplicitAny": true,
-    "target": "es2018",
     "module": "esnext",
+    "alwaysStrict": true,
     "strict": true,
     "strictNullChecks": true,
     "strictBindCallApply": true,
     "strictFunctionTypes": true,
-    "strictPropertyInitialization": true
+    "strictPropertyInitialization": true,
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/html/components/*"],
+    },
+    /* Language and Environment */
+    "target": "es6",
+    "lib": ["es2018", "DOM"],
   },
   "include": [
     "src/ts/**/*"
@@ -18,6 +27,5 @@
   "exclude": [
     "dist",
     "node_modules",
-    "plugins"
   ]
 }

package/.stylelintrc

@@ -1,40 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-twbs-bootstrap"
-  ],
-  "rules": {
-    "declaration-no-important": null,
-    "declaration-property-value-disallowed-list": {
-      "border": "none",
-      "outline": "none"
-    },
-    "function-disallowed-list": [
-      "calc",
-      "lighten",
-      "darken"
-    ],
-    "keyframes-name-pattern": null,
-    "property-disallowed-list": [
-      "border-radius",
-      "border-top-left-radius",
-      "border-top-right-radius",
-      "border-bottom-right-radius",
-      "border-bottom-left-radius",
-      "transition"
-    ],
-    "scss/dollar-variable-default": [
-      true,
-      {
-        "ignore": "local"
-      }
-    ],
-    "scss/selector-no-union-class-name": true,
-    "selector-max-class": null,
-    "selector-max-combinators": null,
-    "selector-max-compound-selectors": null,
-    "selector-max-id": null,
-    "selector-max-specificity": null,
-    "selector-max-type": null,
-    "selector-no-qualifying-type": null
-  }
-}