decidim-core 0.26.2 → 0.27.0.rc1

data/app/packs/src/decidim/cookie_consent/consent_manager.js

@@ -0,0 +1,133 @@
+import Cookies from "js-cookie";
+
+class ConsentManager {
+  // Options should contain the following keys:
+  // - modal - HTML element of the cookie consent modal (e.g. "<div id="cc-modal">Foo bar</div>")
+  // - categories - Available cookie categories (e.g. ["essential", "preferences", "analytics", "marketing"])
+  // - cookieName - Name of the cookie saved in the browser (e.g. "decidim-consent")
+  // - warningElement - HTML element to be shown when user hasn't accepted necessary cookie(s) to display the content.
+  constructor(options) {
+    this.modal = options.modal;
+    this.categories = options.categories;
+    this.cookieName = options.cookieName;
+    this.cookie = Cookies.get(this.cookieName);
+    this.warningElement = options.warningElement;
+    if (this.cookie) {
+      this.updateState(JSON.parse(this.cookie));
+    } else {
+      this.updateState({});
+    }
+  }
+
+  updateState(newState) {
+    this.state = newState;
+    Cookies.set(this.cookieName, JSON.stringify(this.state));
+    this.updateModalSelections();
+    this.triggerState();
+  }
+
+  triggerJavaScripts() {
+    document.querySelectorAll("script[type='text/plain'][data-consent]").forEach((script) => {
+      if (this.state[script.dataset.consent]) {
+        const activeScript = document.createElement("script");
+        if (script.src.length > 0) {
+          activeScript.src = script.src;
+        } else {
+          activeScript.innerHTML = script.innerHTML;
+        }
+        script.parentNode.replaceChild(activeScript, script);
+      }
+    });
+
+    const event = new CustomEvent("dataconsent", { detail: this.state });
+    document.dispatchEvent(event);
+  }
+
+  triggerIframes() {
+    if (this.allAccepted()) {
+      document.querySelectorAll(".disabled-iframe").forEach((original) => {
+        let newElement = this.transformElement(original, "iframe");
+        newElement.className = original.classList.toString().replace("disabled-iframe", "");
+        original.parentElement.appendChild(newElement);
+        original.remove();
+      })
+    } else {
+      document.querySelectorAll("iframe").forEach((original) => {
+        const newElement = this.transformElement(original, "div");
+        newElement.className = `disabled-iframe ${original.classList.toString()}`;
+        original.parentElement.appendChild(newElement);
+        original.remove();
+      })
+    }
+  }
+
+  transformElement(original, targetType) {
+    const newElement = document.createElement(targetType);
+    ["src", "allow", "frameborder", "style", "loading"].forEach((attribute) => {
+      newElement.setAttribute(attribute, original.getAttribute(attribute));
+    })
+
+    return newElement;
+  }
+
+  triggerWarnings() {
+    document.querySelectorAll(".disabled-iframe").forEach((original) => {
+      if (original.querySelector(".cookie-warning")) {
+        return;
+      }
+
+      let cloned = this.warningElement.cloneNode(true);
+      cloned.classList.remove("hide");
+      original.appendChild(cloned);
+    });
+  }
+
+  triggerState() {
+    this.triggerJavaScripts();
+    this.triggerIframes();
+    this.triggerWarnings();
+  }
+
+  allAccepted() {
+    return this.categories.every((category) => {
+      return this.state[category] === true;
+    });
+  }
+
+  updateModalSelections() {
+    const categoryElements = this.modal.querySelectorAll(".category-wrapper");
+
+    categoryElements.forEach((categoryEl) => {
+      const categoryInput = categoryEl.querySelector("input");
+      if (this.state && this.state[categoryInput.name]) {
+        categoryInput.checked = true;
+      } else if (!categoryInput.disabled) {
+        categoryInput.checked = false;
+      }
+    });
+  }
+
+  saveSettings(newState) {
+    this.updateState(newState);
+  }
+
+  acceptAll() {
+    const newState = {};
+    this.categories.forEach((category) => {
+      newState[category] = true;
+    });
+    this.updateState(newState);
+  }
+
+  rejectAll() {
+    this.updateState({
+      essential: true
+    });
+  }
+
+  getState() {
+    return this.state;
+  }
+}
+
+export default ConsentManager

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

@@ -0,0 +1,103 @@
+import ConsentManager from "src/decidim/cookie_consent/consent_manager";
+
+const initDialog = (manager) => {
+  if (Object.keys(manager.state).length > 0) {
+    return;
+  }
+  const dialogWrapper = document.querySelector("#cc-dialog-wrapper");
+  dialogWrapper.classList.remove("hide");
+
+  const acceptAllButton = dialogWrapper.querySelector("#cc-dialog-accept");
+  const rejectAllButton = dialogWrapper.querySelector("#cc-dialog-reject");
+  const settingsButton = dialogWrapper.querySelector("#cc-dialog-settings");
+
+  acceptAllButton.addEventListener("click", () => {
+    manager.acceptAll();
+    dialogWrapper.style.display = "none";
+  });
+
+  rejectAllButton.addEventListener("click", () => {
+    manager.rejectAll();
+    dialogWrapper.style.display = "none";
+  });
+
+  settingsButton.addEventListener("click", () => {
+    dialogWrapper.style.display = "none";
+  });
+}
+
+const initModal = (manager) => {
+  const categoryElements = manager.modal.querySelectorAll(".category-wrapper");
+
+  categoryElements.forEach((categoryEl) => {
+    const categoryButton = categoryEl.querySelector(".cc-title");
+    const categoryDescription = categoryEl.querySelector(".cc-description");
+    categoryButton.addEventListener("click", () => {
+      const hidden = categoryDescription.classList.contains("hide");
+      if (hidden) {
+        categoryButton.classList.add("open");
+        categoryDescription.classList.remove("hide");
+      } else {
+        categoryButton.classList.remove("open");
+        categoryDescription.classList.add("hide");
+      }
+    })
+  })
+
+  const acceptAllButton = manager.modal.querySelector("#cc-modal-accept");
+  const rejectAllButton = manager.modal.querySelector("#cc-modal-reject");
+  const saveSettingsButton = manager.modal.querySelector("#cc-modal-save");
+
+  acceptAllButton.addEventListener("click", () => {
+    manager.acceptAll();
+  })
+
+  rejectAllButton.addEventListener("click", () => {
+    manager.rejectAll();
+  })
+
+  saveSettingsButton.addEventListener("click", () => {
+    let newState = {};
+    manager.categories.forEach((category) => {
+      const accepted = manager.modal.querySelector(`input[name='${category}']`).checked;
+      if (accepted) {
+        newState[category] = true;
+      }
+    })
+    manager.saveSettings(newState);
+  })
+}
+
+const initDisabledIframes = (manager) => {
+  const disabledIframes = document.querySelectorAll(".disabled-iframe")
+  if (manager.allAccepted()) {
+    disabledIframes.forEach((elem) => {
+      const iframe = document.createElement("iframe")
+      iframe.setAttribute("src", elem.getAttribute("src"));
+      iframe.className = elem.classList.toString();
+      iframe.setAttribute("allowfullscreen", elem.getAttribute("allowfullscreen"));
+      iframe.setAttribute("frameborder", elem.getAttribute("frameborder"));
+      elem.parentElement.appendChild(iframe);
+      elem.remove();
+    })
+  }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const modal = document.querySelector("#cc-modal");
+  if (!modal) {
+    return;
+  }
+
+  const categories = [...modal.querySelectorAll(".category-wrapper")].map((el) => el.dataset.id)
+  const manager = new ConsentManager({
+    modal: modal,
+    categories: categories,
+    cookieName: window.Decidim.config.get("consent_cookie_name"),
+    warningElement: document.querySelector(".cookie-warning")
+  });
+
+  initDisabledIframes(manager);
+  initModal(manager, categories);
+  initDialog(manager);
+});

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

@@ -0,0 +1,36 @@
+/**
+// Function adds feature to datalist that you can have different id and label.
+// Used with datalist_select_helper.rb#datalist_select
+ * @param {HTMLElement} target - dataselect wrapper
+ * @param {Function} callback - the function to be executed after a successful selection.
+ * @returns {Void} - Returns nothing.
+ */
+
+export const datalistSelect = (target, callback) => {
+  if (!target) {
+    return;
+  }
+
+  const input = target.querySelector("input[type='hidden'");
+  const textInput = target.querySelector("input[type='text']");
+  const items = target.querySelector("datalist").children;
+
+  const selectValue = (selected) => {
+    for (let idx = 0; idx < items.length; idx += 1) {
+      if (items[idx].innerHTML === selected) {
+        const id = items[idx].dataset.value;
+        input.value = id;
+        if (callback) {
+          return callback(id);
+        }
+        return true;
+      }
+    }
+    return false;
+  }
+
+  textInput.addEventListener("input", () => {
+    const selected = textInput.value;
+    selectValue(selected);
+  })
+}

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

@@ -0,0 +1,117 @@
+import UploadModal from "src/decidim/direct_uploads/upload_modal";
+import { truncateFilename, createHiddenInput } from "src/decidim/direct_uploads/upload_utility";
+
+const loadAttachments = (modal) => {
+  Array.from(modal.activeAttachments.children).forEach((child) => {
+    modal.createUploadItem(child.dataset.filename, child.dataset.title, "validated");
+  })
+}
+
+const addInputEventListener = (modal) => {
+  modal.input.addEventListener("change", (event) => {
+    event.preventDefault();
+    const files = event.target.files;
+    Array.from(files).forEach((file) => modal.uploadFile(file));
+  })
+}
+
+const addButtonEventListener = (modal) => {
+  modal.button.addEventListener("click", (event) => {
+    event.preventDefault();
+    Array.from(modal.trashCan.children).forEach((item) => {
+      modal.uploadItems.append(item);
+    })
+    if (modal.uploadItems.children.length === 0) {
+      modal.modalTitle.innerHTML = modal.modalTitle.dataset.addlabel;
+    } else {
+      modal.modalTitle.innerHTML = modal.modalTitle.dataset.editlabel;
+    }
+    modal.updateDropZone();
+  })
+}
+
+const addDropZoneEventListeners = (modal) => {
+  modal.dropZone.addEventListener("dragenter", (event) => {
+    event.preventDefault();
+  })
+
+  modal.dropZone.addEventListener("dragover", (event) => {
+    event.preventDefault();
+    modal.dropZone.classList.add("is-dragover");
+  })
+
+  modal.dropZone.addEventListener("dragleave", () => {
+    modal.dropZone.classList.remove("is-dragover");
+  })
+
+  modal.dropZone.addEventListener("drop", (event) => {
+    event.preventDefault();
+    const files = event.dataTransfer.files;
+    Array.from(files).forEach((file) => modal.uploadFile(file));
+  })
+}
+
+const addSaveButtonEventListener = (modal) => {
+  modal.saveButton.addEventListener("click", (event) => {
+    event.preventDefault();
+    const validatedItems = modal.uploadItems.querySelectorAll(".upload-item[data-state='validated']")
+    const validatedItemsCount = validatedItems.length;
+    validatedItems.forEach((item) => {
+      let details = item.querySelector(".attachment-details");
+      if (details) {
+        modal.activeAttachments.appendChild(details);
+      } else {
+        details = modal.activeAttachments.querySelector(`.attachment-details[data-filename='${item.dataset.filename}'`);
+      }
+      const span = details.querySelector("span");
+      span.classList.add("filename");
+      if (modal.options.titled) {
+        const title = item.querySelector("input[type='text']").value;
+        details.dataset.title = title;
+        let hiddenTitle = details.querySelector(".hidden-title")
+        if (hiddenTitle) {
+          hiddenTitle.value = title;
+        } else {
+          const attachmentId = details.querySelector(`[name='${modal.options.resourceName}[${modal.name}][]'`).value
+          const ordinalNumber = modal.getOrdinalNumber()
+          const hiddenTitleField = createHiddenInput("hidden-title", `${modal.options.resourceName}[${modal.options.addAttribute}][${ordinalNumber}][title]`, title)
+          const hiddenIdField = createHiddenInput("hidden-id", `${modal.options.resourceName}[${modal.options.addAttribute}][${ordinalNumber}][id]`, attachmentId)
+          details.appendChild(hiddenTitleField);
+          details.appendChild(hiddenIdField);
+        }
+        span.innerHTML = `${title} (${truncateFilename(item.dataset.filename)})`;
+      } else {
+        span.innerHTML = truncateFilename(item.dataset.filename, 19);
+      }
+      span.style.display = "block";
+    });
+
+    if (!modal.options.titled && modal.trashCan.children.length > 0) {
+      modal.activeAttachments.innerHTML = `<input name='${modal.options.resourceName}[remove_${modal.name}]' type="hidden" value="true">`;
+    }
+
+    if (validatedItemsCount > 0) {
+      // Foundation helper does some magic with error fields, so these must be triggered using jQuery.
+      const $el = $(modal.uploadContainer.querySelector("input[type='checkbox']"));
+      if ($el) {
+        $el.prop("checked", true);
+        $el.trigger("change");
+      }
+    }
+    modal.cleanTrashCan();
+    modal.updateAddAttachmentsButton();
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const attachmentButtons = document.querySelectorAll("button.add-file");
+
+  attachmentButtons.forEach((attachmentButton) => {
+    const modal = new UploadModal(attachmentButton);
+    loadAttachments(modal);
+    addInputEventListener(modal);
+    addButtonEventListener(modal);
+    addDropZoneEventListeners(modal);
+    addSaveButtonEventListener(modal);
+  })
+})

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