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

61
src/ts/fullscreen.ts
View File

@ -28,21 +28,21 @@ 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)
if (document.fullscreenEnabled) {
if (!document.fullscreenElement) {
const event = new Event(EVENT_MAXIMIZED)
void document.documentElement.requestFullscreen() void document.documentElement.requestFullscreen()
if (iconMaximize) { if (iconMaximize) {
iconMaximize.style.display = 'none' iconMaximize.style.display = 'none'
} }
@ -52,9 +52,16 @@ class FullScreen {
} }
this._element.dispatchEvent(event) this._element.dispatchEvent(event)
} else if (document.exitFullscreen) { }
outFullscreen(): void {
const event = new Event(EVENT_MINIMIZED) 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() void document.exitFullscreen()
if (iconMaximize) { if (iconMaximize) {
iconMaximize.style.display = 'block' iconMaximize.style.display = 'block'
} }
@ -65,6 +72,14 @@ class FullScreen {
this._element.dispatchEvent(event) this._element.dispatchEvent(event)
} }
toggleFullScreen(): void {
if (document.fullscreenEnabled) {
if (document.fullscreenElement) {
this.outFullscreen()
} else {
this.inFullScreen()
}
} }
} }
} }
@ -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