mirror of https://github.com/ColorlibHQ/AdminLTE
Fullscreen button (squashed commits)
parent
72641bf888
commit
e0e343e743
|
@ -154,6 +154,15 @@ const distPath = path;
|
|||
</li>
|
||||
<!--end::Notifications Dropdown Menu-->
|
||||
|
||||
<!--begin::Fullscreen Toggle-->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
|
||||
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
|
||||
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none;"></i>
|
||||
</a>
|
||||
</li>
|
||||
<!--end::Fullscreen Toggle-->
|
||||
|
||||
<!--begin::User Menu Dropdown-->
|
||||
<li class="nav-item dropdown user-menu">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
||||
|
@ -172,7 +181,6 @@ const distPath = path;
|
|||
class="rounded-circle shadow"
|
||||
alt="User Image"
|
||||
/>
|
||||
|
||||
<p>
|
||||
Alexander Pierce - Web Developer
|
||||
<small>Member since Nov. 2023</small>
|
||||
|
|
|
@ -3,11 +3,13 @@ import PushMenu from './push-menu'
|
|||
import Treeview from './treeview'
|
||||
import DirectChat from './direct-chat'
|
||||
import CardWidget from './card-widget'
|
||||
import FullScreen from './fullscreen'
|
||||
|
||||
export {
|
||||
Layout,
|
||||
PushMenu,
|
||||
Treeview,
|
||||
DirectChat,
|
||||
CardWidget
|
||||
CardWidget,
|
||||
FullScreen
|
||||
}
|
||||
|
|
|
@ -0,0 +1,91 @@
|
|||
/**
|
||||
* ----------------------------------------------------------------------------
|
||||
* AdminLTE fullscreen.ts
|
||||
* License MIT
|
||||
* ----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import {
|
||||
onDOMContentLoaded
|
||||
} from './util/index'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ============================================================================
|
||||
*/
|
||||
const DATA_KEY = 'lte.fullscreen'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
|
||||
const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
|
||||
|
||||
const SELECTOR_FULLSCREEN_TOGGLE = '[data-lte-toggle="fullscreen"]'
|
||||
const SELECTOR_MAXIMIZE_ICON = '[data-lte-icon="maximize"]'
|
||||
const SELECTOR_MINIMIZE_ICON = '[data-lte-icon="minimize"]'
|
||||
|
||||
/**
|
||||
* Class Definition.
|
||||
* ============================================================================
|
||||
*/
|
||||
class FullScreen {
|
||||
_element: HTMLElement
|
||||
constructor(element: HTMLElement) {
|
||||
this._element = element
|
||||
}
|
||||
|
||||
/**
|
||||
* toggleFullScreen.
|
||||
*/
|
||||
toggleFullScreen(): void {
|
||||
const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
|
||||
const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
|
||||
if (document.fullscreenEnabled) {
|
||||
if (!document.fullscreenElement) {
|
||||
const event = new Event(EVENT_MAXIMIZED)
|
||||
void document.documentElement.requestFullscreen()
|
||||
if (iconMaximize) {
|
||||
iconMaximize.style.display = 'none'
|
||||
}
|
||||
|
||||
if (iconMinimize) {
|
||||
iconMinimize.style.display = 'block'
|
||||
}
|
||||
|
||||
this._element.dispatchEvent(event)
|
||||
} else if (document.exitFullscreen) {
|
||||
const event = new Event(EVENT_MINIMIZED)
|
||||
void document.exitFullscreen()
|
||||
if (iconMaximize) {
|
||||
iconMaximize.style.display = 'block'
|
||||
}
|
||||
|
||||
if (iconMinimize) {
|
||||
iconMinimize.style.display = 'none'
|
||||
}
|
||||
|
||||
this._element.dispatchEvent(event)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data Api implementation
|
||||
* ============================================================================
|
||||
*/
|
||||
onDOMContentLoaded(() => {
|
||||
const button = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE)
|
||||
button.forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
const target = event.target as HTMLElement
|
||||
const fsButton = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | undefined
|
||||
|
||||
if (fsButton) {
|
||||
const data = new FullScreen(fsButton)
|
||||
data.toggleFullScreen()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
export default FullScreen
|
Loading…
Reference in New Issue