folder restructure round 1 (#271)

2024-02-19 23:55:01 +07:00
parent 83e837e920
commit 4151d52737
86 changed files with 607 additions and 181 deletions
@@ -0,0 +1,78 @@
+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,
+}) => {
+    return Revealer({
+        transition: transition1,
+        transitionDuration: duration1,
+        revealChild: revealChild,
+        child: Revealer({
+            transition: transition2,
+            transitionDuration: duration2,
+            revealChild: revealChild,
+            child: child,
+        })
+    })
+}
@@ -0,0 +1,30 @@
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+const { Box, Window } = Widget;
+
+
+export default ({
+    name,
+    child,
+    showClassName,
+    hideClassName,
+    ...props
+}) => Window({
+    name,
+    popup: true,
+    visible: false,
+    layer: 'overlay',
+    ...props,
+
+    child: Box({
+        className: `${showClassName} ${hideClassName}`,
+        setup: (self) => self
+            .hook(App, (self, currentName, visible) => {
+                if (currentName === name) {
+                    self.toggleClassName(hideClassName, !visible);
+                }
+            })
+        ,
+        child: child,
+    }),
+});