Iterate on draggable and cleanup

michaelwasserman · Oct 19, 2023 · 386808e · 386808e
1 parent c5344fd
commit 386808e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 58 deletions.
diff --git a/static/index.html b/static/index.html
@@ -12,7 +12,7 @@
 </head>
 <body>
  <h1>IWA Windowing Example (<a href="https://github.com/michaelwasserman/iwa-windowing-example/tree/iwa-windowing-example">GitHub</a>)</h1>
- <h4 id="warning" hidden=true style="color: red;"></h4>
+ <h4 class="warning" hidden=true></h4>
  <div><strong>display-mode:</strong>
  <div class="displaymode-fullscreen">fullscreen</div>
  <div class="displaymode-standalone">standalone</div>
@@ -21,10 +21,10 @@ <h4 id="warning" hidden=true style="color: red;"></h4>
  <div class="displaymode-window-controls-overlay">window-controls-overlay</div>
  <div class="displaymode-borderless">borderless</div>
  </div>
- <div><strong>`window-management` permission:</strong>
+ <div><strong><a href="https://w3c.github.io/window-management/">window-management</a> permission:</strong>
  <div id="windowManagementStatusPrompt"><button id="requestWindowManagementPermission">prompt</button></div>
  <div id="windowManagementStatusGranted">granted</div>
- <div id="windowManagementStatusDenied" style="color: red;">denied (reset and reload for full demo functionality)</div> 
+ <div id="windowManagementStatusDenied" class="warning">denied (reset and reload for full demo functionality)</div>
  </div>
  <div><strong>HTML Fullscreen:</strong>
  <div class="htmlfullscreen-none">(not fullscreen) <button id="requestFullscreenButton">request</button></div>
@@ -36,9 +36,9 @@ <h4 id="warning" hidden=true style="color: red;"></h4>
  <button id="openMultipleButton">open multiple</button>
  <button id="openMultipleFullscreenButton">open multiple fullscreen</button>
  </div>
- <div><strong>app-region:</strong>
- <div class="appregion-draggable">draggable, drag the window from here!</div>
- <div class="appregion-other">N/A (requires window-controls-overlay with titlebar collapsed, or borderless)<div>
+ <div><strong class="draggable">app-region: drag</strong>
+ <div class="appregion-draggable">(draggable)</div>
+ <div class="appregion-other">(not-draggable - requires display-mode: window-controls-overlay or borderless)<div>
  </div>
 </body>
 </html>
diff --git a/static/index.js b/static/index.js
@@ -20,8 +20,6 @@ window.addEventListener('load', async () => {
  if (!('getScreenDetails' in self) || !('isExtended' in screen) || !('onchange' in screen)) {
  showWarning("Please try a browser that supports the Window Management API");
  } else {
- // screen.addEventListener('change', () => { updateScreens(/*requestPermission=*/false); });
- // window.addEventListener('resize', () => { updateScreens(/*requestPermission=*/false); });
  permissionStatus = await navigator.permissions.query({name:'window-management'});
  permissionStatus.addEventListener('change', (e) => { updatePermissionStatus(e.target) });
  updatePermissionStatus(permissionStatus);
@@ -81,8 +79,7 @@ async function getScreenDetailsWithWarningAndFallback(requestPermission = false)
 
 async function updateScreens(requestPermission = true) {
  const screens = await getScreenDetailsWithWarningAndFallback(requestPermission);
-// if (document.getElementById('screensCanvas'))
-// showScreens(screens);
+ // TODO: Log or display screen info.
  return screens;
 }
 
@@ -97,7 +94,6 @@ function getFeaturesFromOptions(options) {
 
 function openPopup(options = {}) {
  if (options.url === undefined) options.url = '.';
- // if (options.fullscreen === undefined) options.fullscreen = false;
  if (options.screen === undefined) options.screen = window.screenDetails?.currentScreen || window.screen;
  if (options.x === undefined) options.x = options.screen.availLeft !== undefined ? options.screen.availLeft : options.screen.left;
  if (options.y === undefined) options.y = options.screen.availTop !== undefined ? options.screen.availTop : options.screen.top;
@@ -121,41 +117,3 @@ function openPopup(options = {}) {
  }
  return popup;
 }
-
-function openWindow(options = {}) {
- if (!options.url) options.url = '.';
- if (!options.url) options.url = '.';
-
- return openWindow({
- url: '.',
- x: screen.availLeft,
- y: screen.availTop,
- width: screen.availWidth,
- height: screen.availHeight,
- });
-}
-
-// TODO: Add some worthwhile multi-window opening example?
-// async function openWindows() {
-// let count = openWindowsCountInput.value;
-// const screens = await getScreenDetailsWithWarningAndFallback();
-// const perScreen = Math.ceil(count / screens.length);
-// console.log(`openWindows count:${count}, screens:${screens.length}, perScreen:${perScreen}`);
-// for (const s of screens) {
-// const cols = Math.ceil(Math.sqrt(perScreen));
-// const rows = Math.ceil(perScreen / cols);
-// for (r = 0; r < rows; ++r) {
-// for (c = 0; c < cols && count-- > 0; ++c) {
-// const options = {
-// x: s.availLeft + s.availWidth * c / cols,
-// y: s.availTop + s.availHeight * r / rows,
-// width: s.availWidth / cols,
-// height: s.availHeight / rows,
-// };
-// const url = `data:text/html;charset=utf-8,<title>row:${r} col:${c}</title><h1>row:${r} col:${c}</h1>`;
-// console.log(`INFO: opening window row:${r} col:${c}, (${options.x},${options.y} ${options.width}x${options.height}`);
-// window.open(url, '_blank', getFeaturesFromOptions(options));
-// }
-// }
-// }
-// }
diff --git a/static/styles.css b/static/styles.css
@@ -27,22 +27,19 @@ html { background-color:whitesmoke;}
  .displaymode-borderless { display: inline; }
 }
 
+.warning { color: red; }
+
 .htmlfullscreen-none { display: inline; }
 .htmlfullscreen-fullscreen { display: none; }
 :fullscreen {
  .htmlfullscreen-none { display: none; }
  .htmlfullscreen-fullscreen { display: inline; }
 }
 
-.appregion-draggable {
- -webkit-app-region: drag;
- app-region: drag;
- display: none;
-}
-.appregion-other {
- display: inline;
-}
-@media (display-mode: window-controls-overlay) {
+.draggable { app-region: drag; -webkit-app-region: drag; border-style: solid; border-}
+.appregion-draggable { display: none; }
+.appregion-other { display: inline; }
+@media (display-mode: window-controls-overlay), (display-mode: borderless) {
  .appregion-draggable { display: inline; }
  .appregion-other { display: none; }
 }