decidim-core 0.26.2 → 0.27.0.rc1

data/app/packs/src/decidim/direct_uploads/upload_utility.js

@@ -0,0 +1,49 @@
+export const checkTitles = (parentElement, saveButton) => {
+  let everyItemHasTitle = true;
+
+  Array.from(parentElement.children).forEach((item) => {
+    const title = item.querySelector("input[type='text']").value;
+    const noTitleErrorSpan = item.querySelector(".no-title-error");
+    if (!title || title.length === 0) {
+      everyItemHasTitle = false;
+      saveButton.disabled = true;
+      noTitleErrorSpan.classList.add("is-visible");
+      item.appendChild(noTitleErrorSpan);
+    } else {
+      noTitleErrorSpan.classList.remove("is-visible");
+    }
+  });
+
+  if (everyItemHasTitle) {
+    saveButton.disabled = false;
+  }
+}
+
+export const truncateFilename = (filename, maxLength = 31) => {
+  if (filename.length <= maxLength) {
+    return filename;
+  }
+
+  const charactersFromBegin = Math.floor(maxLength / 2) - 3;
+  const charactersFromEnd = maxLength - charactersFromBegin - 3;
+  return `${filename.slice(0, charactersFromBegin)}...${filename.slice(-charactersFromEnd)}`;
+}
+
+export const createHiddenInput = (elClasses, elName, elValue) => {
+  const el = document.createElement("input");
+  el.type = "hidden";
+  if (elClasses) {
+    if (typeof (elClasses) === "string") {
+      el.className = elClasses;
+    } else {
+      el.className = elClasses.join(" ")
+    }
+  }
+  if (elName) {
+    el.name = elName;
+  }
+  if (elValue) {
+    el.value = elValue;
+  }
+  return el;
+}

data/app/packs/src/decidim/direct_uploads/uploader.js

@@ -0,0 +1,89 @@
+import { DirectUpload } from "@rails/activestorage";
+
+export class Uploader {
+  constructor(modal, uploadItem, options) {
+    this.modal = modal;
+    this.uploadItem = uploadItem;
+    this.progressBar = uploadItem.querySelector(".progress-bar");
+    this.validationSent = false;
+    this.fileTooBig = false;
+    if (modal.options.maxFileSize && options.file.size > modal.options.maxFileSize) {
+      this.fileTooBig = true;
+      this.showError([modal.locales.file_size_too_large]);
+    } else {
+      this.upload = new DirectUpload(options.file, options.url, this);
+    }
+  }
+
+  showError(errors) {
+    this.progressBar.classList.add("filled");
+    this.progressBar.innerHTML = this.modal.locales.validation_error;
+    this.uploadItem.dataset.state = "error";
+    const errorList = this.uploadItem.querySelector(".upload-errors");
+    errors.forEach((error) => {
+      const errorItem = document.createElement("li");
+      errorItem.classList.add("form-error", "is-visible");
+      errorItem.innerHTML = error;
+      errorList.appendChild(errorItem);
+    })
+  }
+
+  validate(blobId) {
+    const callback = (data) => {
+      let errors = []
+      for (const [, value] of Object.entries(data)) {
+        errors = errors.concat(value);
+      }
+
+      this.progressBar.style.justifyContent = "center";
+      if (errors.length === 0) {
+        this.progressBar.innerHTML = this.modal.locales.uploaded;
+        this.uploadItem.dataset.state = "validated";
+      } else {
+        this.showError(errors);
+      }
+      this.progressBar.classList.add("filled");
+    }
+
+    if (!this.validationSent) {
+      let property = this.modal.options.addAttribute;
+      if (this.modal.options.titled) {
+        property = "file"
+      }
+      const params = new URLSearchParams({
+        resourceClass: this.modal.options.resourceClass,
+        property: property,
+        blob: blobId,
+        formClass: this.modal.options.formObjectClass
+      });
+
+      fetch(`/upload_validations?${params.toString()}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": $("meta[name=csrf-token]").attr("content")
+        }
+      }).then((response) => response.json()).then((data) => {
+        callback(data);
+      });
+      this.validationSent = true;
+    }
+  }
+
+  directUploadWillStoreFileWithXHR(request) {
+    request.upload.addEventListener("progress", (event) => {
+      const progress = Math.floor(event.loaded / event.total * 100);
+      let width = "15%";
+      if (progress > 15) {
+        width = `${progress}%`;
+      }
+      this.progressBar.style.width = width;
+
+      if (progress === 100) {
+        this.progressBar.innerHTML = this.modal.locales.validating;
+        return;
+      }
+      this.progressBar.innerHTML = `${progress}%`;
+    });
+  }
+}

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

@@ -9,7 +9,7 @@ export default function updateExternalDomainLinks($target) {
 
   $("a", $target).filter((_i, link) => {
     const $link = $(link);
-    if (!$link[0].hasAttribute("href") || $link.parents(".ql-editor").length > 0) {
+    if (!$link[0].hasAttribute("href") || $link.parents(".editor-container").length > 0) {
       return false;
     }
 

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

@@ -42,13 +42,24 @@ export default class ExternalLink {
       return;
     }
 
-    this.$link.addClass("external-link-container");
+    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.text().trim().length < 1) {
+    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 = "";
     }
-    this.$link.append(`${spacer}${this.generateElement()}`);
+
+    $target.append(`${spacer}${this.generateElement()}`);
   }
 
   generateElement() {

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

@@ -0,0 +1,64 @@
+import $ from "jquery"; // eslint-disable-line id-length
+
+import ExternalLink from "./external_link";
+
+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>
+    </div>
+  `;
+
+  const config = {
+    "icons_path": "/path/to/icons.svg"
+  };
+  window.Decidim = {
+    config: {
+      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>';
+
+  beforeEach(() => {
+    $("body").html(content);
+    $('a[target="_blank"]').each((_i, elem) => {
+      const $link = $(elem);
+      $link.data("external-link", new ExternalLink($link));
+    });
+  });
+
+  it("adds the external link indicator to the normal 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>`
+    );
+  });
+
+  it("adds the external link indicator without a spacer to the image link", () => {
+    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>`
+    );
+  });
+});

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

@@ -1,43 +1,20 @@
-import Tribute from "src/decidim/vendor/tribute"
+import AutoComplete from "src/decidim/autocomplete";
 
 $(() => {
   $("[data-decidim-geocoding]").each((_i, el) => {
     const $input = $(el);
-    const $fieldContainer = $input.parent();
 
-    $fieldContainer.addClass("has-tribute");
-
-    const tribute = new Tribute(
-      {
-        autocompleteMode: true,
-        // autocompleteSeparator: / \+ /, // See below, requires Tribute update
-        allowSpaces: true,
-        positionMenu: false,
-        replaceTextSuffix: "",
-        menuContainer: $fieldContainer.get(0),
-        noMatchTemplate: null,
-        values: (text, cb) => {
-          $input.trigger("geocoder-suggest.decidim", [text, cb]);
-        }
+    const autoComplete = new AutoComplete(el, {
+      mode: "single",
+      dataMatchKeys: ["value"],
+      dataSource: (query, callback) => {
+        $input.trigger("geocoder-suggest.decidim", [query, callback]);
       }
-    );
-
-    // Port https://github.com/zurb/tribute/pull/406
-    // This changes the autocomplete separator from space to " + " so that
-    // we can do searches such as "streetname 4" including a space. Otherwise
-    // this would do two separate searches for "streetname" and "4".
-    tribute.range.getLastWordInText = (text) => {
-      const final = text.replace(/\u00A0/g, " ");
-      const wordsArray = final.split(/ \+ /);
-      const worldsCount = wordsArray.length - 1;
-
-      return wordsArray[worldsCount].trim();
-    };
-
-    tribute.attach($input.get(0));
+    });
+    el.addEventListener("selection", autoComplete);
 
-    $input.on("tribute-replaced", function(ev) {
-      const selectedItem = ev.detail.item.original;
+    $input.on("selection", (event) => {
+      const selectedItem = event.detail.selection.value;
       $input.trigger("geocoder-suggest-select.decidim", [selectedItem]);
 
       // Not all geocoding autocomplete APIs include the coordinates in the
@@ -48,7 +25,5 @@ $(() => {
         $input.trigger("geocoder-suggest-coordinates.decidim", [selectedItem.coordinates]);
       }
     });
-
-    $input.data("geocoder-tribute", tribute);
   });
 });

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

@@ -1,6 +1,6 @@
 /**
  * Makes the #select-identity-button to open a popup for the user to
- * select with which identity he wants to perform an action.
+ * select with which identity they want to perform an action.
  *
  */
 $(() => {

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

@@ -1,11 +1,11 @@
-import moment from "moment"
+import dayjs from "dayjs"
 
 $(() => {
   const $impersonationWarning = $(".impersonation-warning");
   if ($impersonationWarning.length) {
-    const endsAt = moment($impersonationWarning.data("session-ends-at"));
+    const endsAt = dayjs($impersonationWarning.data("session-ends-at"));
     const exitInterval = setInterval(() => {
-      const diff = (endsAt - moment()) / 60000;
+      const diff = (endsAt - dayjs()) / 60000;
       const diffInMinutes = Math.round(diff);
       $impersonationWarning.find(".minutes").html(diffInMinutes);
 

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));
+  }
 }
 
 $(() => {