From f8639735ce3e4c74a798dd2845d85a5f3d3ade9f Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Thu, 2 Nov 2023 15:29:43 +0000 Subject: [PATCH] Window Management API demo tweaks (#235) * Window Management API demo tweaks * small fixes * Add functionality to handle popup blockers --- window-management-api/index.css | 39 +++++++++++++++- window-management-api/index.js | 55 +++++++++++++++++++---- window-management-api/popups-blocked.png | Bin 0 -> 7957 bytes 3 files changed, 84 insertions(+), 10 deletions(-) create mode 100644 window-management-api/popups-blocked.png diff --git a/window-management-api/index.css b/window-management-api/index.css index f7c0eef1..0f379f20 100644 --- a/window-management-api/index.css +++ b/window-management-api/index.css @@ -1,6 +1,5 @@ html { font-family: Arial, Helvetica, sans-serif; - font-size: 1.1rem; } body { @@ -13,9 +12,45 @@ p, li { letter-spacing: 0.5px; line-height: 1.5; + font-size: 1.1rem; } hr { color: gray; border-width: 3px; -} \ No newline at end of file +} + +/* popover styling */ + +#block-warning { + width: 50%; + border: 1px solid black; + border-radius: 20px; + padding: 0 20px; +} + +#block-warning h2 { + font-size: 1.5rem; +} + +#block-warning p { + font-size: 0.9rem; +} + +#block-warning p:last-child { + text-align: right; +} + +#block-warning img { + display: block; + border: 1px solid black; + margin: 10px auto 20px; +} + +#block-warning button { + padding: 5px 10px; +} + +#block-warning::backdrop { + background-color: rgb(0, 0, 0, 0.25); +} diff --git a/window-management-api/index.js b/window-management-api/index.js index d49ad86f..ee53ec0e 100644 --- a/window-management-api/index.js +++ b/window-management-api/index.js @@ -20,6 +20,9 @@ const sites = [ const outputElem = document.querySelector("section"); +// Create constant to hold popover when it is created +let popoverElem = undefined; + // Array to hold references to the currently open windows let windowRefs = []; @@ -32,6 +35,7 @@ const WINDOW_CHROME_X = 1; if ("getScreenDetails" in window) { // The Window Management API is supported createButton(); + createPopover(); } else { // The Window Management API is not supported createLinks(sites); @@ -64,6 +68,31 @@ function createButton() { btn.addEventListener("click", openWindows); } +// Function to create popover warning users to update their settings to allow multiple popup windows + +function createPopover() { + popoverElem = document.createElement('div'); + popoverElem.id = "block-warning"; + popoverElem.popover = "manual"; + popoverElem.innerHTML = ` +

Please disable popup blocking

+

Your browser is blocking the app's popup windows. Please enable popups and then try again. + You can do this by clicking the icon to the right of your web address bar, selecting the "Always allow..." + option, then clicking "Done".

+ + Browser dialog window with title Popups blocked, showing options to allow popups or keep blocking them, with Done and Manage buttons at the bottom + +

+ `; + + document.body.append(popoverElem); + + const dismissBtn = document.getElementById("popover-dismiss"); + dismissBtn.addEventListener('click', () => { + popoverElem.hidePopover(); + }); +} + // Functions for creating the windows function openWindow(left, top, width, height, url) { @@ -74,9 +103,15 @@ function openWindow(left, top, width, height, url) { windowFeatures, ); - // Store a reference to the window in the windowRefs array - windowRefs.push(windowRef); - + if (windowRef === null) { + // If the browser is blocking popups, clear out any windows that were able to open + // and display instructions to help the user fix this problem + closeAllWindows(); + popoverElem.showPopover() + } else { + // Store a reference to the window in the windowRefs array + windowRefs.push(windowRef); + } } function closeAllWindows() { @@ -97,8 +132,10 @@ async function openWindows() { // Only one screen const screen1 = screenDetails.screens[0]; // Windows will be half the width and half the height of the screen - let windowWidth = Math.floor((screen1.availWidth - 2 * WINDOW_CHROME_X) / 2); - let windowHeight = Math.floor((screen1.availHeight - 2 * WINDOW_CHROME_Y) / 2); + // The available width of screen1, minus 2 times the horizontal browser chrome width, divided by 2 + const windowWidth = Math.floor((screen1.availWidth - 2 * WINDOW_CHROME_X) / 2); + // The available height of screen1, minus 2 times the horizontal browser chrome height, divided by 2 + const windowHeight = Math.floor((screen1.availHeight - 2 * WINDOW_CHROME_Y) / 2); openWindow(screen1.availLeft, screen1.availTop, @@ -126,8 +163,10 @@ async function openWindows() { const screen1 = screenDetails.screens[0]; const screen2 = screenDetails.screens[1]; // Windows will be a third the width and the full height of the screen - let windowWidth = Math.floor((screen1.availWidth - 3 * WINDOW_CHROME_X) / 3); - let windowHeight = Math.floor(screen1.availHeight - WINDOW_CHROME_Y); + // The available width of screen1, minus 3 times the horizontal browser chrome width, divided by 3 + const windowWidth = Math.floor((screen1.availWidth - 3 * WINDOW_CHROME_X) / 3); + // The available height of screen1, minus the vertical browser chrome width + const windowHeight = Math.floor(screen1.availHeight - WINDOW_CHROME_Y); // Open the reference windows in thirds across the entire height of the primary screen openWindow(screen1.availLeft, @@ -157,7 +196,7 @@ async function openWindows() { // Check whether one of our popup windows has been closed // If so, close them all - closeMonitor = setInterval(checkWindowClose, 250); + const closeMonitor = setInterval(checkWindowClose, 250); function checkWindowClose() { if (windowRefs.some(windowRef => windowRef.closed)) { diff --git a/window-management-api/popups-blocked.png b/window-management-api/popups-blocked.png new file mode 100644 index 0000000000000000000000000000000000000000..2deb059c467b9c171177336d729f637a0c098c19 GIT binary patch literal 7957 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 literal 0 HcmV?d00001