github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor names with -lte

pull/3891/head
Daniel 2021-06-06 16:26:07 +05:30
parent c1ced676ee
commit 8f4c35f9f6
15 changed files with 133 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.html
View File

@ -135,13 +135,13 @@
<div class="card-tools">
<span title="3 New Messages" class="badge bg-primary">3</span>
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
<button type="button" class="btn btn-tool" title="Contacts" data-lte-toggle="chat-pane">
<i class="fas fa-comments"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
<i class="fas fa-times"></i>
</button>
</div>

26
src/index2.html
View File

@ -97,7 +97,7 @@
<h5 class="card-title">Monthly Recap Report</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
<i class="fas fa-minus"></i>
</button>
<div class="btn-group">
@ -112,7 +112,7 @@
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
<i class="fas fa-times"></i>
</button>
</div>
@ -239,13 +239,13 @@
<div class="card-tools">
<span title="3 New Messages" class="badge bg-warning">3</span>
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
<button type="button" class="btn btn-tool" title="Contacts" data-lte-toggle="chat-pane">
<i class="fas fa-comments"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
<i class="fas fa-times"></i>
</button>
</div>
@ -444,10 +444,10 @@
<div class="card-tools">
<span class="badge bg-danger">8 New Members</span>
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
<i class="fas fa-times"></i>
</button>
</div>
@ -516,10 +516,10 @@
<h3 class="card-title">Latest Orders</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
<i class="fas fa-times"></i>
</button>
</div>
@ -657,10 +657,10 @@
<h3 class="card-title">Browser Usage</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
<i class="fas fa-times"></i>
</button>
</div>
@ -728,10 +728,10 @@
<h3 class="card-title">Recently Added Products</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
<i class="fas fa-times"></i>
</button>
</div>

8
src/pages/widgets.html
View File

@ -411,7 +411,7 @@
<h3 class="card-title">Expandable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-plus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -431,7 +431,7 @@
<h3 class="card-title">Collapsable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -451,7 +451,7 @@
<h3 class="card-title">Removable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
@ -471,7 +471,7 @@
<h3 class="card-title">Maximizable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i>
<button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fas fa-expand"></i>
</button>
</div>
<!-- /.card-tools -->

4
src/partials/dashboard/_sidenav.html
View File

@ -5,13 +5,13 @@
<img src="@@path/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80 shadow">
<span class="brand-text fw-light">AdminLTE 4</span>
</a>
<a class="pushmenu mx-1" data-pushmenu="mini" href="javascript:void(0)" role="button"><i class="fas fa-angle-double-left"></i></a>
<a class="pushmenu mx-1" data-lte-toggle="sidebar-mini" href="javascript:void(0)" role="button"><i class="fas fa-angle-double-left"></i></a>
</div>
<!-- Sidebar -->
<div class="sidebar">
<nav class="mt-2">
<!-- Sidebar Menu -->
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<ul class="nav nav-pills nav-sidebar flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
<li class="nav-item @@if (context.mainPage === 'dashboard') {menu-open}">
<a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'dashboard') {active}">
<i class="nav-icon fas fa-circle"></i>

2
src/partials/dashboard/_topbar.html
View File

@ -4,7 +4,7 @@
<!-- Start navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link sidebar-full-icon" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
<a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Home</a>

2
src/scss/_brand-container.scss
View File

@ -63,7 +63,7 @@
}
}
.sidebar-collapse:not(.sidebar-hover) {
.sidebar-collapse:not(.sidebar-is-hover) {
.brand-container {
justify-content: center;

4
src/scss/_cards.scss
View File

@ -44,7 +44,7 @@
overflow: auto;
}
[data-card-widget="collapse"] {
[data-lte-toggle="card-collapse"] {
display: none;
}
@ -235,7 +235,7 @@ html.maximized-card {
margin-top: -$card-spacer-y / 2.5;
}
[data-toggle="tooltip"] {
[data-bs-toggle="tooltip"] {
position: relative;
}
}

43
src/scss/_layout-mobile.scss
View File

@ -1,11 +1,5 @@
@include media-breakpoint-down(lg) {
.wrapper {
// grid-template-areas:
// "main-sidebar main-header"
// "main-sidebar content-wrapper"
// "main-sidebar main-footer";
// grid-template-columns: auto 1fr auto;
.main-sidebar {
position: fixed;
top: 0;
@ -18,35 +12,6 @@
overflow-y: auto;
}
}
// .main-header {
// position: fixed;
// top: 0;
// bottom: 0;
// min-height: 100vh;
// z-index: $zindex-header-mobile;
// width: $lte-sidebar-width;
// margin-left: -#{$lte-sidebar-width};
// align-items: baseline;
// @include transition($lte-sidebar-transition);
// .navbar-nav {
// flex-direction: column;
// }
// .sidebar-full-icon {
// display: none;
// }
// }
// .brand-link {
// animation: none;
// }
// .sidebar-full-icon,
// .header-full-icon {
// display: block;
// }
}
.sidebar-open {
@ -54,12 +19,4 @@
margin-left: 0;
}
}
// @include media-breakpoint-down(md) {
// .header-mobile-open {
// .main-header {
// margin-left: 0;
// }
// }
// }
}

2
src/scss/_sidebar-collapse.scss
View File

@ -40,7 +40,7 @@
visibility: hidden;
}
&.sidebar-hover {
&.sidebar-is-hover {
.main-sidebar {
min-width: $lte-sidebar-width;
max-width: $lte-sidebar-width;

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,