decidim-core 0.31.5 → 0.31.6

data/app/packs/src/decidim/controllers/multiple_mentions/controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import AutoComplete from "src/decidim/refactor/moved/autocomplete";
+import TomSelect from "tom-select/dist/cjs/tom-select.popular";
 import icon from "src/decidim/refactor/moved/icon";
 
 export default class extends Controller {
@@ -16,20 +16,6 @@ export default class extends Controller {
 
     this.initializeEmptyFocusElement();
     this.initializeAutoComplete();
-    this.setupSelectionListener();
-  }
-
-  /**
-   * Setup the selection event listener
-   * @returns {void}
-   */
-  setupSelectionListener() {
-    this.selectionHandler = (event) => {
-      const feedback = event.detail;
-      const selection = feedback.selection;
-      this.handleSelection(selection);
-    };
-    this.searchInput.addEventListener("selection", this.selectionHandler);
   }
 
   /*
@@ -37,8 +23,8 @@ export default class extends Controller {
    * @returns {void}
    */
   disconnect() {
-    if (this.searchInput && this.selectionHandler) {
-      this.searchInput.removeEventListener("selection", this.selectionHandler);
+    if (this.tomSelect) {
+      this.tomSelect.destroy();
     }
   }
 
@@ -80,11 +66,56 @@ export default class extends Controller {
    * @returns {void}
    */
   initializeAutoComplete() {
-    this.autoComplete = new AutoComplete(this.searchInput, {
-      dataMatchKeys: ["name", "nickname"],
-      dataSource: this.getDataSource.bind(this),
-      dataFilter: this.filterResults.bind(this),
-      modifyResult: this.modifyResult.bind(this)
+    this.tomSelect = new TomSelect(this.searchInput, {
+      maxItems: 1,
+      valueField: "id",
+      labelField: "name",
+      searchField: ["name", "nickname"],
+      loadThrottle: 200,
+      loadingClass: "loading",
+      preload: false,
+      highlight: true,
+      load: (query, callback) => {
+        if (!query || query.length < 2) {
+          callback();
+          return;
+        }
+        this.getDataSource(query, (results) => {
+          const filtered = this.filterResults(results);
+          filtered.forEach((item) => {
+            if (item.directMessagesEnabled === "false") {
+              item.disabled = true;
+            }
+          });
+          callback(filtered);
+        });
+      },
+      render: {
+        option: (data, escape) => {
+          const isDisabled = data.directMessagesEnabled === "false";
+          const className = isDisabled
+            ? "disabled"
+            : "";
+          const disabledMsg = isDisabled
+            ? `<small>${escape(this.searchInput.dataset.directMessagesDisabled)}</small>`
+            : "";
+          return `<div class="${className}">
+            <img src="${escape(data.avatarUrl)}" alt="${escape(data.name)}">
+            <span>${escape(data.nickname)}</span>
+            <small>${escape(data.name)}</small>
+            ${disabledMsg}
+          </div>`;
+        },
+        "no_results": () => `<div class="no-results">${this.searchInput.dataset.noresults || ""}</div>`
+      },
+      onChange: (value) => {
+        if (value) {
+          const option = this.tomSelect.options[value];
+          this.handleSelection({ value: option });
+          this.tomSelect.clear();
+          this.tomSelect.clearOptions();
+        }
+      }
     });
   }
 
@@ -129,7 +160,7 @@ export default class extends Controller {
    */
   filterResults(list) {
     return list.filter(
-      (item) => !this.selected.includes(item.value.id)
+      (item) => !this.selected.includes(item.id)
     );
   }
 
@@ -161,18 +192,23 @@ export default class extends Controller {
    */
   handleSelection(selection) {
     const id = selection.value.id;
-    // Check if we have reached the maximum limit or if direct messages are disabled
     if (this.isMaxLimitReached() || selection.value.directMessagesEnabled === "false") {
       return;
     }
 
     this.addSelectedUser(selection, id);
-    this.autoComplete.setInput("");
     this.selected.push(id);
+  }
 
-    if (this.autoComplete && this.autoComplete.autocomplete) {
-      this.autoComplete.autocomplete.close();
-    }
+  /**
+   * Escape HTML characters in a string
+   * @param {string} str - The string to escape
+   * @returns {string} The escaped HTML string
+   */
+  htmlEscape(str) {
+    const div = document.createElement("div");
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
   }
 
   /**
@@ -187,10 +223,10 @@ export default class extends Controller {
     const listItem = document.createElement("li");
     listItem.tabIndex = "-1";
     listItem.innerHTML = `
-      <input type="hidden" name="${this.options.name}" value="${id}">
-      <img src="${selection.value.avatarUrl}" alt="${selection.value.name}">
-      <span>${selection.value.name}</span>
-      <button type="button" data-remove="${id}" tabindex="0" aria-controls="0" aria-label="${label}">${icon("delete-bin-line")}</button>
+      <input type="hidden" name="${this.htmlEscape(this.options.name)}" value="${this.htmlEscape(id)}">
+      <img src="${this.htmlEscape(selection.value.avatarUrl)}" alt="${this.htmlEscape(selection.value.name)}">
+      <span>${this.htmlEscape(selection.value.name)}</span>
+      <button type="button" data-remove="${this.htmlEscape(id)}" tabindex="0" aria-controls="0" aria-label="${this.htmlEscape(label)}">${icon("delete-bin-line")}</button>
     `;
 
     this.selectedItems.appendChild(listItem);

data/app/packs/src/decidim/controllers/multiple_mentions/input_multiple_mentions.test.js

@@ -7,13 +7,14 @@
 import { Application } from "@hotwired/stimulus"
 import MultipleMentionsController from "src/decidim/controllers/multiple_mentions/controller"
 
-const AutoComplete = require("src/decidim/refactor/moved/autocomplete");
+const TomSelect = require("tom-select/dist/cjs/tom-select.popular");
 const iconMock = require("src/decidim/refactor/moved/icon");
 
 // Mock the dependencies
-jest.mock("src/decidim/refactor/moved/autocomplete", () => {
+jest.mock("tom-select/dist/cjs/tom-select.popular", () => {
   return jest.fn().mockImplementation(() => ({
-    setInput: jest.fn()
+    destroy: jest.fn(),
+    clearOptions: jest.fn()
   }));
 });
 
@@ -114,12 +115,22 @@ describe("MultipleMentionsManager", () => {
       expect(controller.emptyFocusElement).toBe(existingElement);
     });
 
-    it("should initialize AutoComplete with correct configuration", () => {
-      expect(AutoComplete).toHaveBeenCalledWith(searchInput, {
-        dataMatchKeys: ["name", "nickname"],
-        dataSource: expect.any(Function),
-        dataFilter: expect.any(Function),
-        modifyResult: expect.any(Function)
+    it("should initialize TomSelect with correct configuration", () => {
+      expect(TomSelect).toHaveBeenCalledWith(searchInput, {
+        maxItems: 1,
+        valueField: "id",
+        labelField: "name",
+        searchField: ["name", "nickname"],
+        loadThrottle: 200,
+        loadingClass: "loading",
+        preload: false,
+        highlight: true,
+        load: expect.any(Function),
+        render: {
+          option: expect.any(Function),
+          "no_results": expect.any(Function)
+        },
+        onChange: expect.any(Function)
       });
     });
   });
@@ -226,24 +237,24 @@ describe("MultipleMentionsManager", () => {
       controller.selected = ["1", "3"];
 
       const list = [
-        { value: { id: "1" } },
-        { value: { id: "2" } },
-        { value: { id: "3" } },
-        { value: { id: "4" } }
+        { id: "1" },
+        { id: "2" },
+        { id: "3" },
+        { id: "4" }
       ];
 
       const filtered = controller.filterResults(list);
 
       expect(filtered).toEqual([
-        { value: { id: "2" } },
-        { value: { id: "4" } }
+        { id: "2" },
+        { id: "4" }
       ]);
     });
 
     it("should return all users when none are selected", () => {
       const list = [
-        { value: { id: "1" } },
-        { value: { id: "2" } }
+        { id: "1" },
+        { id: "2" }
       ];
 
       const filtered = controller.filterResults(list);
@@ -255,8 +266,8 @@ describe("MultipleMentionsManager", () => {
       controller.selected = ["1", "2"];
 
       const list = [
-        { value: { id: "1" } },
-        { value: { id: "2" } }
+        { id: "1" },
+        { id: "2" }
       ];
 
       const filtered = controller.filterResults(list);
@@ -330,7 +341,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).toContain("1");
       expect(selectedItems.children.length).toBe(1);
-      expect(controller.autoComplete.setInput).toHaveBeenCalledWith("");
     });
 
     it("should not add user when max limit is reached", () => {
@@ -350,7 +360,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).not.toContain("10");
       expect(selectedItems.children.length).toBe(0);
-      expect(controller.autoComplete.setInput).not.toHaveBeenCalled();
     });
 
     it("should not add user when direct messages are disabled", () => {
@@ -368,7 +377,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).not.toContain("1");
       expect(selectedItems.children.length).toBe(0);
-      expect(controller.autoComplete.setInput).not.toHaveBeenCalled();
     });
 
     it("should handle multiple valid selections", () => {
@@ -383,7 +391,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).toEqual(["1", "2"]);
       expect(selectedItems.children.length).toBe(2);
-      expect(controller.autoComplete.setInput).toHaveBeenCalledTimes(2);
     });
   });
 

data/app/packs/src/decidim/direct_uploads/upload_field.js

@@ -1,5 +1,5 @@
 import UploadModal from "src/decidim/direct_uploads/upload_modal";
-import { escapeHtml, escapeQuotes } from "src/decidim/utilities/text";
+import { escapeHtml } from "src/decidim/utilities/text";
 
 const updateModalTitle = (modal) => {
   if (modal.uploadItems.children.length === 0) {
@@ -67,7 +67,7 @@ const updateActiveUploads = (modal) => {
       const titleField = isMultiple
         ? `${modal.options.resourceName}[${modal.options.addAttribute}][${ix}][title]`
         : `${modal.options.resourceName}[${modal.options.addAttribute}][title]`
-      hidden += `<input type="hidden" name="${titleField}" value="${escapeQuotes(titleValue)}" />`
+      hidden += `<input type="hidden" name="${titleField}" value="${escapeHtml(titleValue)}" />`
 
       title = titleValue
     }
@@ -77,8 +77,8 @@ const updateActiveUploads = (modal) => {
       : `data-hidden-field="${file.hiddenField}"`
 
     const template = `
-      <div ${attachmentIdOrHiddenField} data-filename="${escapeQuotes(file.name)}" data-title="${escapeQuotes(title)}">
-        ${(/image/).test(file.type) && "<div><img src=\"data:,\" role=\"presentation\" /></div>" || ""}
+      <div ${attachmentIdOrHiddenField} data-filename="${escapeHtml(file.name)}" data-title="${escapeHtml(title)}">
+        ${(/image/).test(file.type) && "<div><img src=\"data:,\" alt=\"\" /></div>" || ""}
         <p>${escapeHtml(title)}</p>
         ${hidden}
       </div>

data/app/packs/src/decidim/direct_uploads/upload_modal.js

@@ -1,6 +1,6 @@
 import { Uploader } from "src/decidim/direct_uploads/uploader";
 import icon from "src/decidim/refactor/moved/icon";
-import { escapeHtml, escapeQuotes } from "src/decidim/utilities/text";
+import { escapeHtml } from "src/decidim/utilities/text";
 
 const STATUS = {
   VALIDATED: "validated",
@@ -170,7 +170,7 @@ export default class UploadModal {
 
   createUploadItem(file, errors, opts = {}) {
     const okTemplate = `
-      <img src="data:,", role="presentation" />
+      <img src="data:," alt="" />
       <span class="upload-modal__span">${escapeHtml(file.name)}</span>
     `
 
@@ -183,16 +183,17 @@ export default class UploadModal {
       </div>
     `
 
+    const titleInputId = `upload-title-${this.getOrdinalNumber()}`
     const titleTemplate = `
-      <img src="data:," role="presentation" />
+      <img src="data:," alt="" />
       <div>
         <div>
           <label>${this.locales.filename}</label>
           <span class="upload-modal__span">${escapeHtml(file.name)}</span>
         </div>
         <div>
-          <label for="${file.name}">${this.locales.title}</label>
-          <input class="sm" type="text" value="${escapeQuotes(opts.title || file.name)}" id="${file.name}" />
+          <label for="${titleInputId}">${this.locales.title}</label>
+          <input class="sm" type="text" value="${escapeHtml(opts.title || file.name)}" id="${titleInputId}" />
         </div>
       </div>
     `
@@ -216,7 +217,7 @@ export default class UploadModal {
       ? `data-attachment-id="${opts.attachmentId}"`
       : ""
     const fullTemplate = `
-      <li ${attachmentId} data-filename="${escapeQuotes(file.name)}" data-state="${state}">
+      <li ${attachmentId} data-filename="${escapeHtml(file.name)}" data-state="${state}">
         <div data-template="${template}">
           ${content.trim()}
           <button>${this.locales.remove}</button>
@@ -252,7 +253,10 @@ export default class UploadModal {
   }
 
   setProgressBar(name, value) {
-    this.uploadItems.querySelector(`[data-filename="${escapeQuotes(name)}"] progress`).value = value
+    const item = Array.from(this.uploadItems.querySelectorAll("[data-filename]")).find((el) => el.dataset.filename === name);
+    if (item) {
+      item.querySelector("progress").value = value;
+    }
   }
 
   updateAddAttachmentsButton() {

data/app/packs/src/decidim/geocoding/reverse_geocoding.js

@@ -13,13 +13,24 @@ export const initializeReverseGeocoding = function() {
 
   const setLocating = (button, enable) => {
     if (enable) {
+      button.dataset.originalContent = button.innerHTML;
+      button.textContent = "";
+      const spinner = document.createElement("span");
+      spinner.className = "geocoding__spinner";
+      button.appendChild(spinner);
+      button.append(` ${button.dataset.locatingText || "Locating..."}`);
       button.setAttribute("disabled", true);
+      button.classList.add("geocoding__button--locating");
     } else {
+      if (button.dataset.originalContent) {
+        button.innerHTML = button.dataset.originalContent;
+      }
       button.removeAttribute("disabled");
+      button.classList.remove("geocoding__button--locating");
     }
   };
 
-  document.querySelectorAll(".user-device-location button").forEach((button) => {
+  document.querySelectorAll(".geocoding__button").forEach((button) => {
     button.addEventListener("click", (event) => {
       const target = event.target;
       if (target.disabled) {
@@ -36,19 +47,18 @@ export const initializeReverseGeocoding = function() {
         navigator.geolocation.getCurrentPosition((position) => {
           const coordinates = [position.coords.latitude, position.coords.longitude];
 
-          // reverse geolocation
           $.post(url, { latitude: coordinates[0], longitude: coordinates[1] }, (data) => {
             input.value = data.address;
             $(input).trigger("geocoder-suggest-coordinates.decidim", [coordinates]);
+            setLocating(target, false);
           }).fail((xhr, status, error) => {
             info(input, `${errorNoLocation} ${error}`);
+            setLocating(target, false);
           });
 
-          setLocating(target, false);
-
         }, (evt) => {
           info(input, `${errorNoLocation} ${evt.message}`);
-          target.removeAttribute("disabled");
+          setLocating(target, false);
         }, {
           enableHighAccuracy: true
         });

data/app/packs/src/decidim/geocoding/reverse_geocoding.test.js

@@ -0,0 +1,197 @@
+/* global global, jest */
+
+import { initializeReverseGeocoding } from "src/decidim/geocoding/reverse_geocoding";
+
+describe("reverseGeocoding", () => {
+  let container = null;
+  let button = null;
+  let input = null;
+  let label = null;
+  let mockGeolocation = null;
+  let mockPost = null;
+  let originalGeolocation = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+
+    container = document.createElement("div");
+    container.innerHTML = `
+      <label>
+        <input id="test_address" type="text" />
+        <div class="geocoding__locate">
+          <button
+            class="geocoding__button"
+            type="button"
+            data-input="test_address"
+            data-error-no-location="Could not detect location."
+            data-error-unsupported="Device not supported."
+            data-locating-text="Locating..."
+            data-url="/locate">
+            Use my location
+          </button>
+        </div>
+      </label>
+    `;
+    document.body.appendChild(container);
+
+    button = container.querySelector(".geocoding__button");
+    input = container.querySelector("#test_address");
+    label = container.querySelector("label");
+
+    originalGeolocation = navigator.geolocation;
+    mockGeolocation = {
+      getCurrentPosition: jest.fn()
+    };
+    Reflect.defineProperty(global.navigator, "geolocation", {
+      value: mockGeolocation,
+      configurable: true
+    });
+
+    mockPost = jest.fn();
+    global.jQuery = jest.fn(() => ({ trigger: jest.fn() }));
+    global.jQuery.post = mockPost;
+    // eslint-disable-next-line id-length
+    global.$ = global.jQuery;
+
+    initializeReverseGeocoding();
+  });
+
+  afterEach(() => {
+    Reflect.defineProperty(global.navigator, "geolocation", {
+      value: originalGeolocation,
+      configurable: true
+    });
+    jest.restoreAllMocks();
+  });
+
+  describe("when clicking the button", () => {
+    it("shows the spinner and disables the button", () => {
+      mockGeolocation.getCurrentPosition.mockImplementation(() => {});
+
+      button.click();
+
+      expect(button.disabled).toBe(true);
+      expect(button.classList.contains("geocoding__button--locating")).toBe(true);
+      expect(button.querySelector(".geocoding__spinner")).not.toBeNull();
+      expect(button.textContent).toContain("Locating...");
+    });
+
+    it("uses custom locating text from data attribute", () => {
+      button.dataset.locatingText = "Finding you...";
+      mockGeolocation.getCurrentPosition.mockImplementation(() => {});
+
+      button.click();
+
+      expect(button.textContent).toContain("Finding you...");
+    });
+
+    it("stores original content for restoration", () => {
+      mockGeolocation.getCurrentPosition.mockImplementation(() => {});
+
+      button.click();
+
+      expect(button.dataset.originalContent).toContain("Use my location");
+    });
+  });
+
+  describe("when geolocation succeeds", () => {
+    it("restores the button after successful reverse geocoding", () => {
+      const mockPosition = {
+        coords: { latitude: 40.7128, longitude: -74.006 }
+      };
+      mockGeolocation.getCurrentPosition.mockImplementation((success) => {
+        success(mockPosition);
+      });
+
+      const mockDeferred = { fail: jest.fn() };
+      mockPost.mockImplementation((url, data, callback) => {
+        callback({ address: "New York, NY, USA" });
+        return mockDeferred;
+      });
+
+      button.click();
+
+      expect(button.disabled).toBe(false);
+      expect(button.classList.contains("geocoding__button--locating")).toBe(false);
+      expect(button.querySelector(".geocoding__spinner")).toBeNull();
+      expect(button.textContent).toContain("Use my location");
+      expect(input.value).toBe("New York, NY, USA");
+    });
+
+    it("restores the button when reverse geocoding fails", () => {
+      const mockPosition = {
+        coords: { latitude: 40.7128, longitude: -74.006 }
+      };
+      mockGeolocation.getCurrentPosition.mockImplementation((success) => {
+        success(mockPosition);
+      });
+
+      const mockDeferred = { fail: jest.fn((callback) => {
+        callback({}, "error", "Not Found");
+      }) };
+      mockPost.mockReturnValue(mockDeferred);
+
+      button.click();
+
+      expect(button.disabled).toBe(false);
+      expect(button.classList.contains("geocoding__button--locating")).toBe(false);
+      expect(button.textContent).toContain("Use my location");
+    });
+  });
+
+  describe("when geolocation fails", () => {
+    it("restores the button when user denies permission", () => {
+      const mockError = { message: "User denied geolocation" };
+      mockGeolocation.getCurrentPosition.mockImplementation((success, error) => {
+        error(mockError);
+      });
+
+      button.click();
+
+      expect(button.disabled).toBe(false);
+      expect(button.classList.contains("geocoding__button--locating")).toBe(false);
+      expect(button.textContent).toContain("Use my location");
+    });
+
+    it("shows an error message", () => {
+      const mockError = { message: "User denied geolocation" };
+      mockGeolocation.getCurrentPosition.mockImplementation((success, error) => {
+        error(mockError);
+      });
+
+      button.click();
+
+      const errorElement = label.querySelector(".form-error");
+      expect(errorElement).not.toBeNull();
+      expect(errorElement.textContent).toContain("Could not detect location.");
+    });
+  });
+
+  describe("when geolocation is not supported", () => {
+    it("shows an unsupported error and does not show spinner", () => {
+      Reflect.defineProperty(global.navigator, "geolocation", {
+        value: null,
+        configurable: true
+      });
+
+      button.click();
+
+      expect(button.disabled).toBe(false);
+      expect(button.classList.contains("geocoding__button--locating")).toBe(false);
+      const errorElement = label.querySelector(".form-error");
+      expect(errorElement).not.toBeNull();
+      expect(errorElement.textContent).toContain("Device not supported.");
+    });
+  });
+
+  describe("when button is already disabled", () => {
+    it("does not trigger geolocation again", () => {
+      button.disabled = true;
+      mockGeolocation.getCurrentPosition.mockImplementation(() => {});
+
+      button.click();
+
+      expect(mockGeolocation.getCurrentPosition).not.toHaveBeenCalled();
+    });
+  });
+});

data/app/packs/src/decidim/index.js

@@ -34,7 +34,6 @@ import "src/decidim/security/selfxss_warning"
 import "src/decidim/session_timeouter"
 import "src/decidim/results_listing"
 import "src/decidim/data_consent"
-import "src/decidim/sw"
 import "src/decidim/attachments"
 import "src/decidim/dropdown_menu"
 import "src/decidim/callout"
@@ -62,6 +61,7 @@ window.Decidim = window.Decidim || {
   announceForScreenReader
 };
 
+window.createDialog = createDialog;
 window.morphdom = morphdom
 
 // eslint-disable-next-line max-params
@@ -156,6 +156,8 @@ document.addEventListener("turbo:load", () => {
     deprecationMessage(container, '.callout[role="alert"]', '.flash[role="alert"]'));
   document.querySelectorAll(".js-back-to-list").forEach((container) =>
     deprecationMessage(container, ".js-back-to-list", "NEEDS TO BE REMOVED"));
+  document.querySelectorAll("[data-toggler]").forEach((container) =>
+    deprecationMessage(container, "[data-toggler]", "Use the Stimulus toggle controller with hidden targets"));
 })
 
 // REDESIGN_PENDING: deprecated
@@ -236,8 +238,7 @@ const initializer = (element = document) => {
   document.dispatchEvent(new CustomEvent("decidim:loaded", { detail: { element } }));
 }
 
-// If no jQuery is used the Tribute feature used in comments to autocomplete
-// mentions stops working
+// Keep this under jQuery ready to support components initialized on legacy templates
 $(() => initializer());
 
 // Run initializer action over the new DOM elements

data/app/packs/src/decidim/sw/sw.js

@@ -53,7 +53,7 @@ self.addEventListener("notificationclick", (event) => {
 // avoid caching admin or users paths
 registerRoute(
   ({ url }) =>
-    ["/admin/", "/users/"].some((path) => url.pathname.startsWith(path)),
+    ["admin", "users"].some((pathSegment) => url.pathname.split("/").includes(pathSegment)),
   new NetworkOnly()
 );
 

data/app/packs/src/decidim/utilities/text.js

@@ -1,17 +1,17 @@
-export const escapeHtml = (text) => {
+const escapeQuotes = (text) => {
   if (!text) {
     return "";
   }
 
-  const el = document.createElement("div");
-  el.appendChild(document.createTextNode(text));
-  return el.innerHTML;
+  return text.replace(/"/g, """);
 }
 
-export const escapeQuotes = (text) => {
+export const escapeHtml = (text) => {
   if (!text) {
     return "";
   }
 
-  return text.replace(/"/g, """);
+  const el = document.createElement("div");
+  el.appendChild(document.createTextNode(text));
+  return escapeQuotes(el.innerHTML);
 }