✨ ags(background-window, popup-window): use props on background-window, use new background-window on popup-window

ags/widget/BackgroundWindow.ts

@@ -1,30 +1,49 @@
 import { Astal, Gdk, Widget } from "astal/gtk3";
 
+
 const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor;
 
+export type BackgroundWindowProps = {
+    /** Monitor number where the window should open */
+    monitor: number;
+    /** Custom stylesheet used in the window. default: `background: rgba(0, 0, 0, .2)` */
+    css?: string;
+    /** Function that is called when the user clicks on the window (any mouse button) */
+    onClick?: (window: Widget.Window) => void;
+    /** Function that is called when the user clicks on the window with primary mouse button */
+    onClickPrimary?: (window: Widget.Window) => void;
+    /** Function that is called when the user clicks on the window with secodary mouse button */
+    onClickSecondary?: (window: Widget.Window) => void;
+};
+
 /** Creates a fullscreen GtkWindow that is used for making
  * the user focus on the content after this window(e.g.: AskPopup,
- * Authentication Window...)
+ * Authentication Window(futurely) or any PopupWindow)
  *
- * @param css Custom stylesheet used in the window. defaults to setting `background-color` to rgba(0, 0, 0, .2)
+ * @param props Properties for background-window
- * @param onClick Function that is called when the user clicks on the window
+ *
- * @returns the generated background window
+ * @returns The generated background window
  */
-export function BackgroundWindow(css?: (string | null), onClickPrimary?: (((window: Widget.Window) => void) | null),
+export function BackgroundWindow(props: BackgroundWindowProps) {
-                                onClickSecondary?: (((window: Widget.Window) => void) | null)): Widget.Window {
     return new Widget.Window({
         namespace: "background-window",
-        css: css ?? "background: rgba(0, 0, 0, .2);",
+        css: props.css ?? "background: rgba(0, 0, 0, .2);",
+        monitor: props.monitor,
         anchor: TOP | LEFT | BOTTOM | RIGHT,
         exclusivity: Astal.Exclusivity.IGNORE,
         onButtonPressEvent: (window, event: Gdk.Event) => {
+            if(event.get_button()[1]) {
+                props.onClick?.(window);
+                return;
+            }
+
             if(event.get_button()[1] === Gdk.BUTTON_PRIMARY) {
-                onClickPrimary?.(window);
+                props.onClickPrimary?.(window);
                 return;
             }
 
             if(event.get_button()[1] === Gdk.BUTTON_SECONDARY) 
-                onClickSecondary?.(window);
+                props.onClickSecondary?.(window);
         }
     } as Widget.WindowProps);
 }

ags/widget/PopupWindow.ts

@@ -1,93 +1,58 @@
 import { Binding } from "astal";
-import { Astal, Gdk, Gtk, Widget } from "astal/gtk3";
+import { Astal, Gdk, Widget } from "astal/gtk3";
+import { BackgroundWindow } from "./BackgroundWindow";
+import { Windows } from "../windows";
 
-
+type PopupWindowSpecificProps = {
-const { TOP, BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor;
+    onDestroy?: (self: Widget.Window) => void;
-
+    onKeyPressEvent?: (win: Widget.Window, event: Gdk.Event) => void;
-export type PopupWindowProps = Pick<Widget.WindowProps, 
-    "namespace"
-    | "visible"
-    | "className"
-    | "hexpand"
-    | "vexpand"
-    | "halign"
-    | "valign"
-    | "expand"
-    | "layer"
-    | "widthRequest"
-    | "heightRequest"
-    | "monitor"
-    | "setup"
-    | "exclusivity"> & {
-    child?: (Gtk.Widget | Binding<Gtk.Widget | undefined>);
-    children?: (Array<Gtk.Widget | Binding<Gtk.Widget | undefined>>);
-    marginTop?: number;
-    marginLeft?: number;
-    marginBottom?: number;
-    marginRight?: number;
-    onKeyPressEvent?: (self: Widget.Window, event: Gdk.Event) => void;
     /** Do something else instead of closing window on close action(clicking outside conent/pressing Escape) 
-     * Observation: onClose() function will still be ran after close action if defined.
+     * Observation: onClose() will still be called after close action, if defined.
      */
     closeAction?: (self: Widget.Window) => void;
+    /** Do something when window closes */
     onClose?: (self: Widget.Window) => void;
+    /** Stylesheet for the background of the popup-window */
+    cssBackgroundWindow?: string;
 };
 
-export const PopupWindow = (props: PopupWindowProps): Widget.Window => {
+export type PopupWindowProps = Omit<Widget.WindowProps, "keymode"> & PopupWindowSpecificProps;
-    if(!props.closeAction)
-        props.closeAction = (window) => window.close();
 
-    return new Widget.Window({
+export function PopupWindow(props: PopupWindowProps): Widget.Window {
-        namespace: props?.namespace || "popup-window",
+    props.closeAction = props.closeAction ?? ((window) => window.close());
+
+    const bgWindow = BackgroundWindow({
+        monitor: Windows.getFocusedMonitorId() ?? 0,
+        css: props.cssBackgroundWindow ?? "", 
+        onClick: () => {
+            props.closeAction!(window);
+            props.onClose?.(window);
+        }
+    });
+
+    const window = new Widget.Window({
+        ...props,
+        namespace: props?.namespace ?? "popup-window",
         className: `popup-window ${(props.namespace instanceof Binding ?
             props.namespace.get() : props.namespace) || ""}`,
-        anchor: TOP | BOTTOM | LEFT | RIGHT,
-        exclusivity: props.exclusivity || Astal.Exclusivity.NORMAL,
         keymode: Astal.Keymode.EXCLUSIVE,
-        layer: props?.layer || Astal.Layer.OVERLAY,
+        onDestroy: (self) => {
-        focusOnMap: true,
+            bgWindow.close();
-        setup: props.setup,
+            props.closeAction!(self);
-        monitor: props.monitor || 0,
+            props.onClose?.(self);
-        onButtonPressEvent: (_, event: Gdk.Event) => {
+            props.onDestroy?.(self);
-            const [, posX, posY] = event.get_coords();
-            const childAllocation = _.get_child()!.get_allocation();
-
-            if((posX < childAllocation.x || posX > (childAllocation.x + childAllocation.width)) || 
-               (posY < childAllocation.y || posY > (childAllocation.y + childAllocation.height))) {
-                props.closeAction!(_);
-                props.onClose && props.onClose(_);
-            }
         },
-        onKeyPressEvent: (_, event: Gdk.Event) => {
+        onKeyPressEvent: (self, event: Gdk.Event) => {
             if(event.get_keyval()[1] === Gdk.KEY_Escape) {
-                props.closeAction!(_);
+                props.closeAction!(self);
-                props.onClose && props.onClose(_);
+                bgWindow.close();
+
+                return;
             }
 
-            props.onKeyPressEvent && 
+            props.onKeyPressEvent?.(self, event);
-                props.onKeyPressEvent(_, event);
         },
-        child: new Widget.Box({
-            className: (props?.className instanceof Binding) ? 
-                props.className.as((clsName: string|undefined) => 
-                    `popup ${clsName || ""}`)
-            : `popup ${props?.className || ""}`,
-            halign: props?.halign || Gtk.Align.CENTER,
-            valign: props?.valign || Gtk.Align.CENTER,
-            css: `.popup {
-                margin-top: ${props.marginTop || 0}px;
-                margin-bottom: ${props.marginBottom || 0}px;
-                margin-left: ${props.marginLeft || 0}px;
-                margin-right: ${props.marginRight || 0}px;
-            }`,
-            expand: props.expand,
-            vexpand: props.vexpand,
-            hexpand: props.hexpand,
-            widthRequest: props.widthRequest,
-            heightRequest: props.heightRequest,
-            onButtonPressEvent: () => true,
-            ...(props.child ? { child: props.child } : {}),
-            ...(props.children ? { children: props.children } : {})
-        } as Widget.BoxProps)
     } as Widget.WindowProps);
+
+    return window;
 }