nixos-configs/devices/wim/config/ags/js/notifications/gesture.js

147 lines
4.6 KiB
JavaScript
Raw Normal View History

import { Box, EventBox } from 'resource:///com/github/Aylur/ags/widget.js';
import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
import Gtk from 'gi://Gtk';
import Gdk from 'gi://Gdk';
const display = Gdk.Display.get_default();
export default ({
maxOffset = 150,
startMargin = 0,
endMargin = 300,
command = () => {},
onHover = () => {},
onHoverLost = () => {},
child = '',
children = [],
properties = [[]],
...props
}) => {
const widget = EventBox({
...props,
properties: [
['dragging', false],
...properties,
],
onHover: self => {
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
onHover(self);
},
onHoverLost: self => {
self.window.set_cursor(null);
onHoverLost(self);
},
});
const gesture = Gtk.GestureDrag.new(widget);
2023-11-01 15:29:47 -04:00
const TRANSITION = 'transition: margin 0.5s ease, opacity 0.5s ease;';
const SQUEEZED = 'margin-bottom: -70px; margin-top: -70px;';
const MAX_LEFT = `
margin-left: -${Number(maxOffset + endMargin)}px;
margin-right: ${Number(maxOffset + endMargin)}px;
`;
const MAX_RIGHT = `
margin-left: ${Number(maxOffset + endMargin)}px;
margin-right: -${Number(maxOffset + endMargin)}px;
`;
const slideLeft = `${TRANSITION} ${MAX_LEFT} opacity: 0;`;
const squeezeLeft = `${TRANSITION} ${MAX_LEFT} ${SQUEEZED} opacity: 0;`;
const slideRight = `${TRANSITION} ${MAX_RIGHT} opacity: 0;`;
const squeezeRight = `${TRANSITION} ${MAX_RIGHT} ${SQUEEZED} opacity: 0;`;
widget.add(Box({
properties: [
2023-11-01 15:29:47 -04:00
['slideLeft', slideLeft],
['squeezeLeft', squeezeLeft],
['slideRight', slideRight],
['squeezeRight', squeezeRight],
['ready', false],
],
children: [
...children,
child,
],
2023-11-01 15:29:47 -04:00
style: squeezeLeft,
connections: [
[gesture, self => {
var offset = gesture.get_offset()[1];
2023-11-01 15:29:47 -04:00
// Slide right
if (offset >= 0) {
2023-11-01 15:29:47 -04:00
self.setStyle(`
margin-left: ${Number(offset + startMargin)}px;
margin-right: -${Number(offset + startMargin)}px;
`);
}
2023-11-01 15:29:47 -04:00
// Slide left
else {
offset = Math.abs(offset);
2023-11-01 15:29:47 -04:00
self.setStyle(`
margin-right: ${Number(offset + startMargin)}px;
margin-left: -${Number(offset + startMargin)}px;
`);
}
self.get_parent()._dragging = Math.abs(offset) > 10;
if (widget.window)
widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
}, 'drag-update'],
[gesture, self => {
2023-11-01 15:29:47 -04:00
// ?
if (!self._ready) {
2023-11-01 15:29:47 -04:00
self.setStyle(slideLeft);
timeout(500, () => self.setStyle(`${TRANSITION} margin: unset; opacity: 1;`));
timeout(1000, () => self._ready = true);
return;
}
const offset = gesture.get_offset()[1];
2023-11-01 15:29:47 -04:00
// If crosses threshold after letting go, slide away
if (Math.abs(offset) > maxOffset) {
2023-11-01 15:29:47 -04:00
// Slide away right
if (offset > 0) {
2023-11-01 15:29:47 -04:00
// Disable inputs during animation
widget.sensitive = false;
2023-11-01 15:29:47 -04:00
self.setStyle(slideRight);
timeout(500, () => self.setStyle(squeezeRight));
}
2023-11-01 15:29:47 -04:00
// Slide away left
else {
2023-11-01 15:29:47 -04:00
// Disable inputs during animation
widget.sensitive = false;
2023-11-01 15:29:47 -04:00
self.setStyle(slideLeft);
timeout(500, () => self.setStyle(squeezeLeft));
}
2023-11-01 15:29:47 -04:00
timeout(1000, () => {
command();
self.destroy();
});
}
else {
2023-11-01 15:29:47 -04:00
self.setStyle(`${TRANSITION} margin: unset; opacity: 1;`);
if (widget.window)
widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
self.get_parent()._dragging = false;
}
}, 'drag-end'],
2023-09-11 19:28:22 -04:00
],
}));
return widget;
};