admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

package/src/ts/direct-chat.ts

@@ -14,6 +14,11 @@ import {
  * ====================================================
  */
 
+const DATA_KEY = 'lte.direct-chat'
+const EVENT_KEY = `.${DATA_KEY}`
+const EVENT_EXPANDED = `expanded${EVENT_KEY}`
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+
 const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="chat-pane"]'
 const SELECTOR_DIRECT_CHAT = '.direct-chat'
 
@@ -25,9 +30,25 @@ const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open'
  */
 
 class DirectChat {
-  toggle(chatPane: Element): void {
-    // chatPane
-    chatPane.closest(SELECTOR_DIRECT_CHAT)?.classList.toggle(CLASS_NAME_DIRECT_CHAT_OPEN)
+  _element: HTMLElement
+  constructor(element: HTMLElement) {
+    this._element = element
+  }
+
+  toggle(): void {
+    if (this._element.classList.contains(CLASS_NAME_DIRECT_CHAT_OPEN)) {
+      const event = new Event(EVENT_COLLAPSED)
+
+      this._element.classList.remove(CLASS_NAME_DIRECT_CHAT_OPEN)
+
+      this._element.dispatchEvent(event)
+    } else {
+      const event = new Event(EVENT_EXPANDED)
+
+      this._element.classList.add(CLASS_NAME_DIRECT_CHAT_OPEN)
+
+      this._element.dispatchEvent(event)
+    }
   }
 }
 
@@ -40,14 +61,18 @@ class DirectChat {
 domReady(() => {
   const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
 
-  for (const btn of button) {
+  button.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
-      const chatPane = event.target as Element
-      const data = new DirectChat()
-      data.toggle(chatPane)
+      const target = event.target as HTMLElement
+      const chatPane = target.closest(SELECTOR_DIRECT_CHAT) as HTMLElement | undefined
+
+      if (chatPane) {
+        const data = new DirectChat(chatPane)
+        data.toggle()
+      }
     })
-  }
+  })
 })
 
 export default DirectChat

package/src/ts/layout.ts

@@ -16,6 +16,7 @@ import {
  */
 
 const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition'
+const CLASS_NAME_APP_LOADED = 'app-loaded'
 
 /**
  * Class Definition
@@ -24,11 +25,9 @@ const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition'
 
 class Layout {
   _element: HTMLElement
-  _config: undefined
 
-  constructor(element: HTMLElement, config: undefined) {
+  constructor(element: HTMLElement) {
     this._element = element
-    this._config = config as unknown as undefined
   }
 
   holdTransition(): void {
@@ -44,8 +43,11 @@ class Layout {
 }
 
 domReady(() => {
-  const data = new Layout(document.body, undefined)
+  const data = new Layout(document.body)
   data.holdTransition()
+  setTimeout(() => {
+    document.body.classList.add(CLASS_NAME_APP_LOADED)
+  }, 400)
 })
 
 export default Layout

package/src/ts/push-menu.ts

@@ -15,29 +15,35 @@ 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_WRAPPER = '.sidebar-wrapper'
+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 +52,87 @@ const Defaults = {
  */
 
 class PushMenu {
-  _element: HTMLElement | undefined
-  _config: undefined
-  _bodyClass: DOMTokenList
-  constructor(element: HTMLElement | undefined, config: undefined) {
-    this._element = element
-
-    const bodyElement = document.body as HTMLBodyElement
-    this._bodyClass = bodyElement.classList
-
-    this._config = config
-  }
+  _element: HTMLElement
+  _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()
+  expand() {
+    const event = new Event(EVENT_OPEN)
 
-    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()
+    document.body.classList.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
+    document.body.classList.add(CLASS_NAME_SIDEBAR_OPEN)
 
-    this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
+    this._element.dispatchEvent(event)
   }
 
-  close(): void {
-    this._bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
+  collapse() {
+    const event = new Event(EVENT_COLLAPSE)
 
-    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
-      this.menusClose()
-    }
+    document.body.classList.remove(CLASS_NAME_SIDEBAR_OPEN)
+    document.body.classList.add(CLASS_NAME_SIDEBAR_COLLAPSE)
+
+    this._element.dispatchEvent(event)
   }
 
-  sidebarHover(): void {
-    const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
+  sidebarHover() {
+    const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
 
     if (selSidebar) {
       selSidebar.addEventListener('mouseover', () => {
-        this._bodyClass.add(CLASS_NAME_SIDEBAR_IS_HOVER)
+        document.body.classList.add(CLASS_NAME_SIDEBAR_IS_HOVER)
       })
 
       selSidebar.addEventListener('mouseout', () => {
-        this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
+        document.body.classList.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
       })
     }
   }
 
-  addSidebaBreakPoint(): void {
-    const bodyClass = document.body.classList
-    const widthOutput = window.innerWidth
-
-    if (widthOutput < Defaults.onLayouMobile) {
-      bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
-    }
-
-    if (widthOutput >= Defaults.onLayouMobile) {
-      bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
-      this.expand()
-    }
-  }
-
-  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)
-    }
-  }
-
-  closeSidebar(): void {
-    const widthOutput: number = window.innerWidth
-    if (widthOutput < Defaults.onLayouMobile) {
-      document.body.classList.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, '')) }
 
-  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)) {
+        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 +140,8 @@ class PushMenu {
   }
 
   init() {
-    this.addSidebaBreakPoint()
+    this.addSidebarBreakPoint()
     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()
   }
 }
 
@@ -207,49 +152,53 @@ class PushMenu {
  */
 
 domReady(() => {
-  const data = new PushMenu(undefined, undefined)
-  data.init()
+  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)
 
-  for (const btn of miniBtn) {
+  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)
+
+  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

@@ -26,7 +26,6 @@ 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_TREEVIEW_MENU = '.nav-treeview'
 const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
@@ -47,46 +46,40 @@ type Config = {
 class Treeview {
   _element: HTMLElement
   _config: Config
-  _navItem: HTMLElement | undefined
-  _childNavItem: HTMLElement | undefined | undefined
+  _childNavItem: HTMLElement | 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
+    this._childNavItem = this._element.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)
     }
+
+    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)
     }
+
+    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()
@@ -103,16 +96,17 @@ class Treeview {
 domReady(() => {
   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 target = event.target as HTMLElement
+      const targetItem = target.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
 
-      const data = new Treeview(treeviewMenu, Default)
-      data.toggle()
+      if (targetItem) {
+        const data = new Treeview(targetItem, Default)
+        data.toggle()
+      }
     })
-  }
+  })
 })
 
 export default Treeview

package/src/ts/util/index.ts

@@ -1,4 +1,4 @@
-const domReady = (callBack: () => void): void => {
+const domReady = (callBack: () => void) => {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', callBack)
   } else {
@@ -6,7 +6,7 @@ const domReady = (callBack: () => void): void => {
   }
 }
 
-const windowReady = (callBack: () => void): void => {
+const windowReady = (callBack: () => void) => {
   if (document.readyState === 'complete') {
     callBack()
   } else {

package/src/utils/index.js

@@ -0,0 +1,11 @@
+function convertPathToHtml(path) {
+  let htmlpath = ''
+  while (path.startsWith('../')) {
+    path = path.slice(3)
+    htmlpath += htmlpath.length < 2 ? '.' : '/..'
+  }
+
+  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
-  }
-}