decidim-core 0.30.2 → 0.31.0.rc1

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

@@ -1,121 +1,5 @@
 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.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
-  }
-
-  dropdownOptions.isOpen = component.dataset.open === "true";
-
-  const isOpen = Object.keys(screens).some((key) => {
-    if (!isScreenSize(key)) {
-      return false;
-    }
-    return Boolean(component.dataset[`open-${key}`.replace(/-([a-z])/g, (str) => str[1].toUpperCase())]);
-  });
-
-  dropdownOptions.isOpen = dropdownOptions.isOpen || isOpen;
-
-  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
@@ -232,11 +116,8 @@ const announceForScreenReader = (message, mode = "assertive") => {
 };
 
 export {
-  createAccordion,
   createDialog,
-  createDropdown,
   announceForScreenReader,
   Accordions,
-  Dialogs,
-  Dropdowns
+  Dialogs
 }

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

@@ -20,7 +20,7 @@
  * injected.
  *
  */
-$(() => {
+document.addEventListener("turbo:load", () => {
   const removeUrlParameter = (url, parameter) => {
     const urlParts = url.split("?");
 

data/app/packs/src/decidim/attachments/file_or_link_tabs.js

@@ -48,7 +48,7 @@ const initializeTabs = (container) => {
   updateTabsState(container);
 };
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   const tabs = document.querySelectorAll(
     "div[data-file-or-link-tabs-controller]"
   );

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

@@ -1,3 +1,5 @@
+import icon from "src/decidim/refactor/moved/icon"
+
 /**
  * A custom confirm dialog for Decidim based on Foundation reveals.
  *
@@ -10,29 +12,26 @@ const { Rails } = window;
 class ConfirmDialog {
   constructor(sourceElement) {
     this.$modal = $("#confirm-modal");
+    if (sourceElement) {
+      this.$source = $(sourceElement);
+    }
     this.$content = $("[data-confirm-modal-content]", this.$modal);
     this.$title = $("[data-dialog-title]", this.$modal);
+    this.$iconContainer = $(".confirm-modal-icon", this.$modal);
     this.$buttonConfirm = $("[data-confirm-ok]", this.$modal);
     this.$buttonCancel = $("[data-confirm-cancel]", this.$modal);
 
-    if (sourceElement) {
-      this.$source = $(sourceElement);
-
-      const confirmTitle = this.$source.data("confirm-title");
-      const confirmButton = this.$source.data("confirm-button");
-
-      this.$title.text(confirmTitle)
-
-      const $buttonSpan = this.$buttonConfirm.find("span");
-      if ($buttonSpan.length > 0) {
-        $buttonSpan.text(confirmButton);
-      }
-    }
-
     window.Decidim.currentDialogs["confirm-modal"].open()
   }
 
-  confirm(message) {
+  confirm(message, title, iconName) {
+    if (title) {
+      this.$title.html(title);
+    }
+    if (iconName) {
+      this.$iconContainer.html(icon(iconName, { width: null, height: null }));
+    }
+
     this.$content.html(message);
 
     this.$buttonConfirm.off("click");
@@ -63,9 +62,9 @@ class ConfirmDialog {
   }
 }
 
-const runConfirm = (message, sourceElement = null) => new Promise((resolve) => {
+const runConfirm = (message, sourceElement = null, opts = {}) => new Promise((resolve) => {
   const dialog = new ConfirmDialog(sourceElement);
-  dialog.confirm(message).then((answer) => {
+  dialog.confirm(message, opts.title, opts.iconName).then((answer) => {
     let completed = true;
     if (sourceElement) {
       completed = Rails.fire(sourceElement, "confirm:complete", [answer]);
@@ -85,6 +84,10 @@ const runConfirm = (message, sourceElement = null) => new Promise((resolve) => {
 // so for the moment this needs to be executed **before** Rails.start()
 const allowAction = (ev, element) => {
   const message = $(element).data("confirm");
+  const opts = {
+    title: $(element).data("confirm-title"),
+    iconName: $(element).data("confirm-icon")
+  };
   if (!message) {
     return true;
   }
@@ -93,7 +96,7 @@ const allowAction = (ev, element) => {
     return false;
   }
 
-  runConfirm(message, element).then((answer) => {
+  runConfirm(message, element, opts).then((answer) => {
     if (!answer) {
       return;
     }
@@ -103,6 +106,10 @@ const allowAction = (ev, element) => {
     // checking.
     $(element).data("confirm", null);
     $(element).removeAttr("data-confirm");
+    $(element).data("confirm-title", null);
+    $(element).removeAttr("data-confirm-title");
+    $(element).data("confirm-icon", null);
+    $(element).removeAttr("data-confirm-icon");
 
     // The submit button click events will not do anything if they are
     // dispatched as is. In these cases, just submit the underlying form.
@@ -112,7 +119,7 @@ const allowAction = (ev, element) => {
         $(element).is('input[type="submit"]')
       )
     ) {
-      $(element).parents("form").submit();
+      $(element).parents("form").get(0).requestSubmit();
     } else {
       let origEv = ev.originalEvent || ev;
       let newEv = origEv;
@@ -176,7 +183,7 @@ export const initializeConfirm = () => {
   // Abide registers its own submit click listeners since Foundation 5.6.x
   // which will be handled before the document listeners above. This would
   // break the custom confirm functionality when used with Foundation Abide.
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("turbo:load", function() {
     $(Rails.formInputClickSelector).on("click.confirm", (ev) => {
       handleConfirm(ev, getMatchingEventTarget(ev, Rails.formInputClickSelector));
     });

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

@@ -0,0 +1,100 @@
+import { Controller } from "@hotwired/stimulus"
+import Accordions from "a11y-accordion-component";
+import { screens } from "tailwindcss/defaultTheme"
+export default class extends Controller {
+
+  /**
+   * Create accordion from a component
+   *
+   * @param {HTMLElement} component - The component to be created
+   * @return {void}
+   */
+  connect() {
+    this.toggleButton = this.element.querySelector("[data-controls]");
+
+    const accordionOptions = {};
+    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())])
+      })
+    })
+
+    if (!this.element.id) {
+      // when component has no id, we enforce to have it one
+      this.element.id = `accordion-${Math.random().toString(36).substring(7)}`
+    }
+
+    Accordions.render(this.element.id, accordionOptions);
+
+    this.expandIfNeeded();
+
+    this.boundReconnect = this.reconnect.bind(this);
+    this.element.addEventListener("accordion:reconnect", this.boundReconnect);
+  }
+
+  disconnect() {
+    if (!this.element.id) {
+      return;
+    }
+
+    Accordions.destroy(this.element.id);
+
+    if (this.boundReconnect) {
+      this.element.removeEventListener("accordion:reconnect", this.boundReconnect);
+    }
+
+    if (this.boundExpand) {
+      this.toggleButton.addEventListener("click", this.boundExpand);
+    }
+  }
+
+  reconnect(event) {
+    this.disconnect();
+
+    if (event.detail && event.detail.collapse) {
+      this.previouslyExpanded = false;
+    }
+
+    this.connect();
+  }
+
+  expandIfNeeded()
+  {
+    if (!this.toggleButton) {
+      return;
+    }
+
+    if (this.previouslyExpanded) {
+      this.toggleButton.dispatchEvent(new Event("click"));
+    }
+
+    this.boundExpand = this.expandToggle.bind(this);
+    this.toggleButton.addEventListener("click", this.boundExpand)
+  }
+  expandToggle() {
+    this.previouslyExpanded = this.toggleButton.getAttribute("aria-expanded");
+  }
+
+  /**
+   * 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
+   */
+  isScreenSize(key) {
+    return window.matchMedia(`(min-width: ${screens[key]})`).matches;
+  }
+}