lisone/AdminLTE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor names with -lte

Browse Source
This commit is contained in:
Daniel
2021-06-06 16:26:07 +05:30
parent c1ced676ee
commit 8f4c35f9f6
15 changed files with 133 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/ts/adminlte.ts
View File

@@ -1,6 +1,5 @@
import Layout from './layout'
import PushMenu from './push-menu'
import SidebarHover from './sidebar-hover'
import SidebarOverlay from './sidebar-overlay'
import Treeview from './treeview'
import DirectChat from './direct-chat'
@@ -9,7 +8,6 @@ import CardWidget from './card-widget'
export {
Layout,
PushMenu,
SidebarHover,
SidebarOverlay,
Treeview,
DirectChat,

48
src/ts/card-widget.ts
View File

@@ -23,9 +23,9 @@ const CLASS_NAME_EXPANDING = 'expanding-card'
const CLASS_NAME_WAS_COLLAPSED = 'was-collapsed'
const CLASS_NAME_MAXIMIZED = 'maximized-card'
const SELECTOR_DATA_REMOVE = '[data-card-widget="remove"]'
const SELECTOR_DATA_COLLAPSE = '[data-card-widget="collapse"]'
const SELECTOR_DATA_MAXIMIZE = '[data-card-widget="maximize"]'
const SELECTOR_DATA_REMOVE = '[data-lte-dismiss="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'
@@ -42,7 +42,7 @@ const Default = {
minimizeIcon: 'fa-compress'
}
interface Settings {
interface Config {
animationSpeed: number;
collapseTrigger: string;
removeTrigger: string;
@@ -56,8 +56,8 @@ interface Settings {
class CardWidget {
_element: HTMLElement
_parent: HTMLElement | null
_settings: Settings
constructor(element: HTMLElement, settings: Settings) {
_config: Config
constructor(element: HTMLElement, config: Config) {
this._element = element
this._parent = element.closest(SELECTOR_CARD)
@@ -65,7 +65,7 @@ class CardWidget {
this._parent = element
}
this._settings = Object.assign({}, Default, settings)
this._config = Object.assign({}, Default, config)
}
collapse() {
@@ -76,7 +76,7 @@ class CardWidget {
if (elm !== undefined) {
for (const el of elm) {
if (el instanceof HTMLElement) {
slideUp(el, this._settings.animationSpeed)
slideUp(el, this._config.animationSpeed)
}
}
}
@@ -84,12 +84,12 @@ class CardWidget {
setTimeout(() => {
this._parent?.classList.add(CLASS_NAME_COLLAPSED)
this._parent?.classList.remove(CLASS_NAME_COLLAPSING)
}, this._settings.animationSpeed)
}, this._config.animationSpeed)
const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._settings.collapseTrigger} .${this._settings.collapseIcon}`)
const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.collapseIcon}`)
icon?.classList.add(this._settings.expandIcon)
icon?.classList.remove(this._settings.collapseIcon)
icon?.classList.add(this._config.expandIcon)
icon?.classList.remove(this._config.collapseIcon)
}
expand() {
@@ -100,7 +100,7 @@ class CardWidget {
if (elm !== undefined) {
for (const el of elm) {
if (el instanceof HTMLElement) {
slideDown(el, this._settings.animationSpeed)
slideDown(el, this._config.animationSpeed)
}
}
}
@@ -108,17 +108,17 @@ class CardWidget {
setTimeout(() => {
this._parent?.classList.remove(CLASS_NAME_COLLAPSED)
this._parent?.classList.remove(CLASS_NAME_EXPANDING)
}, this._settings.animationSpeed)
}, this._config.animationSpeed)
const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._settings.collapseTrigger} .${this._settings.expandIcon}`)
const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.expandIcon}`)
icon?.classList.add(this._settings.collapseIcon)
icon?.classList.remove(this._settings.expandIcon)
icon?.classList.add(this._config.collapseIcon)
icon?.classList.remove(this._config.expandIcon)
}
remove() {
if (this._parent) {
slideUp(this._parent, this._settings.animationSpeed)
slideUp(this._parent, this._config.animationSpeed)
}
}
@@ -133,9 +133,9 @@ class CardWidget {
maximize() {
if (this._parent) {
const maxElm = this._parent.querySelector(`${this._settings.maximizeTrigger} .${this._settings.maximizeIcon}`)
maxElm?.classList.add(this._settings.minimizeIcon)
maxElm?.classList.remove(this._settings.maximizeIcon)
const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`)
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`
@@ -153,10 +153,10 @@ class CardWidget {
minimize() {
if (this._parent) {
const minElm = this._parent.querySelector(`${this._settings.maximizeTrigger} .${this._settings.minimizeIcon}`)
const minElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.minimizeIcon}`)
minElm?.classList.add(this._settings.maximizeIcon)
minElm?.classList.remove(this._settings.minimizeIcon)
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;`
// console.log('🚀 ~ file: card-widget.ts ~ line 164 ~ CardWidget ~ minimize ~ this._parent.style.height', this._parent.style.height)

2
src/ts/direct-chat.ts
View File

@@ -14,7 +14,7 @@ import {
* ====================================================
*/
const SELECTOR_DATA_TOGGLE = '[data-widget="chat-pane-toggle"]'
const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="chat-pane"]'
const SELECTOR_DIRECT_CHAT = '.direct-chat'
const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open'

161
src/ts/push-menu.ts
View File

@@ -23,15 +23,15 @@ 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_MENU_OPEN = 'menu-open'
const CLASS_NAME_HEADER_MOBILE_OPEN = 'header-mobile-open'
const SELECTOR_SIDEBAR = '.sidebar'
const SELECTOR_NAV_SIDEBAR = '.nav-sidebar'
const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
const SELECTOR_MINI_TOGGLE = '[data-pushmenu="mini"]'
const SELECTOR_FULL_TOGGLE = '[data-pushmenu="full"]'
const SELECTOR_FULL_HEADER = '[data-pushmenu="header"]'
const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]'
const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]'
/**
* Class Definition
@@ -39,21 +39,29 @@ const SELECTOR_FULL_HEADER = '[data-pushmenu="header"]'
*/
class PushMenu {
sidebarOpening(): void {
const bodyClass = document.body.classList
_element: HTMLElement | null
_config: null
_bodyClass: DOMTokenList
constructor(element: HTMLElement | null, config: null) {
this._element = element
bodyClass.add(CLASS_NAME_SIDEBAR_OPENING)
const bodyElement = document.body as HTMLBodyElement
this._bodyClass = bodyElement.classList
this._config = config
}
sidebarOpening(): void {
this._bodyClass.add(CLASS_NAME_SIDEBAR_OPENING)
setTimeout(() => {
bodyClass.remove(CLASS_NAME_SIDEBAR_OPENING)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPENING)
}, 1000)
}
sidebarColllapsing(): void {
const bodyClass = document.body.classList
bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSING)
this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSING)
setTimeout(() => {
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSING)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSING)
}, 1000)
}
@@ -77,89 +85,67 @@ class PushMenu {
expand(): void {
this.sidebarOpening()
const bodyClass = document.body.classList
bodyClass.remove(CLASS_NAME_HEADER_MOBILE_OPEN)
bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
bodyClass.add(CLASS_NAME_SIDEBAR_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()
const bodyClass = document.body.classList
bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
}
close(): void {
const bodyClass = document.body.classList
this._bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
if (bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
this.menusClose()
}
}
toggleFull(): void {
const bodyClass = document.body.classList
sidebarHover(): void {
const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
selSidebar?.addEventListener('mouseover', () => {
this._bodyClass.add(CLASS_NAME_SIDEBAR_IS_HOVER)
})
if (bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
selSidebar?.addEventListener('mouseout', () => {
this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
})
}
toggleFull(): void {
if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
this.expand()
} else {
this.close()
}
if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
bodyClass.remove(CLASS_NAME_SIDEBAR_MINI)
bodyClass.add(CLASS_NAME_SIDEBAR_MINI_HAD)
if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
this._bodyClass.remove(CLASS_NAME_SIDEBAR_MINI)
this._bodyClass.add(CLASS_NAME_SIDEBAR_MINI_HAD)
}
}
toggleMini(): void {
const bodyClass = document.body.classList
if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI_HAD)) {
bodyClass.remove(CLASS_NAME_SIDEBAR_MINI_HAD)
bodyClass.add(CLASS_NAME_SIDEBAR_MINI)
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 (bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
this.expand()
} else {
this.collapse()
}
}
toggleHeader(): void {
this.close()
const bodyClass = document.body.classList
if (bodyClass.contains(CLASS_NAME_HEADER_MOBILE_OPEN)) {
bodyClass.remove(CLASS_NAME_HEADER_MOBILE_OPEN)
} else {
bodyClass.add(CLASS_NAME_HEADER_MOBILE_OPEN)
}
}
toggle(state: string): void {
switch (state) {
case 'full': {
this.toggleFull()
break
}
case 'mini': {
this.toggleMini()
break
}
case 'header': {
this.toggleHeader()
break
}
// No default
}
init() {
this.sidebarHover()
}
}
@@ -170,32 +156,45 @@ class PushMenu {
*/
domReady(() => {
const data = new PushMenu(null, null)
data.init()
const fullBtn = document.querySelectorAll(SELECTOR_FULL_TOGGLE)
const miniBtn = document.querySelectorAll(SELECTOR_MINI_TOGGLE)
const headerBtn = document.querySelectorAll(SELECTOR_FULL_HEADER)
for (const btn of fullBtn) {
btn.addEventListener('click', () => {
const data = new PushMenu()
data.toggle('full')
btn.addEventListener('click', event => {
event.preventDefault()
let button = event.currentTarget as HTMLElement | null | undefined
if (button?.dataset.lteToggle !== 'sidebar-full') {
button = button?.closest(SELECTOR_FULL_TOGGLE)
}
if (button) {
const data = new PushMenu(button, null)
data.toggleFull()
}
})
}
const miniBtn = document.querySelectorAll(SELECTOR_MINI_TOGGLE)
for (const btn of miniBtn) {
btn.addEventListener('click', () => {
const data = new PushMenu()
data.toggle('mini')
})
}
btn.addEventListener('click', event => {
event.preventDefault()
for (const btn of headerBtn) {
btn.addEventListener('click', () => {
const data = new PushMenu()
data.toggle('header')
let button = event.currentTarget as HTMLElement | null | undefined
if (button?.dataset.lteToggle !== 'sidebar-mini') {
button = button?.closest(SELECTOR_FULL_TOGGLE)
}
if (button) {
const data = new PushMenu(button, null)
data.toggleMini()
}
})
}
})
export default PushMenu
//

50
src/ts/sidebar-hover.ts
View File

@@ -1,50 +0,0 @@
/**
* --------------------------------------------
* AdminLTE treeview.ts
* License MIT
* --------------------------------------------
*/
import {
domReady
} from './util/index'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const CLASS_NAME_SIDEBAR_HOVER = 'sidebar-hover'
const SELECTOR_SIDEBAR = '.sidebar'
class SidebarHover {
onHover(): void {
const bodyClass = document.body.classList
bodyClass.add(CLASS_NAME_SIDEBAR_HOVER)
}
notHover(): void {
const bodyClass = document.body.classList
bodyClass.remove(CLASS_NAME_SIDEBAR_HOVER)
}
init(): void {
const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
selSidebar?.addEventListener('mouseover', () => {
this.onHover()
})
selSidebar?.addEventListener('mouseout', () => {
this.notHover()
})
}
}
domReady(() => {
const data = new SidebarHover()
data.init()
})
export default SidebarHover

2
src/ts/treeview.ts
View File

@@ -19,7 +19,7 @@ const CLASS_NAME_MENU_OPEN = 'menu-open'
const CLASS_NAME_MENU_IS_OPEN = 'menu-is-open'
const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_DATA_TOGGLE = '[data-widget="treeview"]'
const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
const Defaults = {
transitionDuration: 300,