From 386808ebc9d5260d1d1a8ce75c4773f8dde2cd82 Mon Sep 17 00:00:00 2001 From: Mike Wasserman Date: Thu, 19 Oct 2023 15:10:24 -0700 Subject: [PATCH] Iterate on draggable and cleanup --- static/index.html | 12 ++++++------ static/index.js | 44 +------------------------------------------- static/styles.css | 15 ++++++--------- 3 files changed, 13 insertions(+), 58 deletions(-) diff --git a/static/index.html b/static/index.html index 3565fd9..b576e7b 100644 --- a/static/index.html +++ b/static/index.html @@ -12,7 +12,7 @@

IWA Windowing Example (GitHub)

- +
display-mode:
fullscreen
standalone
@@ -21,10 +21,10 @@
window-controls-overlay
borderless
-
`window-management` permission: +
window-management permission:
granted
-
denied (reset and reload for full demo functionality)
+
denied (reset and reload for full demo functionality)
HTML Fullscreen:
(not fullscreen)
@@ -36,9 +36,9 @@
-
app-region: -
draggable, drag the window from here!
-
N/A (requires window-controls-overlay with titlebar collapsed, or borderless)
+
app-region: drag +
(draggable)
+
(not-draggable - requires display-mode: window-controls-overlay or borderless)
diff --git a/static/index.js b/static/index.js index e6fd006..d7edc59 100644 --- 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,row:${r} col:${c}

row:${r} col:${c}

`; -// 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 index 0803e22..6a9500f 100644 --- a/static/styles.css +++ b/static/styles.css @@ -27,6 +27,8 @@ html { background-color:whitesmoke;} .displaymode-borderless { display: inline; } } +.warning { color: red; } + .htmlfullscreen-none { display: inline; } .htmlfullscreen-fullscreen { display: none; } :fullscreen { @@ -34,15 +36,10 @@ html { background-color:whitesmoke;} .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; } } \ No newline at end of file