decidim-core 0.31.2 → 0.32.1

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,27 +66,28 @@ 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);
     });
 
     let target = null;
     if (guard.dataset.position === "start") {
-      // Focus at the start guard, so focus the first focusable element after that
-      for (let ind = 0; ind < visibleNodes.length; ind += 1) {
+      // Focus at the start guard, so focus the last focusable element (cycle forward to end)
+      for (let ind = visibleNodes.length - 1; ind >= 0; ind -= 1) {
         if (!this.isFocusGuard(visibleNodes[ind]) && this.isFocusable(visibleNodes[ind])) {
           target = visibleNodes[ind];
           break;
         }
       }
     } else {
-      // Focus at the end guard, so focus the first focusable element after that
-      for (let ind = visibleNodes.length - 1; ind >= 0; ind -= 1) {
+      // Focus at the end guard, so focus the first focusable element (cycle back to start)
+      for (let ind = 0; ind < visibleNodes.length; ind += 1) {
         if (!this.isFocusGuard(visibleNodes[ind]) && this.isFocusable(visibleNodes[ind])) {
           target = visibleNodes[ind];
           break;

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/push-permissions.js

@@ -1,16 +1,38 @@
-window.addEventListener("turbo:load", async () => {
+document.addEventListener("turbo:load", async () => {
   const GRANTED_PERMISSION = "granted"
 
   const hideReminder = function() {
-    const reminder = document.querySelector("#push-notifications-reminder")
+    const reminder = document.querySelector("[data-push-notifications-reminder]")
+    if (!reminder) {
+      return;
+    }
+
     reminder.classList.add("hide")
   }
 
+  const showError = (message) => {
+    const container = document.querySelector("[data-push-notifications-container]")
+    if (!container) {
+      return;
+    }
+
+    const existingError = container.querySelector("[data-push-notifications-error]")
+    if (existingError) {
+      existingError.remove()
+    }
+
+    const errorElement = document.createElement("div")
+    errorElement.dataset.pushNotificationsError = "true"
+    errorElement.classList.add("flash", "alert", "push-notifications__error")
+    errorElement.innerText = message
+    container.prepend(errorElement)
+  }
+
   const subscribeToNotifications = async (registration) => {
     const permission = await window.Notification.requestPermission();
 
     if (registration && permission === GRANTED_PERMISSION) {
-      const vapidElement = document.querySelector("#vapidPublicKey")
+      const vapidElement = document.querySelector("[data-push-vapid-public-key]")
       // element could not exist in DOM
       if (vapidElement) {
         const vapidPublicKeyElement = JSON.parse(vapidElement.value)
@@ -20,7 +42,7 @@ window.addEventListener("turbo:load", async () => {
         });
 
         if (subscription) {
-          await fetch("/notifications_subscriptions", {
+          const response = await fetch("/notifications_subscriptions", {
             headers: {
               "Content-Type": "application/json",
               "X-CSRF-Token": document.querySelector("meta[name=csrf-token]")?.content
@@ -28,6 +50,11 @@ window.addEventListener("turbo:load", async () => {
             method: "POST",
             body: JSON.stringify(subscription)
           });
+
+          if (!response.ok) {
+            const body = await response.json()
+            throw new Error(body.error)
+          }
         }
       }
       hideReminder()
@@ -57,10 +84,13 @@ window.addEventListener("turbo:load", async () => {
       hideReminder()
       if (currentSubscription) {
         const auth = currentSubscription.toJSON().keys.auth
-        const subKeys = JSON.parse(document.querySelector("#subKeys").value)
-        // Subscribed && browser notifications enabled
-        if (subKeys.includes(auth)) {
-          toggleChecked = true
+        const subKeysElement = document.querySelector("[data-push-sub-keys]")
+        if (subKeysElement) {
+          const subKeys = JSON.parse(subKeysElement.value)
+          // Subscribed && browser notifications enabled
+          if (subKeys.includes(auth)) {
+            toggleChecked = true
+          }
         }
       }
     }
@@ -68,7 +98,7 @@ window.addEventListener("turbo:load", async () => {
   }
 
   if ("serviceWorker" in navigator) {
-    const toggle = document.getElementById("allow_push_notifications")
+    const toggle = document.querySelector("[data-push-notifications-toggle]")
 
     if (toggle) {
       const registration = await navigator.serviceWorker.ready
@@ -76,10 +106,15 @@ window.addEventListener("turbo:load", async () => {
       setToggleState(registration, toggle)
 
       toggle.addEventListener("change", async ({ target }) => {
-        if (target.checked) {
-          await subscribeToNotifications(registration);
-        } else {
-          await unsubscribeFromNotifications(registration)
+        try {
+          if (target.checked) {
+            await subscribeToNotifications(registration)
+          } else {
+            await unsubscribeFromNotifications(registration)
+          }
+        } catch (error) {
+          target.checked = false
+          showError(error.message)
         }
       })
     }

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 {
@@ -116,7 +116,7 @@
   }
 
   &__calendar {
-    @apply w-14 flex flex-col justify-start rounded overflow-hidden bg-background text-center;
+    @apply w-20 flex flex-col justify-start rounded overflow-hidden bg-background text-center;
 
     /* overwrite defaults */
     &-list__reset {
@@ -128,17 +128,25 @@
     }
 
     &-day {
-      @apply text-black text-2xl font-bold;
+      @apply text-black text-xl font-semibold;
     }
 
     &-year {
-      @apply text-black text-xs;
+      @apply text-black text-xs mb-0.5;
     }
 
     &-month,
     &-day,
     &-year {
-      @apply inline-flex items-center justify-evenly empty:[&>div]:hidden;
+      @apply inline-flex items-center justify-center empty:[&>div]:hidden;
+    }
+
+    &-separator {
+      @apply mx-2 font-normal text-sm;
+    }
+
+    .card__list-content {
+      @apply mt-0.5;
     }
   }
 
@@ -167,7 +175,8 @@
   /* shared styles */
   &__highlight-metadata,
   &__grid-metadata {
-    @apply mt-auto flex items-center justify-between flex-wrap text-sm text-gray-2 [&>*]:flex [&>*]:items-center [&>*]:gap-1 first:[&>*]:flex-none;
+    @apply mt-auto flex gap-x-2 items-center justify-between flex-wrap text-sm text-gray-2 [&>*]:flex [&>*]:items-center
+    [&>*]:gap-1 first:[&>*]:flex-none;
 
     svg {
       @apply flex-none text-gray fill-current;

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/_datepicker.scss

@@ -102,14 +102,6 @@
     @apply absolute z-30 bottom-2 right-1;
   }
 
-  &__pick-calendar {
-    @apply absolute z-30 bottom-2 right-16 mr-1;
-
-    &:disabled {
-      @apply bg-gray;
-    }
-  }
-
   &__close-clock {
     @apply absolute z-30 bottom-2 right-1;
   }

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/_dropdown.scss

@@ -1,5 +1,5 @@
 [id*="dropdown-menu"] {
-  @apply flex flex-col py-0 mx-3.5 md:mx-0 border-t-0 border-gray-3 cursor-pointer;
+  @apply flex flex-col py-0 mx-3.5 md:mx-0 border-t-0 border-gray-3;
 
   &[aria-hidden="true"] {
     @apply hidden md:flex;
@@ -33,47 +33,37 @@
   }
 }
 
-[data-target="dropdown-menu-participatory-space"],
-[data-target="dropdown-menu-order"],
-[data-target="dropdown-menu-resource"],
-[data-target="dropdown-menu-sidebar"] {
-  @apply md:hidden;
-}
-
-[data-target="dropdown-menu-language-chooser"] {
-  & > span {
-    @apply block font-semibold text-black text-xs;
-  }
-
-  > svg {
-    @apply w-5 h-6 flex-none text-xs font-normal text-black fill-current;
+[data-target="dropdown-menu-main-mobile"] {
+  &[aria-expanded="false"] > span:last-of-type,
+  &[aria-expanded="true"] > span:first-of-type {
+    @apply hidden;
   }
 
-  & > ul {
-    @apply w-6 bg-gray;
-
-    > li {
-      @apply w-6 bg-gray;
-    }
+  &[aria-expanded="true"] > span:last-of-type,
+  &[aria-expanded="false"] > span:first-of-type {
+    @apply block;
   }
 }
 
-[data-target="dropdown-menu-language-chooser-mobile"] {
-  & > span {
-    @apply block text-black font-normal text-sm;
+[data-target="dropdown-menu-main-desktop"] {
+  > span:first-of-type,
+  > svg:first-of-type {
+    @apply block;
   }
+}
 
+[data-target="dropdown-menu-main-desktop"] {
+  > span,
   > svg {
-    @apply w-5 h-6 flex-none text-xs font-normal text-black fill-current;
+    @apply hidden md:block;
   }
+}
 
-  & > ul {
-    @apply w-6 bg-gray;
-
-    > li {
-      @apply w-6 bg-gray;
-    }
-  }
+[data-target="dropdown-menu-participatory-space"],
+[data-target="dropdown-menu-order"],
+[data-target="dropdown-menu-resource"],
+[data-target="dropdown-menu-sidebar"] {
+  @apply md:hidden;
 }
 
 .dropdown {

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/_flash.scss

@@ -1,5 +1,5 @@
 .flash {
-  @apply flex justify-start gap-4 border-l-4 border-secondary my-4 p-4 bg-secondary/5 break-all;
+  @apply flex justify-start gap-4 border-l-4 border-secondary my-4 p-4 bg-secondary/5;
 
   &__icon {
     svg {

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;