✨ ags(control-center/pages): transform Pages widget into an actual GtkWidget instance

ags/widget/control-center/Pages.ts

@@ -1,64 +1,79 @@
-import { timeout, Variable } from "astal";
+import { property, register, timeout } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 import { Page } from "./pages/Page";
 
-const currentPage = new Variable<Page | undefined>(undefined);
-let pagesInstance: (Widget.Revealer | undefined);
 
-export const PagesWidget = () => {
+export { Pages };
-    const revealer = new Widget.Revealer({
+export type PagesProps = {
-        revealChild: false,
+    initialPage?: Page;
-        className: "pages",
+    className?: string;
-        transitionType: Gtk.RevealerTransitionType.SLIDE_DOWN,
+    transitionType?: Gtk.RevealerTransitionType;
-        transitionDuration: 360,
+    transitionDuration?: number;
-        child: currentPage((page: (Page|undefined)) => 
+};
-            !page ? new Widget.Box() : page.getPage())
-    } as Widget.RevealerProps);
 
-    pagesInstance = revealer;
+@register({ GTypeName: "Pages" })
+class Pages extends Widget.Revealer {
+    #page: (Page|undefined);
 
-    return revealer;
+    @property(Page)
-}
+    get page(): Page | undefined { return this.#page; }
-
+    private set page(newPage: Page | undefined) {
-export function showPages(page: Page): void {
+        this.#page = newPage;
-    if(!pagesInstance) return;
+        this.notify("page");
-
-    currentPage.set(page);
-    pagesInstance.set_reveal_child(true);
-    page.props.onOpen && page.props.onOpen();
-}
-
-export function getPage(): (Page|undefined) {
-    return currentPage.get();
-}
-
-export function togglePage(page: Page): void {
-    if(!pagesInstance) return;
-
-    if(!pagesInstance.revealChild) {
-        showPages(page);
-        return;
     }
 
-    if((currentPage.get() ?? true) && currentPage.get() !== page) {
+    get isOpen() { return this.revealChild; }
-        hidePages(() => showPages(page));
-        return;
-    }
 
-    hidePages();
+    constructor(props?: PagesProps) {
-}
+        super({
-
+            className: props?.className
-export function hidePages(onHidden?: () => void) {
-    if(!pagesInstance) return;
-
-    pagesInstance.set_reveal_child(false);
-    if(!currentPage.get()) return;
-
-    timeout(pagesInstance.transitionDuration || 500, () => {
-        if(currentPage.get() && currentPage.get()?.props.onClose) 
-            currentPage.get()!.props.onClose!();
-
-        currentPage.set(undefined);
-        onHidden?.();
         });
+
+        this.name = "pages";
+
+        if(props?.className !== null && props?.className !== undefined)
+            this.className = props?.className;
+
+        this.transitionType = props?.transitionType ?? 
+            Gtk.RevealerTransitionType.SLIDE_DOWN;
+        
+        this.transitionDuration = props?.transitionDuration ?? 350;
+
+        if(props?.initialPage) 
+            this.open(props.initialPage);
+    }
+
+    toggle(newPage?: Page): void {
+        if(this.isOpen) {
+            if(newPage && this.#page!.id !== newPage.id) {
+                this.close(() => this.open(newPage));
+                return;
+            }
+
+            this.close();
+            return;
+        }
+
+        if(newPage) this.open(newPage);
+    }
+
+    open(newPage: Page, onOpened?: () => void) {
+        if(this.isOpen) return;
+
+        this.page = newPage;
+        this.add(newPage);
+        this.revealChild = true;
+        onOpened && timeout(this.transitionDuration, onOpened);
+    }
+
+    close(onClosed?: () => void): void {
+        if(!this.isOpen) return;
+
+        this.set_reveal_child(false);
+        timeout(this.transitionDuration, () => {
+            this.remove(this.#page!);
+            this.page = undefined;
+            onClosed?.();
+        });
+    }
 }