diff --git a/lib/os-gui/$Window.js b/lib/os-gui/$Window.js index b809c68ba..4cb2a2785 100644 --- a/lib/os-gui/$Window.js +++ b/lib/os-gui/$Window.js @@ -256,10 +256,28 @@ function $Window(options){ }); // @TODO: restore last focused controls when clicking/mousing down on the window - $w.applyBounds = function(){ + $w.applyBounds = () => { $w.css({ - left: Math.max(0, Math.min(document.body.scrollWidth - $w.width(), $w.position().left)), - top: Math.max(0, Math.min(document.body.scrollHeight - $w.height(), $w.position().top)), + left: Math.max(0, Math.min(innerWidth - $w.outerWidth(), $w[0].getBoundingClientRect().left)), + top: Math.max(0, Math.min(innerHeight - $w.outerHeight(), $w[0].getBoundingClientRect().top)), + }); + }; + + $w.bringTitleBarOnScreen = () => { + // Try to make the titlebar always accessible + const min_horizontal_pixels_on_screen = 40; // enough for space past a close button + $w.css({ + left: Math.max( + min_horizontal_pixels_on_screen - $w.outerWidth(), + Math.min( + innerWidth - min_horizontal_pixels_on_screen, + $w[0].getBoundingClientRect().left + ) + ), + top: Math.max(0, Math.min( + innerHeight - $w.$titlebar.outerHeight() - 5, + $w[0].getBoundingClientRect().top + )), }); }; @@ -272,7 +290,7 @@ function $Window(options){ }; - $G.on("resize", $w.applyBounds); + $G.on("resize", $w.bringTitleBarOnScreen); var drag_offset_x, drag_offset_y; var mouse_x, mouse_y; @@ -305,7 +323,9 @@ function $Window(options){ $G.off("pointermove", update_drag); $G.off("scroll", update_drag); $("body").removeClass("dragging"); - $w.applyBounds(); + // $w.applyBounds(); // Windows doesn't really try to keep windows on screen + // but you also can't really drag off of the desktop, whereas here you can drag to way outside the web page. + $w.bringTitleBarOnScreen(); }); $w.$titlebar.on("dblclick", function(e){ if($component){ diff --git a/src/$ToolWindow.js b/src/$ToolWindow.js index 356997e8b..bbe11487b 100644 --- a/src/$ToolWindow.js +++ b/src/$ToolWindow.js @@ -105,6 +105,24 @@ function $ToolWindow($component){ }); }; + $w.bringTitleBarOnScreen = () => { + // Try to make the titlebar always accessible + const min_horizontal_pixels_on_screen = 40; // enough for space past a close button + $w.css({ + left: Math.max( + min_horizontal_pixels_on_screen - $w.outerWidth(), + Math.min( + innerWidth - min_horizontal_pixels_on_screen, + $w[0].getBoundingClientRect().left + ) + ), + top: Math.max(0, Math.min( + innerHeight - $w.$titlebar.outerHeight() - 5, + $w[0].getBoundingClientRect().top + )), + }); + }; + $w.center = () => { $w.css({ left: (innerWidth - $w.outerWidth()) / 2, @@ -114,7 +132,7 @@ function $ToolWindow($component){ }; - $G.on("resize", $w.applyBounds); + $G.on("resize", $w.bringTitleBarOnScreen); let drag_offset_x, drag_offset_y; const drag = e => { @@ -136,7 +154,10 @@ function $ToolWindow($component){ $G.on("pointermove", drag); $("body").addClass("dragging"); const stop_drag = ()=> { - $w.applyBounds(); + // $w.applyBounds(); // Windows doesn't really try to keep windows on screen + // but you also can't really drag off of the desktop, whereas here you can drag to way outside the web page. + $w.bringTitleBarOnScreen(); + $G.off("pointermove", drag); $G.off("pointerup pointercancel", stop_drag); $("body").removeClass("dragging");