decidim-core 0.26.2 → 0.27.0.rc2

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

@@ -0,0 +1,264 @@
+import { Uploader } from "src/decidim/direct_uploads/uploader";
+import { truncateFilename, checkTitles, createHiddenInput } from "src/decidim/direct_uploads/upload_utility";
+
+// This class handles logic inside upload modal, but since modal is not inside the form
+// logic here moves "upload items" / hidden inputs to form.
+export default class UploadModal {
+  constructor(button, options = {}) {
+    // Button that opens the modal.
+    this.button = button;
+
+    // The provided options contains the options passed from the view in the
+    // `data-upload` attribute as a JSON.
+    let providedOptions = {};
+    try {
+      // The providedOptions can contain the following keys:
+      // - addAttribute - Field name / attribute of resource (e.g. avatar)
+      // - resourceName - The resource to which the attribute belongs (e.g. user)
+      // - resourceClass - Ruby class of the resource (e.g. Decidim::User)
+      // - optional - Defines if file is optional
+      // - multiple - Defines if multiple files can be uploaded
+      // - titled - Defines if file(s) can have titles
+      // - maxFileSize - Defines maximum file size in bytes
+      // - formObjectClass - Class of the current form object (e.g. Decidim::AccountForm)
+      providedOptions = JSON.parse(button.dataset.upload);
+    } catch (_e) {
+      // Don't care about the parse errors, just skip the provided options.
+    }
+
+    this.options = Object.assign(providedOptions, options)
+
+    this.name = this.button.name;
+    this.modal = document.querySelector(`#${button.dataset.open}`);
+    this.saveButton = this.modal.querySelector(`button.add-file-${this.name}`);
+    this.attachmentCounter = 0;
+    this.dropZoneEnabled = true;
+    this.modalTitle = this.modal.querySelector(".reveal__title");
+    this.uploadItems = this.modal.querySelector(".upload-items");
+    this.locales = JSON.parse(this.uploadItems.dataset.locales);
+    this.dropZone = this.modal.querySelector(".dropzone");
+    this.input = this.dropZone.querySelector("input");
+    this.uploadContainer = document.querySelector(`.upload-container-for-${this.name}`);
+    this.activeAttachments = this.uploadContainer.querySelector(".active-uploads");
+    this.trashCan = this.createTrashCan();
+  }
+
+  uploadFile(file) {
+    if (!this.dropZoneEnabled) {
+      return;
+    }
+
+    const title = file.name.split(".")[0].slice(0, 31);
+    const uploadItem = this.createUploadItem(file.name, title, "init");
+    const uploader = new Uploader(this, uploadItem, {
+      file: file,
+      url: this.input.dataset.directUploadUrl,
+      attachmentName: file.name
+    });
+    if (uploader.fileTooBig) {
+      return;
+    }
+
+    uploader.upload.create((error, blob) => {
+      if (error) {
+        uploadItem.dataset.state = "error";
+        const progressBar = uploadItem.querySelector(".progress-bar");
+        progressBar.classList.add("filled");
+        progressBar.innerHTML = this.locales.error;
+        console.error(error);
+      } else {
+        const ordinalNumber = this.getOrdinalNumber();
+
+        const attachmentDetails = document.createElement("div");
+        attachmentDetails.classList.add("attachment-details");
+        attachmentDetails.dataset.filename = file.name;
+        const titleAndFileNameSpan = document.createElement("span");
+        titleAndFileNameSpan.style.display = "none";
+        attachmentDetails.appendChild(titleAndFileNameSpan);
+
+        const hiddenBlobField = createHiddenInput(null, null, blob.signed_id);
+        if (this.options.titled) {
+          hiddenBlobField.name = `${this.options.resourceName}[${this.options.addAttribute}][${ordinalNumber}][file]`;
+        } else {
+          hiddenBlobField.name = `${this.options.resourceName}[${this.options.addAttribute}]`;
+        }
+
+        if (this.options.titled) {
+          const hiddenTitleField = createHiddenInput("hidden-title", `${this.options.resourceName}[${this.options.addAttribute}][${ordinalNumber}][title]`, title);
+          titleAndFileNameSpan.innerHTML = `${title} (${file.name})`;
+          attachmentDetails.appendChild(hiddenTitleField);
+        } else {
+          titleAndFileNameSpan.innerHTML = file.name;
+        }
+
+        if (!this.options.multiple) {
+          this.cleanTrashCan();
+        }
+
+        attachmentDetails.appendChild(hiddenBlobField);
+        uploadItem.appendChild(attachmentDetails);
+        uploader.validate(blob.signed_id);
+      }
+    });
+    this.updateDropZone();
+  }
+
+  getOrdinalNumber() {
+    const nextOrdinalNumber = this.attachmentCounter;
+    this.attachmentCounter += 1;
+    return nextOrdinalNumber;
+  }
+
+  updateDropZone() {
+    if (this.options.multiple) {
+      return;
+    }
+
+    if (this.uploadItems.children.length > 0) {
+      this.dropZone.classList.add("disabled");
+      this.dropZoneEnabled = false;
+      this.input.disabled = true;
+    } else {
+      this.dropZone.classList.remove("disabled");
+      this.dropZoneEnabled = true;
+      this.input.disabled = false;
+    }
+  }
+
+  createUploadItem(fileName, title, state) {
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("upload-item");
+    wrapper.setAttribute("data-filename", fileName);
+
+    const firstRow = document.createElement("div");
+    const secondRow = document.createElement("div");
+    const thirdRow = document.createElement("div");
+    firstRow.classList.add("row", "upload-item-first-row");
+    secondRow.classList.add("row", "upload-item-second-row");
+    thirdRow.classList.add("row", "upload-item-third-row");
+
+    const fileNameSpan = document.createElement("span");
+    let fileNameSpanClasses = ["columns", "file-name-span"];
+    if (this.options.titled) {
+      fileNameSpanClasses.push("small-4", "medium-5");
+    } else {
+      fileNameSpanClasses.push("small-12");
+    }
+    fileNameSpan.classList.add(...fileNameSpanClasses);
+    fileNameSpan.innerHTML = truncateFilename(fileName);
+
+    const progressBar = document.createElement("div");
+    progressBar.classList.add("progress-bar");
+    if (state) {
+      if (state === "validated") {
+        progressBar.innerHTML = this.locales.uploaded;
+      } else {
+        progressBar.innerHTML = "0%";
+        progressBar.style.width = "15%";
+      }
+      wrapper.dataset.state = state;
+    }
+
+    const progressBarBorder = document.createElement("div");
+    progressBarBorder.classList.add("progress-bar-border");
+    progressBarBorder.appendChild(progressBar);
+
+    const progressBarWrapper = document.createElement("div");
+    progressBarWrapper.classList.add("columns", "progress-bar-wrapper");
+    progressBarWrapper.appendChild(progressBarBorder);
+    if (this.options.titled) {
+      progressBarWrapper.classList.add("small-4", "medium-5");
+    } else {
+      progressBarWrapper.classList.add("small-10");
+    }
+
+    const errorList = document.createElement("ul");
+    errorList.classList.add("upload-errors");
+
+    const removeButton = document.createElement("button");
+    removeButton.classList.add("columns", "small-3", "medium-2", "remove-upload-item");
+    removeButton.innerHTML = `× ${this.locales.remove}`;
+    removeButton.addEventListener(("click"), (event) => {
+      event.preventDefault();
+      const item = this.uploadItems.querySelector(`[data-filename='${fileName}']`);
+      this.trashCan.append(item);
+      this.updateDropZone();
+    })
+
+    const titleAndFileNameSpan = document.createElement("span");
+    titleAndFileNameSpan.classList.add("columns", "small-5", "title-and-filename-span");
+    titleAndFileNameSpan.innerHTML = `${title} (${truncateFilename(fileName)})`;
+
+    firstRow.appendChild(fileNameSpan);
+    secondRow.appendChild(progressBarWrapper);
+    thirdRow.appendChild(errorList);
+
+    let titleInputContainer = null;
+    if (this.options.titled) {
+      const titleInput = document.createElement("input");
+      titleInput.classList.add("attachment-title");
+      titleInput.type = "text";
+      titleInput.value = title;
+      titleInput.addEventListener("input", (event) => {
+        event.preventDefault();
+        checkTitles(this.uploadItems, this.saveButton);
+      })
+      titleInputContainer = document.createElement("div");
+      titleInputContainer.classList.add("columns", "small-5", "title-input-container");
+      titleInputContainer.appendChild(titleInput);
+
+      const noTitleErrorSpan = document.createElement("span");
+      noTitleErrorSpan.classList.add("form-error", "no-title-error");
+      noTitleErrorSpan.role = "alert";
+      noTitleErrorSpan.innerHTML = this.locales.title_required;
+      titleInputContainer.appendChild(noTitleErrorSpan);
+
+      const titleLabelSpan = document.createElement("span");
+      titleLabelSpan.classList.add("title-label-span");
+      titleLabelSpan.innerHTML = this.locales.title;
+
+      const titleContainer = document.createElement("div");
+      titleContainer.classList.add("columns", "small-8", "medium-7", "title-container");
+      titleContainer.appendChild(titleLabelSpan);
+      firstRow.appendChild(titleContainer);
+      secondRow.appendChild(titleInputContainer);
+    }
+
+    secondRow.appendChild(removeButton);
+
+    wrapper.appendChild(firstRow);
+    wrapper.appendChild(secondRow);
+    wrapper.appendChild(thirdRow);
+
+    this.uploadItems.appendChild(wrapper);
+
+    return wrapper;
+  }
+
+  updateAddAttachmentsButton() {
+    if (this.activeAttachments.children.length === 0) {
+      this.button.innerHTML = this.modalTitle.dataset.addlabel;
+    } else {
+      this.button.innerHTML = this.modalTitle.dataset.editlabel;
+    }
+  }
+
+  createTrashCan() {
+    const trashCan =  document.createElement("div");
+    trashCan.classList.add("trash-can");
+    trashCan.style.display = "none";
+    this.uploadItems.parentElement.appendChild(trashCan);
+    return trashCan;
+  }
+
+  cleanTrashCan() {
+    Array.from(this.trashCan.children).forEach((item) => {
+      const fileName = item.dataset.filename;
+      const activeAttachment = this.activeAttachments.querySelector(`div[data-filename='${fileName}']`);
+      if (activeAttachment) {
+        activeAttachment.remove();
+      }
+      item.remove();
+    })
+  }
+}

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);