decidim-core 0.31.5 → 0.31.7

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/map/controller.js

@@ -29,7 +29,16 @@ export default class MapController {
   }
 
   load() {
-    this.map = L.map(this.mapId);
+    const zoomControl = L.control.zoom({
+      zoomInTitle: this.config.zoomInText || "Zoom in",
+      zoomOutTitle: this.config.zoomOutText || "Zoom out"
+    });
+
+    this.map = L.map(this.mapId, {
+      zoomControl: false
+    });
+
+    this.map.addControl(zoomControl);
 
     this.map.scrollWheelZoom.disable();
 

data/app/packs/src/decidim/refactor/moved/focus_guard.js

@@ -5,14 +5,12 @@ const focusableDisableableNodes = ["BUTTON", "INPUT", "TEXTAREA", "SELECT"];
 export default class FocusGuard {
   constructor(container) {
     this.container = container;
-    this.guardedElement = null;
-    this.triggerElement = null;
+    this.stack = [];
   }
 
   trap(element, trigger) {
     this.enable();
-    this.guardedElement = element;
-    this.triggerElement = trigger;
+    this.stack.push({ element, trigger });
   }
 
   enable() {
@@ -45,14 +43,15 @@ export default class FocusGuard {
   }
 
   disable() {
-    const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
-    guards.forEach((guard) => guard.remove());
+    const current = this.stack.pop();
 
-    this.guardedElement = null;
+    if (this.stack.length === 0) {
+      const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
+      guards.forEach((guard) => guard.remove());
+    }
 
-    if (this.triggerElement) {
-      this.triggerElement.focus();
-      this.triggerElement = null;
+    if (current && current.trigger) {
+      current.trigger.focus();
     }
   }
 
@@ -67,12 +66,13 @@ export default class FocusGuard {
   };
 
   handleContainerFocus(guard) {
-    if (!this.guardedElement) {
+    const current = this.stack[this.stack.length - 1];
+    if (!current || !current.element) {
       guard.blur();
       return;
     }
 
-    const visibleNodes = Array.from(this.guardedElement.querySelectorAll("*")).filter((item) => {
+    const visibleNodes = Array.from(current.element.querySelectorAll("*")).filter((item) => {
       return this.isVisible(item);
     });
 

data/app/packs/src/decidim/refactor/moved/focus_guard.test.js

@@ -0,0 +1,136 @@
+/* global jest */
+
+import FocusGuard from "src/decidim/refactor/moved/focus_guard"
+
+describe("FocusGuard", () => {
+  let focusGuard = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    focusGuard = new FocusGuard(document.body);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  describe("single dialog", () => {
+    it("creates focus guards on trap", () => {
+      const dialog = document.createElement("div");
+      const trigger = document.createElement("button");
+      document.body.appendChild(dialog);
+      document.body.appendChild(trigger);
+
+      focusGuard.trap(dialog, trigger);
+      const guards = document.body.querySelectorAll(".focusguard");
+      expect(guards.length).toBe(2);
+    });
+
+    it("removes focus guards and returns focus on disable", () => {
+      const dialog = document.createElement("div");
+      const trigger = document.createElement("button");
+      document.body.appendChild(dialog);
+      document.body.appendChild(trigger);
+
+      focusGuard.trap(dialog, trigger);
+      focusGuard.disable();
+
+      const guards = document.body.querySelectorAll(".focusguard");
+      expect(guards.length).toBe(0);
+      expect(document.activeElement).toBe(trigger);
+    });
+  });
+
+  describe("nested dialogs", () => {
+    it("keeps guards when inner dialog is disabled", () => {
+      const outerDialog = document.createElement("div");
+      const outerTrigger = document.createElement("button");
+      const innerDialog = document.createElement("div");
+      const innerTrigger = document.createElement("button");
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(outerTrigger);
+      document.body.appendChild(innerDialog);
+      document.body.appendChild(innerTrigger);
+
+      focusGuard.trap(outerDialog, outerTrigger);
+      focusGuard.trap(innerDialog, innerTrigger);
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(2);
+
+      focusGuard.disable();
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(2);
+      expect(document.activeElement).toBe(innerTrigger);
+    });
+
+    it("removes guards when outer dialog is disabled last", () => {
+      const outerDialog = document.createElement("div");
+      const outerTrigger = document.createElement("button");
+      const innerDialog = document.createElement("div");
+      const innerTrigger = document.createElement("button");
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(outerTrigger);
+      document.body.appendChild(innerDialog);
+      document.body.appendChild(innerTrigger);
+
+      focusGuard.trap(outerDialog, outerTrigger);
+      focusGuard.trap(innerDialog, innerTrigger);
+
+      focusGuard.disable();
+      focusGuard.disable();
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(0);
+      expect(document.activeElement).toBe(outerTrigger);
+    });
+
+    it("cycles focus to the current top dialog when a guard receives focus", () => {
+      jest.spyOn(focusGuard, "isVisible").mockReturnValue(true);
+
+      const outerDialog = document.createElement("div");
+      const outerInput = document.createElement("input");
+      outerDialog.appendChild(outerInput);
+
+      const innerDialog = document.createElement("div");
+      const innerInput = document.createElement("input");
+      innerDialog.appendChild(innerInput);
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(innerDialog);
+
+      focusGuard.trap(outerDialog, null);
+      focusGuard.trap(innerDialog, null);
+
+      const endGuard = document.body.querySelector('.focusguard[data-position="end"]');
+      endGuard.focus();
+
+      expect(document.activeElement).toBe(innerInput);
+    });
+
+    it("cycles focus backward to the current top dialog when the start guard receives focus", () => {
+      jest.spyOn(focusGuard, "isVisible").mockReturnValue(true);
+
+      const outerDialog = document.createElement("div");
+      const outerInput = document.createElement("input");
+      outerDialog.appendChild(outerInput);
+
+      const innerDialog = document.createElement("div");
+      const innerInput = document.createElement("input");
+      const innerButton = document.createElement("button");
+      innerDialog.appendChild(innerInput);
+      innerDialog.appendChild(innerButton);
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(innerDialog);
+
+      focusGuard.trap(outerDialog, null);
+      focusGuard.trap(innerDialog, null);
+
+      const startGuard = document.body.querySelector('.focusguard[data-position="start"]');
+      startGuard.focus();
+
+      expect(document.activeElement).toBe(innerButton);
+    });
+  });
+});

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);
 }

data/app/packs/stylesheets/decidim/_cards.scss

@@ -55,7 +55,7 @@
     }
 
     &-content {
-      @apply flex flex-col gap-2.5;
+      @apply flex flex-col gap-2.5 min-w-0 break-words;
     }
 
     &-title {

data/app/packs/stylesheets/decidim/_conversations.scss

@@ -88,6 +88,20 @@
   }
 
   &__modal {
+    &-error {
+      [data-dialog-closable] {
+        @apply top-6 right-6;
+      }
+
+      [data-dialog-container] {
+        @apply inline grid-cols-none;
+      }
+
+      [data-dialog-title] {
+        @apply col-span-2 md:col-span-1 md:col-start-2 grid grid-cols-[auto_1fr] items-start md:items-center gap-2 pb-4 text-left text-xl text-gray-2 md:border-b md:border-gray-3;
+      }
+    }
+
     &-results {
       @apply mb-20 flex flex-wrap gap-x-8 gap-y-4;
     }

data/app/packs/stylesheets/decidim/_cookies.scss

@@ -65,17 +65,25 @@
     &-panel {
       @apply divide-y divide-gray-3 [&>*]:py-4 [&>p]:text-gray-2;
 
-      &__tr {
-        @apply flex items-center justify-between rounded first-of-type:bg-background-4;
+      table {
+        @apply w-full border-collapse;
       }
 
-      &__th {
-        @apply w-1/4 p-2 bg-background-4 text-gray-2 font-bold text-sm;
+      thead tr {
+        @apply bg-background-4;
       }
 
-      &__td {
+      th {
+        @apply w-1/4 p-2 text-gray-2 font-bold text-sm text-left;
+      }
+
+      td {
         @apply w-1/4 p-2 text-gray-2 text-xs;
       }
+
+      tbody tr {
+        @apply border-b border-gray-3;
+      }
     }
 
     &-toggle {

data/app/packs/stylesheets/decidim/_documents.scss

@@ -3,7 +3,7 @@
     @apply divide-y divide-background [&>*]:py-4 first:[&>*]:pt-0 last:[&>*]:pb-0;
 
     > * {
-      @apply flex items-center justify-between gap-4;
+      @apply grid sm:flex items-center justify-between gap-4;
     }
   }
 

data/app/packs/stylesheets/decidim/_editor_suggestions.scss

@@ -0,0 +1,49 @@
+.editor-suggestions-props {
+  --editor-suggestions-border-color: #000;
+  --editor-suggestions-background-color: #eee;
+  --editor-suggestions-selected-highlight-color: #ccc;
+}
+
+.editor-suggestions {
+  @apply editor-suggestions-props border-0 bg-[var(--editor-suggestions-background-color)] max-w-sm drop-shadow-md rounded-md;
+
+  &:hover {
+    .editor-suggestions-item[data-selected]:not(:hover) {
+      @apply bg-transparent;
+    }
+  }
+
+  .editor-suggestions-item {
+    @apply flex items-center gap-2 w-full text-left py-[0.375rem] px-1.5 border-0 rounded-none text-sm;
+
+    &:first-child {
+      @apply rounded-t-md;
+    }
+
+    &:last-child {
+      @apply rounded-b-md;
+    }
+
+    &:hover,
+    &[data-selected] {
+      @apply bg-[var(--editor-suggestions-selected-highlight-color)];
+    }
+
+    .editor-suggestions-item-avatar {
+      @apply rounded-full w-6 h-6 object-cover flex-none;
+    }
+
+    .editor-suggestions-item-label {
+      @apply truncate;
+    }
+  }
+
+  .editor-suggestions-item-disabled {
+    @apply cursor-default;
+
+    &:hover,
+    &[data-selected] {
+      @apply bg-transparent;
+    }
+  }
+}

data/app/packs/stylesheets/decidim/_floating_help.scss

@@ -1,5 +1,5 @@
 [data-floating-help] {
-  @apply absolute z-10 top-5 md:top-10 right-0 [&_button]:bg-background [&_button]:px-2 [&_button]:rounded-r-none [&_svg]:text-gray [&_svg]:fill-current;
+  @apply absolute z-10 top-20 md:top-10 right-0 [&_button]:bg-background [&_button]:px-2 [&_button]:rounded-r-none [&_svg]:text-gray [&_svg]:fill-current;
 
   &:hover {
     @apply [&_svg]:text-white [&_button]:text-white [&_button]:bg-secondary [&_button]:no-underline;

data/app/packs/stylesheets/decidim/_footer.scss

@@ -3,12 +3,44 @@ footer {
     @apply bg-gray-4;
 
     &__top {
-      @apply hidden lg:flex flex-row gap-8 container py-10;
+      @apply flex flex-col lg:flex-row gap-0 lg:gap-8 container py-10;
 
       .prose a,
       .prose strong {
         @apply text-white;
       }
+
+      .footer__nav {
+        @apply border-b border-white/20 lg:border-0;
+
+        ul {
+          @apply space-y-4 break-inside-avoid mb-4;
+
+          li a {
+            @apply font-semibold underline decoration-1 underline-offset-1;
+          }
+        }
+
+        > [data-controls] {
+          @apply flex items-center justify-between w-full py-4 lg:pointer-events-none lg:cursor-default text-left text-white font-semibold;
+
+          svg {
+            @apply w-4 h-4 fill-current transition-transform lg:hidden;
+          }
+
+          &[aria-expanded="true"] svg {
+            @apply rotate-180;
+          }
+        }
+
+        [id*="panel"][aria-hidden="true"] {
+          @apply hidden lg:block;
+        }
+
+        [id*="panel"][aria-hidden="false"] {
+          @apply block;
+        }
+      }
     }
 
     &__down {

data/app/packs/stylesheets/decidim/_participatory_spaces.scss

@@ -49,7 +49,7 @@
         }
 
         &__collection-content {
-          @apply w-auto ml-6 my-4 pl-4 lg:pl-8 border-l border-[#D3D5D9];
+          @apply w-auto sm:ml-6 sm:my-4 sm:pl-4 lg:pl-8 sm:border-l sm:border-[#D3D5D9];
 
           p {
             @apply pt-4;

data/app/packs/stylesheets/decidim/_tom_select.scss

@@ -0,0 +1,23 @@
+@use "tom-select/dist/scss/tom-select";
+
+.ts {
+  &-control {
+    @apply border-gray text-md min-h-[40px];
+
+    input {
+      @apply font-normal text-black text-md;
+    }
+  }
+
+  &-dropdown {
+    @apply text-md text-gray-2 font-normal;
+
+    .option img {
+      @apply inline;
+    }
+
+    .active {
+      @apply bg-gray-3;
+    }
+  }
+}