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, })