decidim-core 0.31.2 → 0.32.1

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

@@ -2,6 +2,9 @@ import { Controller } from "@hotwired/stimulus"
 import Accordions from "a11y-accordion-component";
 import { screens } from "tailwindcss/defaultTheme"
 export default class extends Controller {
+  initialize() {
+    this._originalOpenValues = new WeakMap();
+  }
 
   /**
    * Create accordion from a component
@@ -16,21 +19,8 @@ export default class extends Controller {
     accordionOptions.isMultiSelectable = this.element.dataset.multiselectable !== "false";
     accordionOptions.isCollapsible = this.element.dataset.collapsible !== "false";
 
-    // This snippet allows to change the OPEN data-attribute based on the current viewport
-    // Just include the breakpoint where the different value will be applied from.
-    // Ex:
-    // data-open="false" data-open-md="true"
-    Object.keys(screens).forEach((key) => {
-      if (!this.isScreenSize(key)) {
-        return;
-      }
-
-      const elementsToOpen = this.element.querySelectorAll(`[data-controls][data-open-${key}]`);
-
-      elementsToOpen.forEach((elem) => {
-        (elem.dataset.open = elem.dataset[`open-${key}`.replace(/-([a-z])/g, (str) => str[1].toUpperCase())])
-      })
-    })
+    this._applyBreakpointOpenAttributes();
+    this._listenForBreakpointChanges();
 
     if (!this.element.id) {
       // when component has no id, we enforce to have it one
@@ -39,6 +29,8 @@ export default class extends Controller {
 
     Accordions.render(this.element.id, accordionOptions);
 
+    this.fixPanelRole();
+
     this.expandIfNeeded();
 
     this.boundReconnect = this.reconnect.bind(this);
@@ -57,20 +49,106 @@ export default class extends Controller {
     }
 
     if (this.boundExpand) {
-      this.toggleButton.addEventListener("click", this.boundExpand);
+      this.toggleButton.removeEventListener("click", this.boundExpand);
     }
+
+    this._stopListeningForBreakpointChanges();
   }
 
   reconnect(event) {
     this.disconnect();
 
-    if (event.detail && event.detail.collapse) {
+    if (event && event.detail && event.detail.collapse) {
       this.previouslyExpanded = false;
     }
 
     this.connect();
   }
 
+  /**
+   * Applies viewport-conditional data-open attributes and resets
+   * previously applied values when the viewport no longer matches.
+   *
+   * @returns {void}
+   */
+  _applyBreakpointOpenAttributes() {
+    const controlledTriggers = new Set();
+
+    Object.keys(screens).forEach((key) => {
+      this.element.querySelectorAll(`[data-controls][data-open-${key}]`).forEach((elem) => {
+        controlledTriggers.add(elem);
+
+        if (!this._originalOpenValues.has(elem)) {
+          this._originalOpenValues.set(elem, elem.getAttribute("data-open"));
+        }
+      });
+    });
+
+    // Reset all controlled triggers to their original data-open state
+    controlledTriggers.forEach((elem) => {
+      const original = this._originalOpenValues.get(elem);
+      if (original === null) {
+        elem.removeAttribute("data-open");
+      } else {
+        elem.setAttribute("data-open", original);
+      }
+    });
+
+    // Apply breakpoint-specific values for the current viewport
+    Object.keys(screens).forEach((key) => {
+      if (!this.isScreenSize(key)) {
+        return;
+      }
+
+      this.element.querySelectorAll(`[data-controls][data-open-${key}]`).forEach((elem) => {
+        elem.dataset.open = elem.getAttribute(`data-open-${key}`);
+      });
+    });
+  }
+
+  /**
+   * Listens for viewport changes that cross breakpoints relevant
+   * to this accordion and reconnects to keep state in sync.
+   *
+   * @returns {void}
+   */
+  _listenForBreakpointChanges() {
+    this._mediaQueries = [];
+
+    Object.keys(screens).forEach((key) => {
+      const hasRelevantTriggers = this.element.querySelector(`[data-controls][data-open-${key}]`);
+      if (!hasRelevantTriggers) {
+        return;
+      }
+
+      const mql = window.matchMedia(`(min-width: ${screens[key]})`);
+      const handler = () => {
+        this.reconnect({ detail: { collapse: true } });
+      };
+
+      if (mql.addEventListener) {
+        mql.addEventListener("change", handler);
+      } else if (mql.addListener) {
+        mql.addListener(handler);
+      }
+
+      this._mediaQueries.push({ mql, handler });
+    });
+  }
+
+  _stopListeningForBreakpointChanges() {
+    if (this._mediaQueries) {
+      this._mediaQueries.forEach(({ mql, handler }) => {
+        if (mql.removeEventListener) {
+          mql.removeEventListener("change", handler);
+        } else if (mql.removeListener) {
+          mql.removeListener(handler);
+        }
+      });
+      this._mediaQueries = [];
+    }
+  }
+
   expandIfNeeded()
   {
     if (!this.toggleButton) {
@@ -88,6 +166,28 @@ export default class extends Controller {
     this.previouslyExpanded = this.toggleButton.getAttribute("aria-expanded");
   }
 
+  fixPanelRole() {
+    const panelRole = this.element.dataset.panelRole;
+    if (!panelRole) {
+      return;
+    }
+
+    const panels = this.element.querySelectorAll("[data-controls]");
+    panels.forEach((trigger) => {
+      const panelId = trigger.dataset.controls;
+      const panel = document.getElementById(panelId);
+      if (!panel) {
+        return;
+      }
+
+      if (panelRole === "none") {
+        panel.removeAttribute("role");
+      } else {
+        panel.setAttribute("role", panelRole);
+      }
+    });
+  }
+
   /**
    * Checks if a key is in the current viewport
    *

data/app/packs/src/decidim/controllers/assign_role/assign_role.test.js

@@ -0,0 +1,80 @@
+/* global global, jest */
+
+import { Application } from "@hotwired/stimulus";
+import AssignRoleController from "src/decidim/controllers/assign_role/controller";
+
+describe("AssignRoleController", () => {
+  let application = null;
+  let element = null;
+  let controller = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div data-controller="assign-role" data-role="navigation"></div>
+    `;
+
+    application = Application.start();
+    application.register("assign-role", AssignRoleController);
+
+    element = document.querySelector('[data-controller="assign-role"]');
+
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        controller = application.getControllerForElementAndIdentifier(element, "assign-role");
+        resolve();
+      }, 0);
+    });
+  });
+
+  afterEach(() => {
+    application.stop();
+    document.body.innerHTML = "";
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+  });
+
+  describe("connect", () => {
+    it("sets the role attribute after the delay", () => {
+      controller.disconnect();
+      jest.useFakeTimers();
+
+      controller.connect();
+
+      expect(element.getAttribute("role")).toBeNull();
+      jest.advanceTimersByTime(300);
+      expect(element.getAttribute("role")).toBe("navigation");
+    });
+
+    it("returns early when no data-role is provided", () => {
+      controller.disconnect();
+
+      element.dataset.role = "";
+      const setTimeoutSpy = jest.spyOn(global, "setTimeout");
+      jest.useFakeTimers();
+
+      controller.connect();
+
+      expect(element.getAttribute("role")).toBeNull();
+      expect(setTimeoutSpy).not.toHaveBeenCalled();
+      jest.advanceTimersByTime(300);
+      expect(element.getAttribute("role")).toBeNull();
+    });
+  });
+
+  describe("disconnect", () => {
+    it("clears any pending timeout", () => {
+      controller.disconnect();
+      jest.useFakeTimers();
+
+      const clearTimeoutSpy = jest.spyOn(global, "clearTimeout");
+
+      controller.connect();
+      controller.disconnect();
+
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+
+      jest.advanceTimersByTime(300);
+      expect(element.getAttribute("role")).toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * This controller is used to set a role attribute for any element where is being assigned.
+ * It requires a data-role attribute with the value of the role attribute to be set.
+ * We are using to change the value "menu" of role attribute set by a11y on div dropdown-menu-account and
+ * dropdown-menu-account-mobile which are inappropriate for accessibility
+ */
+export default class extends Controller {
+  connect() {
+    const role = this.element.dataset.role
+
+    if (!role) {
+      return
+    }
+
+    this.timeoutId = setTimeout(() => {
+      this.element.setAttribute("role", role)
+    }, 300)
+  }
+
+  disconnect() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId)
+    }
+  }
+}

data/app/packs/src/decidim/controllers/breadcrumb_truncate/breadcrumb_truncate.test.js

@@ -0,0 +1,230 @@
+/* global jest */
+import { Application } from "@hotwired/stimulus"
+import BreadcrumbTruncateController from "src/decidim/controllers/breadcrumb_truncate/controller"
+
+describe("BreadcrumbTruncateController", () => {
+  let application = null
+  let controller = null
+  let element = null
+  let textElement = null
+  let resizeObserverMock = null
+  let originalResizeObserver = null
+
+  const startController = () => new Promise((resolve) => {
+    setTimeout(() => {
+      controller = application.getControllerForElementAndIdentifier(element, "breadcrumb-truncate")
+      resolve()
+    }, 0)
+  })
+
+  beforeEach(() => {
+    originalResizeObserver = window.ResizeObserver
+    resizeObserverMock = {
+      observe: jest.fn(),
+      disconnect: jest.fn()
+    }
+
+    window.ResizeObserver = jest.fn().mockImplementation(() => resizeObserverMock)
+
+    document.body.innerHTML = `
+      <span data-controller="breadcrumb-truncate" class="truncate">
+        <span data-breadcrumb-truncate-target="text">Very long participatory space title example</span>
+      </span>
+    `
+
+    application = Application.start()
+    application.register("breadcrumb-truncate", BreadcrumbTruncateController)
+
+    element = document.querySelector('[data-controller="breadcrumb-truncate"]')
+    textElement = element.querySelector('[data-breadcrumb-truncate-target="text"]')
+
+    return startController()
+  })
+
+  afterEach(() => {
+    application.stop()
+    document.body.innerHTML = ""
+    window.ResizeObserver = originalResizeObserver
+    jest.restoreAllMocks()
+  })
+
+  it("keeps the full text when it fits", () => {
+    Reflect.defineProperty(element, "clientWidth", { configurable: true, value: 100 })
+    Reflect.defineProperty(element, "scrollWidth", { configurable: true, get: () => 80 })
+
+    controller.refresh()
+
+    expect(textElement.textContent).toBe("Very long participatory space title example")
+    expect(element.hasAttribute("title")).toBe(false)
+  })
+
+  it("truncates at the last fitting word and adds an ellipsis", () => {
+    Reflect.defineProperty(element, "clientWidth", { configurable: true, value: 100 })
+    Reflect.defineProperty(element, "scrollWidth", {
+      configurable: true,
+      get: () => (textElement.textContent.length > 16
+        ? 120
+        : 80)
+    })
+
+    controller.refresh()
+
+    expect(textElement.textContent).toBe("Very long...")
+    expect(element.getAttribute("title")).toBe("Very long participatory space title example")
+  })
+
+  it("falls back to character truncation for a single long word", () => {
+    textElement.textContent = "veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery"
+    controller.originalTexts = [textElement.textContent]
+
+    Reflect.defineProperty(element, "clientWidth", { configurable: true, value: 100 })
+    Reflect.defineProperty(element, "scrollWidth", {
+      configurable: true,
+      get: () => (textElement.textContent.length > 9
+        ? 120
+        : 80)
+    })
+
+    controller.refresh()
+
+    expect(textElement.textContent.endsWith("...")).toBe(true)
+    expect(textElement.textContent.includes(" ")).toBe(false)
+    expect(textElement.textContent.length).toBeGreaterThan(3)
+  })
+
+  it("disconnects the resize observer", () => {
+    controller.disconnect()
+
+    expect(resizeObserverMock.disconnect).toHaveBeenCalled()
+  })
+
+  it("does nothing when no text target exists", async () => {
+    document.body.innerHTML = "<nav data-controller=\"breadcrumb-truncate\"></nav>"
+
+    application.stop()
+    application = Application.start()
+    application.register("breadcrumb-truncate", BreadcrumbTruncateController)
+
+    element = document.querySelector('[data-controller="breadcrumb-truncate"]')
+
+    await startController()
+
+    expect(() => controller.refresh()).not.toThrow()
+  })
+
+  it("prioritizes truncating the widest item in group mode", async () => {
+    document.body.innerHTML = `
+      <nav data-controller="breadcrumb-truncate">
+        <span data-breadcrumb-truncate-target="item">
+          <span data-breadcrumb-truncate-target="text">Very long participatory space title example</span>
+        </span>
+        <span data-breadcrumb-truncate-target="item">
+          <span data-breadcrumb-truncate-target="text">Proposals</span>
+        </span>
+      </nav>
+    `
+
+    application.stop()
+    application = Application.start()
+    application.register("breadcrumb-truncate", BreadcrumbTruncateController)
+
+    element = document.querySelector('[data-controller="breadcrumb-truncate"]')
+    const itemElements = element.querySelectorAll('[data-breadcrumb-truncate-target="item"]')
+    const textElements = element.querySelectorAll('[data-breadcrumb-truncate-target="text"]')
+    const initialWidths = [150, 50]
+
+    Reflect.defineProperty(element, "clientWidth", { configurable: true, value: 100 })
+    Reflect.defineProperty(itemElements[0], "clientWidth", {
+      configurable: true,
+      get: () => Number.parseInt(itemElements[0].style.maxWidth || `${initialWidths[0]}`, 10)
+    })
+    Reflect.defineProperty(itemElements[1], "clientWidth", {
+      configurable: true,
+      get: () => Number.parseInt(itemElements[1].style.maxWidth || `${initialWidths[1]}`, 10)
+    })
+    Reflect.defineProperty(element, "scrollWidth", {
+      configurable: true,
+      get: () => Array.from(itemElements).reduce((sum, item) => sum + item.clientWidth, 0)
+    })
+    Reflect.defineProperty(itemElements[0], "scrollWidth", {
+      configurable: true,
+      get: () => (textElements[0].textContent.length > 16
+        ? 120
+        : 80)
+    })
+    Reflect.defineProperty(itemElements[1], "scrollWidth", {
+      configurable: true,
+      get: () => 50
+    })
+
+    await startController()
+    controller.refresh()
+
+    expect(textElements[0].textContent).not.toBe("Very long participatory space title example")
+    expect(textElements[0].textContent.endsWith("...")).toBe(true)
+    expect(textElements[1].textContent).toBe("Proposals")
+  })
+
+  it("preserves shorter deep breadcrumb labels while shrinking the longest one first", async () => {
+    document.body.innerHTML = `
+      <nav data-controller="breadcrumb-truncate">
+        <span data-breadcrumb-truncate-target="item">
+          <span data-breadcrumb-truncate-target="text">This is a very long title for a participatory process for a test</span>
+        </span>
+        <span data-breadcrumb-truncate-target="item">
+          <span data-breadcrumb-truncate-target="text">Debates</span>
+        </span>
+        <span data-breadcrumb-truncate-target="item">
+          <span data-breadcrumb-truncate-target="text">Debate made by a participant</span>
+        </span>
+      </nav>
+    `
+
+    application.stop()
+    application = Application.start()
+    application.register("breadcrumb-truncate", BreadcrumbTruncateController)
+
+    element = document.querySelector('[data-controller="breadcrumb-truncate"]')
+    const itemElements = element.querySelectorAll('[data-breadcrumb-truncate-target="item"]')
+    const textElements = element.querySelectorAll('[data-breadcrumb-truncate-target="text"]')
+
+    Reflect.defineProperty(element, "clientWidth", { configurable: true, value: 220 })
+
+    const initialWidths = [180, 56, 104]
+
+    itemElements.forEach((item, index) => {
+      Reflect.defineProperty(item, "clientWidth", {
+        configurable: true,
+        get: () => Number.parseInt(item.style.maxWidth || `${initialWidths[index]}`, 10)
+      })
+    })
+    Reflect.defineProperty(element, "scrollWidth", {
+      configurable: true,
+      get: () => Array.from(itemElements).reduce((sum, item) => sum + item.clientWidth, 0)
+    })
+
+    Reflect.defineProperty(itemElements[0], "scrollWidth", {
+      configurable: true,
+      get: () => (textElements[0].textContent.length > 18
+        ? 160
+        : 80)
+    })
+    Reflect.defineProperty(itemElements[1], "scrollWidth", {
+      configurable: true,
+      get: () => 56
+    })
+    Reflect.defineProperty(itemElements[2], "scrollWidth", {
+      configurable: true,
+      get: () => (textElements[2].textContent.length > 20
+        ? 120
+        : 96)
+    })
+
+    await startController()
+    controller.refresh()
+
+    expect(textElements[0].textContent.endsWith("...")).toBe(true)
+    expect(textElements[1].textContent).toBe("Debates")
+    expect(textElements[2].textContent).toBe("Debate made by a participant")
+  })
+})

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

@@ -0,0 +1,172 @@
+import { Controller } from "@hotwired/stimulus"
+
+const ELLIPSIS = "..."
+const PREFERRED_MIN_WIDTH = 96
+const ABSOLUTE_MIN_WIDTH = 24
+
+export default class extends Controller {
+  static get targets() {
+    return ["item", "text"]
+  }
+
+  connect() {
+    this.originalTexts = this.textTargets.map((target) => target.textContent.trim())
+    this.refresh = this.refresh.bind(this)
+
+    this.resizeObserver = new ResizeObserver(() => this.refresh())
+    this.resizeObserver.observe(this.element)
+    window.addEventListener("resize", this.refresh)
+
+    this.refresh()
+  }
+
+  disconnect() {
+    this.resizeObserver?.disconnect()
+    window.removeEventListener("resize", this.refresh)
+  }
+
+  refresh() {
+    if (!this.hasTextTarget) {
+      return
+    }
+
+    if (this.hasItemTarget) {
+      this.refreshGroup()
+      return
+    }
+
+    this.truncateItem(this.element, this.textTarget, this.originalTexts[0])
+  }
+
+  refreshGroup() {
+    this.itemTargets.forEach((item, index) => this.resetItem(item, this.textTargets[index], this.originalTexts[index]))
+
+    if (this.element.clientWidth <= 0) {
+      return
+    }
+
+    if (!this.isOverflowing(this.element)) {
+      return
+    }
+
+    const candidates = this.itemTargets.map((item, index) => ({
+      item,
+      text: this.textTargets[index],
+      originalText: this.originalTexts[index],
+      width: item.scrollWidth
+    })).sort((left, right) => right.width - left.width)
+
+    candidates.forEach((candidate) => {
+      if (!this.isOverflowing(this.element)) {
+        return
+      }
+
+      this.shrinkCandidate(candidate, PREFERRED_MIN_WIDTH)
+
+      if (this.isOverflowing(this.element)) {
+        this.shrinkCandidate(candidate, ABSOLUTE_MIN_WIDTH)
+      }
+    })
+  }
+
+  shrinkCandidate(candidate, minimumWidth) {
+    const overflow = this.element.scrollWidth - this.element.clientWidth
+
+    if (overflow <= 0) {
+      return
+    }
+
+    const minWidth = Math.min(candidate.width, minimumWidth)
+    const shrinkableWidth = candidate.width - minWidth
+
+    if (shrinkableWidth <= 0) {
+      return
+    }
+
+    const reduction = Math.min(overflow, shrinkableWidth)
+    const nextWidth = candidate.width - reduction
+
+    candidate.item.style.flex = `0 1 ${nextWidth}px`
+    candidate.item.style.maxWidth = `${nextWidth}px`
+    candidate.item.style.minWidth = "0"
+
+    this.truncateItem(candidate.item, candidate.text, candidate.originalText)
+    candidate.width = nextWidth
+  }
+
+  resetItem(item, text, originalText) {
+    item.style.removeProperty("flex")
+    item.style.removeProperty("max-width")
+    item.style.removeProperty("min-width")
+    item.removeAttribute("title")
+    text.textContent = originalText
+  }
+
+  truncateItem(item, text, originalText) {
+    if (item.clientWidth <= 0) {
+      return
+    }
+
+    text.textContent = originalText
+
+    if (!this.isOverflowing(item)) {
+      item.removeAttribute("title")
+      return
+    }
+
+    const words = originalText.split(/\s+/).filter(Boolean)
+    let visibleText = ""
+
+    for (let index = 0; index < words.length; index += 1) {
+      let nextText = words[index]
+
+      if (visibleText) {
+        nextText = `${visibleText} ${words[index]}`
+      }
+
+      text.textContent = `${nextText}${ELLIPSIS}`
+
+      if (this.isOverflowing(item)) {
+        break
+      }
+
+      visibleText = nextText
+    }
+
+    if (!visibleText) {
+      visibleText = this.truncateSingleWord(item, text, words[0] || "")
+    }
+
+    if (visibleText === originalText) {
+      text.textContent = visibleText
+    } else {
+      text.textContent = `${visibleText}${ELLIPSIS}`
+    }
+
+    item.setAttribute("title", originalText)
+  }
+
+  truncateSingleWord(item, text, word) {
+    let visibleText = ""
+
+    for (let index = 0; index < word.length; index += 1) {
+      text.textContent = `${visibleText}${word[index]}${ELLIPSIS}`
+
+      if (this.isOverflowing(item)) {
+        break
+      }
+
+      visibleText += word[index]
+    }
+
+    if (!visibleText && word) {
+      return word[0]
+    }
+
+    return visibleText
+  }
+
+  isOverflowing(element) {
+    return element.scrollWidth > element.clientWidth
+  }
+}