ags: autogenerated keybind cheatsheet (#271(?))

2024-06-09 21:25:40 +07:00
parent 0aa3e951c5
commit e5ca1b234f
7 changed files with 513 additions and 259 deletions
@@ -103,7 +103,6 @@ export const IconTabContainer = ({
    let previousShownIndex = 0;
    const count = Math.min(iconWidgets.length, names.length, children.length);
    const tabs = Box({
-        homogeneous: true,
        hpack: tabsHpack,
        className: `spacing-h-5 ${tabSwitcherClassName}`,
        children: iconWidgets.map((icon, i) => Button({
@@ -185,8 +185,8 @@ let configOptions = {
            'prevTab': "Ctrl+Page_Up",
        },
        'cheatsheet': {
-            'nextTab': "Page_Down",
-            'prevTab': "Page_Up",
+            'nextTab': "Ctrl+Page_Down",
+            'prevTab': "Ctrl+Page_Up",
        }
    },
 }
@@ -1,78 +1,115 @@
-const { Gtk } = imports.gi;
-import Widget from 'resource:///com/github/Aylur/ags/widget.js';
-import { keybindList } from "./data_keybinds.js";
+const { GLib, Gtk } = imports.gi;
+import App from "resource:///com/github/Aylur/ags/app.js";
+import * as Utils from "resource:///com/github/Aylur/ags/utils.js";
+import Widget from "resource:///com/github/Aylur/ags/widget.js";
+import { IconTabContainer } from "../.commonwidgets/tabcontainer.js";
+const { Box, Label, Scrollable } = Widget;

-export default () => {
-    const Category = (category) => Widget.Box({ // Categories
+const HYPRLAND_KEYBIND_CONFIG_FILE = `${GLib.get_user_config_dir()}/hypr/hyprland/keybinds.conf`;
+const KEYBIND_SECTIONS_PER_PAGE = 3;
+const keybindList = JSON.parse(
+    Utils.exec(
+        `${App.configDir}/scripts/hyprland/get_keybinds.py --path ${HYPRLAND_KEYBIND_CONFIG_FILE}`,
+    ),
+);
+
+const keySubstitutions = {
+    "Super": "󰖳",
+    "mouse_up": "Scroll ↓",    // ikr, weird
+    "mouse_down": "Scroll ↑",  // trust me bro
+    "mouse:272": "LMB",
+    "mouse:273": "RMB",
+    "mouse:275": "MouseBack",
+}
+
+const substituteKey = (key) => {
+    return keySubstitutions[key] || key;
+}
+
+const Keybind = (keybindData, type) => { // type: either "keys" or "actions"
+    const Key = (key) => Label({ // Specific keys
+        vpack: 'center',
+        className: `${['OR', '+'].includes(key) ? 'cheatsheet-key-notkey' : 'cheatsheet-key'} txt-small`,
+        label: substituteKey(key),
+    });
+    const Action = (text) => Label({ // Binds
+        xalign: 0,
+        label: text,
+        className: "txt txt-small cheatsheet-action",
+    })
+    return Widget.Box({
+        className: "spacing-h-10 cheatsheet-bind-lineheight",
+        children: type == "keys" ? [
+            ...(keybindData.mods.length > 0 ? [
+                ...keybindData.mods.map(Key),
+                Key("+"),
+            ] : []),
+            Key(keybindData.key),
+        ] : [Action(keybindData.comment)],
+    })
+}
+
+const Section = (sectionData, scope) => {
+    const keys = Box({
        vertical: true,
-        className: "spacing-v-15",
+        className: 'spacing-v-5',
+        children: sectionData.keybinds.map((data) => Keybind(data, "keys"))
+    })
+    const actions = Box({
+        vertical: true,
+        className: 'spacing-v-5',
+        children: sectionData.keybinds.map((data) => Keybind(data, "actions"))
+    })
+    const name = Label({
+        xalign: 0,
+        className: "cheatsheet-category-title txt margin-bottom-10",
+        label: sectionData.name,
+    })
+    const binds = Box({
+        className: 'spacing-h-10',
        children: [
-            Widget.Box({ // Category header
-                vertical: false,
-                className: "spacing-h-10",
+            keys,
+            actions,
+        ]
+    })
+    const childrenSections = Box({
+        vertical: true,
+        className: 'spacing-v-15',
+        children: sectionData.children.map((data) => Section(data, scope + 1))
+    })
+    return Box({
+        vertical: true,
+        children: [
+            ...((sectionData.name && sectionData.name.length > 0) ? [name] : []),
+            Box({
+                className: 'spacing-v-10',
                children: [
-                    Widget.Label({
-                        xalign: 0,
-                        className: `icon-material txt-larger cheatsheet-color-${category.id}`,
-                        label: category.icon,
-                    }),
-                    Widget.Label({
-                        xalign: 0,
-                        className: "cheatsheet-category-title txt",
-                        label: category.name,
-                    }),
-                ]
-            }),
-            Widget.Box({
-                vertical: false,
-                className: "spacing-h-10",
-                children: [
-                    Widget.Box({ // Keys
-                        vertical: true,
-                        homogeneous: true,
-                        children: category.binds.map((keybinds, _) => Widget.Box({ // Binds
-                            vertical: false,
-                            children: keybinds.keys.map((key, _) => Widget.Label({ // Specific keys
-                                className: `${['OR', '+'].includes(key) ? 'cheatsheet-key-notkey' : 'cheatsheet-key cheatsheet-color-' + category.id} txt-small`,
-                                label: key,
-                            }))
-                        }))
-                    }),
-                    Widget.Box({ // Actions
-                        vertical: true,
-                        homogeneous: true,
-                        children: category.binds.map((keybinds, _) => Widget.Label({ // Binds
-                            xalign: 0,
-                            label: keybinds.action,
-                            className: "txt chearsheet-action txt-small",
-                        }))
-                    })
+                    binds,
+                    childrenSections,
                ]
            })
        ]
    })
-    const realKeybinds = Widget.Box({
-        vertical: false,
-        className: "spacing-h-15",
-        homogeneous: true,
-        children: keybindList.map((group, _) => Widget.Box({ // Columns
-            vertical: true,
-            className: "spacing-v-15",
-            children: group.map((category, _) => Category(category))
-        })),
-    })
-    return Widget.Box({
-        vertical: true,
-        className: "spacing-v-10",
-        children: [
-            Widget.Label({
-                useMarkup: true,
-                selectable: true,
-                justify: Gtk.Justification.CENTER,
-                className: 'txt-small txt',
-                label: 'Sheet data stored in <tt>~/.config/ags/modules/cheatsheet/data_keybinds.js</tt>\nChange keybinds in <tt>~/.config/hypr/hyprland/keybinds.conf</tt>'
-            }),
-            realKeybinds,
-        ]
-    })
-}
+};
+
+export default () => {
+    const numOfTabs = Math.ceil(keybindList.children.length / KEYBIND_SECTIONS_PER_PAGE);
+    const keybindPages = Array.from({ length: numOfTabs }, (_, i) => ({
+        iconWidget: Label({
+            className: "txt txt-small",
+            label: `${i + 1}`,
+        }),
+        name: `${i + 1}`,
+        child: Box({
+            className: 'spacing-h-30',
+            children: keybindList.children.slice(
+                KEYBIND_SECTIONS_PER_PAGE * i, 0 + KEYBIND_SECTIONS_PER_PAGE * (i + 1),
+            ).map(data => Section(data, 1)),
+        }),
+    }));
+    return IconTabContainer({
+        iconWidgets: keybindPages.map((kbp) => kbp.iconWidget),
+        names: keybindPages.map((kbp) => kbp.name),
+        children: keybindPages.map((kbp) => kbp.child),
+    });
+};