maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improve js

Browse source
This commit is contained in:
Daniel 2021-06-23 23:19:35 +05:30
parent 7334c5e73f
commit ba2a2cebfe
9 changed files with 117 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ts/adminlte.ts
View file

@ -11,7 +11,7 @@ export {
SidebarOverlay,
Treeview,
DirectChat,
CardWidget
CardWidget,
}
//

104
src/ts/card-widget.ts
View file

@ -8,7 +8,7 @@
import {
domReady,
slideUp,
slideDown
slideDown,
} from './util/index'
/**
@ -39,7 +39,7 @@ const Default = {
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
maximizeIcon: 'fa-expand',
minimizeIcon: 'fa-compress'
minimizeIcon: 'fa-compress',
}
interface Config {
@ -69,51 +69,63 @@ class CardWidget {
}
collapse() {
this._parent?.classList.add(CLASS_NAME_COLLAPSING)
if (this._parent) {
this._parent.classList.add(CLASS_NAME_COLLAPSING)
const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
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)
if (elm !== undefined) {
for (const el of elm) {
if (el instanceof HTMLElement) {
slideUp(el, this._config.animationSpeed)
}
}
}
}
setTimeout(() => {
this._parent?.classList.add(CLASS_NAME_COLLAPSED)
this._parent?.classList.remove(CLASS_NAME_COLLAPSING)
}, this._config.animationSpeed)
setTimeout(() => {
if (this._parent) {
this._parent.classList.add(CLASS_NAME_COLLAPSED)
this._parent.classList.remove(CLASS_NAME_COLLAPSING)
}
}, this._config.animationSpeed)
}
const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.collapseIcon}`)
icon?.classList.add(this._config.expandIcon)
icon?.classList.remove(this._config.collapseIcon)
if (icon) {
icon.classList.remove(this._config.collapseIcon)
icon.classList.add(this._config.expandIcon)
}
}
expand() {
this._parent?.classList.add(CLASS_NAME_EXPANDING)
if (this._parent) {
this._parent.classList.add(CLASS_NAME_EXPANDING)
const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
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)
if (elm !== undefined) {
for (const el of elm) {
if (el instanceof HTMLElement) {
slideDown(el, this._config.animationSpeed)
}
}
}
}
setTimeout(() => {
this._parent?.classList.remove(CLASS_NAME_COLLAPSED)
this._parent?.classList.remove(CLASS_NAME_EXPANDING)
}, this._config.animationSpeed)
setTimeout(() => {
if (this._parent) {
this._parent.classList.remove(CLASS_NAME_COLLAPSED)
this._parent.classList.remove(CLASS_NAME_EXPANDING)
}
}, this._config.animationSpeed)
}
const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.expandIcon}`)
icon?.classList.add(this._config.collapseIcon)
icon?.classList.remove(this._config.expandIcon)
if (icon) {
icon.classList.add(this._config.collapseIcon)
icon.classList.remove(this._config.expandIcon)
}
}
remove() {
@ -134,18 +146,29 @@ class CardWidget {
maximize() {
if (this._parent) {
const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`)
maxElm?.classList.add(this._config.minimizeIcon)
maxElm?.classList.remove(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.transition = 'all .15s'
setTimeout(() => {
document.querySelector('html')?.classList.add(CLASS_NAME_MAXIMIZED)
this._parent?.classList.add(CLASS_NAME_MAXIMIZED)
if (this._parent?.classList.contains(CLASS_NAME_COLLAPSED)) {
this._parent.classList.add(CLASS_NAME_WAS_COLLAPSED)
const htmlTag = document.querySelector('html')
if (htmlTag) {
htmlTag.classList.add(CLASS_NAME_MAXIMIZED)
}
if (this._parent) {
this._parent.classList.add(CLASS_NAME_MAXIMIZED)
if (this._parent.classList.contains(CLASS_NAME_COLLAPSED)) {
this._parent.classList.add(CLASS_NAME_WAS_COLLAPSED)
}
}
}, 150)
}
@ -155,13 +178,20 @@ class CardWidget {
if (this._parent) {
const minElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.minimizeIcon}`)
minElm?.classList.add(this._config.maximizeIcon)
minElm?.classList.remove(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;`
setTimeout(() => {
document.querySelector('html')?.classList.remove(CLASS_NAME_MAXIMIZED)
const htmlTag = document.querySelector('html')
if (htmlTag) {
htmlTag.classList.remove(CLASS_NAME_MAXIMIZED)
}
if (this._parent) {
this._parent.classList.remove(CLASS_NAME_MAXIMIZED)

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

@ -6,7 +6,7 @@
*/
import {
domReady
domReady,
} from './util/index'
/**

8
src/ts/layout.ts
View file

@ -6,7 +6,7 @@
*/
import {
domReady
domReady,
} from './util/index'
/**
@ -21,7 +21,7 @@ const SELECTOR_SIDEBAR = '.sidebar'
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave'
scrollbarAutoHide: 'leave',
}
interface Config {
@ -67,8 +67,8 @@ domReady(() => {
sizeAutoCapable: true,
scrollbars: {
autoHide: Default.scrollbarAutoHide,
clickScrolling: true
}
clickScrolling: true,
},
})
}
})

17
src/ts/push-menu.ts
View file

@ -6,7 +6,7 @@
*/
import {
domReady
domReady,
} from './util/index'
/**
@ -109,13 +109,16 @@ class PushMenu {
sidebarHover(): void {
const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
selSidebar?.addEventListener('mouseover', () => {
this._bodyClass.add(CLASS_NAME_SIDEBAR_IS_HOVER)
})
selSidebar?.addEventListener('mouseout', () => {
this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
})
if (selSidebar) {
selSidebar.addEventListener('mouseover', () => {
this._bodyClass.add(CLASS_NAME_SIDEBAR_IS_HOVER)
})
selSidebar.addEventListener('mouseout', () => {
this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
})
}
}
toggleFull(): void {

10
src/ts/sidebar-overlay.ts
View file

@ -6,7 +6,7 @@
*/
import {
domReady
domReady,
} from './util/index'
/**
@ -25,7 +25,7 @@ const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_LAYOUT_MOBILE}`
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
const Defaults = {
onLayouMobile: 992
onLayouMobile: 992,
}
class SidebarOverlay {
@ -60,8 +60,10 @@ class SidebarOverlay {
const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
selContentWrapper?.addEventListener('touchstart', this.removeOverlaySidebar)
selContentWrapper?.addEventListener('click', this.removeOverlaySidebar)
if (selContentWrapper) {
selContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
selContentWrapper.addEventListener('click', this.removeOverlaySidebar)
}
}
}

36
src/ts/treeview.ts
View file

@ -8,7 +8,7 @@
import {
domReady,
slideDown,
slideUp
slideUp,
} from './util/index'
/**
@ -17,6 +17,14 @@ import {
* ------------------------------------------------------------------------
*/
// const NAME = 'Treeview'
const DATA_KEY = 'lte.treeview'
const EVENT_KEY = `.${DATA_KEY}`
const EVENT_EXPANDED = `expanded${EVENT_KEY}`
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'
@ -24,7 +32,7 @@ const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
const Default = {
animationSpeed: 300
animationSpeed: 300,
}
interface Config {
@ -45,27 +53,36 @@ class Treeview {
constructor(element: HTMLElement, config: Config) {
this._element = element
this._navItem = this._element.closest(SELECTOR_NAV_ITEM)
this._navItem = this._element?.closest(SELECTOR_NAV_ITEM)
this._childNavItem = this._navItem?.querySelector(SELECTOR_TREEVIEW_MENU)
this._config = Object.assign({}, Default, config)
this._config = {...Default, ...config}
}
open(): void {
this._navItem?.classList.add(CLASS_NAME_MENU_OPEN)
this._navItem?.classList.add(CLASS_NAME_MENU_IS_OPEN)
const event = new CustomEvent(EVENT_EXPANDED)
if (this._navItem) {
this._navItem.classList.add(CLASS_NAME_MENU_OPEN)
this._navItem.classList.add(CLASS_NAME_MENU_IS_OPEN)
}
if (this._childNavItem) {
slideDown(this._childNavItem, this._config.animationSpeed)
this._element.dispatchEvent(event)
}
}
close(): void {
this._navItem?.classList.remove(CLASS_NAME_MENU_IS_OPEN)
this._navItem?.classList.remove(CLASS_NAME_MENU_OPEN)
const event = new CustomEvent(EVENT_COLLAPSED)
if (this._navItem) {
this._navItem.classList.remove(CLASS_NAME_MENU_IS_OPEN)
this._navItem.classList.remove(CLASS_NAME_MENU_OPEN)
}
if (this._childNavItem) {
slideUp(this._childNavItem, this._config.animationSpeed)
this._element.dispatchEvent(event)
}
}
@ -86,6 +103,7 @@ class Treeview {
domReady(() => {
const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
for (const btn of button) {
btn.addEventListener('click', event => {
// event.preventDefault()
@ -99,5 +117,3 @@ domReady(() => {
})
export default Treeview
//

2
src/ts/util/index.ts
View file

@ -94,5 +94,5 @@ export {
windowReady,
slideUp,
slideDown,
slideToggle
slideToggle,
}

5
tsconfig.json
View file

@ -1,13 +1,10 @@
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"noFallthroughCasesInSwitch": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noImplicitAny": true,
"target": "esnext",
"target": "es2018",
"module": "esnext",
"strict": true,
"strictNullChecks": true,