update examples

example/applauncher/applauncher.js

@@ -0,0 +1,108 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Applications from 'resource:///com/github/Aylur/ags/service/applications.js';
+
+const WINDOW_NAME = 'applauncher';
+
+/** @param {import('resource:///com/github/Aylur/ags/service/applications.js').Application} app */
+const AppItem = app => Widget.Button({
+    on_clicked: () => {
+        App.closeWindow(WINDOW_NAME);
+        app.launch();
+    },
+    attribute: { app },
+    child: Widget.Box({
+        children: [
+            Widget.Icon({
+                icon: app.icon_name || '',
+                size: 42,
+            }),
+            Widget.Label({
+                class_name: 'title',
+                label: app.name,
+                xalign: 0,
+                vpack: 'center',
+                truncate: 'end',
+            }),
+        ],
+    }),
+});
+
+const Applauncher = ({ width = 500, height = 500, spacing = 12 }) => {
+    // list of application buttons
+    let applications = Applications.query('').map(AppItem);
+
+    // container holding the buttons
+    const list = Widget.Box({
+        vertical: true,
+        children: applications,
+        spacing,
+    });
+
+    // repopulate the box, so the most frequent apps are on top of the list
+    function repopulate() {
+        applications = Applications.query('').map(AppItem);
+        list.children = applications;
+    }
+
+    // search entry
+    const entry = Widget.Entry({
+        hexpand: true,
+        css: `margin-bottom: ${spacing}px;`,
+
+        // to launch the first item on Enter
+        on_accept: () => {
+            if (applications[0]) {
+                App.toggleWindow(WINDOW_NAME);
+                applications[0].attribute.app.launch();
+            }
+        },
+
+        // filter out the list
+        on_change: ({ text }) => applications.forEach(item => {
+            item.visible = item.attribute.app.match(text);
+        }),
+    });
+
+    return Widget.Box({
+        vertical: true,
+        css: `margin: ${spacing * 2}px;`,
+        children: [
+            entry,
+
+            // wrap the list in a scrollable
+            Widget.Scrollable({
+                hscroll: 'never',
+                css: `
+                    min-width: ${width}px;
+                    min-height: ${height}px;
+                `,
+                child: list,
+            }),
+        ],
+        setup: self => self.hook(App, (_, windowName, visible) => {
+            if (windowName !== WINDOW_NAME)
+                return;
+
+            // when the applauncher shows up
+            if (visible) {
+                repopulate();
+                entry.text = '';
+                entry.grab_focus();
+            }
+        }),
+    });
+};
+
+// there needs to be only one instance
+export const applauncher = Widget.Window({
+    name: WINDOW_NAME,
+    popup: true,
+    visible: false,
+    focusable: true,
+    child: Applauncher({
+        width: 500,
+        height: 500,
+        spacing: 12,
+    }),
+});

example/applauncher/config.js

@@ -1,119 +1,4 @@
-import Widget from 'resource:///com/github/Aylur/ags/widget.js';
-import App from 'resource:///com/github/Aylur/ags/app.js';
-import Applications from 'resource:///com/github/Aylur/ags/service/applications.js';
-
-const WINDOW_NAME = 'applauncher';
-
-/** @param {import('resource:///com/github/Aylur/ags/service/applications.js').Application} app */
-const AppItem = app => Widget.Button({
-    on_clicked: () => {
-        App.closeWindow(WINDOW_NAME);
-        app.launch();
-    },
-    setup: self => self.app = app,
-    child: Widget.Box({
-        children: [
-            Widget.Icon({
-                icon: app.icon_name || '',
-                size: 42,
-            }),
-            Widget.Box({
-                vertical: true,
-                vpack: 'center',
-                children: [
-                    Widget.Label({
-                        class_name: 'title',
-                        label: app.name,
-                        xalign: 0,
-                        vpack: 'center',
-                        truncate: 'end',
-                    }),
-                    // short circuit if there is no description
-                    !!app.description && Widget.Label({
-                        class_name: 'description',
-                        label: app.description || '',
-                        wrap: true,
-                        xalign: 0,
-                        justification: 'left',
-                        vpack: 'center',
-                    }),
-                ],
-            }),
-        ],
-    }),
-});
-
-const Applauncher = ({ width = 500, height = 500, spacing = 12 } = {}) => {
-    const list = Widget.Box({
-        vertical: true,
-        spacing,
-    });
-
-    const entry = Widget.Entry({
-        hexpand: true,
-        css: `margin-bottom: ${spacing}px;`,
-
-        // set some text so on-change works the first time
-        text: '-',
-
-        // to launch the first item on Enter
-        on_accept: ({ text }) => {
-            const list = Applications.query(text || '');
-            if (list[0]) {
-                App.toggleWindow(WINDOW_NAME);
-                list[0].launch();
-            }
-        },
-
-        // filter out the list
-        on_change: ({ text }) => list.children.map(item => {
-            item.visible = item.app.match(text);
-        }),
-    });
-
-    return Widget.Box({
-        vertical: true,
-        css: `margin: ${spacing * 2}px;`,
-        children: [
-            entry,
-
-            // wrap the list in a scrollable
-            Widget.Scrollable({
-                hscroll: 'never',
-                css: `
-                    min-width: ${width}px;
-                    min-height: ${height}px;
-                `,
-                child: list,
-            }),
-        ],
-
-        // make entry.text empty on launch
-        // and update the list's children so it is sorted by frequency
-        connections: [[App, (_, name, visible) => {
-            if (name !== WINDOW_NAME)
-                return;
-
-            list.children = Applications.list.map(AppItem);
-
-            entry.text = '';
-            if (visible)
-                entry.grab_focus();
-        }]],
-    });
-};
-
-const applauncher = Widget.Window({
-    name: WINDOW_NAME,
-    popup: true,
-    visible: false,
-    focusable: true,
-    child: Applauncher({
-        width: 500,
-        height: 500,
-        spacing: 12,
-    }),
-});
+import { applauncher } from './applauncher.js';
 
 export default {
     windows: [applauncher],