988 sort locations (#1019)

src/sdg/js/components/abstract/utils.js

@@ -0,0 +1,32 @@
+/**
+ * Removes any text enclosed in parentheses from the input string, including the parentheses themselves,
+ * and trims any leading or trailing whitespace from the final result.
+ *
+ * @param {string} str - The input string from which to remove text within parentheses.
+ * @returns {string} - The modified string with all text within parentheses removed.
+ */
+export function stripParensText(str) {
+    // Uses a regular expression to find text within parentheses and remove it.
+    // \s* matches any surrounding whitespace.
+    // \(.*?\) matches any text within parentheses (non-greedy).
+    return str.replace(/\s*\(.*?\)\s*/g, "").trim();
+}
+
+/**
+ * Creates a debounced function that delays invoking the provided function
+ * until after a specified delay has elapsed since the last time it was invoked.
+ *
+ * @param {Function} func - The function to debounce.
+ * @param {number} delay - The number of milliseconds to delay.
+ * @returns {Function} - A new debounced function that, when invoked, will
+ * delay the execution of the original function by the specified delay time.
+ */
+export function debounce(func, delay) {
+    let inDebounce;
+    return function () {
+        const context = this;
+        const args = arguments;
+        clearTimeout(inDebounce);
+        inDebounce = setTimeout(() => func.apply(context, args), delay);
+    };
+}

src/sdg/js/components/choices.js

@@ -1,12 +1,7 @@
-import Choices from 'choices.js'
-
 export const CHOICES_CONFIG = {
-        loadingText: 'Laden...',
-        noResultsText: 'Geen resultaten gevonden',
-        noChoicesText: 'Geen keuzes om uit te kiezen',
-        itemSelectText: 'Druk om te kiezen',
-        allowHTML: false
-    };
-
-const fields = document.querySelectorAll(".choices");
-[...fields].forEach(element => new Choices(element, CHOICES_CONFIG));
+    loadingText: "Laden...",
+    noResultsText: "Geen resultaten gevonden",
+    noChoicesText: "Geen keuzes om uit te kiezen",
+    itemSelectText: "Druk om te kiezen",
+    allowHTML: false,
+};

src/sdg/js/components/dynamic_title.js

@@ -0,0 +1,76 @@
+import { debounce } from "./abstract/utils";
+import { Component } from "./abstract/component";
+
+const DYNAMIC_TITLES = document.querySelectorAll(".dynamic_title");
+const DEBOUNCE_DELAY = 300;
+
+export class DynamicTitle extends Component {
+    /**
+     * Constructor method.
+     * @param {HTMLElement} node
+     */
+    constructor(node) {
+        super(node);
+        this.targetClassname = this.node.dataset.dynamicTitleTarget;
+        this.targetElement = this.getDynamicTitleTarget();
+    }
+    /**
+     * Binds events to callbacks.
+     * Use this to define EventListeners, MutationObservers etc.
+     */
+    bindEvents() {
+        super.bindEvents();
+
+        this.node.addEventListener(
+            "input",
+            debounce(this.handleChange.bind(this), DEBOUNCE_DELAY)
+        );
+
+        /**
+         * Event listener for when the input value is programmatically changed.
+         * This must be used in conjunction with node.dispatch(new CustomEvent())
+         * to notify that the input value has been updated.
+         *
+         * @example
+         * Dispatching the event:
+         * this.node.dispatchEvent(new CustomEvent("forced_input", { detail: { forcedValue: value } }));
+         */
+        this.node.addEventListener(
+            "forced_input",
+            this.handleChange.bind(this)
+        );
+    }
+
+    /**
+     * Handles the change event.
+     * @param {InputEvent} event
+     */
+    handleChange(event) {
+        const title = event.target.value;
+        if (!this.targetElement) return;
+        if (!title) this.setValue(""); // Remove dynamic
+        else this.setValue(title.trim());
+    }
+
+    /**
+     * Set the value on the target element.
+     * @param {string} value
+     */
+    setValue(value) {
+        this.targetElement.textContent = value;
+    }
+
+    /**
+     * Get the dynamic title element.
+     * @returns {HTMLElement | undefined}
+     */
+    getDynamicTitleTarget() {
+        if (!this.targetClassname) return undefined;
+
+        const titleElement = document.querySelector(this.targetClassname);
+        if (!titleElement) return undefined;
+        return titleElement;
+    }
+}
+
+[...DYNAMIC_TITLES].forEach((node) => new DynamicTitle(node));

src/sdg/js/components/formset/abstract/field_utils.js

@@ -0,0 +1,74 @@
+/**
+ * Simple class for implementing field components (`input[type='text']`) within the formset form component.
+ * @abstract
+ */
+export class TextField {
+    /**
+     * Construct the NumberField
+     * @param {HTMLInputElement} node
+     */
+    constructor(node) {
+        this.node = node;
+
+        /** @type {string} */
+        this.value = node.value;
+    }
+
+    /**
+     * Set the value of the totalForms field
+     * @param {string} value
+     */
+    setValue(value) {
+        this.node.value = value;
+    }
+}
+
+/**
+ * Simple class for implementing field components (`input[type='number']`) within the formset form component.
+ * @abstract
+ */
+export class NumberField {
+    /**
+     * Construct the NumberField
+     * @param {HTMLInputElement} node
+     */
+    constructor(node) {
+        this.node = node;
+
+        /** @type {number} */
+        this.value = parseInt(node.value);
+    }
+
+    /**
+     * Set the value of the totalForms field
+     * @param {number} value
+     */
+    setValue(value) {
+        this.node.value = value;
+    }
+}
+
+/**
+ * Simple class for implementing field components (`input[type='checkbox']`) within the formset form component.
+ * @abstract
+ */
+export class CheckboxField {
+    /**
+     * Construct the CheckboxField
+     * @param {HTMLInputElement} node
+     */
+    constructor(node) {
+        this.node = node;
+
+        /** @type {boolean} */
+        this.checked = parseInt(node.checked);
+    }
+
+    /**
+     * Set the checked value
+     * @param {boolean} checked
+     */
+    setChecked(checked) {
+        this.node.checked = checked;
+    }
+}