Fullscreen button (squashed commits)

pull/5307/head
George Lewe 2023-08-29 13:01:51 +02:00 committed by LEWE, GEORGE
parent 72641bf888
commit e0e343e743
3 changed files with 103 additions and 2 deletions

View File

@ -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>

View File

@ -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
}

91
src/ts/fullscreen.ts Normal file
View File

@ -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