hyprcrux/.config/ags/modules/.commonwidgets/configwidgets.js

import Variable from 'resource:///com/github/Aylur/ags/variable.js';
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
import { MaterialIcon } from './materialicon.js';
import { setupCursorHover } from '../.widgetutils/cursorhover.js';
const { Box, Button, Label, Revealer } = Widget;

export const ConfigToggle = ({
    icon, name, desc = '', initValue,
    expandWidget = true,
    onChange = () => { }, extraSetup = () => { },
    ...rest
}) => {
    const enabled = Variable(initValue);
    const toggleIcon = Label({
        className: `icon-material txt-bold ${enabled.value ? '' : 'txt-poof'}`,
        label: `${enabled.value ? 'check' : ''}`,
        setup: (self) => self.hook(enabled, (self) => {
            self.toggleClassName('switch-fg-toggling-false', false);
            if (!enabled.value) {
                self.label = '';
                self.toggleClassName('txt-poof', true);
            }
            else Utils.timeout(1, () => {
                toggleIcon.label = 'check';
                toggleIcon.toggleClassName('txt-poof', false);
            })
        }),
    })
    const toggleButtonIndicator = Box({
        className: `switch-fg ${enabled.value ? 'switch-fg-true' : ''}`,
        vpack: 'center',
        hpack: 'start',
        homogeneous: true,
        children: [toggleIcon,],
        setup: (self) => self.hook(enabled, (self) => {
            self.toggleClassName('switch-fg-true', enabled.value);
        }),
    });
    const toggleButton = Box({
        hpack: 'end',
        className: `switch-bg ${enabled.value ? 'switch-bg-true' : ''}`,
        homogeneous: true,
        children: [toggleButtonIndicator],
        setup: (self) => self.hook(enabled, (self) => {
            self.toggleClassName('switch-bg-true', enabled.value);
        }),
    });
    const widgetContent = Box({
        tooltipText: desc,
        className: 'txt spacing-h-5 configtoggle-box',
        children: [
            (icon !== undefined ? MaterialIcon(icon, 'norm') : null),
            (name !== undefined ? Label({
                className: 'txt txt-small',
                label: name,
            }) : null),
            expandWidget ? Box({ hexpand: true }) : null,
            toggleButton,
        ]
    });
    const interactionWrapper = Button({
        attribute: {
            toggle: (newValue) => {
                enabled.value = !enabled.value;
                onChange(interactionWrapper, enabled.value);
            }
        },
        child: widgetContent,
        onClicked: (self) => self.attribute.toggle(self),
        setup: (self) => {
            setupCursorHover(self);
            self.connect('pressed', () => { // mouse down
                toggleIcon.toggleClassName('txt-poof', true);
                toggleIcon.toggleClassName('switch-fg-true', false);
                if (!enabled.value) toggleIcon.toggleClassName('switch-fg-toggling-false', true);
            });
            extraSetup(self)
        },
        ...rest,
    });
    interactionWrapper.enabled = enabled;
    return interactionWrapper;
}

export const ConfigSegmentedSelection = ({
    icon, name, desc = '',
    options = [{ name: 'Option 1', value: 0 }, { name: 'Option 2', value: 1 }],
    initIndex = 0,
    onChange,
    ...rest
}) => {
    let lastSelected = initIndex;
    let value = options[initIndex].value;
    const widget = Box({
        tooltipText: desc,
        className: 'segment-container',
        // homogeneous: true,
        children: options.map((option, id) => {
            const selectedIcon = Revealer({
                revealChild: id == initIndex,
                transition: 'slide_right',
                transitionDuration: userOptions.animations.durationSmall,
                child: MaterialIcon('check', 'norm')
            });
            return Button({
                setup: setupCursorHover,
                className: `segment-btn ${id == initIndex ? 'segment-btn-enabled' : ''}`,
                child: Box({
                    hpack: 'center',
                    className: 'spacing-h-5',
                    children: [
                        selectedIcon,
                        Label({
                            label: option.name,
                        })
                    ]
                }),
                onClicked: (self) => {
                    value = option.value;
                    const kids = widget.get_children();
                    kids[lastSelected].toggleClassName('segment-btn-enabled', false);
                    kids[lastSelected].get_children()[0].get_children()[0].revealChild = false;
                    lastSelected = id;
                    self.toggleClassName('segment-btn-enabled', true);
                    selectedIcon.revealChild = true;
                    onChange(option.value, option.name);
                }
            })
        }),
        ...rest,
    });
    return widget;

}

export const ConfigMulipleSelection = ({
    icon, name, desc = '',
    optionsArr = [
        [{ name: 'Option 1', value: 0 }, { name: 'Option 2', value: 1 }],
        [{ name: 'Option 3', value: 0 }, { name: 'Option 4', value: 1 }],
    ],
    initIndex = [0, 0],
    onChange,
    ...rest
}) => {
    let lastSelected = initIndex;
    let value = optionsArr[initIndex[0]][initIndex[1]].value;
    const widget = Box({
        tooltipText: desc,
        className: 'multipleselection-container spacing-v-3',
        vertical: true,
        children: optionsArr.map((options, grp) => {
            return Box({
                className: 'spacing-h-5',
                hpack: 'center',
                children: options.map((option, id) => {
                    return Button({
                        setup: setupCursorHover,
                        className: `multipleselection-btn ${id == initIndex[1] && grp == initIndex[0] ? 'multipleselection-btn-enabled' : ''}`,
                        label: option.name,
                        onClicked: (self) => {
                            const kidsg = widget.get_children();
                            const kids = kidsg.flatMap(widget => widget.get_children());
                            kids.forEach(kid => {
                                kid.toggleClassName('multipleselection-btn-enabled', false);
                            });
                            lastSelected = id;
                            self.toggleClassName('multipleselection-btn-enabled', true);
                            onChange(option.value, option.name);
                        }
                    })
                }),
            })
        }),
        ...rest,
    });
    return widget;

}

export const ConfigGap = ({ vertical = true, size = 5, ...rest }) => Box({
    className: `gap-${vertical ? 'v' : 'h'}-${size}`,
    ...rest,
})