import { Box, CenterBox, Label, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js'; import Separator from '../misc/separator.js'; import RoundedCorner from '../corners/screen-corners.js'; import Key from './keys.js'; import { defaultOskLayout, oskLayouts } from './keyboard-layouts.js'; const keyboardLayout = defaultOskLayout; const keyboardJson = oskLayouts[keyboardLayout]; const L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4]; // eslint-disable-line const COLOR = 'rgba(0, 0, 0, 0.3)'; const SPACING = 4; /** @param {import('types/widgets/window').default} window */ export default (window) => Box({ vertical: true, children: [ CenterBox({ hpack: 'center', start_widget: RoundedCorner('bottomright', ` background-color: ${COLOR}; `), center_widget: CenterBox({ class_name: 'thingy', css: `background: ${COLOR};`, center_widget: Box({ hpack: 'center', class_name: 'settings', children: [ ToggleButton({ cursor: 'pointer', class_name: 'button', active: true, vpack: 'center', setup: (self) => { self.on('toggled', () => { self.toggleClassName( 'toggled', // @ts-expect-error self.get_active(), ); // @ts-expect-error window.exclusivity = self.get_active() ? 'exclusive' : 'normal'; }); }, child: Label('Exclusive'), }), ], }), }), end_widget: RoundedCorner('bottomleft', ` background-color: ${COLOR}; `), }), CenterBox({ css: `background: ${COLOR};`, class_name: 'osk', hexpand: true, start_widget: Box({ class_name: 'left-side side', hpack: 'start', vertical: true, children: keyboardJson.keys.map((row, rowIndex) => { const keys = []; row.forEach((key, keyIndex) => { if (keyIndex < L_KEY_PER_ROW[rowIndex]) { keys.push(Key(key)); } }); return Box({ vertical: true, children: [ Box({ class_name: 'row', children: [ Separator(SPACING), ...keys, ], }), Separator(SPACING, { vertical: true }), ], }); }), }), center_widget: Box({ hpack: 'center', vpack: 'center', children: [ ], }), end_widget: Box({ class_name: 'right-side side', hpack: 'end', vertical: true, children: keyboardJson.keys.map((row, rowIndex) => { const keys = []; row.forEach((key, keyIndex) => { if (keyIndex >= L_KEY_PER_ROW[rowIndex]) { keys.push(Key(key)); } }); return Box({ vertical: true, children: [ Box({ hpack: 'end', class_name: 'row', children: keys, }), Separator(SPACING, { vertical: true }), ], }); }), }), }), ], });