[#976] added optional RelationOptions.DisplayFields and refactored the relation picker UI

ui/src/actions/scrollend.js

@@ -0,0 +1,64 @@
+// Simple Svelte scrollend detection action.
+// ===================================================================
+//
+// ### Example usage
+//
+// Simple form (with default 100px threshold):
+// ```html
+// <div class="list" use:scrollend={() => { console.log("end reached") }}>
+//     ...
+// </div>
+// ```
+//
+// With custom threshold:
+// ```html
+// <div class="list" use:scrollend={{
+//     threshold: 10,
+//     callback:  () => { console.log("end reached") }
+// }}>
+//     ...
+// </div>
+// ```
+// ===================================================================
+
+function normalize(rawData) {
+    if (typeof rawData === "function") {
+        return {
+            threshold: 100,
+            callback: rawData,
+        }
+    }
+
+    return rawData || {};
+}
+
+export default function scrollend(node, options) {
+    options = normalize(options);
+
+    options?.callback && options.callback();
+
+    function onScroll(e) {
+        if (!options?.callback) {
+            return;
+        }
+
+        const offset = e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop;
+
+        if (offset <= options.threshold) {
+            options.callback();
+        }
+    }
+
+    node.addEventListener("scroll", onScroll);
+    node.addEventListener("resize", onScroll);
+
+    return {
+        update(newOptions) {
+            options = normalize(newOptions);
+        },
+        destroy() {
+            node.removeEventListener("scroll", onScroll);
+            node.removeEventListener("resize", onScroll);
+        },
+    };
+}