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"> <div class="card-tools">
<span title="3 New Messages" class="badge bg-primary">3</span> <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> <i class="fas fa-minus"></i>
</button> </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> <i class="fas fa-comments"></i>
</button> </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> <i class="fas fa-times"></i>
</button> </button>
</div> </div>

26
src/index2.html
View File

@ -97,7 +97,7 @@
<h5 class="card-title">Monthly Recap Report</h5> <h5 class="card-title">Monthly Recap Report</h5>
<div class="card-tools"> <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> <i class="fas fa-minus"></i>
</button> </button>
<div class="btn-group"> <div class="btn-group">
@ -112,7 +112,7 @@
<a href="#" class="dropdown-item">Separated link</a> <a href="#" class="dropdown-item">Separated link</a>
</div> </div>
</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> <i class="fas fa-times"></i>
</button> </button>
</div> </div>
@ -239,13 +239,13 @@
<div class="card-tools"> <div class="card-tools">
<span title="3 New Messages" class="badge bg-warning">3</span> <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> <i class="fas fa-minus"></i>
</button> </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> <i class="fas fa-comments"></i>
</button> </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> <i class="fas fa-times"></i>
</button> </button>
</div> </div>
@ -444,10 +444,10 @@
<div class="card-tools"> <div class="card-tools">
<span class="badge bg-danger">8 New Members</span> <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> <i class="fas fa-minus"></i>
</button> </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> <i class="fas fa-times"></i>
</button> </button>
</div> </div>
@ -516,10 +516,10 @@
<h3 class="card-title">Latest Orders</h3> <h3 class="card-title">Latest Orders</h3>
<div class="card-tools"> <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> <i class="fas fa-minus"></i>
</button> </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> <i class="fas fa-times"></i>
</button> </button>
</div> </div>
@ -657,10 +657,10 @@
<h3 class="card-title">Browser Usage</h3> <h3 class="card-title">Browser Usage</h3>
<div class="card-tools"> <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> <i class="fas fa-minus"></i>
</button> </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> <i class="fas fa-times"></i>
</button> </button>
</div> </div>
@ -728,10 +728,10 @@
<h3 class="card-title">Recently Added Products</h3> <h3 class="card-title">Recently Added Products</h3>
<div class="card-tools"> <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> <i class="fas fa-minus"></i>
</button> </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> <i class="fas fa-times"></i>
</button> </button>
</div> </div>

8
src/pages/widgets.html
View File

@ -411,7 +411,7 @@
<h3 class="card-title">Expandable</h3> <h3 class="card-title">Expandable</h3>
<div class="card-tools"> <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> </button>
</div> </div>
<!-- /.card-tools --> <!-- /.card-tools -->
@ -431,7 +431,7 @@
<h3 class="card-title">Collapsable</h3> <h3 class="card-title">Collapsable</h3>
<div class="card-tools"> <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> </button>
</div> </div>
<!-- /.card-tools --> <!-- /.card-tools -->
@ -451,7 +451,7 @@
<h3 class="card-title">Removable</h3> <h3 class="card-title">Removable</h3>
<div class="card-tools"> <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> </button>
</div> </div>
<!-- /.card-tools --> <!-- /.card-tools -->
@ -471,7 +471,7 @@
<h3 class="card-title">Maximizable</h3> <h3 class="card-title">Maximizable</h3>
<div class="card-tools"> <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> </button>
</div> </div>
<!-- /.card-tools --> <!-- /.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"> <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> <span class="brand-text fw-light">AdminLTE 4</span>
</a> </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> </div>
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar"> <div class="sidebar">
<nav class="mt-2"> <nav class="mt-2">
<!-- Sidebar Menu --> <!-- 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}"> <li class="nav-item @@if (context.mainPage === 'dashboard') {menu-open}">
<a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'dashboard') {active}"> <a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'dashboard') {active}">
<i class="nav-icon fas fa-circle"></i> <i class="nav-icon fas fa-circle"></i>

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

@ -4,7 +4,7 @@
<!-- Start navbar links --> <!-- Start navbar links -->
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <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>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Home</a> <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 { .brand-container {
justify-content: center; justify-content: center;

4
src/scss/_cards.scss
View File

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

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

@ -1,11 +1,5 @@
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
.wrapper { .wrapper {
// grid-template-areas:
// "main-sidebar main-header"
// "main-sidebar content-wrapper"
// "main-sidebar main-footer";
// grid-template-columns: auto 1fr auto;
.main-sidebar { .main-sidebar {
position: fixed; position: fixed;
top: 0; top: 0;
@ -18,35 +12,6 @@
overflow-y: auto; 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 { .sidebar-open {
@ -54,12 +19,4 @@
margin-left: 0; 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; visibility: hidden;
} }
&.sidebar-hover { &.sidebar-is-hover {
.main-sidebar { .main-sidebar {
min-width: $lte-sidebar-width; min-width: $lte-sidebar-width;
max-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 Layout from './layout'
import PushMenu from './push-menu' import PushMenu from './push-menu'
import SidebarHover from './sidebar-hover'
import SidebarOverlay from './sidebar-overlay' import SidebarOverlay from './sidebar-overlay'
import Treeview from './treeview' import Treeview from './treeview'
import DirectChat from './direct-chat' import DirectChat from './direct-chat'
@ -9,7 +8,6 @@ import CardWidget from './card-widget'
export { export {
Layout, Layout,
PushMenu, PushMenu,
SidebarHover,
SidebarOverlay, SidebarOverlay,
Treeview, Treeview,
DirectChat, 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_WAS_COLLAPSED = 'was-collapsed'
const CLASS_NAME_MAXIMIZED = 'maximized-card' const CLASS_NAME_MAXIMIZED = 'maximized-card'
const SELECTOR_DATA_REMOVE = '[data-card-widget="remove"]' const SELECTOR_DATA_REMOVE = '[data-lte-dismiss="card-remove"]'
const SELECTOR_DATA_COLLAPSE = '[data-card-widget="collapse"]' const SELECTOR_DATA_COLLAPSE = '[data-lte-toggle="card-collapse"]'
const SELECTOR_DATA_MAXIMIZE = '[data-card-widget="maximize"]' const SELECTOR_DATA_MAXIMIZE = '[data-lte-toggle="card-maximize"]'
const SELECTOR_CARD = `.${CLASS_NAME_CARD}` const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
const SELECTOR_CARD_HEADER = '.card-header' const SELECTOR_CARD_HEADER = '.card-header'
const SELECTOR_CARD_BODY = '.card-body' const SELECTOR_CARD_BODY = '.card-body'
@ -42,7 +42,7 @@ const Default = {
minimizeIcon: 'fa-compress' minimizeIcon: 'fa-compress'
} }
interface Settings { interface Config {
animationSpeed: number; animationSpeed: number;
collapseTrigger: string; collapseTrigger: string;
removeTrigger: string; removeTrigger: string;
@ -56,8 +56,8 @@ interface Settings {
class CardWidget { class CardWidget {
_element: HTMLElement _element: HTMLElement
_parent: HTMLElement | null _parent: HTMLElement | null
_settings: Settings _config: Config
constructor(element: HTMLElement, settings: Settings) { constructor(element: HTMLElement, config: Config) {
this._element = element this._element = element
this._parent = element.closest(SELECTOR_CARD) this._parent = element.closest(SELECTOR_CARD)
@ -65,7 +65,7 @@ class CardWidget {
this._parent = element this._parent = element
} }
this._settings = Object.assign({}, Default, settings) this._config = Object.assign({}, Default, config)
} }
collapse() { collapse() {
@ -76,7 +76,7 @@ class CardWidget {
if (elm !== undefined) { if (elm !== undefined) {
for (const el of elm) { for (const el of elm) {
if (el instanceof HTMLElement) { if (el instanceof HTMLElement) {
slideUp(el, this._settings.animationSpeed) slideUp(el, this._config.animationSpeed)
} }
} }
} }
@ -84,12 +84,12 @@ class CardWidget {
setTimeout(() => { setTimeout(() => {
this._parent?.classList.add(CLASS_NAME_COLLAPSED) this._parent?.classList.add(CLASS_NAME_COLLAPSED)
this._parent?.classList.remove(CLASS_NAME_COLLAPSING) 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.add(this._config.expandIcon)
icon?.classList.remove(this._settings.collapseIcon) icon?.classList.remove(this._config.collapseIcon)
} }
expand() { expand() {
@ -100,7 +100,7 @@ class CardWidget {
if (elm !== undefined) { if (elm !== undefined) {
for (const el of elm) { for (const el of elm) {
if (el instanceof HTMLElement) { if (el instanceof HTMLElement) {
slideDown(el, this._settings.animationSpeed) slideDown(el, this._config.animationSpeed)
} }
} }
} }
@ -108,17 +108,17 @@ class CardWidget {
setTimeout(() => { setTimeout(() => {
this._parent?.classList.remove(CLASS_NAME_COLLAPSED) this._parent?.classList.remove(CLASS_NAME_COLLAPSED)
this._parent?.classList.remove(CLASS_NAME_EXPANDING) 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.add(this._config.collapseIcon)
icon?.classList.remove(this._settings.expandIcon) icon?.classList.remove(this._config.expandIcon)
} }
remove() { remove() {
if (this._parent) { if (this._parent) {
slideUp(this._parent, this._settings.animationSpeed) slideUp(this._parent, this._config.animationSpeed)
} }
} }
@ -133,9 +133,9 @@ class CardWidget {
maximize() { maximize() {
if (this._parent) { if (this._parent) {
const maxElm = this._parent.querySelector(`${this._settings.maximizeTrigger} .${this._settings.maximizeIcon}`) const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`)
maxElm?.classList.add(this._settings.minimizeIcon) maxElm?.classList.add(this._config.minimizeIcon)
maxElm?.classList.remove(this._settings.maximizeIcon) maxElm?.classList.remove(this._config.maximizeIcon)
this._parent.style.height = `${this._parent.scrollHeight}px` this._parent.style.height = `${this._parent.scrollHeight}px`
this._parent.style.width = `${this._parent.scrollWidth}px` this._parent.style.width = `${this._parent.scrollWidth}px`
@ -153,10 +153,10 @@ class CardWidget {
minimize() { minimize() {
if (this._parent) { 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.add(this._config.maximizeIcon)
minElm?.classList.remove(this._settings.minimizeIcon) 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;` 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) // 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 SELECTOR_DIRECT_CHAT = '.direct-chat'
const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open' 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_OPEN = 'sidebar-open'
const CLASS_NAME_SIDEBAR_OPENING = 'sidebar-is-opening' const CLASS_NAME_SIDEBAR_OPENING = 'sidebar-is-opening'
const CLASS_NAME_SIDEBAR_COLLAPSING = 'sidebar-is-collapsing' 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_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_SIDEBAR = '.nav-sidebar'
const SELECTOR_NAV_ITEM = '.nav-item' const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_NAV_TREEVIEW = '.nav-treeview' const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
const SELECTOR_MINI_TOGGLE = '[data-pushmenu="mini"]' const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]'
const SELECTOR_FULL_TOGGLE = '[data-pushmenu="full"]' const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]'
const SELECTOR_FULL_HEADER = '[data-pushmenu="header"]'
/** /**
* Class Definition * Class Definition
@ -39,21 +39,29 @@ const SELECTOR_FULL_HEADER = '[data-pushmenu="header"]'
*/ */
class PushMenu { class PushMenu {
sidebarOpening(): void { _element: HTMLElement | null
const bodyClass = document.body.classList _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(() => { setTimeout(() => {
bodyClass.remove(CLASS_NAME_SIDEBAR_OPENING) this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPENING)
}, 1000) }, 1000)
} }
sidebarColllapsing(): void { sidebarColllapsing(): void {
const bodyClass = document.body.classList this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSING)
bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSING)
setTimeout(() => { setTimeout(() => {
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSING) this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSING)
}, 1000) }, 1000)
} }
@ -77,89 +85,67 @@ class PushMenu {
expand(): void { expand(): void {
this.sidebarOpening() this.sidebarOpening()
const bodyClass = document.body.classList
bodyClass.remove(CLASS_NAME_HEADER_MOBILE_OPEN) this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE) this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE) this._bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
} }
collapse(): void { collapse(): void {
this.sidebarColllapsing() this.sidebarColllapsing()
const bodyClass = document.body.classList
bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE) this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
} }
close(): void { 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) if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
if (bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
this.menusClose() this.menusClose()
} }
} }
toggleFull(): void { sidebarHover(): void {
const bodyClass = document.body.classList 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() this.expand()
} else { } else {
this.close() this.close()
} }
if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) { if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
bodyClass.remove(CLASS_NAME_SIDEBAR_MINI) this._bodyClass.remove(CLASS_NAME_SIDEBAR_MINI)
bodyClass.add(CLASS_NAME_SIDEBAR_MINI_HAD) this._bodyClass.add(CLASS_NAME_SIDEBAR_MINI_HAD)
} }
} }
toggleMini(): void { toggleMini(): void {
const bodyClass = document.body.classList if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_MINI_HAD)) {
this._bodyClass.remove(CLASS_NAME_SIDEBAR_MINI_HAD)
if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI_HAD)) { this._bodyClass.add(CLASS_NAME_SIDEBAR_MINI)
bodyClass.remove(CLASS_NAME_SIDEBAR_MINI_HAD)
bodyClass.add(CLASS_NAME_SIDEBAR_MINI)
} }
if (bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) { if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
this.expand() this.expand()
} else { } else {
this.collapse() this.collapse()
} }
} }
toggleHeader(): void { init() {
this.close() this.sidebarHover()
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
}
} }
} }
@ -170,32 +156,45 @@ class PushMenu {
*/ */
domReady(() => { domReady(() => {
const data = new PushMenu(null, null)
data.init()
const fullBtn = document.querySelectorAll(SELECTOR_FULL_TOGGLE) 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) { for (const btn of fullBtn) {
btn.addEventListener('click', () => { btn.addEventListener('click', event => {
const data = new PushMenu() event.preventDefault()
data.toggle('full')
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) { for (const btn of miniBtn) {
btn.addEventListener('click', () => { btn.addEventListener('click', event => {
const data = new PushMenu() event.preventDefault()
data.toggle('mini')
})
}
for (const btn of headerBtn) { let button = event.currentTarget as HTMLElement | null | undefined
btn.addEventListener('click', () => { if (button?.dataset.lteToggle !== 'sidebar-mini') {
const data = new PushMenu() button = button?.closest(SELECTOR_FULL_TOGGLE)
data.toggle('header') }
if (button) {
const data = new PushMenu(button, null)
data.toggleMini()
}
}) })
} }
}) })
export default PushMenu 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 CLASS_NAME_MENU_IS_OPEN = 'menu-is-open'
const SELECTOR_NAV_ITEM = '.nav-item' const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_DATA_TOGGLE = '[data-widget="treeview"]' const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
const Defaults = { const Defaults = {
transitionDuration: 300, transitionDuration: 300,