admin-lte 4.0.0-alpha2 → 4.0.0-beta1

package/src/ts/card-widget.ts

@@ -1,12 +1,13 @@
 /**
  * --------------------------------------------
- * AdminLTE card-widget.ts
- * License MIT
+ * @file AdminLTE card-widget.ts
+ * @description Card widget for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 
 import {
-  domReady,
+  onDOMContentLoaded,
   slideUp,
   slideDown
 } from './util/index'
@@ -31,40 +32,33 @@ const CLASS_NAME_EXPANDING = 'expanding-card'
 const CLASS_NAME_WAS_COLLAPSED = 'was-collapsed'
 const CLASS_NAME_MAXIMIZED = 'maximized-card'
 
-const SELECTOR_DATA_REMOVE = '[data-lte-dismiss="card-remove"]'
+const SELECTOR_DATA_REMOVE = '[data-lte-toggle="card-remove"]'
 const SELECTOR_DATA_COLLAPSE = '[data-lte-toggle="card-collapse"]'
 const SELECTOR_DATA_MAXIMIZE = '[data-lte-toggle="card-maximize"]'
 const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
-const SELECTOR_CARD_HEADER = '.card-header'
 const SELECTOR_CARD_BODY = '.card-body'
 const SELECTOR_CARD_FOOTER = '.card-footer'
 
-const Default = {
-  animationSpeed: 500,
-  collapseTrigger: SELECTOR_DATA_COLLAPSE,
-  removeTrigger: SELECTOR_DATA_REMOVE,
-  maximizeTrigger: SELECTOR_DATA_MAXIMIZE,
-  collapseIcon: 'fa-minus',
-  expandIcon: 'fa-plus',
-  maximizeIcon: 'fa-expand',
-  minimizeIcon: 'fa-compress'
-}
-
 type Config = {
   animationSpeed: number;
   collapseTrigger: string;
   removeTrigger: string;
   maximizeTrigger: string;
-  collapseIcon: string;
-  expandIcon: string;
-  maximizeIcon: string;
-  minimizeIcon: string;
+}
+
+const Default: Config = {
+  animationSpeed: 500,
+  collapseTrigger: SELECTOR_DATA_COLLAPSE,
+  removeTrigger: SELECTOR_DATA_REMOVE,
+  maximizeTrigger: SELECTOR_DATA_MAXIMIZE
 }
 
 class CardWidget {
   _element: HTMLElement
   _parent: HTMLElement | undefined
+  _clone: HTMLElement | undefined
   _config: Config
+
   constructor(element: HTMLElement, config: Config) {
     this._element = element
     this._parent = element.closest(SELECTOR_CARD) as HTMLElement | undefined
@@ -98,13 +92,6 @@ class CardWidget {
       }, this._config.animationSpeed)
     }
 
-    const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.collapseIcon}`)
-
-    if (icon) {
-      icon.classList.remove(this._config.collapseIcon)
-      icon.classList.add(this._config.expandIcon)
-    }
-
     this._element?.dispatchEvent(event)
   }
 
@@ -130,13 +117,6 @@ class CardWidget {
       }, this._config.animationSpeed)
     }
 
-    const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.expandIcon}`)
-
-    if (icon) {
-      icon.classList.add(this._config.collapseIcon)
-      icon.classList.remove(this._config.expandIcon)
-    }
-
     this._element?.dispatchEvent(event)
   }
 
@@ -163,15 +143,8 @@ class CardWidget {
     const event = new Event(EVENT_MAXIMIZED)
 
     if (this._parent) {
-      const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`)
-
-      if (maxElm) {
-        maxElm.classList.add(this._config.minimizeIcon)
-        maxElm.classList.remove(this._config.maximizeIcon)
-      }
-
-      this._parent.style.height = `${this._parent.scrollHeight}px`
-      this._parent.style.width = `${this._parent.scrollWidth}px`
+      this._parent.style.height = `${this._parent.offsetHeight}px`
+      this._parent.style.width = `${this._parent.offsetWidth}px`
       this._parent.style.transition = 'all .15s'
 
       setTimeout(() => {
@@ -198,14 +171,9 @@ class CardWidget {
     const event = new Event(EVENT_MINIMIZED)
 
     if (this._parent) {
-      const minElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.minimizeIcon}`)
-
-      if (minElm) {
-        minElm.classList.add(this._config.maximizeIcon)
-        minElm.classList.remove(this._config.minimizeIcon)
-      }
-
-      this._parent.style.cssText = `height: ${this._parent.style.height} !important; width: ${this._parent.style.width} !important; transition: all .15s;`
+      this._parent.style.height = 'auto'
+      this._parent.style.width = 'auto'
+      this._parent.style.transition = 'all .15s'
 
       setTimeout(() => {
         const htmlTag = document.querySelector('html')
@@ -243,7 +211,7 @@ class CardWidget {
  * ====================================================
  */
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const collapseBtn = document.querySelectorAll(SELECTOR_DATA_COLLAPSE)
 
   collapseBtn.forEach(btn => {

package/src/ts/direct-chat.ts

@@ -1,12 +1,13 @@
 /**
  * --------------------------------------------
- * AdminLTE direct-chat.ts
- * License MIT
+ * @file AdminLTE direct-chat.ts
+ * @description Direct chat for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 
 import {
-  domReady
+  onDOMContentLoaded
 } from './util/index'
 
 /**
@@ -58,7 +59,7 @@ class DirectChat {
  * ====================================================
  */
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
 
   button.forEach(btn => {

package/src/ts/fullscreen.ts

@@ -0,0 +1,110 @@
+/**
+ * --------------------------------------------
+ * @file AdminLTE fullscreen.ts
+ * @description Fullscreen plugin for AdminLTE.
+ * @license MIT
+ * --------------------------------------------
+ */
+
+import {
+  onDOMContentLoaded
+} from './util/index'
+
+/**
+ * Constants
+ * ============================================================================
+ */
+const DATA_KEY = 'lte.fullscreen'
+const EVENT_KEY = `.${DATA_KEY}`
+const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
+const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
+
+const SELECTOR_FULLSCREEN_TOGGLE = '[data-lte-toggle="fullscreen"]'
+const SELECTOR_MAXIMIZE_ICON = '[data-lte-icon="maximize"]'
+const SELECTOR_MINIMIZE_ICON = '[data-lte-icon="minimize"]'
+
+/**
+ * Class Definition.
+ * ============================================================================
+ */
+class FullScreen {
+  _element: HTMLElement
+  _config: undefined
+
+  constructor(element: HTMLElement, config?: undefined) {
+    this._element = element
+    this._config = config
+  }
+
+  inFullScreen(): void {
+    const event = new Event(EVENT_MAXIMIZED)
+
+    const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
+    const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
+
+    void document.documentElement.requestFullscreen()
+
+    if (iconMaximize) {
+      iconMaximize.style.display = 'none'
+    }
+
+    if (iconMinimize) {
+      iconMinimize.style.display = 'block'
+    }
+
+    this._element.dispatchEvent(event)
+  }
+
+  outFullscreen(): void {
+    const event = new Event(EVENT_MINIMIZED)
+
+    const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
+    const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
+
+    void document.exitFullscreen()
+
+    if (iconMaximize) {
+      iconMaximize.style.display = 'block'
+    }
+
+    if (iconMinimize) {
+      iconMinimize.style.display = 'none'
+    }
+
+    this._element.dispatchEvent(event)
+  }
+
+  toggleFullScreen(): void {
+    if (document.fullscreenEnabled) {
+      if (document.fullscreenElement) {
+        this.outFullscreen()
+      } else {
+        this.inFullScreen()
+      }
+    }
+  }
+}
+
+/**
+ * Data Api implementation
+ * ============================================================================
+ */
+onDOMContentLoaded(() => {
+  const buttons = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE)
+
+  buttons.forEach(btn => {
+    btn.addEventListener('click', event => {
+      event.preventDefault()
+
+      const target = event.target as HTMLElement
+      const button = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | undefined
+
+      if (button) {
+        const data = new FullScreen(button, undefined)
+        data.toggleFullScreen()
+      }
+    })
+  })
+})
+
+export default FullScreen

package/src/ts/layout.ts

@@ -1,12 +1,13 @@
 /**
  * --------------------------------------------
- * AdminLTE layout.ts
- * License MIT
+ * @file AdminLTE layout.ts
+ * @description Layout for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 
 import {
-  domReady
+  onDOMContentLoaded
 } from './util/index'
 
 /**
@@ -42,7 +43,7 @@ class Layout {
   }
 }
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const data = new Layout(document.body)
   data.holdTransition()
   setTimeout(() => {

package/src/ts/push-menu.ts

@@ -1,12 +1,13 @@
 /**
  * --------------------------------------------
- * AdminLTE push-menu.ts
- * License MIT
+ * @file AdminLTE push-menu.ts
+ * @description Push menu for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 
 import {
-  domReady
+  onDOMContentLoaded
 } from './util/index'
 
 /**
@@ -24,13 +25,11 @@ const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
 const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
 const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
 const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
-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 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'
@@ -97,20 +96,6 @@ class PushMenu {
     this._element.dispatchEvent(event)
   }
 
-  sidebarHover() {
-    const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
-
-    if (selSidebar) {
-      selSidebar.addEventListener('mouseover', () => {
-        document.body.classList.add(CLASS_NAME_SIDEBAR_IS_HOVER)
-      })
-
-      selSidebar.addEventListener('mouseout', () => {
-        document.body.classList.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
-      })
-    }
-  }
-
   addSidebarBreakPoint() {
     const sidebarExpandList = document.querySelector(SELECTOR_SIDEBAR_EXPAND)?.classList ?? []
     const sidebarExpand = Array.from(sidebarExpandList).find(className => className.startsWith(CLASS_NAME_SIDEBAR_EXPAND)) ?? ''
@@ -125,7 +110,7 @@ class PushMenu {
         this.expand()
       }
 
-      if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
+      if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI) && document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
         this.collapse()
       }
     }
@@ -141,7 +126,6 @@ class PushMenu {
 
   init() {
     this.addSidebarBreakPoint()
-    this.sidebarHover()
   }
 }
 
@@ -151,7 +135,7 @@ class PushMenu {
  * ------------------------------------------------------------------------
  */
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const sidebar = document?.querySelector(SELECTOR_APP_SIDEBAR) as HTMLElement | undefined
 
   if (sidebar) {

package/src/ts/treeview.ts

@@ -1,12 +1,13 @@
 /**
  * --------------------------------------------
- * AdminLTE treeview.ts
- * License MIT
+ * @file AdminLTE treeview.ts
+ * @description Treeview plugin for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 
 import {
-  domReady,
+  onDOMContentLoaded,
   slideDown,
   slideUp
 } from './util/index'
@@ -27,15 +28,18 @@ const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
 
 const CLASS_NAME_MENU_OPEN = 'menu-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"]'
 
 const Default = {
-  animationSpeed: 300
+  animationSpeed: 300,
+  accordion: true
 }
 
 type Config = {
   animationSpeed: number;
+  accordion: boolean;
 }
 
 /**
@@ -46,21 +50,34 @@ type Config = {
 class Treeview {
   _element: HTMLElement
   _config: Config
-  _childNavItem: HTMLElement | undefined
 
   constructor(element: HTMLElement, config: Config) {
     this._element = element
     this._config = { ...Default, ...config }
-    this._childNavItem = this._element.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
   }
 
   open(): void {
     const event = new Event(EVENT_EXPANDED)
 
+    if (this._config.accordion) {
+      const openMenuList = this._element.parentElement?.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
+
+      openMenuList?.forEach(openMenu => {
+        if (openMenu !== this._element.parentElement) {
+          openMenu.classList.remove(CLASS_NAME_MENU_OPEN)
+          const childElement = openMenu?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+          if (childElement) {
+            slideUp(childElement, this._config.animationSpeed)
+          }
+        }
+      })
+    }
+
     this._element.classList.add(CLASS_NAME_MENU_OPEN)
 
-    if (this._childNavItem) {
-      slideDown(this._childNavItem, this._config.animationSpeed)
+    const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    if (childElement) {
+      slideDown(childElement, this._config.animationSpeed)
     }
 
     this._element.dispatchEvent(event)
@@ -71,8 +88,9 @@ class Treeview {
 
     this._element.classList.remove(CLASS_NAME_MENU_OPEN)
 
-    if (this._childNavItem) {
-      slideUp(this._childNavItem, this._config.animationSpeed)
+    const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    if (childElement) {
+      slideUp(childElement, this._config.animationSpeed)
     }
 
     this._element.dispatchEvent(event)
@@ -93,13 +111,18 @@ class Treeview {
  * ------------------------------------------------------------------------
  */
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
 
   button.forEach(btn => {
     btn.addEventListener('click', event => {
       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)

package/src/ts/util/index.ts

@@ -1,16 +1,19 @@
-const domReady = (callBack: () => 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) => {
-  if (document.readyState === 'complete') {
-    callBack()
+    domContentLoadedCallbacks.push(callback)
   } else {
-    window.addEventListener('load', callBack)
+    callback()
   }
 }
 
@@ -80,7 +83,7 @@ const slideDown = (target: HTMLElement, duration = 500) => {
   }, duration)
 }
 
-/* TOOGLE */
+/* TOGGLE */
 const slideToggle = (target: HTMLElement, duration = 500) => {
   if (window.getComputedStyle(target).display === 'none') {
     slideDown(target, duration)
@@ -91,8 +94,7 @@ const slideToggle = (target: HTMLElement, duration = 500) => {
 }
 
 export {
-  domReady,
-  windowReady,
+  onDOMContentLoaded,
   slideUp,
   slideDown,
   slideToggle

package/src/utils/index.js

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

package/.idea/AdminLTE.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <sourceFolder url="file://$MODULE_DIR$/spec" isTestSource="true" />
-      <sourceFolder url="file://$MODULE_DIR$/tests" isTestSource="true" />
-      <excludeFolder url="file://$MODULE_DIR$/vendor/composer" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/codeStyles/Project.xml

@@ -1,29 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <JSCodeStyleSettings version="0">
-      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_GENERATOR_MULT" value="true" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="VAR_DECLARATION_WRAP" value="2" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="BLOCK_COMMENT_ADD_SPACE" value="true" />
-      <option name="KEEP_BLANK_LINES_IN_CODE" value="1" />
-      <option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
-      <option name="ALIGN_MULTILINE_FOR" value="false" />
-      <option name="IF_BRACE_FORCE" value="3" />
-      <option name="DOWHILE_BRACE_FORCE" value="3" />
-      <option name="WHILE_BRACE_FORCE" value="3" />
-      <option name="FOR_BRACE_FORCE" value="3" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,7 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/AdminLTE.iml" filepath="$PROJECT_DIR$/.idea/AdminLTE.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/php.xml

@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="MessDetectorOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PHPCSFixerOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PHPCodeSnifferOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PhpIncludePathManager">
-    <include_path>
-      <path value="$PROJECT_DIR$/vendor/composer" />
-    </include_path>
-  </component>
-  <component name="PhpStanOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PhpUnit">
-    <phpunit_settings>
-      <PhpUnitSettings custom_loader_path="$PROJECT_DIR$/vendor/autoload.php" />
-    </phpunit_settings>
-  </component>
-  <component name="PsalmOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>