decidim-core 0.26.4 → 0.27.0.rc1

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

@@ -1,4 +1,14 @@
 const COUNT_KEY = "%count%";
+// How often SR announces the message in relation to maximum characters. E.g.
+// if max characters is 1000, screen reader announces the remaining characters
+// every 100 (= 0.1 * 1000) characters. This will be "floored" to the closest
+// 100 if the maximum characters > 100. E.g. if max characters is 5500, the
+// threshold is 500 (= Math.floor(550 / 100) * 100). With 100 or less
+// characters, this ratio is omitted and the announce threshold is always set to
+// 10.
+const SR_ANNOUNCE_THRESHOLD_RATIO = 0.1;
+// The number of characters left after which every keystroke will be announced.
+const SR_ANNOUNCE_EVERY_THRESHOLD = 10;
 const DEFAULT_MESSAGES = {
   charactersAtLeast: {
     one: `at least ${COUNT_KEY} character`,
@@ -21,15 +31,35 @@ export default class InputCharacterCounter {
     this.$target = $(this.$input.data("remaining-characters"));
     this.minCharacters = parseInt(this.$input.attr("minlength"), 10);
     this.maxCharacters = parseInt(this.$input.attr("maxlength"), 10);
+    this.describeByCounter = typeof this.$input.attr("aria-describedby") === "undefined";
 
-    if (this.$target.length < 1) {
-      let targetId = null;
+    // Define the closest length for the input "gaps" defined by the threshold.
+    if (this.maxCharacters > 10) {
+      if (this.maxCharacters > 100) {
+        this.announceThreshold = Math.floor(this.maxCharacters * SR_ANNOUNCE_THRESHOLD_RATIO / 100) * 100;
+      } else {
+        this.announceThreshold = 10;
+      }
+
+      // The number of characters left after which every keystroke will be announced.
+      this.announceEveryThreshold = SR_ANNOUNCE_EVERY_THRESHOLD;
+    } else {
+      this.announceThreshold = 1;
+      this.announceEveryThreshold = 1;
+    }
+
+    let targetId = this.$target.attr("id");
+    if (typeof targetId === "undefined") {
       if (this.$input.attr("id") && this.$input.attr("id").length > 0) {
         targetId = `${this.$input.attr("id")}_characters`;
       } else {
         targetId = `characters_${Math.random().toString(36).substr(2, 9)}`;
       }
+    }
 
+    if (this.$target.length > 0) {
+      this.$target.attr("id", targetId)
+    } else {
       this.$target = $(`<span id="${targetId}" class="form-input-extra-before" />`)
 
       // If input is a hidden for WYSIWYG editor add it at the end
@@ -48,11 +78,35 @@ export default class InputCharacterCounter {
       }
     }
 
+    this.updateInputLength();
+    this.previousInputLength = this.inputLength;
+
     if (this.$target.length > 0 && (this.maxCharacters > 0 || this.minCharacters > 0)) {
+      // Create the screen reader target element. We don't want to constantly
+      // announce every change to screen reader, only occasionally.
+      this.$srTarget = $(
+        `<span role="status" id="${targetId}_sr" class="show-for-sr remaining-character-count-sr" />`
+      );
+      this.$target.before(this.$srTarget);
+      this.$target.attr("aria-hidden", "true");
+      this.setDescribedBy(true);
+
       this.bindEvents();
     }
   }
 
+  setDescribedBy(active) {
+    if (!this.describeByCounter) {
+      return;
+    }
+
+    if (active) {
+      this.$input.attr("aria-describedby", this.$srTarget.attr("id"));
+    } else {
+      this.$input.removeAttr("aria-describedby");
+    }
+  }
+
   bindEvents() {
     // In WYSIWYG editors (Quill) we need to find the active editor from the
     // DOM node. Quill has the experimental "find" method that should work
@@ -69,17 +123,109 @@ export default class InputCharacterCounter {
     this.$input.on("keyup", () => {
       this.updateStatus();
     });
+    this.$input.on("input", () => {
+      this.updateInputLength();
+      this.checkScreenReaderUpdate();
+      // If the input is "described by" the character counter, some screen
+      // readers (NVDA) announce the status twice when it is updated. By
+      // removing the aria-describedby attribute while the user is typing makes
+      // the screen reader announce the status only once.
+      this.setDescribedBy(false);
+    });
+    this.$input.on("focus", () => {
+      this.updateScreenReaderStatus();
+    });
+    this.$input.on("blur", () => {
+      this.updateScreenReaderStatus();
+      this.setDescribedBy(true);
+    });
     if (this.$input.get(0) !== null) {
       this.$input.get(0).addEventListener("emoji.added", () => {
         this.updateStatus();
       });
     }
     this.updateStatus();
+    this.updateScreenReaderStatus();
   }
 
-  updateStatus() {
-    const numCharacters = this.$input.val().length;
+  getInputLength() {
+    return this.inputLength;
+  }
+
+  updateInputLength() {
+    this.previousInputLength = this.inputLength;
+    this.inputLength = this.$input.val().length;
+  }
+
+  /**
+   * This compares the current inputLength to the previous value and decides
+   * whether the user is currently adding or deleting characters from the view.
+   *
+   * @returns {String} The input direction either "ins" for insert or "del" for
+   *   delete.
+   */
+  getInputDirection() {
+    if (this.inputLength < this.previousInputLength) {
+      return "del";
+    }
+
+    return "ins";
+  }
+
+  getScreenReaderLength() {
+    const currentLength = this.getInputLength();
+    if (this.maxCharacters < 10) {
+      return currentLength;
+    } else if (this.maxCharacters - currentLength <= this.announceEveryThreshold) {
+      return currentLength;
+    }
+
+    const srLength = currentLength - currentLength % this.announceThreshold;
+
+    // Prevent the screen reader telling too many characters left if the user
+    // deletes a characters. This can cause confusing experience e.g. when the
+    // user is closing the maximum amount of characters, so if the previous
+    // announcement was "10 characters left" and the user removes one character,
+    // the screen reader would announce "100 characters left" next time (when
+    // they actually have only 11 characters left). Similar when they are
+    // deleting a character at 900 characters, the screen reader would announce
+    // "1000 characters left" even when they only have 901 characters left.
+    if (this.getInputDirection() === "del") {
+      // The first branch makes sure that if the SR length matches the actual
+      // length, it will be always announced.
+      if (srLength === currentLength) {
+        return srLength;
+      // The second branch checks that if we are at the final threshold, we
+      // should not announce "0 characters left" when the user deletes more than
+      // the "announce after every stroke" limit (this.announceEveryThreshold).
+      } else if (this.maxCharacters - srLength === this.announceThreshold) {
+        return this.announcedAt || currentLength;
+      // The third branch checks that when deleting characters, we should
+      // announce the next threshold to get accurate annoucement. E.g. when we
+      // have 750 characters left and the user deletes 100 characters at once,
+      // we should announce "700 characters left" after that deletion.
+      } else if (srLength < currentLength) {
+        return srLength + this.announceThreshold;
+      }
+    // This fixes an issue in the following situation:
+    // 1. 750 characters left
+    // 2. Delete 100 characters in a row
+    // 3. SR: "800 characters left" (actual 850)
+    // 4. Type one additional character
+    // 5. Without this, SR would announce "900 characters left" = confusing
+    } else if (srLength < this.announcedAt) {
+      return this.announcedAt;
+    }
+
+    return srLength;
+  }
+
+  getMessages(currentLength = null) {
     const showMessages = [];
+    let inputLength = currentLength;
+    if (inputLength === null) {
+      inputLength = this.getInputLength()
+    }
 
     if (this.minCharacters > 0) {
       let message = MESSAGES.charactersAtLeast.other;
@@ -90,7 +236,7 @@ export default class InputCharacterCounter {
     }
 
     if (this.maxCharacters > 0) {
-      const remaining = this.maxCharacters - numCharacters;
+      const remaining = this.maxCharacters - inputLength;
       let message = MESSAGES.charactersLeft.other;
       if (remaining === 1) {
         message = MESSAGES.charactersLeft.one;
@@ -101,12 +247,36 @@ export default class InputCharacterCounter {
       showMessages.push(message.replace(COUNT_KEY, remaining));
     }
 
-    this.$target.text(showMessages.join(", "));
+    return showMessages;
+  }
+
+  updateStatus() {
+    this.$target.text(this.getMessages().join(", "));
+  }
+
+  checkScreenReaderUpdate() {
+    if (this.maxCharacters < 1) {
+      return;
+    }
+
+    const currentLength = this.getScreenReaderLength();
+    if (currentLength === this.announcedAt) {
+      return;
+    }
+
+    this.announcedAt = currentLength;
+    this.updateScreenReaderStatus(currentLength);
+  }
+
+  updateScreenReaderStatus(currentLength = null) {
+    this.$srTarget.text(this.getMessages(currentLength).join(", "));
   }
 }
 
 const createCharacterCounter = ($input) => {
-  $input.data("remaining-characters-counter", new InputCharacterCounter($input));
+  if (typeof $input !== "undefined" && $input.length) {
+    $input.data("remaining-characters-counter", new InputCharacterCounter($input));
+  }
 }
 
 $(() => {

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

@@ -1,5 +1,4 @@
-/* eslint no-unused-vars: 0 */
-import Tribute from "src/decidim/vendor/tribute"
+import AutoComplete from "src/decidim/autocomplete";
 
 const updateSubmitButton = ($fieldContainer, $selectedItems) => {
   const $form = $fieldContainer.closest("form");
@@ -16,200 +15,101 @@ const updateSubmitButton = ($fieldContainer, $selectedItems) => {
 }
 
 $(() => {
-  const $multipleMentionContainer = $(".js-multiple-mentions");
-  const $multipleMentionRecipientsContainer = $(".js-multiple-mentions-recipients");
-  const nodatafound = $multipleMentionContainer.attr("data-noresults");
-  const directMessageDisabled = $multipleMentionContainer.attr("data-direct-messages-disabled");
-
-  const maxRecipients = 9;
-  let mentionsCount = 0;
-
-  /* eslint no-unused-vars: 0 */
-  let deleteRecipient = function(element) {
-    // Remove recipient
-    element.remove();
-    mentionsCount -= 1;
-    // In case mentions container disable, enable again
-    if ($multipleMentionContainer.prop("disabled")) {
-      $multipleMentionContainer.prop("disabled", false);
-    }
-  };
-
-  let noMatchTemplate = null
-  if (nodatafound) {
-    noMatchTemplate = () => `<li>${nodatafound}</li>`;
+  const $fieldContainer = $(".multiple-mentions");
+  if ($fieldContainer.length < 1) {
+    return;
   }
 
-  // Returns a function, that, as long as it continues to be invoked, will not
-  // be triggered. The function will be called after it stops being called for
-  // N milliseconds
-  /* eslint no-invalid-this: 0 */
-  /* eslint consistent-this: 0 */
-  /* eslint prefer-reflect: 0 */
-  const debounce = function(callback, wait) {
-    let timeout = null;
-    return (...args) => {
-      const context = this;
-      clearTimeout(timeout);
-      timeout = setTimeout(() => callback.apply(context, args), wait);
-    };
+  const allMessages = window.Decidim.config.get("messages");
+  const messages = allMessages.mentionsModal || {};
+
+  const $searchInput = $("input", $fieldContainer);
+  const $selectedItems = $(`ul.${$searchInput.data().selected}`);
+  const options = $fieldContainer.data();
+  let selected = [];
+  const iconsPath = window.Decidim.config.get("icons_path");
+  const removeLabel = messages.removeRecipient || "Remove recipient %name%";
+
+  let emptyFocusElement = $fieldContainer[0].querySelector(".empty-list");
+  if (!emptyFocusElement) {
+    emptyFocusElement = document.createElement("div");
+    emptyFocusElement.tabIndex = "-1";
+    emptyFocusElement.className = "empty-list";
+    $selectedItems.before(emptyFocusElement);
   }
 
-  /* eslint no-use-before-define: ["error", { "variables": false }]*/
-  /* eslint no-unused-expressions: 0 */
-  let remoteSearch = function(text, cb) {
-    let exclusionIds = [];
-    $multipleMentionRecipientsContainer.find("input[name^='recipient_id']").each(function(index) {
-      exclusionIds.push($(this).val());
-    });
-    let query = `{users(filter:{wildcard:"${text}",excludeIds:[${exclusionIds}]}){id,nickname,name,avatarUrl,__typename,...on UserGroup{membersCount},...on User{directMessagesEnabled}}}`;
-    $.post("/api", {query: query}).
-      then((response) => {
-        let data = response.data.users || {};
-        cb(data)
-      }).fail(function() {
-        cb([])
-      }).always(() => {
-      // This function runs Tribute every single time you type something
-      // So we must evalute DOM properties after each
-        const $parent = $(tribute.current.element).parent();
-        $parent.addClass("is-active");
-
-        // We need to move the container to the wrapper selected
-        const $tribute = $parent.find(".tribute-container");
-        // Remove the inline styles, relative to absolute positioning
-        $tribute.removeAttr("style");
-      })
-  };
-
-  // tribute.js docs - http://github.com/zurb/tribute
-  /* global Tribute*/
-  /* eslint multiline-ternary: 0 */
-  /* eslint no-ternary: 0 */
-  let tribute = new Tribute({
-    autocompleteMode: true,
-    // avoid overloading the API if the user types too fast
-    values: debounce(function (text, cb) {
-      remoteSearch(text, (users) => cb(users));
-    }, 250),
-    positionMenu: true,
-    menuContainer: null,
-    menuItemLimit: 10,
-    fillAttr: "nickname",
-    noMatchTemplate: noMatchTemplate,
-    lookup: (item) => item.nickname + item.name,
-    selectTemplate: function(item) {
-      mentionsCount += 1;
-      if (mentionsCount >= maxRecipients) {
-        $multipleMentionContainer.prop("disabled", true);
-      }
-      if (typeof item === "undefined") {
-        return null;
-      }
-      // Set recipient profile view
-      let recipientLabel = `
-        <label style="padding: 0 0 10px 0">
-          <img src="${item.original.avatarUrl}" alt="${item.original.name}" height="35" width="35" style="border-radius: 50%;" aria-label="${item.original.name}">&nbsp;
-          <b>${item.original.name}</b>
-          <input type="hidden" name="recipient_id[]" value="${item.original.id}">
-          <div class="float-right">&times;</div>
-        </label>
-      `;
-
-      // Append new recipient to DOM
-      if (item.original.__typename === "UserGroup" || item.original.directMessagesEnabled === "true") {
-        $multipleMentionRecipientsContainer.append($(recipientLabel));
-        $multipleMentionContainer.val("");
-      }
-
-      // In order to add tabindex accessibility control to each recipient in list
-      $multipleMentionRecipientsContainer.find("label").each(function(index) {
-        $(this).find("div").attr("tabIndex", 0).attr("aria-controls", 0).attr("aria-label", "Close").attr("role", "tab");
+  updateSubmitButton($fieldContainer, $selectedItems);
+  const autoComplete = new AutoComplete($searchInput[0], {
+    dataMatchKeys: ["name", "nickname"],
+    dataSource: (query, callback) => {
+      $.post("/api", {
+        "query": `
+          {
+            users(filter:{wildcard:"${query}",excludeIds:[]})
+              {
+                id,nickname,name,avatarUrl,__typename,...on UserGroup{membersCount},...on User{
+                  directMessagesEnabled
+                }
+              }
+          }`
+      }).then((response) => {
+        callback(response.data.users);
       });
-
-      updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
-      // Clean input
-      return "";
     },
-    menuItemTemplate: function(item) {
-      let svg = "";
-      let enabled = item.original.directMessagesEnabled === "true";
-      if (window.Decidim && item.original.__typename === "UserGroup") {
-        enabled = true;
-        const iconsPath = window.Decidim.config.get("icons_path");
-        svg = `<span class="is-group">${item.original.membersCount}x <svg class="icon--members icon"><use href="${iconsPath}#icon-members"/></svg></span>`;
+    dataFilter: (list) => {
+      return list.filter(
+        (item) => !selected.includes(item.value.id)
+      );
+    },
+    modifyResult: (element, value) => {
+      $(element).html(`
+        <span class="author__avatar"><img src="${value.avatarUrl}" alt="${value.name}"></span>
+        <strong>${value.nickname}</strong>
+        <small>${value.name}</small>
+      `);
+      if (value.directMessagesEnabled === "false") {
+        $(element).addClass("disabled");
+        $(element).append(`<span>${$searchInput.data().directMessagesDisabled}</span>`);
+      }
+      if (value.membersCount) {
+        $(element).append(`<span class="is-group">${value.membersCount}x <svg class="icon--members icon"><use href="${iconsPath}#icon-members"/></svg></span>`);
       }
-      let disabledElementClass = enabled ? "" : "disabled-tribute-element";
-      let disabledElementMessage = enabled ? "" : `&nbsp;<span class="disabled-tribute-element-info">${directMessageDisabled}</span>`;
-      return `<div class="tribute-item ${item.original.__typename} ${disabledElementClass}">
-      <span class="author__avatar"><img src="${item.original.avatarUrl}" alt="author-avatar"></span>
-        <strong>${item.original.nickname}</strong>
-        <small>${item.original.name}</small>
-        ${svg}
-        ${disabledElementMessage}
-      </div>`;
     }
   });
 
-  let setupEvents = function($element) {
-    updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
-
-    // DOM manipulation
-    $element.on("focusin", (event) => {
-      // Set the parent container relative to the current element
-      tribute.menuContainer = event.target.parentNode;
-    });
-    $element.on("focusout", (event) => {
-      let $parent = $(event.target).parent();
-
-      if ($parent.hasClass("is-active")) {
-        $parent.removeClass("is-active");
-      }
-    });
-    $element.on("input", (event) => {
-      let $parent = $(event.target).parent();
-
-      if (tribute.isActive) {
-        // We need to move the container to the wrapper selected
-        let $tribute = $(".tribute-container");
-        $tribute.appendTo($parent);
-        // Remove the inline styles, relative to absolute positioning
-        $tribute.removeAttr("style");
-        // Parent adaptation
-        $parent.addClass("is-active");
-      } else {
-        $parent.removeClass("is-active");
-      }
-    });
-  };
+  $searchInput.on("selection", (event) => {
+    const feedback = event.detail;
+    const selection = feedback.selection;
+    const id = selection.value.id;
+    if (selected.length >= 9 || selection.value.directMessagesEnabled === "false") {
+      return;
+    }
 
-  let setupRecipientEvents = function($element) {
-    // Allow delete with click on element in recipients list
-    $element.on("click", (event) => {
-      let $target = event.target.parentNode;
-      if ($target.tagName === "LABEL") {
-        deleteRecipient($target);
-        updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
-      }
-    });
-    // Allow delete with keypress on element in recipients list
-    $element.on("keypress", (event) => {
-      let $target = event.target.parentNode;
-      if ($target.tagName === "LABEL") {
-        deleteRecipient($target);
-        updateSubmitButton($multipleMentionContainer, $multipleMentionRecipientsContainer);
+    const label = removeLabel.replace("%name%", selection.value.name);
+    $selectedItems.append(`
+      <li tabindex="-1">
+        <input type="hidden" name="${options.name}" value="${id}">
+        <img src="${selection.value.avatarUrl}" class="author__avatar" alt="${selection.value.name}">
+        <b>${selection.value.name}</b>
+        <button type="button" class="float-right" data-remove="${id}" tabindex="0" aria-controls="0" aria-label="${label}">&times;</button>
+      </li>
+    `);
+
+    autoComplete.setInput("");
+    selected.push(id);
+    updateSubmitButton($fieldContainer, $selectedItems);
+
+    $selectedItems.find(`*[data-remove="${id}"]`).on("keypress click", (evt) => {
+      const target = evt.target.parentNode;
+      if (target.tagName === "LI") {
+        const focusElement = target.nextElementSibling || target.previousElementSibling || emptyFocusElement;
+
+        selected = selected.filter((identifier) => identifier !== id);
+        target.remove();
+
+        updateSubmitButton($fieldContainer, $selectedItems);
+        focusElement.focus();
       }
-    });
-  };
-
-  // Call only if we have containter to bind events to
-  if ($multipleMentionContainer.length) {
-    setupEvents($multipleMentionContainer);
-    tribute.attach($multipleMentionContainer);
-  }
-
-  // Call only if we have containter to bind events to
-  if ($multipleMentionRecipientsContainer.length) {
-    setupRecipientEvents($multipleMentionRecipientsContainer);
-  }
-});
+    })
+  })
+})

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

@@ -1,10 +1,11 @@
 import * as L from "leaflet";
-import { SVGIcon } from "leaflet-svgicon"
+import { SVGIcon } from "src/decidim/map/svg-icon";
 
 L.DivIcon.SVGIcon = SVGIcon;
 L.DivIcon.SVGIcon.DecidimIcon = L.DivIcon.SVGIcon.extend({
   options: {
     fillColor: "#ef604d",
+    fillOpacity: 1,
     opacity: 0
   },
   _createPathDescription: function() {