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

Update fullscreen.ts

pull/5307/head
Daniel 2023-09-14 14:25:44 +05:30
parent 755ef2ecd0
commit 5ff3e60bc0
1 changed files with 52 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/ts/fullscreen.ts
View File

@ -28,42 +28,57 @@ const SELECTOR_MINIMIZE_ICON = '[data-lte-icon="minimize"]'
*/ */
class FullScreen { class FullScreen {
_element: HTMLElement _element: HTMLElement
_config: undefined
constructor(element: HTMLElement) { constructor(element: HTMLElement, config?: undefined) {
this._element = element this._element = element
this._config = config
} }
/** inFullScreen(): void {
* toggleFullScreen. const event = new Event(EVENT_MAXIMIZED)
*/
toggleFullScreen(): void {
const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON) const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON) const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
void document.documentElement.requestFullscreen()
if (iconMaximize) {
iconMaximize.style.display = 'none'
}
if (iconMinimize) {
iconMinimize.style.display = 'block'
}
this._element.dispatchEvent(event)
}
outFullscreen(): void {
const event = new Event(EVENT_MINIMIZED)
const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
void document.exitFullscreen()
if (iconMaximize) {
iconMaximize.style.display = 'block'
}
if (iconMinimize) {
iconMinimize.style.display = 'none'
}
this._element.dispatchEvent(event)
}
toggleFullScreen(): void {
if (document.fullscreenEnabled) { if (document.fullscreenEnabled) {
if (!document.fullscreenElement) { if (document.fullscreenElement) {
const event = new Event(EVENT_MAXIMIZED) this.outFullscreen()
void document.documentElement.requestFullscreen() } else {
if (iconMaximize) { this.inFullScreen()
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)
} }
} }
} }
@ -74,33 +89,21 @@ class FullScreen {
* ============================================================================ * ============================================================================
*/ */
onDOMContentLoaded(() => { onDOMContentLoaded(() => {
const button = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE) const buttons = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE)
button.forEach(btn => {
buttons.forEach(btn => {
btn.addEventListener('click', event => { btn.addEventListener('click', event => {
event.preventDefault() event.preventDefault()
const target = event.target as HTMLElement
const fsButton = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | undefined
if (fsButton) { const target = event.target as HTMLElement
const data = new FullScreen(fsButton) const button = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | undefined
if (button) {
const data = new FullScreen(button, undefined)
data.toggleFullScreen() data.toggleFullScreen()
} }
}) })
}) })
document.addEventListener('keydown', event => {
event.preventDefault()
if (event.key === 'Escape') {
const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
if (iconMaximize) {
iconMaximize.style.display = 'block'
}
if (iconMinimize) {
iconMinimize.style.display = 'none'
}
}
})
}) })
export default FullScreen export default FullScreen