decidim-core 0.30.1 → 0.31.0.rc1

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

@@ -0,0 +1,125 @@
+import { Controller } from "@hotwired/stimulus"
+import { screens } from "tailwindcss/defaultTheme"
+import Dropdowns from "a11y-dropdown-component";
+
+/**
+ * Create dropdown from a component
+ *
+ * @param {HTMLElement} component - The component to be created
+ * @return {void}
+ */
+export default class extends Controller {
+  connect() {
+    const dropdownOptions = {};
+    dropdownOptions.dropdown = this.element.dataset.target;
+    dropdownOptions.hover = this.element.dataset.hover === "true";
+    dropdownOptions.autoClose = this.element.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 (!this.isScreenSize(key)) {
+        return false;
+      }
+
+      return Boolean(this.element.dataset[`disabled-${key}`.replace(/-([a-z])/g, (str) => str[1].toUpperCase())]);
+    })
+
+    if (isDisabled) {
+      return
+    }
+
+    dropdownOptions.isOpen = this.element.dataset.open === "true";
+
+    const isOpen = Object.keys(screens).some((key) => {
+      if (!this.isScreenSize(key)) {
+        return false;
+      }
+      return Boolean(this.element.dataset[`open-${key}`.replace(/-([a-z])/g, (str) => str[1].toUpperCase())]);
+    });
+
+    dropdownOptions.isOpen = dropdownOptions.isOpen || isOpen;
+
+    if (!this.element.id) {
+      // when component has no id, we enforce to have it one
+      this.element.id = `dropdown-${Math.random().toString(36).substring(7)}`
+    }
+
+    const autofocus = this.element.dataset.autofocus;
+    if (autofocus) {
+      // set the focus to some inner element, use setTimeout hack due to waiting for element to display
+      this.element.addEventListener("click", () => setTimeout(() => document.getElementById(autofocus).focus(), 0));
+    }
+
+    const scrollToMenu = this.element.dataset.scrollToMenu === "true";
+    if (scrollToMenu) {
+      // Auto scroll to show the menu on the viewport
+      this.element.addEventListener("click", (event) => {
+        const heightToScroll = this.element.getBoundingClientRect().top + window.scrollY + document.documentElement.clientTop;
+        const isCollapsed = event.target.getAttribute("aria-expanded") === "false";
+
+        if (isCollapsed) {
+          return;
+        }
+
+        window.scrollTo({ top: heightToScroll, behavior: "smooth" });
+      });
+    }
+
+    // Fixes styles for dropdowns with child dropdowns
+    const hasChildMenu = this.element.parentNode.classList.contains("dropdown__item")
+    if (hasChildMenu) {
+      this.changeChildMenuDropdownPosition();
+      this.changeStyleOfSelectedElement();
+    }
+
+    Dropdowns.render(this.element.id, dropdownOptions);
+  }
+
+  /**
+   * 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;
+  }
+
+  /*
+   * Changes the Child Menu dropdown position when there are multiple children Dropdowns.
+   * This is used when there is a tree of dropdowns, such as in the Filters feature with Taxonomies.
+   * It changs the position of the child menu taking into account the width of the parent
+   * (that it is not the same always).
+   */
+  changeChildMenuDropdownPosition() {
+    const target = this.element.dataset.target;
+    const childMenu = document.getElementById(target);
+    const parentMenu = this.element.parentNode.parentNode;
+
+    const observer = new MutationObserver(() => {
+      if (childMenu.style.display !== "none" && parentMenu.offsetWidth !== 0) {
+        const positionLeft = parentMenu.offsetWidth - 10;
+
+        childMenu.style.left = `${positionLeft}px`;
+      }
+    });
+
+    observer.observe(childMenu, { attributes: true, childList: true });
+  }
+
+  /*
+   * Changes the style of the selected element when there are children Dropdowns
+   */
+  changeStyleOfSelectedElement() {
+    this.element.addEventListener("click", function(event) {
+      event.target.parentNode.parentNode.querySelectorAll("a").forEach((link) => {
+        link.parentNode.classList.remove("dropdown__item-hovered")
+      })
+
+      event.target.parentNode.classList.add("dropdown__item-hovered")
+    })
+  }
+}

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

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+import createEditor from "src/decidim/editor";
+
+export default class extends Controller {
+  connect() {
+    this.editor = createEditor(this.element)
+  }
+}

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

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+import { EmojiButton } from "src/decidim/controllers/emoji/emoji"
+
+export default class extends Controller {
+
+  /**
+   * There is a problem that I could not identify here, but it seems that if we do not remove the emoji controller
+   * from an element, we will have an endless load of the emoji object. Therefore, we are filtering through the existing
+   *  controllers and removing the emoji. If there is no other element, we remove the data-attribute.
+   * @returns {void}
+   */
+  connect() {
+    let controllers = this.element.dataset.controller.split(" ");
+
+    controllers = controllers.filter((controller) => controller !== "emoji");
+
+    // Update the attribute
+    if (controllers.length > 0) {
+      this.element.setAttribute("data-controller", controllers.join(" "));
+    } else {
+      this.element.removeAttribute("data-controller");
+    }
+
+    this.emoji = new EmojiButton(this.element)
+  }
+}

data/app/packs/src/decidim/{input_emoji.js → controllers/emoji/emoji.js}

@@ -2,7 +2,7 @@ import data from "@emoji-mart/data"
 import i18nEn from "@emoji-mart/data/i18n/en.json"
 import { Picker } from "emoji-mart"
 
-import * as i18n from "src/decidim/i18n";
+import * as i18n from "src/decidim/refactor/moved/i18n";
 import { screens } from "tailwindcss/defaultTheme"
 
 class EmojiI18n {
@@ -226,17 +226,3 @@ export class EmojiButton {
     });
   }
 }
-
-/**
- * Adds the input emojis to the input elements that are defined to have them.
- *
- * @param {HTMLElement} element target node
- * @returns {void}
- */
-export default function addInputEmoji(element = document) {
-  const containers = element.querySelectorAll("[data-input-emoji]");
-
-  if (containers.length) {
-    containers.forEach((elem) => new EmojiButton(elem))
-  }
-};

data/app/packs/src/decidim/{form_filter.js → controllers/form_filter/controller.js}

@@ -1,20 +1,20 @@
 /* eslint-disable no-div-regex, no-useless-escape, no-param-reassign, id-length */
 /* eslint max-lines: ["error", {"max": 350, "skipBlankLines": true}] */
 
+import { Controller } from "@hotwired/stimulus"
+import delayed from "src/decidim/refactor/moved/delayed"
+import CheckBoxesTree from "src/decidim/refactor/moved/check_boxes_tree"
+import { registerCallback, unregisterCallback, pushState, replaceState, state } from "src/decidim/refactor/moved/history"
+
 /**
- * A plain JavaScript component that handles the form filter.
+ * A Stimulus controller that handles the form filter.
  * @class
- * @augments Component
+ * @augments Controller
  */
+export default class extends Controller {
 
-import delayed from "src/decidim/delayed"
-import CheckBoxesTree from "src/decidim/check_boxes_tree"
-import { registerCallback, unregisterCallback, pushState, replaceState, state } from "src/decidim/history"
-
-export default class FormFilterComponent {
-  constructor($form) {
-    this.$form = $form;
-    this.id = this.$form.attr("id") || this._getUID();
+  connect() {
+    this.id = this.element.id || this._getUID();
     this.mounted = false;
     this.changeEvents = true;
     this.theCheckBoxesTree = new CheckBoxesTree();
@@ -29,6 +29,8 @@ export default class FormFilterComponent {
       this.popStateSubmitter = true;
       window.Decidim.PopStateHandler = this.id;
     }
+
+    this.mountComponent()
   }
 
   /**
@@ -36,13 +38,12 @@ export default class FormFilterComponent {
    * @public
    * @returns {Void} - Returns nothing
    */
-  unmountComponent() {
-    if (this.mounted) {
-      this.mounted = false;
-      this.$form.off("change", "input, select", this._onFormChange);
+  disconnect() {
+    this.element.querySelectorAll("input, select").forEach((element) => {
+      element.removeEventListener("change", this._onFormChange);
+    });
 
-      unregisterCallback(`filters-${this.id}`)
-    }
+    unregisterCallback(`filters-${this.id}`)
   }
 
   /**
@@ -51,44 +52,48 @@ export default class FormFilterComponent {
    * @returns {Void} - Returns nothing
    */
   mountComponent() {
-    if (this.$form.length > 0 && !this.mounted) {
+    if (this.element.length > 0 && !this.mounted) {
       this.mounted = true;
       let queue = 0;
 
-      let contentContainer = $("main");
-      if (contentContainer.length === 0 && this.$form.data("remoteFill")) {
-        contentContainer = this.$form.data("remoteFill");
+      let contentContainer = document.querySelector("main");
+      if (contentContainer.length === 0 && this.element.dataset.remoteFill) {
+        contentContainer = this.element.dataset.remoteFill;
       }
-      this.$form.on("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", this._onFormChange);
+
+      this.element.querySelectorAll("input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])").forEach((element) => {
+        element.addEventListener("change", this._onFormChange);
+      })
 
       this.currentFormRequest = null;
-      this.$form.on("ajax:beforeSend", (e) => {
+
+      this.element.addEventListener("ajax:beforeSend", (e) => {
         if (this.currentFormRequest) {
           this.currentFormRequest.abort();
         }
-        this.currentFormRequest = e.originalEvent.detail[0];
+        this.currentFormRequest = e.detail[0];
         queue += 1;
-        if (queue > 0 && contentContainer.length > 0 && !contentContainer.hasClass("spinner-container")) {
-          contentContainer.addClass("spinner-container");
+        if (queue > 0 && contentContainer.length > 0 && !contentContainer.classList.contains("spinner-container")) {
+          contentContainer.classList.add("spinner-container");
         }
       });
 
-      $(document).on("ajax:success", () => {
+      document.addEventListener("ajax:success", () => {
         queue -= 1;
         if (queue <= 0 && contentContainer.length > 0) {
-          contentContainer.removeClass("spinner-container");
+          contentContainer.classList.remove("spinner-container");
         }
       });
 
-      $(document).on("ajax:error", () => {
+      document.addEventListener("ajax:error", () => {
         queue -= 1;
         if (queue <= 0 && contentContainer.length > 0) {
           contentContainer.removeClass("spinner-container");
+          contentContainer.classlist.add("hide");
         }
-        this.$form.find(".spinner-container").addClass("hide");
       });
 
-      this.theCheckBoxesTree.setContainerForm(this.$form);
+      this.theCheckBoxesTree.setContainerForm(this.element);
 
       registerCallback(`filters-${this.id}`, (currentState) => {
         this._onPopState(currentState);
@@ -168,11 +173,15 @@ export default class FormFilterComponent {
   _parseLocationOrderValue() {
     const url = this._getLocation();
     const match = url.match(/order=([^&]*)/);
-    const $orderMenu = this.$form.find(".order-by .menu");
-    let order = $orderMenu.find(".menu a:first").data("order");
+    const orderMenu = this.element.querySelector(".order-by .menu");
+    let order = null;
 
-    if (match) {
-      order = match[1];
+    if (orderMenu) {
+      order = orderMenu.querySelector(".menu a").dataset.order;
+
+      if (match) {
+        order = match[1];
+      }
     }
 
     return order;
@@ -184,17 +193,15 @@ export default class FormFilterComponent {
    * @returns {Void} - Returns nothing.
    */
   _clearForm() {
-    this.$form.find("input[type=checkbox]").each((index, element) => {
+    this.element.querySelectorAll("input[type=checkbox]").forEach((element) => {
       element.checked = element.indeterminate = false;
     });
-    this.$form.find("input[type=radio]").attr("checked", false);
-
-    // This ensure the form is reset in a valid state where a fieldset of
-    // radio buttons has the first selected.
-    this.$form.find("fieldset input[type=radio]:first").each(function () {
-      // I need the this to iterate a jQuery collection
-      $(this)[0].checked = true; // eslint-disable-line no-invalid-this
-    });
+    this.element.querySelectorAll("input[type=radio]").forEach((element) => {
+      element.checked = false;
+    })
+    if (this.element.querySelector("fieldset input[type=radio]")) {
+      this.element.querySelector("fieldset input[type=radio]").checked = true;
+    }
   }
 
   /**
@@ -209,7 +216,10 @@ export default class FormFilterComponent {
     const filterParams = this._parseLocationFilterValues();
     const currentOrder = this._parseLocationOrderValue();
 
-    this.$form.find("input.order_filter").val(currentOrder);
+    const orderFilter = this.element.querySelector("input.order_filter");
+    if (orderFilter) {
+      orderFilter.value = currentOrder;
+    }
 
     if (filterParams) {
       const fieldIds = Object.keys(filterParams);
@@ -219,10 +229,10 @@ export default class FormFilterComponent {
         let value = filterParams[fieldName];
 
         if (Array.isArray(value)) {
-          let checkboxes = this.$form.find(`input[type=checkbox][name="filter[${fieldName}][]"]`);
+          let checkboxes = this.element.querySelectorAll(`input[type=checkbox][name="filter[${fieldName}][]"]`);
           this.theCheckBoxesTree.updateChecked(checkboxes, value);
         } else {
-          this.$form.find(`*[name="filter[${fieldName}]"]`).each((index, element) => {
+          this.element.querySelectorAll(`*[name="filter[${fieldName}]"]`).forEach((element) => {
             switch (element.type) {
             case "hidden":
               break;
@@ -240,7 +250,7 @@ export default class FormFilterComponent {
 
     // Only one instance should submit the form on browser history navigation
     if (this.popStateSubmitter) {
-      Rails.fire(this.$form[0], "submit");
+      Rails.fire(this.element, "submit");
     }
 
     this.changeEvents = true;
@@ -263,7 +273,7 @@ export default class FormFilterComponent {
       return;
     }
 
-    Rails.fire(this.$form[0], "submit");
+    Rails.fire(this.element, "submit");
     pushState(newPath, newState);
     this._saveFilters(newPath);
   }
@@ -274,8 +284,15 @@ export default class FormFilterComponent {
    * @returns {Array} - Returns an array with the path and the state for the current filters state.
    */
   _currentStateAndPath() {
-    const formAction = this.$form.attr("action");
-    const params = this.$form.find("input:not(.ignore-filter)").serialize();
+    const formAction = this.element.action;
+    const inputs = this.element.querySelectorAll("input:not(.ignore-filter)");
+    const formData = new FormData();
+    inputs.forEach((input) => {
+      if (input.name && (input.type !== "checkbox" && input.type !== "radio" || input.checked)) {
+        formData.append(input.name, input.value);
+      }
+    });
+    const params = new URLSearchParams(formData).toString();
 
     let path = "";
     let currentState = {};
@@ -309,7 +326,7 @@ export default class FormFilterComponent {
       return;
     }
 
-    const pathName = this.$form.attr("action");
+    const pathName = this.element.action;
     sessionStorage.setItem("filteredParams", JSON.stringify({[pathName]: pathWithQueryStrings}));
   }