decidim-core 0.26.0 → 0.26.1

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

@@ -1,70 +1,3 @@
-const focusGuardClass = "focusguard";
-const focusableNodes = ["A", "IFRAME", "OBJECT", "EMBED"];
-const focusableDisableableNodes = ["BUTTON", "INPUT", "TEXTAREA", "SELECT"];
-
-const isFocusGuard = (element) => {
-  return element.classList.contains(focusGuardClass);
-}
-
-const isFocusable = (element) => {
-  if (focusableNodes.indexOf(element.nodeName) > -1) {
-    return true;
-  }
-  if (focusableDisableableNodes.indexOf(element.nodeName) > -1 || element.getAttribute("contenteditable")) {
-    if (element.getAttribute("disabled")) {
-      return false;
-    }
-    return true;
-  }
-
-  const tabindex = parseInt(element.getAttribute("tabindex"), 10);
-  if (!isNaN(tabindex) && tabindex >= 0) {
-    return true;
-  }
-
-  return false;
-}
-
-const createFocusGuard = (position) => {
-  return $(`<div class="${focusGuardClass}" data-position="${position}" tabindex="0" aria-hidden="true"></div>`);
-};
-
-const handleContainerFocus = ($container, $guard) => {
-  const $reveal = $(".reveal:visible:last", $container);
-  if ($reveal.length > 0) {
-    handleContainerFocus($reveal, $guard);
-    return;
-  }
-
-  const $nodes = $("*:visible", $container);
-  let $target = null;
-
-  if ($guard.data("position") === "start") {
-    // Focus at the start guard, so focus the first focusable element after that
-    for (let ind = 0; ind < $nodes.length; ind += 1) {
-      if (!isFocusGuard($nodes[ind]) && isFocusable($nodes[ind])) {
-        $target = $($nodes[ind]);
-        break;
-      }
-    }
-  } else {
-    // Focus at the end guard, so focus the first focusable element after that
-    for (let ind = $nodes.length - 1; ind >= 0; ind -= 1) {
-      if (!isFocusGuard($nodes[ind]) && isFocusable($nodes[ind])) {
-        $target = $($nodes[ind]);
-        break;
-      }
-    }
-  }
-
-  if ($target) {
-    $target.trigger("focus");
-  } else {
-    // If no focusable element was found, blur the guard focus
-    $guard.blur();
-  }
-};
-
 /**
  * A method to enable the dialog mode for the given dialog(s).
  *
@@ -100,44 +33,23 @@ export default ($dialogs) => {
       $title.trigger("focus");
     }
 
-    // Once the final modal closes, remove the focus guards from the container
+    // Once the final modal closes, disable the focus guarding
     $dialog.off("closed.zf.reveal.focusguard").on("closed.zf.reveal.focusguard", () => {
       $dialog.off("closed.zf.reveal.focusguard");
 
       // After the last dialog is closed, the tab guards should be removed.
-      // Note that there may be multiple dialogs open on top of each other at
-      // the same time.
-      if ($(".reveal:visible", $container).length < 1) {
-        $(`> .${focusGuardClass}`, $container).remove();
+      // This is done when the focus guard is disabled. If there is still a
+      // visible reveal item in the DOM, make that the currently "guarded"
+      // element. Note that there may be multiple dialogs open on top of each
+      // other at the same time.
+      const $visibleReveal = $(".reveal:visible:last", $container);
+      if ($visibleReveal.length > 0) {
+        window.focusGuard.trap($visibleReveal[0]);
+      } else {
+        window.focusGuard.disable();
       }
     });
 
-    // Check if the guards already exists due to some other dialog
-    const $guards = $(`> .${focusGuardClass}`, $container);
-    if ($guards.length > 0) {
-      // Make sure the guards are the first and last element as there have
-      // been changes in the DOM.
-      $guards.each((_j, guard) => {
-        const $guard = $(guard);
-        if ($guard.data("position") === "start") {
-          $container.prepend($guard);
-        } else {
-          $container.append($guard);
-        }
-      });
-
-      return;
-    }
-
-    // Add guards at the start and end of the document and attach their focus
-    // listeners
-    const $startGuard = createFocusGuard("start");
-    const $endGuard = createFocusGuard("end");
-
-    $container.prepend($startGuard);
-    $container.append($endGuard);
-
-    $startGuard.on("focus", () => handleContainerFocus($container, $startGuard));
-    $endGuard.on("focus", () => handleContainerFocus($container, $endGuard));
+    window.focusGuard.trap(dialog);
   });
 };

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

@@ -1,15 +1,21 @@
 /* global jest, global */
 
+// Custom visibility check for the tests because the of because the elements do
+// not have offsetWidth or offsetHeight during the tests which are checked
+// against to see whether the element is visible or not. This is also how jQuery
+// behaves internally.
+const isElementVisible = (element) => {
+  const display = global.window.getComputedStyle(element).display;
+  return ["inline", "block", "inline-block"].includes(display);
+}
+
 // Mock jQuery because the visibility indicator works differently within jest.
 // This fixes jQuery reporting $(".element").is(":visible") correctly during the
 // tests and within foundation, too.
 jest.mock("jquery", () => {
   const jq = jest.requireActual("jquery");
 
-  jq.expr.pseudos.visible = (elem) => {
-    const display = global.window.getComputedStyle(elem).display;
-    return ["inline", "block", "inline-block"].includes(display);
-  };
+  jq.expr.pseudos.visible = isElementVisible;
 
   return jq;
 });
@@ -17,6 +23,7 @@ jest.mock("jquery", () => {
 import $ from "jquery"; // eslint-disable-line id-length
 import "foundation-sites";
 
+import FocusGuard from "./focus_guard.js";
 import dialogMode from "./dialog_mode.js";
 
 describe("dialogMode", () => {
@@ -54,6 +61,12 @@ describe("dialogMode", () => {
     </div>
   `;
 
+  window.focusGuard = new FocusGuard(document.body);
+
+  // Mock the isVisible element because the default visibility check does not
+  // work during the tests.
+  jest.spyOn(window.focusGuard, "isVisible").mockImplementation(isElementVisible);
+
   beforeEach(() => {
     $("body").html(content);
 

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

@@ -33,15 +33,15 @@ $(() => {
   $(document).on("click", ".diff-view-by a.diff-view-html", (event) => {
     event.preventDefault();
     const $target = $(event.target);
-    $target.parents(".is-dropdown-submenu-parent").find("#diff-view-selected").text($target.text());
+    $target.parents(".is-dropdown-submenu-parent").find("#diff-view-html-selected").text($target.text());
     const $visibleDiffViewsId = $allDiffViews.not(".hide").first().attr("id").split("_").slice(1, -1).join("_");
     const $visibleDiffViews = $allDiffViews.filter(`[id*=${$visibleDiffViewsId}]`)
 
-    if ($target.attr("id") === "escaped-html") {
+    if ($target.attr("id") === "diff-view-escaped-html") {
       $visibleDiffViews.filter("[id$=_unescaped]").addClass("hide");
       $visibleDiffViews.filter("[id$=_escaped]").removeClass("hide");
     }
-    if ($target.attr("id") === "unescaped-html") {
+    if ($target.attr("id") === "diff-view-unescaped-html") {
       $visibleDiffViews.filter("[id$=_escaped]").addClass("hide");
       $visibleDiffViews.filter("[id$=_unescaped]").removeClass("hide");
     }

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

@@ -13,6 +13,7 @@ export default function fixDropdownMenus() {
     // user to focus on the li element instead of the <a> element where we
     // actually need the focus to be in.
     $("li.is-dropdown-submenu-parent", element).removeAttr("aria-haspopup").removeAttr("aria-label");
+    $("li.is-dropdown-submenu-parent > a:first", element).removeAttr("aria-label");
     // Foundation marks the wrong role for the submenu elements
     $("ul.is-dropdown-submenu", element).attr("role", "menu");
   })

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

@@ -0,0 +1,142 @@
+import { Keyboard } from "foundation-sites"
+
+const focusGuardClass = "focusguard";
+const focusableNodes = ["A", "IFRAME", "OBJECT", "EMBED"];
+const focusableDisableableNodes = ["BUTTON", "INPUT", "TEXTAREA", "SELECT"];
+
+export default class FocusGuard {
+  constructor(container) {
+    this.container = container;
+    this.guardedElement = null;
+  }
+
+  trap(element) {
+    if (this.guardedElement) {
+      Keyboard.releaseFocus($(this.guardedElement));
+    }
+
+    this.enable();
+    this.guardedElement = element;
+
+    // Call the release focus first so that we don't 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));
+    Keyboard.trapFocus($(element));
+  }
+
+  enable() {
+    // Check if the guards already exists due to some other dialog
+    const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
+    if (guards.length > 0) {
+      // Make sure the guards are the first and last element as there have
+      // been changes in the DOM.
+      guards.forEach((guard) => {
+        if (guard.dataset.position === "start") {
+          this.container.prepend(guard);
+        } else {
+          this.container.append(guard);
+        }
+      })
+
+      return;
+    }
+
+    // Add guards at the start and end of the document and attach their focus
+    // listeners
+    const startGuard = this.createFocusGuard("start");
+    const endGuard = this.createFocusGuard("end");
+
+    this.container.prepend(startGuard);
+    this.container.append(endGuard);
+
+    startGuard.addEventListener("focus", () => this.handleContainerFocus(startGuard));
+    endGuard.addEventListener("focus", () => this.handleContainerFocus(endGuard));
+  }
+
+  disable() {
+    const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
+    guards.forEach((guard) => guard.remove());
+
+    if (this.guardedElement) {
+      // 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 = null;
+    }
+  }
+
+  createFocusGuard(position) {
+    const guard = document.createElement("div");
+    guard.className = focusGuardClass;
+    guard.dataset.position = position;
+    guard.tabIndex = 0;
+    guard.setAttribute("aria-hidden", "true");
+
+    return guard;
+  };
+
+  handleContainerFocus(guard) {
+    if (!this.guardedElement) {
+      guard.blur();
+      return;
+    }
+
+    const visibleNodes = Array.from(this.guardedElement.querySelectorAll("*")).filter((item) => {
+      return this.isVisible(item);
+    });
+
+    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])) {
+          target = visibleNodes[ind];
+          break;
+        }
+      }
+    } else {
+      // Focus at the end guard, so focus the first focusable element after that
+      for (let ind = visibleNodes.length - 1; ind >= 0; ind -= 1) {
+        if (!this.isFocusGuard(visibleNodes[ind]) && this.isFocusable(visibleNodes[ind])) {
+          target = visibleNodes[ind];
+          break;
+        }
+      }
+    }
+
+    if (target) {
+      target.focus();
+    } else {
+      // If no focusable element was found, blur the guard focus
+      guard.blur();
+    }
+  };
+
+  isVisible(element) {
+    return element.offsetWidth > 0 || element.offsetHeight > 0;
+  }
+
+  isFocusGuard(element) {
+    return element.classList.contains(focusGuardClass);
+  }
+
+  isFocusable(element) {
+    if (focusableNodes.indexOf(element.nodeName) > -1) {
+      return true;
+    }
+    if (focusableDisableableNodes.indexOf(element.nodeName) > -1 || element.getAttribute("contenteditable")) {
+      if (element.getAttribute("disabled")) {
+        return false;
+      }
+      return true;
+    }
+
+    const tabindex = parseInt(element.getAttribute("tabindex"), 10);
+    if (!isNaN(tabindex) && tabindex >= 0) {
+      return true;
+    }
+
+    return false;
+  }
+}

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

@@ -279,6 +279,7 @@ export default class FormFilterComponent {
 
     Rails.fire(this.$form[0], "submit");
     pushState(newPath, newState);
+    this._saveFilters(newPath);
   }
 
   /**
@@ -315,5 +316,20 @@ export default class FormFilterComponent {
   _getUID() {
     return `filter-form-${new Date().setUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
   }
-}
 
+  /**
+   * Saves the changed filters on sessionStorage API.
+   * @private
+   * @param {string} pathWithQueryStrings - path with all the query strings for filter. To be used with backToListLink().
+   * @returns {Void} - Returns nothing.
+   */
+  _saveFilters(pathWithQueryStrings) {
+    if (!window.sessionStorage) {
+      return;
+    }
+
+    const pathName = this.$form.attr("action");
+    sessionStorage.setItem("filteredParams", JSON.stringify({[pathName]: pathWithQueryStrings}));
+  }
+
+}

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

@@ -0,0 +1,38 @@
+import Rails from "@rails/ujs";
+
+// Make the remote form submit buttons disabled when the form is being
+// submitted to avoid multiple submits.
+document.addEventListener("ajax:beforeSend", (ev) => {
+  if (!ev.target.matches("form[data-remote]")) {
+    return;
+  }
+
+  ev.target.querySelectorAll("[type=submit]").forEach((submit) => {
+    submit.disabled = true;
+  });
+});
+document.addEventListener("ajax:complete", (ev) => {
+  if (!ev.target.matches("form[data-remote]")) {
+    return;
+  }
+
+  ev.target.querySelectorAll("[type=submit]").forEach((submit) => {
+    submit.disabled = false;
+  });
+});
+
+// The forms that are attached to Foundation Abide do not work properly with
+// Rails UJS Ajax forms that have the `data-remote` attribute attached to
+// them. The reason is that in case Foundation Abide sees the form as valid,
+// it will submit it normally bypassing the Rails UJS functionality.
+// The submit events happens through jQuery in Foundation Abide which is why
+// we need to bind the event with jQuery.
+$(document).on("submit", "form[data-remote][data-abide]", (ev) => {
+  ev.preventDefault();
+
+  if (ev.target.querySelectorAll("[data-invalid]").length > 0) {
+    return;
+  }
+
+  Reflect.apply(Rails.handleRemote, ev.target, [ev]);
+});

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

@@ -14,6 +14,8 @@ import DataPicker from "src/decidim/data_picker"
 import FormFilterComponent from "src/decidim/form_filter"
 import addInputEmoji from "src/decidim/input_emoji"
 import dialogMode from "src/decidim/dialog_mode"
+import FocusGuard from "src/decidim/focus_guard"
+import backToListLink from "src/decidim/back_to_list"
 
 window.Decidim = window.Decidim || {};
 window.Decidim.config = new Configuration()
@@ -26,12 +28,23 @@ window.Decidim.addInputEmoji = addInputEmoji;
 
 $(() => {
   window.theDataPicker = new DataPicker($(".data-picker"));
+  window.focusGuard = new FocusGuard(document.querySelector("body"));
 
   $(document).foundation();
   $(document).on("open.zf.reveal", (ev) => {
     dialogMode($(ev.target));
   });
 
+  // Trap the focus within the mobile menu if the user enters it. This is an
+  // accessibility feature forcing the focus within the offcanvas container
+  // which holds the mobile menu.
+  $("#offCanvas").on("openedEnd.zf.offCanvas", (ev) => {
+    ev.target.querySelector(".main-nav a").focus();
+    window.focusGuard.trap(ev.target);
+  }).on("closed.zf.offCanvas", () => {
+    window.focusGuard.disable();
+  });
+
   fixDropdownMenus();
 
   svg4everybody();
@@ -70,4 +83,6 @@ $(() => {
   updateExternalDomainLinks($("body"))
 
   addInputEmoji()
+
+  backToListLink(document.querySelectorAll(".js-back-to-list"));
 });

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

@@ -95,6 +95,9 @@ export default class InputCharacterCounter {
       if (remaining === 1) {
         message = MESSAGES.charactersLeft.one;
       }
+      this.$input[0].dispatchEvent(
+        new CustomEvent("characterCounter", {detail: {remaining: remaining}})
+      );
       showMessages.push(message.replace(COUNT_KEY, remaining));
     }
 
@@ -118,4 +121,4 @@ $(() => {
   });
 });
 
-export { InputCharacterCounter, createCharacterCounter };
+export {InputCharacterCounter, createCharacterCounter};

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

@@ -1,4 +1,4 @@
-import { EmojiButton } from "@joeattardi/emoji-button";
+import {EmojiButton} from "@joeattardi/emoji-button";
 
 // eslint-disable-next-line require-jsdoc
 export default function addInputEmoji() {
@@ -23,15 +23,38 @@ export default function addInputEmoji() {
       wrapper.className = "emoji__container"
       const btnContainer = document.createElement("div");
       btnContainer.className = "emoji__trigger"
-      btnContainer.innerHTML = '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>'
+      const btn = document.createElement("div");
+      btn.className = "emoji__button"
+      btn.innerHTML = '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>'
 
-      elem.parentNode.insertBefore(wrapper, elem);
+      const parent = elem.parentNode;
+      parent.insertBefore(wrapper, elem);
       wrapper.appendChild(elem);
       wrapper.appendChild(btnContainer);
+      btnContainer.appendChild(btn);
 
-      btnContainer.addEventListener("click", () => picker.togglePicker(btnContainer))
+      // The form errors need to be in the same container with the field they
+      // belong to for Foundation Abide to show them automatically.
+      parent.querySelectorAll(".form-error").forEach((el) => wrapper.appendChild(el));
 
-      picker.on("emoji", ({ emoji }) => {
+      let handlerPicker = function () {
+        picker.togglePicker(btnContainer);
+      }
+
+      btnContainer.addEventListener("click", handlerPicker);
+
+      elem.addEventListener("characterCounter", (event) => {
+        if (event.detail.remaining >= 4) {
+          btnContainer.addEventListener("click", handlerPicker);
+          btnContainer.removeAttribute("style");
+        } else {
+          btnContainer.removeEventListener("click", handlerPicker);
+          btnContainer.setAttribute("style", "color:lightgrey");
+        }
+      });
+
+
+      picker.on("emoji", ({emoji}) => {
         elem.value += ` ${emoji} `
 
         const event = new Event("emoji.added");

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

@@ -1,6 +1,20 @@
 /* eslint no-unused-vars: 0 */
 import Tribute from "src/decidim/vendor/tribute"
 
+const updateSubmitButton = ($fieldContainer, $selectedItems) => {
+  const $form = $fieldContainer.closest("form");
+  if ($form.length < 1) {
+    return;
+  }
+
+  const $submitButton = $form.find("button[type='submit']");
+  if ($selectedItems.children().length === 0) {
+    $submitButton.prop("disabled", true);
+  } else {
+    $submitButton.prop("disabled", false);
+  }
+}
+
 $(() => {
   const $multipleMentionContainer = $(".js-multiple-mentions");
   const $multipleMentionRecipientsContainer = $(".js-multiple-mentions-recipients");
@@ -113,6 +127,7 @@ $(() => {
         $(this).find("div").attr("tabIndex", 0).attr("aria-controls", 0).attr("aria-label", "Close").attr("role", "tab");
       });
 
+      updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
       // Clean input
       return "";
     },
@@ -137,6 +152,8 @@ $(() => {
   });
 
   let setupEvents = function($element) {
+    updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
+
     // DOM manipulation
     $element.on("focusin", (event) => {
       // Set the parent container relative to the current element
@@ -172,6 +189,7 @@ $(() => {
       let $target = event.target.parentNode;
       if ($target.tagName === "LABEL") {
         deleteRecipient($target);
+        updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
       }
     });
     // Allow delete with keypress on element in recipients list
@@ -179,6 +197,7 @@ $(() => {
       let $target = event.target.parentNode;
       if ($target.tagName === "LABEL") {
         deleteRecipient($target);
+        updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
       }
     });
   };