decidim-core 0.27.4 → 0.28.0.rc5

data/app/packs/images/decidim/vendor/social-share-button/x.svg

@@ -0,0 +1,3 @@
+<svg width="256" height="256" viewBox="0 0 1227 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M 727.663,519.284 1174.39,0 H 1068.53 L 680.637,450.887 370.828,0 H 13.5 L 481.992,681.821 13.5,1226.37 H 119.366 L 528.991,750.218 856.172,1226.37 H 1213.5 L 727.637,519.284 Z M 582.665,687.828 535.197,619.934 157.511,79.6944 h 162.604 l 304.797,435.9906 47.468,67.894 396.2,566.721 H 905.976 L 582.665,687.854 Z"/>
+</svg>

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

@@ -0,0 +1,186 @@
+import Accordions from "a11y-accordion-component";
+import Dropdowns from "a11y-dropdown-component";
+import Dialogs from "a11y-dialog-component";
+import { screens } from "tailwindcss/defaultTheme"
+
+
+/**
+ * Checks if a key is in the current viewport
+ *
+ * @param {('sm'|'md'|'lg'|'xl'|'2xl')} key - The key to check the screen size.
+ * @returns {boolean} - Returns true if the screen size corresponds with the key
+ */
+const isScreenSize = (key) => {
+  return window.matchMedia(`(min-width: ${screens[key]})`).matches;
+}
+
+/**
+ * Create accordion from a component
+ *
+ * @param {HTMLElement} component - The component to be created
+ * @return {void}
+ */
+const createAccordion = (component) => {
+  const accordionOptions = {};
+  accordionOptions.isMultiSelectable = component.dataset.multiselectable !== "false";
+  accordionOptions.isCollapsible = component.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 (!isScreenSize(key)) {
+      return;
+    }
+
+    const elementsToOpen = component.querySelectorAll(`[data-controls][data-open-${key}]`);
+
+    elementsToOpen.forEach((elem) => {
+      (elem.dataset.open = elem.dataset[`open-${key}`.replace(/-([a-z])/g, (str) => str[1].toUpperCase())])
+    })
+  })
+
+  if (!component.id) {
+    // when component has no id, we enforce to have it one
+    component.id = `accordion-${Math.random().toString(36).substring(7)}`
+  }
+
+  Accordions.render(component.id, accordionOptions);
+}
+
+/**
+ * Create dropdown from a component
+ *
+ * @param {HTMLElement} component - The component to be created
+ * @return {void}
+ */
+const createDropdown = (component) => {
+  const dropdownOptions = {};
+  dropdownOptions.dropdown = component.dataset.target;
+  dropdownOptions.hover = component.dataset.hover === "true";
+  dropdownOptions.isOpen = component.dataset.open === "true";
+  dropdownOptions.autoClose = component.dataset.autoClose === "true";
+
+  // This snippet allows to disable the dropdown based on the current viewport
+  // Just include the breakpoint where the different value will be applied from.
+  // Ex:
+  // data-disabled-md="true"
+  const isDisabled = Object.keys(screens).some((key) => {
+    if (!isScreenSize(key)) {
+      return false;
+    }
+
+    return Boolean(component.dataset[`disabled-${key}`.replace(/-([a-z])/g, (str) => str[1].toUpperCase())]);
+  })
+
+  if (isDisabled) {
+    return
+  }
+
+  if (!component.id) {
+    // when component has no id, we enforce to have it one
+    component.id = `dropdown-${Math.random().toString(36).substring(7)}`
+  }
+
+  const autofocus = component.dataset.autofocus;
+  if (autofocus) {
+    // set the focus to some inner element, use setTimeout hack due to waiting for element to display
+    component.addEventListener("click", () => setTimeout(() => document.getElementById(autofocus).focus(), 0));
+  }
+
+  const scrollToMenu = component.dataset.scrollToMenu === "true";
+  if (scrollToMenu) {
+    // Auto scroll to show the menu on the viewport
+    component.addEventListener("click", (event) => {
+      const heightToScroll = component.getBoundingClientRect().top + window.scrollY + document.documentElement.clientTop;
+      const isCollapsed = event.target.getAttribute("aria-expanded") === "false";
+
+      if (isCollapsed) {
+        return;
+      }
+
+      window.scrollTo({ top: heightToScroll, behavior: "smooth" });
+    });
+  }
+
+  Dropdowns.render(component.id, dropdownOptions);
+}
+
+/**
+ * Create dialog from a component
+ *
+ * @param {HTMLElement} component - The component to be created
+ * @return {void}
+ */
+const createDialog = (component) => {
+  const {
+    dataset: { dialog, ...attrs }
+  } = component;
+
+  // NOTE: due to some SR bugs we have to set the focus on the title
+  // See discussion: https://github.com/decidim/decidim/issues/9760
+  // See further info: https://adrianroselli.com/2020/10/dialog-focus-in-screen-readers.html
+  const setFocusOnTitle = (content) => {
+    const heading = content.querySelector("[id^=dialog-title]")
+    if (heading) {
+      heading.setAttribute("tabindex", heading.getAttribute("tabindex") || -1)
+      heading.focus();
+    }
+  }
+
+  const modal = new Dialogs(`[data-dialog="${dialog}"]`, {
+    openingSelector: `[data-dialog-open="${dialog}"]`,
+    closingSelector: `[data-dialog-close="${dialog}"]`,
+    backdropSelector: `[data-dialog="${dialog}"]`,
+    enableAutoFocus: false,
+    onOpen: (params, trigger) => {
+      setFocusOnTitle(params);
+      window.focusGuard.trap(trigger);
+      params.dispatchEvent(new CustomEvent("open.dialog"));
+    },
+    onClose: (params) => {
+      window.focusGuard.disable();
+      params.dispatchEvent(new CustomEvent("close.dialog"));
+    },
+    // optional parameters (whenever exists the id, it will add the tagging)
+    ...(Boolean(component.querySelector(`#dialog-title-${dialog}`)) && {
+      labelledby: `dialog-title-${dialog}`
+    }),
+    ...(Boolean(component.querySelector(`#dialog-desc-${dialog}`)) && {
+      describedby: `dialog-desc-${dialog}`
+    }),
+    // Add any other options passed via data-attributes
+    ...attrs
+  });
+
+  // attach all modals to the body, removing them from wherever are placed
+  document.body.appendChild(modal.dialog)
+
+  // in order to use the Dialog object somewhere else
+  window.Decidim.currentDialogs = { ...window.Decidim.currentDialogs, [dialog]: modal }
+
+  // NOTE: when a remote modal is open, the contents are empty
+  // once they are in the DOM, we append the ARIA attributes
+  // otherwise they could not exist yet
+  // (this listener must be applied over 'document', not 'element')
+  document.addEventListener("remote-modal:loaded", () => {
+    const heading = modal.dialog.querySelector(`#dialog-title-${dialog}`)
+    if (heading) {
+      modal.dialog.setAttribute("aria-labelledby", `dialog-title-${dialog}`);
+      setFocusOnTitle(modal.dialog)
+    }
+    if (modal.dialog.querySelector(`#dialog-desc-${dialog}`)) {
+      modal.dialog.setAttribute("aria-describedby", `dialog-desc-${dialog}`);
+    }
+  })
+}
+
+export {
+  createAccordion,
+  createDialog,
+  createDropdown,
+  Accordions,
+  Dialogs,
+  Dropdowns
+}

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

@@ -1,42 +1,54 @@
-/**
- * Initializes the edit account form to control the password field elements
- * which should only be required when they are visible.
- *
- * @returns {void}
- */
-const initializeAccountForm = () => {
-  const editUserForm = document.querySelector("form.edit_user");
-  if (!editUserForm) {
-    return;
-  }
+import PasswordToggler from "./password_toggler";
 
-  const passwordChange = editUserForm.querySelector("#passwordChange");
-  if (!passwordChange) {
+const initializeAccountForm = () => {
+  const newPasswordPanel = document.getElementById("panel-password");
+  const oldPasswordPanel = document.getElementById("panel-old-password");
+  const emailField = document.querySelector("input[type='email']");
+  if (!newPasswordPanel || !emailField) {
     return;
   }
 
-  const passwordFields = passwordChange.querySelectorAll("input[type='password']");
-  if (passwordFields.length < 1) {
-    return;
-  }
+  const originalEmail = emailField.dataset.original;
+  let emailChanged = originalEmail !== emailField.value;
+  let newPwVisible = false;
 
-  // Foundation uses jQuery so these have to be bound using jQuery and the
-  // attribute value needs to be set through jQuery.
-  const togglePasswordFieldValidators = (enabled) => {
-    $(passwordFields).attr("required", enabled);
+  const toggleNewPassword = () => {
+    const input = newPasswordPanel.querySelector("input")
+    if (newPwVisible) {
+      input.required = true;
+    } else {
+      input.required = false;
+      input.value = "";
+    }
+  };
+  const toggleOldPassword = () => {
+    if (!oldPasswordPanel) {
+      return;
+    }
 
-    if (!enabled) {
-      passwordFields.forEach((field) => (field.value = ""));
+    const input = oldPasswordPanel.querySelector("input");
+    if (emailChanged || newPwVisible) {
+      oldPasswordPanel.classList.remove("hidden");
+      input.required = true;
+    } else {
+      oldPasswordPanel.classList.add("hidden");
+      input.required = false;
     }
   }
 
-  $(passwordChange).on("on.zf.toggler", () => {
-    togglePasswordFieldValidators(true);
+  const observer = new MutationObserver(() => {
+    let ariaHiddenValue = newPasswordPanel.getAttribute("aria-hidden");
+    newPwVisible = ariaHiddenValue === "false";
+
+    toggleNewPassword();
+    toggleOldPassword();
   });
-  $(passwordChange).on("off.zf.toggler", () => {
-    togglePasswordFieldValidators(false);
+  observer.observe(newPasswordPanel, { attributes: true });
+
+  emailField.addEventListener("change", () => {
+    emailChanged = emailField.value !== originalEmail;
+    toggleOldPassword();
   });
-  togglePasswordFieldValidators(false);
 };
 
 /**
@@ -54,13 +66,11 @@ const initializeDeleteAccount = () => {
   }
 
   const $openModalButton = $(".open-modal-button");
-  const $modal = $("#deleteConfirm");
 
   $openModalButton.on("click", (event) => {
     try {
       const reasonValue = $deleteAccountForm.find("textarea#delete_account_delete_reason").val();
       $deleteAccountModalForm.find("input#delete_account_delete_reason").val(reasonValue);
-      $modal.foundation("open");
     } catch (error) {
       console.error(error); // eslint-disable-line no-console
     }
@@ -71,7 +81,16 @@ const initializeDeleteAccount = () => {
   });
 };
 
+const initializeOldPasswordToggler = () => {
+  const oldUserPassword = document.querySelector(".old-user-password");
+
+  if (oldUserPassword) {
+    new PasswordToggler(oldUserPassword).init();
+  }
+}
+
 $(() => {
   initializeAccountForm();
   initializeDeleteAccount();
+  initializeOldPasswordToggler();
 });

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

@@ -1,4 +1,4 @@
-/* eslint-disable multiline-ternary, no-ternary */
+/* eslint-disable multiline-ternary */
 
 /*
  *

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

@@ -1,4 +1,9 @@
+/* eslint max-lines: ["error", 350] */
+
 import AutoCompleteJS from "@tarekraafat/autocomplete.js";
+// Styles from node_modules/@tarekraafat/autocomplete.js
+// It needs to be done in JS because postcss-import does not find files in node_modules/
+import "@tarekraafat/autocomplete.js/dist/css/autoComplete.02.css";
 
 export default class AutoComplete {
   constructor(el, options = {}) {
@@ -59,6 +64,9 @@ export default class AutoComplete {
       // Delay in milliseconds how long to wait after user action before
       // doing a backend request.
       delay: 200,
+      // Allows modifying the suggested list before they are displayed
+      // Signature: (element: HTMLElement, value: Object)
+      modifyList: null,
       // Allows modifying the suggested items before they are displayed in the list
       // Signature: (element: HTMLElement, value: Object)
       modifyResult: null
@@ -66,8 +74,9 @@ export default class AutoComplete {
 
     this.autocomplete = new AutoCompleteJS({
       selector: () => this.element,
+      diacritics: true,
       placeHolder: options.placeholder,
-      // Delay (milliseconds) before autocomplete engine starts. It's preventing many queries when user is typing fast.
+      // Delay (milliseconds) before autocomplete engine starts. It is preventing many queries when user is typing fast.
       debounce: 200,
       threshold: this.options.threshold,
       data: {
@@ -86,15 +95,28 @@ export default class AutoComplete {
           }
         },
         filter: (list) => {
+          const results = list.filter(
+            (item, idx, arr) => {
+              return arr.findIndex((val) => val.value === item.value) === idx;
+            }
+          );
+
           if (this.options.dataFilter) {
-            return this.options.dataFilter(list);
+            return this.options.dataFilter(results);
           }
 
-          return list;
+          return results;
         }
       },
       resultsList: {
-        maxResults: this.options.maxResults
+        maxResults: this.options.maxResults,
+        element: (item, data) => {
+          if (!this.options.modifyList) {
+            return;
+          }
+
+          this.options.modifyList(item, data);
+        }
       },
       resultItem: {
         element: (item, data) => {

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

@@ -1,7 +1,7 @@
 /**
  * Changes "Back to list" links to the one saved in sessionStorage API
  * To apply this to a link, at least one element must have the class "js-back-to-list".
- * For this to work it needs the filteredParams in SessionStorage, that's saved on FormFilterComponent.
+ * For this to work it needs the filteredParams in SessionStorage, that is saved on FormFilterComponent.
  * @param {NodeList} links - Hyperlinks elements that point to the filters page that will use the fitererd params
  * @returns {void}
  */

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

@@ -0,0 +1,45 @@
+/**
+ * These set of functions aims to change the behavior of the report modal forms
+ * so that when checking various checkboxes, to change the label of the button
+ * to either report or hide.
+ * Given the behavior is similar for report content and report user, we have the
+ * functionality grouped in one single function.
+ * It is important to note that the report user modal has a checkbox that allows
+ * the admin to block the user in the report user modal.
+ */
+
+/**
+ * @param {DomElement} input The checkbox that is being checked
+ * @return {Void} Nothing
+ */
+const changeLabel = function (input) {
+  let submit = input.closest("form").querySelector("button[type=submit]");
+
+  if (submit.querySelector("span") !== null) {
+    submit = submit.querySelector("span");
+  }
+  if (input.checked === true) {
+    submit.innerHTML = input.dataset.labelAction;
+  } else {
+    submit.innerHTML = input.dataset.labelReport;
+  }
+}
+
+/**
+ * @param {Object} container The form handling the report.
+ * @return {Void} Nothing
+ */
+export default function changeReportFormBehavior(container) {
+  container.querySelectorAll("[data-hide=true]").forEach((checkbox) => {
+    checkbox.addEventListener("change", (event) => {
+      changeLabel(event.target);
+    });
+  });
+  container.querySelectorAll("[data-block=true]").forEach((checkbox) => {
+    checkbox.addEventListener("change", (event) => {
+      changeLabel(event.target);
+      let blockAndHide = event.target.closest("form").querySelector("#block_and_hide");
+      blockAndHide.classList.toggle("invisible");
+    });
+  });
+}

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

@@ -3,29 +3,20 @@
  */
 export default class CheckBoxesTree {
   constructor() {
-    this.checkboxesTree = document.querySelectorAll("[data-checkboxes-tree]");
-    if (!this.checkboxesTree) {
+    this.checkboxesTree = Array.from(document.querySelectorAll("[data-checkboxes-tree]"));
+
+    if (!this.checkboxesTree.length) {
       return;
     }
 
-    this.globalChecks = document.querySelectorAll("[data-global-checkbox] input");
-    this.globalChecks.forEach((global) => {
-      if (global.value === "") {
-        global.classList.add("ignore-filter")
-      }
-    });
-    this.checkGlobalCheck();
+    this.checkboxesLeaf = Array.from(document.querySelectorAll("[data-children-checkbox] input"));
 
-    // Event listeners
+    // handles the click in a tree, what means to mark/unmark every children
     this.checkboxesTree.forEach((input) => input.addEventListener("click", (event) => this.checkTheCheckBoxes(event.target)));
-    document.querySelectorAll("[data-children-checkbox] input").forEach((input) => {
-      input.addEventListener("change", (event) => this.checkTheCheckParent(event.target));
-    });
-
+    // handles the click in a leaf, what means to update the parent possibly
+    this.checkboxesLeaf.forEach((input) => input.addEventListener("change", (event) => this.checkTheCheckParent(event.target)));
     // Review parent checkboxes on initial load
-    document.querySelectorAll("[data-children-checkbox] input").forEach((input) => {
-      this.checkTheCheckParent(input);
-    });
+    this.checkboxesLeaf.forEach((input) => this.checkTheCheckParent(input));
   }
 
   /**
@@ -36,7 +27,7 @@ export default class CheckBoxesTree {
    * @returns {Void} - Returns nothing.
    */
   updateChecked(checkboxes, values) {
-    checkboxes.each((index, checkbox) => {
+    checkboxes.each((_idx, checkbox) => {
       if ((checkbox.value === "" && values.length === 1) || (checkbox.value !== "" && values.includes(checkbox.value))) {
         checkbox.checked = true;
         this.checkTheCheckBoxes(checkbox);
@@ -53,13 +44,13 @@ export default class CheckBoxesTree {
    */
   setContainerForm(theForm) {
     theForm.on("submit ajax:before", () => {
-      theForm.find(".ignore-filters input, input.ignore-filter").each((idx, elem) => {
+      theForm.find(".ignore-filters input, input.ignore-filter").each((_idx, elem) => {
         elem.disabled = true;
       });
     });
 
     theForm.on("ajax:send", () => {
-      theForm.find(".ignore-filters input, input.ignore-filter").each((idx, elem) => {
+      theForm.find(".ignore-filters input, input.ignore-filter").each((_idx, elem) => {
         elem.disabled = false;
       });
     });
@@ -72,60 +63,20 @@ export default class CheckBoxesTree {
    * @returns {Void} - Returns nothing.
    */
   checkTheCheckBoxes(target) {
-    // Quis custodiet ipsos custodes?
     const targetChecks = target.dataset.checkboxesTree;
     const checkStatus = target.checked;
-    const allChecks = document.querySelectorAll(`#${targetChecks} input[type='checkbox']`);
+    // NOTE: Note the regex CSS query, it selects those [data-children-checkbox] ended with the target id
+    const allChecks = document.querySelectorAll(`[data-children-checkbox$="${targetChecks}"] input`);
 
     allChecks.forEach((input) => {
       input.checked = checkStatus;
       input.indeterminate = false;
       input.classList.add("ignore-filter");
-    });
-  }
 
-  /**
-   * Update global checkboxes state when the current selection changes
-   * @private
-   * @returns {Void} - Returns nothing.
-   */
-  checkGlobalCheck() {
-    this.globalChecks.forEach((global) => {
-      const checksContext = global.dataset.checkboxesTree;
-      const totalInputs = document.querySelectorAll(
-        `#${checksContext} input[type='checkbox']`
-      );
-      const checkedInputs = document.querySelectorAll(
-        `#${checksContext} input[type='checkbox']:checked`
-      );
-      const indeterminateInputs = Array.from(totalInputs).filter((checkbox) => checkbox.indeterminate)
-
-      if (checkedInputs.length === 0 && indeterminateInputs.length === 0) {
-        global.checked = false;
-        global.indeterminate = false;
-      } else if (checkedInputs.length === totalInputs.length && indeterminateInputs.length === 0) {
-        global.checked = true;
-        global.indeterminate = false;
-      } else {
-        global.checked = true;
-        global.indeterminate = true;
+      // recursive call if the input it is also a tree
+      if (input.dataset.checkboxesTree) {
+        this.checkTheCheckBoxes(input)
       }
-
-      totalInputs.forEach((input) => {
-        if (global.indeterminate && !input.indeterminate) {
-          input.classList.remove("ignore-filter");
-        } else {
-          input.classList.add("ignore-filter");
-        }
-        const subfilters = input.parentNode.parentNode.nextElementSibling;
-        if (subfilters && subfilters.classList.contains("filters__subfilters")) {
-          if (input.indeterminate) {
-            subfilters.classList.remove("ignore-filters");
-          } else {
-            subfilters.classList.add("ignore-filters");
-          }
-        }
-      });
     });
   }
 
@@ -136,22 +87,18 @@ export default class CheckBoxesTree {
    * @returns {Void} - Returns nothing.
    */
   checkTheCheckParent(input) {
-    const checkBoxContext = $(input).parents(".filters__subfilters").attr("id");
-    if (!checkBoxContext) {
-      this.checkGlobalCheck();
+    const key = input.parentNode.dataset.childrenCheckbox
+    // search in the checkboxes array if some id ends with the childrenCheckbox key, what means it is the parent
+    const parentCheck = this.checkboxesTree.find(({ id }) => new RegExp(`${key}$`, "i").test(id))
+
+    if (typeof parentCheck === "undefined") {
       return;
     }
 
-    const parentCheck = document.querySelector(
-      `[data-checkboxes-tree=${checkBoxContext}]`
-    );
-    const totalCheckSiblings = document.querySelectorAll(
-      `#${checkBoxContext} > div > [data-children-checkbox] > input, #${checkBoxContext} > [data-children-checkbox] > input`
-    );
-    const checkedSiblings = document.querySelectorAll(
-      `#${checkBoxContext} > div > [data-children-checkbox] > input:checked, #${checkBoxContext} > [data-children-checkbox] > input:checked`
-    );
-    const indeterminateSiblings = Array.from(totalCheckSiblings).filter((checkbox) => checkbox.indeterminate)
+    // search for leaves with the same parent, what means they are siblings
+    const totalCheckSiblings = this.checkboxesLeaf.filter((node) => node.parentNode.dataset.childrenCheckbox === key)
+    const checkedSiblings = totalCheckSiblings.filter((checkbox) => checkbox.checked)
+    const indeterminateSiblings = totalCheckSiblings.filter((checkbox) => checkbox.indeterminate)
 
     if (checkedSiblings.length === 0 && indeterminateSiblings.length === 0) {
       parentCheck.checked = false;
@@ -160,26 +107,21 @@ export default class CheckBoxesTree {
       parentCheck.checked = true;
       parentCheck.indeterminate = false;
     } else {
-      parentCheck.checked = true;
+      parentCheck.checked = false;
       parentCheck.indeterminate = true;
     }
 
     totalCheckSiblings.forEach((sibling) => {
-      if (parent.indeterminate && !sibling.indeterminate) {
+      if (parentCheck.indeterminate && !sibling.indeterminate) {
         sibling.classList.remove("ignore-filter");
       } else {
         sibling.classList.add("ignore-filter");
       }
-      const subfilters = sibling.parentNode.parentNode.nextElementSibling;
-      if (subfilters && subfilters.classList.contains("filters__subfilters")) {
-        if (sibling.indeterminate) {
-          subfilters.classList.remove("ignore-filters");
-        } else {
-          subfilters.classList.add("ignore-filters");
-        }
-      }
     });
 
-    this.checkTheCheckParent(parentCheck);
+    // recursive call if there are more children
+    if ("childrenCheckbox" in parentCheck.parentNode.dataset) {
+      this.checkTheCheckParent(parentCheck);
+    }
   }
 }

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

@@ -34,7 +34,7 @@ const CLIPBOARD_COPY_TIMEOUT = 5000;
 
 $(() => {
   $(document).on("click", "[data-clipboard-copy]", (ev) => {
-    const $el = $(ev.target);
+    const $el = $(ev.currentTarget);
     if (!$el.data("clipboard-copy") || $el.data("clipboard-copy").length < 1) {
       return;
     }
@@ -106,7 +106,7 @@ $(() => {
           message += "&nbsp;";
         }
       } else {
-        $msg = $('<div aria-role="alert" aria-live="assertive" aria-atomic="true" class="clipboard-announcement show-for-sr"></div>');
+        $msg = $('<div aria-role="alert" aria-live="assertive" aria-atomic="true" class="sr-only"></div>');
         $el.after($msg);
         $el.data("clipboard-message-element", $msg);
       }