decidim-core 0.27.9 → 0.28.0.rc4

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

@@ -1,78 +1,46 @@
 import icon from "src/decidim/icon"
 
-const EXCLUDE_CLASSES = [
-  "card--list__data__icon",
-  "footer-social__icon",
-  "logo-cityhall"
-];
-const EXCLUDE_ANCESTOR_CLASSES = [
-  "editor-container"
-]
-const EXCLUDE_REL = ["license", "decidim"];
-
-const DEFAULT_MESSAGES = {
-  externalLink: "External link"
-};
-let MESSAGES = DEFAULT_MESSAGES;
-
+/**
+ * Appends an icon to distinguish those links pointing out of decidim.
+ * It will apply to all a[target="_blank"] found in the document
+ *
+ * This behaviour can be omitted adding data-external-link="false" attribute to the anchor tag
+ * e.g. <a href="https://..." target="_blank" data-external-link="false">...</a>
+ */
 export default class ExternalLink {
   static configureMessages(messages) {
-    MESSAGES = $.extend(DEFAULT_MESSAGES, messages);
+    this.MESSAGES = { ...this.MESSAGES, ...messages };
   }
 
-  constructor(link) {
-    this.$link = link;
-
-    this.setup();
-  }
+  constructor(node) {
+    this.MESSAGES = {
+      externalLink: "External link"
+    };
 
-  setup() {
-    if (EXCLUDE_CLASSES.some((cls) => this.$link.hasClass(cls))) {
-      return;
-    }
-    if (EXCLUDE_ANCESTOR_CLASSES.some((cls) => this.$link.parents().hasClass(cls))) {
+    if (node.closest(".editor-container")) {
       return;
     }
-    if (
-      EXCLUDE_REL.some((rel) => {
-        const linkRels = `${this.$link.attr("rel")}`.split(" ");
-        return linkRels.indexOf(rel) > -1;
-      })
-    ) {
-      return;
-    }
-
-    let $target = this.$link;
-    if (this.$link[0].hasAttribute("data-external-link-target")) {
-      $target = $(this.$link.data("external-link-target"), this.$link);
-      if ($target.length < 1) {
-        $target = this.$link;
-      }
-    }
 
-    $target.addClass("external-link-container");
-    let spacer = "&nbsp;";
-    if (this.$link[0].hasAttribute("data-external-link-spacer")) {
-      spacer = this.$link.data("external-link-spacer");
-    } else if ($target.text().trim().length < 1) {
-      // Fixes image links extra space
-      spacer = "";
+    if (!node.querySelector("span[data-external-link]")) {
+      this.setup(node);
     }
-
-    $target.append(`${spacer}${this.generateElement()}`);
   }
 
-  generateElement() {
-    let content = `${this.generateIcon()}${this.generateScreenReaderLabel()}`;
+  setup(node) {
+    const span = document.createElement("span");
+
+    span.dataset.externalLink = true;
+    span.innerHTML = `${this.generateIcon()}${this.generateScreenReaderLabel()}`
+    span.classList.add("inline-block", "mx-0.5");
 
-    return `<span class="external-link-indicator">${content}</span>`;
+    return node.appendChild(span);
   }
 
   generateIcon() {
-    return icon("external-link");
+    return icon("external-link-line", { class: "fill-current" });
   }
 
   generateScreenReaderLabel() {
-    return `<span class="show-for-sr">(${MESSAGES.externalLink})</span>`;
+    return `<span class="sr-only">(${this.MESSAGES.externalLink})</span>`;
   }
 }

data/app/packs/src/decidim/external_link.test.js

@@ -6,9 +6,7 @@ describe("ExternalLink", () => {
   const content = `
     <div id="links">
       <a href="https://decidim.org/" target="_blank">This is an external link</a>
-      <a href="https://decidim.org/" target="_blank"><img src="/path/to/image.png" alt=""></a>
-      <a href="https://decidim.org/" target="_blank" data-external-link-spacer="%%%">Custom spacer link</a>
-      <a href="https://decidim.org/" target="_blank" data-external-link-target=".external-wrapper"><span class="external-wrapper"></span>This is the link</a>
+      <a href="https://decidim.org/" target="_blank" data-external-link="false">This is an normal link</a>
     </div>
   `;
 
@@ -20,45 +18,26 @@ describe("ExternalLink", () => {
       get: (key) => config[key]
     }
   }
-  const expectedIcon = '<svg class="icon icon--external-link" role="img" aria-hidden="true"><title>external-link</title><use href="/path/to/icons.svg#icon-external-link"></use></svg>';
+  const expectedIcon = "<svg width=\"0.75em\" height=\"0.75em\" role=\"img\" aria-hidden=\"true\" class=\"fill-current\"><title>external-link-line</title><use href=\"/path/to/icons.svg#ri-external-link-line\"></use></svg><span class=\"sr-only\">(External link)</span>";
 
   beforeEach(() => {
-    $("body").html(content);
-    $('a[target="_blank"]').each((_i, elem) => {
-      const $link = $(elem);
-      $link.data("external-link", new ExternalLink($link));
-    });
+    document.body.innerHTML = content
+    document.querySelectorAll("a[target=\"_blank\"]:not([data-external-link=\"false\"])").forEach((elem) => new ExternalLink(elem))
   });
 
-  it("adds the external link indicator to the normal external link", () => {
+  it("adds the external link indicator to the external link", () => {
     const $link = $("#links a")[0];
 
     expect($link.outerHTML).toEqual(
-      `<a href="https://decidim.org/" target="_blank" class="external-link-container">This is an external link&nbsp;<span class="external-link-indicator">${expectedIcon}<span class="show-for-sr">(External link)</span></span></a>`
+      `<a href="https://decidim.org/" target="_blank">This is an external link<span data-external-link="true" class="inline-block mx-0.5">${expectedIcon}</span></a>`
     );
   });
 
-  it("adds the external link indicator without a spacer to the image link", () => {
+  it("does not add the external link when is disabled", () => {
     const $link = $("#links a")[1];
 
     expect($link.outerHTML).toEqual(
-      `<a href="https://decidim.org/" target="_blank" class="external-link-container"><img src="/path/to/image.png" alt=""><span class="external-link-indicator">${expectedIcon}<span class="show-for-sr">(External link)</span></span></a>`
-    );
-  });
-
-  it("adds the external link indicator with a custom spacer to the link with the custom spacer configuration", () => {
-    const $link = $("#links a")[2];
-
-    expect($link.outerHTML).toEqual(
-      `<a href="https://decidim.org/" target="_blank" data-external-link-spacer="%%%" class="external-link-container">Custom spacer link%%%<span class="external-link-indicator">${expectedIcon}<span class="show-for-sr">(External link)</span></span></a>`
-    );
-  });
-
-  it("adds the external link indicator with a custom container to the link with the custom container configuration", () => {
-    const $link = $("#links a")[3];
-
-    expect($link.outerHTML).toEqual(
-      `<a href="https://decidim.org/" target="_blank" data-external-link-target=".external-wrapper"><span class="external-wrapper external-link-container"><span class="external-link-indicator">${expectedIcon}<span class="show-for-sr">(External link)</span></span></span>This is the link</a>`
+      "<a href=\"https://decidim.org/\" target=\"_blank\" data-external-link=\"false\">This is an normal link</a>"
     );
   });
 });

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

@@ -18,7 +18,7 @@ export default class FocusGuard {
     this.enable();
     this.guardedElement = element;
 
-    // Call the release focus first so that we don't accidentally add the
+    // Call the release focus first so that we do not accidentally add the
     // keyboard trap twice. Note that the Foundation methods expect the elements
     // to be jQuery elements which is why we pass them through jQuery.
     Keyboard.releaseFocus($(element));
@@ -62,6 +62,7 @@ export default class FocusGuard {
       // Note that the Foundation methods expect the elements to be jQuery
       // elements which is why we pass them through jQuery.
       Keyboard.releaseFocus($(this.guardedElement));
+      this.guardedElement.focus();
       this.guardedElement = null;
     }
   }
@@ -88,6 +89,7 @@ export default class FocusGuard {
 
     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) {
         if (!this.isFocusGuard(visibleNodes[ind]) && this.isFocusable(visibleNodes[ind])) {

data/app/packs/src/decidim/form_filter.component_for_testing.js

@@ -3,5 +3,5 @@
 import FormFilterComponent from "./form_filter"
 
 // This module.exports is necessary for the tests to load
-// doesn't conflict with import/export
+// does not conflict with import/export
 module.exports = FormFilterComponent;

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

@@ -7,10 +7,9 @@
  * @augments Component
  */
 
-import delayed from "src/decidim/delayed"
-import CheckBoxesTree from "src/decidim/check_boxes_tree"
-import { registerCallback, unregisterCallback, pushState, replaceState, state } from "src/decidim/history"
-import DataPicker from "src/decidim/data_picker"
+import delayed from "./delayed"
+import CheckBoxesTree from "./check_boxes_tree"
+import { registerCallback, unregisterCallback, pushState, replaceState, state } from "./history"
 
 export default class FormFilterComponent {
   constructor($form) {
@@ -19,11 +18,9 @@ export default class FormFilterComponent {
     this.mounted = false;
     this.changeEvents = true;
     this.theCheckBoxesTree = new CheckBoxesTree();
-    this.theDataPicker = window.theDataPicker || new DataPicker($(".data-picker"));
 
     this._updateInitialState();
     this._onFormChange = delayed(this, this._onFormChange.bind(this));
-    this._onFormSubmit = delayed(this, this._onFormSubmit.bind(this));
     this._onPopState = this._onPopState.bind(this);
 
     if (window.Decidim.PopStateHandler) {
@@ -43,7 +40,6 @@ export default class FormFilterComponent {
     if (this.mounted) {
       this.mounted = false;
       this.$form.off("change", "input, select", this._onFormChange);
-      this.$form.off("submit", this._onFormSubmit);
 
       unregisterCallback(`filters-${this.id}`)
     }
@@ -59,12 +55,11 @@ export default class FormFilterComponent {
       this.mounted = true;
       let queue = 0;
 
-      let contentContainer = $(this.$form.closest(".filters").parent().find(".skip").attr("href"));
+      let contentContainer = $("main");
       if (contentContainer.length === 0 && this.$form.data("remoteFill")) {
         contentContainer = this.$form.data("remoteFill");
       }
       this.$form.on("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", this._onFormChange);
-      this.$form.on("submit", this._onFormSubmit);
 
       this.currentFormRequest = null;
       this.$form.on("ajax:beforeSend", (e) => {
@@ -78,14 +73,14 @@ export default class FormFilterComponent {
         }
       });
 
-      this.$form.on("ajax:success", () => {
+      $(document).on("ajax:success", () => {
         queue -= 1;
         if (queue <= 0 && contentContainer.length > 0) {
           contentContainer.removeClass("spinner-container");
         }
       });
 
-      this.$form.on("ajax:error", () => {
+      $(document).on("ajax:error", () => {
         queue -= 1;
         if (queue <= 0 && contentContainer.length > 0) {
           contentContainer.removeClass("spinner-container");
@@ -144,7 +139,7 @@ export default class FormFilterComponent {
     // Every location param is constructed like this: filter[key]=value
     let regexpResult = decodeURIComponent(this._getLocation()).match(/filter\[([^\]]*)\](?:\[\])?=([^&]*)/g);
 
-    // The RegExp g flag returns null or an array of coincidences. It doesn't return the match groups
+    // The RegExp g flag returns null or an array of coincidences. It does not return the match groups
     if (regexpResult) {
       const filterParams = regexpResult.reduce((acc, result) => {
         const [, key, array, value] = result.match(/filter\[([^\]]*)\](\[\])?=([^&]*)/);
@@ -193,9 +188,6 @@ export default class FormFilterComponent {
       element.checked = element.indeterminate = false;
     });
     this.$form.find("input[type=radio]").attr("checked", false);
-    this.$form.find(".data-picker").each((_index, picker) => {
-      this.theDataPicker.clear(picker);
-    });
 
     // This ensure the form is reset in a valid state where a fieldset of
     // radio buttons has the first selected.
@@ -208,10 +200,9 @@ export default class FormFilterComponent {
   /**
    * Handles the logic when going back to a previous state in the filter form.
    * @private
-   * @param {Object} currentState - state stored along with location URL
    * @returns {Void} - Returns nothing.
    */
-  _onPopState(currentState) {
+  _onPopState() {
     this.changeEvents = false;
     this._clearForm();
 
@@ -247,26 +238,16 @@ export default class FormFilterComponent {
       });
     }
 
-    // Retrieves picker information for selected values (value, text and link) from the state object
-    $(".data-picker", this.$form).each((_index, picker) => {
-      let pickerState = currentState[picker.id];
-      if (pickerState) {
-        this.theDataPicker.load(picker, pickerState);
-      }
-    })
-
     // Only one instance should submit the form on browser history navigation
     if (this.popStateSubmiter) {
-      Rails.fire(this.$form[0], "submit", { from: "pop" });
+      Rails.fire(this.$form[0], "submit");
     }
 
     this.changeEvents = true;
   }
 
   /**
-   * Handles the logic to decide whether the form should be submitted or not
-   * after a form change event. The form is only submitted when changes have
-   * occurred.
+   * Handles the logic to update the current location after a form change event.
    * @private
    * @returns {Void} - Returns nothing.
    */
@@ -275,7 +256,7 @@ export default class FormFilterComponent {
       return;
     }
 
-    const [newPath] = this._currentStateAndPath();
+    const [newPath, newState] = this._currentStateAndPath();
     const path = this._getLocation(false);
 
     if (newPath === path) {
@@ -283,23 +264,6 @@ export default class FormFilterComponent {
     }
 
     Rails.fire(this.$form[0], "submit");
-  }
-
-  /**
-   * Saves the current state of the search on form submit to update the search
-   * parameters to the URL and store the picker states.
-   * @private
-   * @param {jQuery.Event} ev The event that caused the form to submit.
-   * @returns {Void} - Returns nothing.
-   */
-  _onFormSubmit(ev) {
-    const eventDetail = ev.originalEvent.detail;
-    if (eventDetail && eventDetail.from === "pop") {
-      return;
-    }
-
-    const [newPath, newState] = this._currentStateAndPath();
-
     pushState(newPath, newState);
     this._saveFilters(newPath);
   }
@@ -311,7 +275,7 @@ export default class FormFilterComponent {
    */
   _currentStateAndPath() {
     const formAction = this.$form.attr("action");
-    const params = this.$form.find(":not(.ignore-filters)").find("select:not(.ignore-filter), input:not(.ignore-filter)").serialize();
+    const params = this.$form.find("input:not(.ignore-filter)").serialize();
 
     let path = "";
     let currentState = {};
@@ -322,11 +286,6 @@ export default class FormFilterComponent {
       path = `${formAction}&${params}`;
     }
 
-    // Stores picker information for selected values (value, text and link) in the currentState object
-    $(".data-picker", this.$form).each((_index, picker) => {
-      currentState[picker.id] = this.theDataPicker.save(picker);
-    })
-
     return [path, currentState];
   }
 

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

@@ -36,7 +36,7 @@ export default class FormValidator {
       $announce.remove();
     }
     $announce = $("<div />");
-    $announce.attr("class", "sr-announce show-for-sr");
+    $announce.attr("class", "sr-announce sr-only");
     $announce.attr("aria-live", "assertive");
     this.$form.prepend($announce);
 

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

@@ -0,0 +1,52 @@
+/**
+ * Gets the configured messages for Decidim. The configuration is passed from
+ * the view to the JS within the layout template.
+ *
+ * @param {String | null} key The top-level key to fetch from the messages
+ *   object or `null` to fetch all messages.
+ * @returns {Object} The messages object
+ */
+export const getMessages = (key = null) => {
+  const allMessages = window.Decidim.config.get("messages");
+  if (key === null) {
+    return allMessages;
+  }
+  let messages = allMessages;
+  key.split(".").forEach((part) => (messages = messages[part] || {}));
+  return messages;
+};
+
+/**
+ * Turns a deep messages object into a dictionary object with a single level and
+ * the keys separated with a dot.
+ *
+ * @param {Object} messages The messages object
+ * @param {String | null} prefix Prefix for the messages on recursive calls
+ * @returns {Object} The converted dictionary object
+ */
+export const createDictionary = (messages, prefix = "") => {
+  let final = {};
+  Object.keys(messages).forEach((key) => {
+    if (typeof messages[key] === "object") {
+      final = { ...final, ...createDictionary(messages[key], `${prefix}${key}.`) };
+    } else if (key === "") {
+      final[prefix?.replace(/\.$/, "") || ""] = messages[key];
+    } else {
+      final[`${prefix}${key}`] = messages[key];
+    }
+  });
+
+  return final;
+};
+
+/**
+ * Creates a dictionary object from the top-level messages object with the
+ * provided key.
+ *
+ * @param {String | null} key The top-level message key to create the dictionary
+ *   for
+ * @returns {Object} The dictionary object
+ */
+export const getDictionary = (key) => {
+  return createDictionary(getMessages(key));
+}

data/app/packs/src/decidim/i18n.test.js

@@ -0,0 +1,64 @@
+import * as i18n from "./i18n";
+
+const config = {
+  messages: {
+    foo: "Foo",
+    bar: { baz: { biz: "Biz" } },
+    test: {
+      eeny: "Eeny",
+      meeny: {
+        miny: "Miny",
+        moe: "Moe"
+      },
+      catch: { atiger: { by: { the: { toe: "Toe" } } } }
+    }
+  }
+};
+
+window.Decidim = {
+  config: {
+    get: (key) => config[key]
+  }
+};
+
+describe("getMessages", () => {
+  describe("with no key", () => {
+    it("returns all the configured messages", () => {
+      expect(i18n.getMessages()).toEqual(config.messages);
+    });
+  });
+
+  describe("with a top-level key", () => {
+    it("returns the configured messages for that key only", () => {
+      expect(i18n.getMessages("bar")).toEqual(config.messages.bar);
+    });
+  });
+
+  describe("with a sub key", () => {
+    it("returns the configured messages for that sub key only", () => {
+      expect(i18n.getMessages("test.catch.atiger")).toEqual(config.messages.test.catch.atiger);
+    });
+  });
+});
+
+describe("createDictionary", () => {
+  it("creates the correct a directory with correct key names", () => {
+    const dict = i18n.createDictionary(config.messages);
+    expect(dict.foo).toEqual("Foo");
+    expect(dict["bar.baz.biz"]).toEqual("Biz");
+    expect(dict["test.eeny"]).toEqual("Eeny");
+    expect(dict["test.meeny.miny"]).toEqual("Miny");
+    expect(dict["test.meeny.moe"]).toEqual("Moe");
+    expect(dict["test.catch.atiger.by.the.toe"]).toEqual("Toe");
+  });
+});
+
+describe("getDictionary", () => {
+  it("fetches the correct messages and returns a dictionary for them", () => {
+    const dict = i18n.getDictionary("test");
+    expect(dict.eeny).toEqual("Eeny");
+    expect(dict["meeny.miny"]).toEqual("Miny");
+    expect(dict["meeny.moe"]).toEqual("Moe");
+    expect(dict["catch.atiger.by.the.toe"]).toEqual("Toe");
+  });
+});

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

@@ -12,13 +12,9 @@ const DEFAULT_ATTRIBUTES = {
  * @returns {Void} - Returns nothing.
  */
 export default function icon(iconKey, attributes = {}) {
-  const iconAttributes = $.extend(DEFAULT_ATTRIBUTES, attributes);
-  const title = iconAttributes.title || iconAttributes.ariaLabel;
-  Reflect.deleteProperty(iconAttributes, "title");
+  const iconAttributes = { ...DEFAULT_ATTRIBUTES, ...attributes };
+  const htmlAttributes = { width: "0.75em", height: "0.75em" };
 
-  const htmlAttributes = {
-    "class": `icon icon--${iconKey}`
-  };
   Object.keys(iconAttributes).forEach((key) => {
     // Convert the key to dash-format.
     const newKey = key.replace(/([A-Z])/g, (ucw) => `-${ucw[0].toLowerCase()}`);
@@ -29,18 +25,16 @@ export default function icon(iconKey, attributes = {}) {
     }
   });
 
-  const iconsPath =  window.Decidim.config.get("icons_path");
-  const elHtml = `<svg><use href="${iconsPath}#icon-${iconKey}"></use></svg>`;
-  const $el = $(elHtml);
-  if (title) {
-    $el.prepend(`<title>${title}</title>`);
-  } else {
-    // This keeps accessibility audit tools happy
-    $el.prepend(`<title>${iconKey}</title>`);
-    // Force hidden if title is not defined
-    htmlAttributes["aria-hidden"] = "true";
-  }
-  $el.attr(htmlAttributes);
+  const svg = document.createElement("svg")
+  const use = document.createElement("use")
+  const title = document.createElement("title")
 
-  return $("<div />").append($el).html();
+  title.innerHTML = iconAttributes.title || iconAttributes.ariaLabel || iconKey
+  use.setAttribute("href", `${window.Decidim.config.get("icons_path")}#ri-${iconKey}`)
+  Object.entries(htmlAttributes).forEach(([key, value]) => svg.setAttribute(key, value))
+
+  svg.appendChild(title)
+  svg.appendChild(use)
+
+  return svg.outerHTML;
 }

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

@@ -1,60 +1,33 @@
 /**
- * Makes the #select-identity-button to open a popup for the user to
- * select with which identity they want to perform an action.
+ * Send a request to select which identity want to use
+ * NOTE: this should not be done using javascript
  *
+ * @param {HTMLElement} node target node
+ * @returns {void}
  */
-$(() => {
-  let button = $("#select-identity-button"),
-      identitiesUrl = null,
-      userIdentitiesDialog = $("#user-identities");
+export default function(node = document) {
+  node.addEventListener("click", ({ target: element }) => {
+    const { method } = element.dataset
 
-  if (userIdentitiesDialog.length) {
-    identitiesUrl = userIdentitiesDialog.data("reveal-identities-url");
+    let attr = "destroy_url";
 
-    button.click(function () {
-      $.ajax(identitiesUrl).done(function(response) {
-        userIdentitiesDialog.html(response).foundation("open");
-        button.trigger("ajax:success")
-      });
-    });
-  }
-});
+    if (method === "POST") {
+      attr = "create_url";
+    }
 
-
-/**
- * Manage the identity selector for endorsements.
- *
- */
-$(() => {
-  $("#select-identity-button").on("ajax:success", function() {
-    // once reveal popup has been rendered register event callbacks
-    $("#user-identities ul.reveal__list li").each(function(index, elem) {
-      let liTag = $(elem)
-      liTag.on("click", function() {
-        let method = liTag.data("method"),
-            urlDataAttr = null;
+    const { [attr]: url } = element.dataset
+    Rails.ajax({
+      url: url,
+      type: method,
+      success: function() {
         if (method === "POST") {
-          urlDataAttr = "create_url";
+          element.classList.add("is-selected")
+          element.dataset.method = "DELETE"
         } else {
-          urlDataAttr = "destroy_url";
+          element.classList.remove("is-selected")
+          element.dataset.method = "POST"
         }
-        $.ajax({
-          url: liTag.data(urlDataAttr),
-          method: method,
-          dataType: "script",
-          success: function() {
-            if (liTag.hasClass("selected")) {
-              liTag.removeClass("selected")
-              liTag.find(".icon--circle-check").addClass("invisible")
-              liTag.data("method", "POST")
-            } else {
-              liTag.addClass("selected")
-              liTag.find(".icon--circle-check").removeClass("invisible")
-              liTag.data("method", "DELETE")
-            }
-          }
-        })
-      })
-    });
-  });
-})
+      }
+    })
+  })
+}