osk and cheatsheet: multimonitor

.config/ags/config.js

@@ -44,14 +44,12 @@ const Windows = () => [
     // Dock(),
     Overview(),
     forMonitors(Indicator),
-    Cheatsheet(),
+    forMonitors(Cheatsheet),
     SideLeft(),
     SideRight(),
-    Osk(),
+    forMonitors(Osk),
     Session(),
     // forMonitors(Bar),
-    // forMonitors(BarCornerTopleft),
-    // forMonitors(BarCornerTopright),
     forMonitors((id) => Corner(id, 'top left')),
     forMonitors((id) => Corner(id, 'top right')),
     forMonitors((id) => Corner(id, 'bottom left')),
@@ -59,15 +57,20 @@ const Windows = () => [
     forMonitors(BarCornerTopleft),
     forMonitors(BarCornerTopright),
 ];
+
 const CLOSE_ANIM_TIME = 210; // Longer than actual anim time to make sure widgets animate fully
+const closeWindowDelays = { // For animations
+    'sideright': CLOSE_ANIM_TIME,
+    'sideleft': CLOSE_ANIM_TIME,
+};
+for(let i = 0; i < (Gdk.Display.get_default()?.get_n_monitors() || 1); i++) {
+    closeWindowDelays[`osk${i}`] = CLOSE_ANIM_TIME;
+}
+
 App.config({
     css: `${COMPILED_STYLE_DIR}/style.css`,
     stackTraceOnError: true,
-    closeWindowDelay: { // For animations
+    closeWindowDelay: closeWindowDelays,
-        'sideright': CLOSE_ANIM_TIME,
-        'sideleft': CLOSE_ANIM_TIME,
-        'osk': CLOSE_ANIM_TIME,
-    },
     windows: Windows().flat(1),
 });
 

.config/ags/modules/cheatsheet/keybinds.js

@@ -1,7 +1,7 @@
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import { keybindList } from "./data_keybinds.js";
 
-export const Keybinds = () => Widget.Box({
+export default () => Widget.Box({
     vertical: false,
     className: "spacing-h-15",
     homogeneous: true,

.config/ags/modules/cheatsheet/main.js

@@ -1,11 +1,10 @@
-const { Gdk, Gtk } = imports.gi;
+const { Gtk } = imports.gi;
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
-import Service from 'resource:///com/github/Aylur/ags/service.js';
-import { Keybinds } from "./keybinds.js";
 import { setupCursorHover } from "../.widgetutils/cursorhover.js";
 import PopupWindow from '../.widgethacks/popupwindow.js';
+import Keybinds from "./keybinds.js";
 
-const cheatsheetHeader = () => Widget.CenterBox({
+const CheatsheetHeader = () => Widget.CenterBox({
     vertical: false,
     startWidget: Widget.Box({}),
     centerWidget: Widget.Box({
@@ -63,26 +62,26 @@ const cheatsheetHeader = () => Widget.CenterBox({
     }),
 });
 
-const clickOutsideToClose = Widget.EventBox({
+const ClickOutsideToClose = () => Widget.EventBox({
     onPrimaryClick: () => App.closeWindow('cheatsheet'),
     onSecondaryClick: () => App.closeWindow('cheatsheet'),
     onMiddleClick: () => App.closeWindow('cheatsheet'),
 });
 
-export default () => PopupWindow({
+export default (id) => PopupWindow({
-    name: 'cheatsheet',
+    name: `cheatsheet${id}`,
     exclusivity: 'ignore',
     keymode: 'exclusive',
     visible: false,
     child: Widget.Box({
         vertical: true,
         children: [
-            clickOutsideToClose,
+            ClickOutsideToClose(),
             Widget.Box({
                 vertical: true,
                 className: "cheatsheet-bg spacing-v-15",
                 children: [
-                    cheatsheetHeader(),
+                    CheatsheetHeader(),
                     Keybinds(),
                 ]
             }),

.config/ags/modules/onscreenkeyboard/main.js

@@ -1,9 +1,9 @@
 import PopupWindow from '../.widgethacks/popupwindow.js';
 import OnScreenKeyboard from "./onscreenkeyboard.js";
 
-export default () => PopupWindow({
+export default (id) => PopupWindow({
     anchor: ['bottom'],
-    name: 'osk',
+    name: `osk${id}`,
     showClassName: 'osk-show',
     hideClassName: 'osk-hide',
     child: OnScreenKeyboard(),

.config/ags/modules/onscreenkeyboard/onscreenkeyboard.js

@@ -33,7 +33,7 @@ class ShiftMode {
 }
 var modsPressed = false;
 
-const topDecor = Box({
+const TopDecor = () => Box({
     vertical: true,
     children: [
         Box({
@@ -47,7 +47,7 @@ const topDecor = Box({
     ]
 });
 
-const keyboardControlButton = (icon, text, runFunction) => Button({
+const KeyboardControlButton = (icon, text, runFunction) => Button({
     className: 'osk-control-button spacing-h-10',
     onClicked: () => runFunction(),
     child: Widget.Box({
@@ -60,7 +60,7 @@ const keyboardControlButton = (icon, text, runFunction) => Button({
     })
 })
 
-const keyboardControls = Box({
+const KeyboardControls = () => Box({
     vertical: true,
     className: 'spacing-v-5',
     children: [
@@ -90,7 +90,7 @@ var shiftMode = ShiftMode.Off;
 var shiftButton;
 var rightShiftButton;
 var allButtons = [];
-const keyboardItself = (kbJson) => {
+const KeyboardItself = (kbJson) => {
     return Box({
         vertical: true,
         className: 'spacing-v-5',
@@ -192,69 +192,71 @@ const keyboardItself = (kbJson) => {
     })
 }
 
-const keyboardWindow = Box({
+const KeyboardWindow = () => Box({
     vexpand: true,
     hexpand: true,
     vertical: true,
     className: 'osk-window spacing-v-5',
     children: [
-        topDecor,
+        TopDecor(),
         Box({
             className: 'osk-body spacing-h-10',
             children: [
-                keyboardControls,
+                KeyboardControls(),
                 Widget.Box({ className: 'separator-line' }),
-                keyboardItself(keyboardJson),
+                KeyboardItself(keyboardJson),
             ],
         })
     ],
-    setup: (self) => self.hook(App, (box, name, visible) => { // Update on open
+    setup: (self) => self.hook(App, (self, name, visible) => { // Update on open
         if (name == 'osk' && visible) {
-            keyboardWindow.setCss(`margin-bottom: -0px;`);
+            self.setCss(`margin-bottom: -0px;`);
         }
     }),
 });
 
-const gestureEvBox = EventBox({ child: keyboardWindow })
+export default () => {
-const gesture = Gtk.GestureDrag.new(gestureEvBox);
+    const kbWindow = KeyboardWindow();
-gesture.connect('drag-begin', async () => {
+    const gestureEvBox = EventBox({ child: kbWindow })
-    try {
+    const gesture = Gtk.GestureDrag.new(gestureEvBox);
-        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
+    gesture.connect('drag-begin', async () => {
-        Hyprland.messageAsync('j/cursorpos').then((out) => {
+        try {
-            gesture.startY = JSON.parse(out).y;
+            const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
-        }).catch(print);
+            Hyprland.messageAsync('j/cursorpos').then((out) => {
-    } catch {
+                gesture.startY = JSON.parse(out).y;
-        return;
+            }).catch(print);
-    }
+        } catch {
-});
+            return;
-gesture.connect('drag-update', async () => {
+        }
-    try {
+    });
-        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
+    gesture.connect('drag-update', async () => {
-        Hyprland.messageAsync('j/cursorpos').then((out) => {
+        try {
-            const currentY = JSON.parse(out).y;
+            const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
-            const offset = gesture.startY - currentY;
+            Hyprland.messageAsync('j/cursorpos').then((out) => {
+                const currentY = JSON.parse(out).y;
+                const offset = gesture.startY - currentY;
 
-            if (offset > 0) return;
+                if (offset > 0) return;
 
-            keyboardWindow.setCss(`
+                kbWindow.setCss(`
                 margin-bottom: ${offset}px;
             `);
-        }).catch(print);
+            }).catch(print);
-    } catch {
+        } catch {
-        return;
+            return;
-    }
+        }
-});
+    });
-gesture.connect('drag-end', () => {
+    gesture.connect('drag-end', () => {
-    var offset = gesture.get_offset()[2];
+        var offset = gesture.get_offset()[2];
-    if (offset > 50) {
+        if (offset > 50) {
-        App.closeWindow('osk');
+            App.closeWindow('osk');
-    }
+        }
-    else {
+        else {
-        keyboardWindow.setCss(`
+            kbWindow.setCss(`
             transition: margin-bottom 170ms cubic-bezier(0.05, 0.7, 0.1, 1);
             margin-bottom: 0px;
         `);
-    }
+        }
-})
+    })
-
+    return gestureEvBox;
-export default () => gestureEvBox;
+};

.config/ags/variables.js

@@ -1,4 +1,6 @@
+
 const { Gtk } = imports.gi;
+import App from 'resource:///com/github/Aylur/ags/app.js'
 import Variable from 'resource:///com/github/Aylur/ags/variable.js';
 import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
@@ -11,7 +13,6 @@ export const showMusicControls = Variable(false, {})
 export const showColorScheme = Variable(false, {})
 globalThis['openMusicControls'] = showMusicControls;
 globalThis['openColorScheme'] = showColorScheme;
-
 globalThis['mpris'] = Mpris;
 
 // Screen size

.config/hypr/hyprland/keybinds.conf

@@ -81,14 +81,14 @@ bind = Control+Super, T, exec, ~/.config/ags/scripts/color_generation/switchwall
 bind = Control+Alt, Slash, exec, ags run-js 'cycleMode();'
 bindir = Super, Super_L, exec, ags -t 'overview'
 bind = Super, Tab, exec, ags -t 'overview'
-bind = Super, Slash, exec, ags -t 'cheatsheet'
+bind = Super, Slash, exec, for ((i=0; i<$(xrandr --listmonitors | grep -c 'Monitor'); i++)); do ags -t "cheatsheet""$i"; done
 bind = Super, B, exec, ags -t 'sideleft'
 bind = Super, A, exec, ags -t 'sideleft'
 bind = Super, O, exec, ags -t 'sideleft'
 bind = Super, N, exec, ags -t 'sideright'
 bind = Super, M, exec, ags run-js 'openMusicControls.value = (!mpris.getPlayer() ? false : !openMusicControls.value);'
 bind = Super, Comma, exec, ags run-js 'openColorScheme.value = true; Utils.timeout(2000, () => openColorScheme.value = false);'
-bind = Super, K, exec, ags -t 'osk'
+bind = Super, K, exec, for ((i=0; i<$(xrandr --listmonitors | grep -c 'Monitor'); i++)); do ags -t "osk""$i"; done
 bind = Control+Alt, Delete, exec, ags -t 'session'
 bindle = , XF86AudioRaiseVolume, exec, ags run-js 'indicator.popup(1);'
 bindle = , XF86AudioLowerVolume, exec, ags run-js 'indicator.popup(1);'