animation fix
This commit is contained in:
parent
55926de4cf
commit
0b43ed8bca
6 changed files with 48 additions and 4 deletions
|
@ -3,3 +3,4 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
@import "../layout";
|
@import "../layout";
|
||||||
|
@import "../miscellaneous";
|
||||||
|
|
|
@ -1,9 +1,11 @@
|
||||||
|
import Layout from './layout'
|
||||||
import PushMenu from './push-menu'
|
import PushMenu from './push-menu'
|
||||||
import SidebarHover from './sidebar-hover'
|
import SidebarHover from './sidebar-hover'
|
||||||
import SidebarOverlay from './sidebar-overlay'
|
import SidebarOverlay from './sidebar-overlay'
|
||||||
import Treeview from './treeview'
|
import Treeview from './treeview'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
Layout,
|
||||||
PushMenu,
|
PushMenu,
|
||||||
SidebarHover,
|
SidebarHover,
|
||||||
SidebarOverlay,
|
SidebarOverlay,
|
||||||
|
|
43
ts/layout.ts
Normal file
43
ts/layout.ts
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
/**
|
||||||
|
* --------------------------------------------
|
||||||
|
* AdminLTE treeview.ts
|
||||||
|
* License MIT
|
||||||
|
* --------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
domReady
|
||||||
|
} from './util/index'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ------------------------------------------------------------------------
|
||||||
|
* Constants
|
||||||
|
* ------------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
const CLASS_NAME_RESIZE_ANIMATION_STOPPER = 'resize-animation-stopper'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class Definition
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
class Layout {
|
||||||
|
holdTransition(): void {
|
||||||
|
let resizeTimer: number | undefined
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
document.body.classList.add(CLASS_NAME_RESIZE_ANIMATION_STOPPER)
|
||||||
|
clearTimeout(resizeTimer)
|
||||||
|
resizeTimer = setTimeout(() => {
|
||||||
|
document.body.classList.remove(CLASS_NAME_RESIZE_ANIMATION_STOPPER)
|
||||||
|
}, 400)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
domReady(() => {
|
||||||
|
const data = new Layout()
|
||||||
|
data.holdTransition()
|
||||||
|
})
|
||||||
|
|
||||||
|
export default Layout
|
|
@ -78,6 +78,7 @@ class PushMenu {
|
||||||
expand(): void {
|
expand(): void {
|
||||||
this.sidebarOpening()
|
this.sidebarOpening()
|
||||||
const bodyClass = document.body.classList
|
const bodyClass = document.body.classList
|
||||||
|
bodyClass.remove(CLASS_NAME_HEADER_MOBILE_OPEN)
|
||||||
bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
|
bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
|
||||||
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
|
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
|
||||||
bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
|
bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
|
||||||
|
|
|
@ -32,7 +32,7 @@ class SidebarOverlay {
|
||||||
addSidebaBreakPoint(): void {
|
addSidebaBreakPoint(): void {
|
||||||
const bodyClass = document.body.classList
|
const bodyClass = document.body.classList
|
||||||
const widthOutput: number = window.innerWidth
|
const widthOutput: number = window.innerWidth
|
||||||
if (widthOutput > Defaults.onLayouMobile) {
|
if (widthOutput >= Defaults.onLayouMobile) {
|
||||||
bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
|
bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
|
||||||
} else {
|
} else {
|
||||||
bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
|
bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
/* eslint-disable no-console */
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------
|
* --------------------------------------------
|
||||||
* AdminLTE treeview.ts
|
* AdminLTE treeview.ts
|
||||||
|
@ -33,8 +32,6 @@ const Defaults = {
|
||||||
|
|
||||||
class Treeview {
|
class Treeview {
|
||||||
open(navItem: Element | null, childNavItem: HTMLElement | null | undefined): void {
|
open(navItem: Element | null, childNavItem: HTMLElement | null | undefined): void {
|
||||||
console.log('🚀 ~ file: treeview.ts ~ line 31 ~ Treeview ~ open ~ childNavItem', childNavItem)
|
|
||||||
|
|
||||||
navItem?.classList.add(CLASS_NAME_MENU_OPEN)
|
navItem?.classList.add(CLASS_NAME_MENU_OPEN)
|
||||||
|
|
||||||
const height: number = childNavItem?.scrollHeight ?? 0
|
const height: number = childNavItem?.scrollHeight ?? 0
|
||||||
|
|
Loading…
Reference in a new issue