Window Management API demo tweaks (#235)

* Window Management API demo tweaks

* small fixes

* Add functionality to handle popup blockers

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;
-}
+}
+
+/* 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);
+}

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 = `
+    <h2>Please disable popup blocking</h2>
+    <p>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".</p>
+    
+    <img src="popups-blocked.png" alt="Browser dialog window with title Popups blocked, showing options to allow popups or keep blocking them, with Done and Manage buttons at the bottom">
+
+    <p><button id="popover-dismiss">OK, got it</button></p>
+  `;
+
+  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)) {