86 lines
3.0 KiB
JavaScript
86 lines
3.0 KiB
JavaScript
|
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
||
|
|
|
||
|
|
const { Revealer, Scrollable } = Widget;
|
||
|
|
|
||
|
|
export const MarginRevealer = ({
|
||
|
|
transition = 'slide_down',
|
||
|
|
child,
|
||
|
|
revealChild,
|
||
|
|
showClass = 'element-show', // These are for animation curve, they don't really hide
|
||
|
|
hideClass = 'element-hide', // Don't put margins in these classes!
|
||
|
|
extraSetup = () => { },
|
||
|
|
...rest
|
||
|
|
}) => {
|
||
|
|
const widget = Scrollable({
|
||
|
|
...rest,
|
||
|
|
attribute: {
|
||
|
|
'revealChild': true, // It'll be set to false after init if it's supposed to hide
|
||
|
|
'transition': transition,
|
||
|
|
'show': () => {
|
||
|
|
if (widget.attribute.revealChild) return;
|
||
|
|
widget.hscroll = 'never';
|
||
|
|
widget.vscroll = 'never';
|
||
|
|
child.toggleClassName(hideClass, false);
|
||
|
|
child.toggleClassName(showClass, true);
|
||
|
|
widget.attribute.revealChild = true;
|
||
|
|
child.css = 'margin: 0px;';
|
||
|
|
},
|
||
|
|
'hide': () => {
|
||
|
|
if (!widget.attribute.revealChild) return;
|
||
|
|
child.toggleClassName(hideClass, true);
|
||
|
|
child.toggleClassName(showClass, false);
|
||
|
|
widget.attribute.revealChild = false;
|
||
|
|
if (widget.attribute.transition == 'slide_left')
|
||
|
|
child.css = `margin-right: -${child.get_allocated_width()}px;`;
|
||
|
|
else if (widget.attribute.transition == 'slide_right')
|
||
|
|
child.css = `margin-left: -${child.get_allocated_width()}px;`;
|
||
|
|
else if (widget.attribute.transition == 'slide_up')
|
||
|
|
child.css = `margin-bottom: -${child.get_allocated_height()}px;`;
|
||
|
|
else if (widget.attribute.transition == 'slide_down')
|
||
|
|
child.css = `margin-top: -${child.get_allocated_height()}px;`;
|
||
|
|
},
|
||
|
|
'toggle': () => {
|
||
|
|
if (widget.attribute.revealChild) widget.attribute.hide();
|
||
|
|
else widget.attribute.show();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
child: child,
|
||
|
|
hscroll: `${revealChild ? 'never' : 'always'}`,
|
||
|
|
vscroll: `${revealChild ? 'never' : 'always'}`,
|
||
|
|
setup: (self) => {
|
||
|
|
extraSetup(self);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
child.toggleClassName(`${revealChild ? showClass : hideClass}`, true);
|
||
|
|
return widget;
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO: Allow reveal update. Currently this just helps at declaration
|
||
|
|
export const DoubleRevealer = ({
|
||
|
|
transition1 = 'slide_right',
|
||
|
|
transition2 = 'slide_left',
|
||
|
|
duration1 = 150,
|
||
|
|
duration2 = 150,
|
||
|
|
child,
|
||
|
|
revealChild,
|
||
|
|
...rest
|
||
|
|
}) => {
|
||
|
|
const r2 = Revealer({
|
||
|
|
transition: transition2,
|
||
|
|
transitionDuration: duration2,
|
||
|
|
revealChild: revealChild,
|
||
|
|
child: child,
|
||
|
|
});
|
||
|
|
const r1 = Revealer({
|
||
|
|
transition: transition1,
|
||
|
|
transitionDuration: duration1,
|
||
|
|
revealChild: revealChild,
|
||
|
|
child: r2,
|
||
|
|
...rest,
|
||
|
|
})
|
||
|
|
r1.toggleRevealChild = (value) => {
|
||
|
|
r1.revealChild = value;
|
||
|
|
r2.revealChild = value;
|
||
|
|
}
|
||
|
|
return r1;
|
||
|
|
}
|