admin-lte 4.0.0-alpha1 → 4.0.0-alpha3

package/src/scss/parts/_core.scss

@@ -3,19 +3,13 @@
 //
 
 @import "../root";
-@import "../wrapper";
-@import "../main-header";
-@import "../brand-container";
-@import "../main-sidebar";
-@import "../sidebar";
-@import "../nav-sidebar";
-@import "../sidebar-collapse";
-// @import "../sidebar-horizontal";
-@import "../sidebar-close";
-@import "../content-wrapper";
-@import "../content-header";
-@import "../content";
-@import "../main-footer";
-@import "../layout-fixed";
-@import "../layout-mobile";
+@import "../app-wrapper";
+@import "../app-content";
+@import "../app-header";
+@import "../app-sidebar";
+@import "../app-main";
+@import "../app-footer";
 @import "../dropdown";
+@import "../callouts";
+@import "../compact-mode";
+@import "../docs";

package/src/scss/parts/_extra-components.scss

@@ -4,6 +4,5 @@
 
 @import "../small-box";
 @import "../info-box";
+@import "../timeline";
 @import "../direct-chat";
-@import "../products";
-@import "../users-list";

package/src/scss/parts/_pages.scss

@@ -3,3 +3,4 @@
 //
 
 @import "../pages/login_and_register";
+@import "../pages/lockscreen";

package/src/ts/adminlte.ts

@@ -11,5 +11,3 @@ export {
   DirectChat,
   CardWidget
 }
-
-//

package/src/ts/card-widget.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady,
+  onDOMContentLoaded,
   slideUp,
   slideDown
 } from './util/index'
@@ -16,6 +16,14 @@ import {
  * ====================================================
  */
 
+const DATA_KEY = 'lte.card-widget'
+const EVENT_KEY = `.${DATA_KEY}`
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_EXPANDED = `expanded${EVENT_KEY}`
+const EVENT_REMOVE = `remove${EVENT_KEY}`
+const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
+const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
+
 const CLASS_NAME_CARD = 'card'
 const CLASS_NAME_COLLAPSED = 'collapsed-card'
 const CLASS_NAME_COLLAPSING = 'collapsing-card'
@@ -23,40 +31,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
@@ -69,18 +70,18 @@ class CardWidget {
   }
 
   collapse() {
+    const event = new Event(EVENT_COLLAPSED)
+
     if (this._parent) {
       this._parent.classList.add(CLASS_NAME_COLLAPSING)
 
       const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
 
-      if (elm !== undefined) {
-        for (const el of elm) {
-          if (el instanceof HTMLElement) {
-            slideUp(el, this._config.animationSpeed)
-          }
+      elm.forEach(el => {
+        if (el instanceof HTMLElement) {
+          slideUp(el, this._config.animationSpeed)
         }
-      }
+      })
 
       setTimeout(() => {
         if (this._parent) {
@@ -90,27 +91,22 @@ 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)
   }
 
   expand() {
+    const event = new Event(EVENT_EXPANDED)
+
     if (this._parent) {
       this._parent.classList.add(CLASS_NAME_EXPANDING)
 
       const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
 
-      if (elm !== undefined) {
-        for (const el of elm) {
-          if (el instanceof HTMLElement) {
-            slideDown(el, this._config.animationSpeed)
-          }
+      elm.forEach(el => {
+        if (el instanceof HTMLElement) {
+          slideDown(el, this._config.animationSpeed)
         }
-      }
+      })
 
       setTimeout(() => {
         if (this._parent) {
@@ -120,18 +116,17 @@ 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)
   }
 
   remove() {
+    const event = new Event(EVENT_REMOVE)
+
     if (this._parent) {
       slideUp(this._parent, this._config.animationSpeed)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   toggle() {
@@ -144,16 +139,11 @@ class CardWidget {
   }
 
   maximize() {
-    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)
-      }
+    const event = new Event(EVENT_MAXIMIZED)
 
-      this._parent.style.height = `${this._parent.scrollHeight}px`
-      this._parent.style.width = `${this._parent.scrollWidth}px`
+    if (this._parent) {
+      this._parent.style.height = `${this._parent.offsetHeight}px`
+      this._parent.style.width = `${this._parent.offsetWidth}px`
       this._parent.style.transition = 'all .15s'
 
       setTimeout(() => {
@@ -172,18 +162,17 @@ class CardWidget {
         }
       }, 150)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   minimize() {
-    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)
-      }
+    const event = new Event(EVENT_MINIMIZED)
 
-      this._parent.style.cssText = `height: ${this._parent.style.height} !important; width: ${this._parent.style.width} !important; transition: all .15s;`
+    if (this._parent) {
+      this._parent.style.height = 'auto'
+      this._parent.style.width = 'auto'
+      this._parent.style.transition = 'all .15s'
 
       setTimeout(() => {
         const htmlTag = document.querySelector('html')
@@ -201,6 +190,8 @@ class CardWidget {
         }
       }, 10)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   toggleMaximize() {
@@ -219,39 +210,39 @@ class CardWidget {
  * ====================================================
  */
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const collapseBtn = document.querySelectorAll(SELECTOR_DATA_COLLAPSE)
 
-  for (const btn of collapseBtn) {
+  collapseBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
       const target = event.target as HTMLElement
       const data = new CardWidget(target, Default)
       data.toggle()
     })
-  }
+  })
 
   const removeBtn = document.querySelectorAll(SELECTOR_DATA_REMOVE)
 
-  for (const btn of removeBtn) {
+  removeBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
       const target = event.target as HTMLElement
       const data = new CardWidget(target, Default)
       data.remove()
     })
-  }
+  })
 
   const maxBtn = document.querySelectorAll(SELECTOR_DATA_MAXIMIZE)
 
-  for (const btn of maxBtn) {
+  maxBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
       const target = event.target as HTMLElement
       const data = new CardWidget(target, Default)
       data.toggleMaximize()
     })
-  }
+  })
 })
 
 export default CardWidget

package/src/ts/direct-chat.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady
+  onDOMContentLoaded
 } from './util/index'
 
 /**
@@ -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)
+    }
   }
 }
 
@@ -37,17 +58,21 @@ class DirectChat {
  * ====================================================
  */
 
-domReady(() => {
+onDOMContentLoaded(() => {
   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

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady
+  onDOMContentLoaded
 } from './util/index'
 
 /**
@@ -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 {
@@ -43,9 +42,12 @@ class Layout {
   }
 }
 
-domReady(() => {
-  const data = new Layout(document.body, undefined)
+onDOMContentLoaded(() => {
+  const data = new Layout(document.body)
   data.holdTransition()
+  setTimeout(() => {
+    document.body.classList.add(CLASS_NAME_APP_LOADED)
+  }, 400)
 })
 
 export default Layout