Use configuration object for load builders

core/static/webpack/user/family-graph-index.js

@@ -159,20 +159,25 @@ function createGraph(container, data, activeUserId) {
 }
 
 /**
- * Create a family graph of an user
+ * @typedef FamilyGraphConfig
- * @param {string} Base url for fetching the tree as a string
+ * @param {string} apiUrl Base url for fetching the tree as a string
- * @param {string} Id of the user to fetch the tree from
+ * @param {string} activeUser Id of the user to fetch the tree from
- * @param {number} Minimum tree depth for godfathers and godchildren
+ * @param {number} depthMin Minimum tree depth for godfathers and godchildren
- * @param {number} Maximum tree depth for godfathers and godchildren
+ * @param {number} depthMax Maximum tree depth for godfathers and godchildren
  **/
-window.loadFamilyGraph = (apiUrl, activeUser, depthMin, depthMax) => {
+
+/**
+ * Create a family graph of an user
+ * @param {FamilyGraphConfig} Configuration
+ **/
+window.loadFamilyGraph = (config) => {
   document.addEventListener("alpine:init", () => {
     const defaultDepth = 2;
 
     function getInitialDepth(prop) {
       // biome-ignore lint/correctness/noUndeclaredVariables: defined by script.js
       const value = Number.parseInt(initialUrlParams.get(prop));
-      if (Number.isNaN(value) || value < depthMin || value > depthMax) {
+      if (Number.isNaN(value) || value < config.depthMin || value > config.depthMax) {
         return defaultDepth;
       }
       return value;
@@ -193,7 +198,7 @@ window.loadFamilyGraph = (apiUrl, activeUser, depthMin, depthMax) => {
         }, 100);
         for (const param of ["godfathersDepth", "godchildrenDepth"]) {
           this.$watch(param, async (value) => {
-            if (value < depthMin || value > depthMax) {
+            if (value < config.depthMin || value > config.depthMax) {
               return;
             }
             // biome-ignore lint/correctness/noUndeclaredVariables: defined by script.js
@@ -207,7 +212,7 @@ window.loadFamilyGraph = (apiUrl, activeUser, depthMin, depthMax) => {
           await this.reverseGraph();
         });
         this.$watch("graphData", async () => {
-          await this.generateGraph();
+          this.generateGraph();
           if (this.reverse) {
             await this.reverseGraph();
           }
@@ -243,15 +248,19 @@ window.loadFamilyGraph = (apiUrl, activeUser, depthMin, depthMax) => {
 
       async fetchGraphData() {
         this.graphData = await getGraphData(
-          apiUrl,
+          config.apiUrl,
           this.godfathersDepth,
           this.godchildrenDepth,
         );
       },
 
-      async generateGraph() {
+      generateGraph() {
         this.loading = true;
-        this.graph = await createGraph($(this.$refs.graph), this.graphData, activeUser);
+        this.graph = createGraph(
+          $(this.$refs.graph),
+          this.graphData,
+          config.activeUser,
+        );
         this.loading = false;
       },
     }));

core/static/webpack/user/pictures-index.js

@@ -27,10 +27,15 @@ import { showSaveFilePicker } from "native-file-system-adapter";
  */
 
 /**
- * Load user picture page with a nice download bar
+ * @typedef PicturePageConfig
- * @param {string} Url of the api endpoint to fetch pictures from the user
+ * @param {string} apiUrl Url of the api endpoint to fetch pictures from the user
  **/
-window.loadPicturePage = (apiUrl) => {
+
+/**
+ * Load user picture page with a nice download bar
+ * @param {PicturePageConfig} Configuration
+ **/
+window.loadPicturePage = (config) => {
   document.addEventListener("alpine:init", () => {
     Alpine.data("user_pictures", () => ({
       isDownloading: false,
@@ -40,7 +45,7 @@ window.loadPicturePage = (apiUrl) => {
 
       async init() {
         // biome-ignore lint/correctness/noUndeclaredVariables: imported from script.json
-        this.pictures = await fetchPaginated(apiUrl);
+        this.pictures = await fetchPaginated(config.apiUrl);
         this.albums = this.pictures.reduce((acc, picture) => {
           if (!acc[picture.album]) {
             acc[picture.album] = [];

core/templates/core/user_godfathers_tree.jinja

@@ -91,13 +91,13 @@
 
   <script>
     window.addEventListener("DOMContentLoaded", () => {
-      loadFamilyGraph(
+      loadFamilyGraph({
-        "{{ api_url }}",
+        apiUrl: "{{ api_url }}",
-        "{{ object.id }}",
+        activeUser: "{{ object.id }}",
-        {{ depth_min }},
+        depthMin: {{ depth_min }},
-        {{ depth_max }},
+        depthMax: {{ depth_max }},
-      );
+      });
-    })
+    });
   </script>
 {% endblock %}
 

core/templates/core/user_pictures.jinja

@@ -62,7 +62,9 @@
   {{ super() }}
   <script>
     window.addEventListener("DOMContentLoaded", () => {
-      loadPicturePage("{{ url("api:pictures") }}" + "?users_identified={{ object.id }}");
+      loadPicturePage({
+        apiUrl: "{{ url("api:pictures") }}?users_identified={{ object.id }}"
+      });
     })
   </script>
 {% endblock script %}