From f8eb95312cf8688ec183bd97dd99458c18a977c6 Mon Sep 17 00:00:00 2001 From: aliraza556 Date: Mon, 12 Aug 2024 11:39:39 +0500 Subject: [PATCH 1/6] fullscreen --- src/script.ts | 6 ++++++ src/ui/fullscreen.ts | 15 +++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/src/script.ts b/src/script.ts index 55668d88f..6ab4d3262 100644 --- a/src/script.ts +++ b/src/script.ts @@ -93,6 +93,12 @@ $j(() => { const fullscreen = new Fullscreen(document.getElementById('fullscreen')); $j('#fullscreen').on('click', () => fullscreen.toggle()); + document.addEventListener('keydown', (event) => { + if (event.key === 'Escape' && document.fullscreenElement) { + event.preventDefault(); + } + }); + const startScreenHotkeys = { Space: { keyDownTest() { diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts index 0c4eb27ec..6a9179ef5 100644 --- a/src/ui/fullscreen.ts +++ b/src/ui/fullscreen.ts @@ -6,6 +6,9 @@ export class Fullscreen { if (isFullscreen) { button.classList.add('fullscreenMode'); } + + document.addEventListener('fullscreenchange', this.preventEscExit.bind(this)); + document.addEventListener('keydown', this.preventEscKey.bind(this)); } toggle() { @@ -25,6 +28,18 @@ export class Fullscreen { document.getElementById('AncientBeast').requestFullscreen(); } } + + preventEscExit() { + if (!document.fullscreenElement) { + document.getElementById('AncientBeast').requestFullscreen(); + } + } + + preventEscKey(event: KeyboardEvent) { + if (event.key === 'Escape' && document.fullscreenElement) { + event.preventDefault(); + } + } } /** From 96a0d6b1184e0c5885b0cc89f3cfd0aa15c85edc Mon Sep 17 00:00:00 2001 From: aliraza556 Date: Mon, 12 Aug 2024 11:49:31 +0500 Subject: [PATCH 2/6] v1 --- src/ui/fullscreen.ts | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts index 6a9179ef5..4992352fa 100644 --- a/src/ui/fullscreen.ts +++ b/src/ui/fullscreen.ts @@ -6,9 +6,6 @@ export class Fullscreen { if (isFullscreen) { button.classList.add('fullscreenMode'); } - - document.addEventListener('fullscreenchange', this.preventEscExit.bind(this)); - document.addEventListener('keydown', this.preventEscKey.bind(this)); } toggle() { @@ -17,7 +14,7 @@ export class Fullscreen { this.button .querySelectorAll('.fullscreen__title') .forEach((el) => (el.textContent = 'FullScreen')); - document.exitFullscreen(); + // document.exitFullscreen(); } else if (!isAppInNativeFullscreenMode() && window.innerHeight === screen.height) { alert('Use F11 to exit fullscreen'); } else { @@ -28,18 +25,6 @@ export class Fullscreen { document.getElementById('AncientBeast').requestFullscreen(); } } - - preventEscExit() { - if (!document.fullscreenElement) { - document.getElementById('AncientBeast').requestFullscreen(); - } - } - - preventEscKey(event: KeyboardEvent) { - if (event.key === 'Escape' && document.fullscreenElement) { - event.preventDefault(); - } - } } /** From 3142cc7078a97be50ab81bf2ae293e82143c7b4f Mon Sep 17 00:00:00 2001 From: aliraza556 Date: Mon, 12 Aug 2024 11:56:36 +0500 Subject: [PATCH 3/6] v2 --- src/ui/fullscreen.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts index 4992352fa..d219ae0a1 100644 --- a/src/ui/fullscreen.ts +++ b/src/ui/fullscreen.ts @@ -6,6 +6,7 @@ export class Fullscreen { if (isFullscreen) { button.classList.add('fullscreenMode'); } + this.preventEscExit(); } toggle() { @@ -14,7 +15,7 @@ export class Fullscreen { this.button .querySelectorAll('.fullscreen__title') .forEach((el) => (el.textContent = 'FullScreen')); - // document.exitFullscreen(); + document.exitFullscreen(); } else if (!isAppInNativeFullscreenMode() && window.innerHeight === screen.height) { alert('Use F11 to exit fullscreen'); } else { @@ -25,6 +26,14 @@ export class Fullscreen { document.getElementById('AncientBeast').requestFullscreen(); } } + + private preventEscExit() { + document.addEventListener('keydown', (event) => { + if (event.key === 'Escape' || event.key === 'Esc') { + event.preventDefault(); + } + }); + } } /** From 31ba9cb9155b5376d4c0f228145a0503f45b46e8 Mon Sep 17 00:00:00 2001 From: aliraza556 Date: Mon, 12 Aug 2024 12:08:05 +0500 Subject: [PATCH 4/6] v5 --- src/script.ts | 6 ------ src/ui/fullscreen.ts | 21 ++++++++++++++++----- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/script.ts b/src/script.ts index 6ab4d3262..55668d88f 100644 --- a/src/script.ts +++ b/src/script.ts @@ -93,12 +93,6 @@ $j(() => { const fullscreen = new Fullscreen(document.getElementById('fullscreen')); $j('#fullscreen').on('click', () => fullscreen.toggle()); - document.addEventListener('keydown', (event) => { - if (event.key === 'Escape' && document.fullscreenElement) { - event.preventDefault(); - } - }); - const startScreenHotkeys = { Space: { keyDownTest() { diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts index d219ae0a1..32fca55cc 100644 --- a/src/ui/fullscreen.ts +++ b/src/ui/fullscreen.ts @@ -1,5 +1,6 @@ export class Fullscreen { private button: HTMLElement; + private fullscreenElementId = 'AncientBeast'; constructor(button: HTMLElement, isFullscreen = false) { this.button = button; @@ -19,15 +20,25 @@ export class Fullscreen { } else if (!isAppInNativeFullscreenMode() && window.innerHeight === screen.height) { alert('Use F11 to exit fullscreen'); } else { - this.button.classList.add('fullscreenMode'); - this.button - .querySelectorAll('.fullscreen__title') - .forEach((el) => (el.textContent = 'Contract')); - document.getElementById('AncientBeast').requestFullscreen(); + this.enterFullscreen(); } } + private enterFullscreen() { + this.button.classList.add('fullscreenMode'); + this.button + .querySelectorAll('.fullscreen__title') + .forEach((el) => (el.textContent = 'Contract')); + document.getElementById(this.fullscreenElementId)?.requestFullscreen(); + } + private preventEscExit() { + document.addEventListener('fullscreenchange', () => { + if (!isAppInNativeFullscreenMode()) { + this.enterFullscreen(); + } + }); + document.addEventListener('keydown', (event) => { if (event.key === 'Escape' || event.key === 'Esc') { event.preventDefault(); From c1d2735a5126b256a0104951afad567525abfff1 Mon Sep 17 00:00:00 2001 From: aliraza556 Date: Mon, 12 Aug 2024 12:12:58 +0500 Subject: [PATCH 5/6] v3 --- src/ui/fullscreen.ts | 25 +++++++------------------ 1 file changed, 7 insertions(+), 18 deletions(-) diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts index 32fca55cc..d0ff17481 100644 --- a/src/ui/fullscreen.ts +++ b/src/ui/fullscreen.ts @@ -1,13 +1,12 @@ export class Fullscreen { private button: HTMLElement; - private fullscreenElementId = 'AncientBeast'; constructor(button: HTMLElement, isFullscreen = false) { this.button = button; if (isFullscreen) { button.classList.add('fullscreenMode'); } - this.preventEscExit(); + this.disableEscKey(); } toggle() { @@ -20,25 +19,15 @@ export class Fullscreen { } else if (!isAppInNativeFullscreenMode() && window.innerHeight === screen.height) { alert('Use F11 to exit fullscreen'); } else { - this.enterFullscreen(); + this.button.classList.add('fullscreenMode'); + this.button + .querySelectorAll('.fullscreen__title') + .forEach((el) => (el.textContent = 'Contract')); + document.getElementById('AncientBeast').requestFullscreen(); } } - private enterFullscreen() { - this.button.classList.add('fullscreenMode'); - this.button - .querySelectorAll('.fullscreen__title') - .forEach((el) => (el.textContent = 'Contract')); - document.getElementById(this.fullscreenElementId)?.requestFullscreen(); - } - - private preventEscExit() { - document.addEventListener('fullscreenchange', () => { - if (!isAppInNativeFullscreenMode()) { - this.enterFullscreen(); - } - }); - + private disableEscKey() { document.addEventListener('keydown', (event) => { if (event.key === 'Escape' || event.key === 'Esc') { event.preventDefault(); From d34f17ea205cc88026fbc525501710a733314bcf Mon Sep 17 00:00:00 2001 From: aliraza556 Date: Mon, 12 Aug 2024 12:17:29 +0500 Subject: [PATCH 6/6] v4 --- src/ui/fullscreen.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts index d0ff17481..72d60cb07 100644 --- a/src/ui/fullscreen.ts +++ b/src/ui/fullscreen.ts @@ -29,10 +29,24 @@ export class Fullscreen { private disableEscKey() { document.addEventListener('keydown', (event) => { - if (event.key === 'Escape' || event.key === 'Esc') { + if (event.key === 'Escape' && isAppInNativeFullscreenMode()) { event.preventDefault(); } }); + + document.addEventListener('fullscreenchange', () => { + if (isAppInNativeFullscreenMode()) { + document.addEventListener('keydown', this.preventEscKey); + } else { + document.removeEventListener('keydown', this.preventEscKey); + } + }); + } + + private preventEscKey(event: KeyboardEvent) { + if (event.key === 'Escape') { + event.preventDefault(); + } } }