decidim-core 0.27.8 → 0.28.0.rc4

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

@@ -7,25 +7,15 @@
 
 import Rails from "@rails/ujs"
 
-let TEMPLATE_HTML = null;
-
 class ConfirmDialog {
   constructor(sourceElement) {
-    this.$modal = $(TEMPLATE_HTML);
+    this.$modal = $("#confirm-modal");
     this.$source = sourceElement;
-    this.$content = $(".confirm-modal-content", this.$modal);
+    this.$content = $("[data-confirm-modal-content]", this.$modal);
     this.$buttonConfirm = $("[data-confirm-ok]", this.$modal);
     this.$buttonCancel = $("[data-confirm-cancel]", this.$modal);
 
-    // Avoid duplicate IDs and append the new modal to the body
-    const titleId = `confirm-modal-title-${Math.random().toString(36).substring(7)}`;
-
-    this.$modal.removeAttr("id");
-    $("#confirm-modal-title", this.$modal).attr("id", titleId);
-    this.$modal.attr("aria-labelledby", titleId);
-
-    $("body").append(this.$modal);
-    this.$modal.foundation();
+    window.Decidim.currentDialogs["confirm-modal"].open()
   }
 
   confirm(message) {
@@ -35,24 +25,22 @@ class ConfirmDialog {
     this.$buttonCancel.off("click");
 
     return new Promise((resolve) => {
+
       this.$buttonConfirm.on("click", (ev) => {
         ev.preventDefault();
 
-        this.$modal.foundation("close");
+        window.Decidim.currentDialogs["confirm-modal"].close()
         resolve(true);
         this.$source.focus();
       });
+
       this.$buttonCancel.on("click", (ev) => {
         ev.preventDefault();
 
-        this.$modal.foundation("close");
+        window.Decidim.currentDialogs["confirm-modal"].close()
         resolve(false);
         this.$source.focus();
       });
-
-      this.$modal.foundation("open").on("closed.zf.reveal", () => {
-        this.$modal.remove();
-      });
     });
   }
 }
@@ -76,11 +64,6 @@ const allowAction = (ev, element) => {
     return false;
   }
 
-  if (TEMPLATE_HTML === null) {
-    TEMPLATE_HTML = $("#confirm-modal")[0].outerHTML;
-    $("#confirm-modal").remove();
-  }
-
   const dialog = new ConfirmDialog(
     $(element)
   );
@@ -93,7 +76,7 @@ const allowAction = (ev, element) => {
       $(element).data("confirm", null);
       $(element).removeAttr("data-confirm");
 
-      // The submit button click events won't do anything if they are
+      // The submit button click events will not do anything if they are
       // dispatched as is. In these cases, just submit the underlying form.
       if (ev.type === "click" &&
         (

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

@@ -81,6 +81,7 @@ class ConsentManager {
 
       let cloned = this.warningElement.cloneNode(true);
       cloned.classList.remove("hide");
+      cloned.hidden = false;
       original.appendChild(cloned);
     });
   }
@@ -98,7 +99,7 @@ class ConsentManager {
   }
 
   updateModalSelections() {
-    const categoryElements = this.modal.querySelectorAll(".category-wrapper");
+    const categoryElements = this.modal.querySelectorAll("[data-id]");
 
     categoryElements.forEach((categoryEl) => {
       const categoryInput = categoryEl.querySelector("input");

data/app/packs/src/decidim/data_consent/consent_manager.test.js

@@ -27,7 +27,7 @@ global.window.location = {
 
 describe("ConsentManager", () => {
   const dialogContent = `
-    <div id="dc-dialog-wrapper" class="flex-center" role="region">
+    <div id="dc-dialog-wrapper" role="region">
       <div class="dc-dialog padding-vertical-1">
         <div class="row expanded">
           <div class="columns medium-12 large-8">
@@ -39,7 +39,7 @@ describe("ConsentManager", () => {
             </div>
           </div>
           <div class="columns medium-12 large-4">
-            <div class="dc-button-wrapper flex-center">
+            <div class="dc-button-wrapper">
               <button id="dc-dialog-accept" class="button">
                 Accept all
               </button>
@@ -66,7 +66,7 @@ describe("ConsentManager", () => {
 
       <div class="dc-categories">
         <div class="category-wrapper margin-vertical-1" data-id="essential">
-          <div class="category-row flex-center">
+          <div class="category-row">
             <button class="dc-title padding-left-3">
               <span class="h5 dc-category-title">
                 <strong>Essential</strong>
@@ -110,7 +110,7 @@ describe("ConsentManager", () => {
           </div>
         </div>
         <div class="category-wrapper margin-vertical-1" data-id="preferences">
-          <div class="category-row flex-center">
+          <div class="category-row">
             <button class="dc-title padding-left-3">
               <span class="h5 dc-category-title">
                 <strong>Preferences</strong>
@@ -130,7 +130,7 @@ describe("ConsentManager", () => {
           </div>
         </div>
         <div class="category-wrapper margin-vertical-1" data-id="analytics">
-          <div class="category-row flex-center">
+          <div class="category-row">
             <button class="dc-title padding-left-3">
               <span class="h5 dc-category-title">
                 <strong>Analytics and statistics</strong>
@@ -150,7 +150,7 @@ describe("ConsentManager", () => {
           </div>
         </div>
         <div class="category-wrapper margin-vertical-1" data-id="marketing">
-          <div class="category-row flex-center">
+          <div class="category-row">
             <button class="dc-title padding-left-3">
               <span class="h5 dc-category-title">
                 <strong>Marketing</strong>
@@ -170,7 +170,7 @@ describe("ConsentManager", () => {
           </div>
         </div>
       </div>
-      <div class="dc-buttons-wrapper flex-center">
+      <div class="dc-buttons-wrapper">
         <div class="dc-buttons-left">
           <button id="dc-modal-accept" class="button" data-close="">Accept all</button>
           <button id="dc-modal-reject" class="button hollow" data-close="">Accept only essential</button>
@@ -182,7 +182,7 @@ describe("ConsentManager", () => {
     </div>
   `;
   const cookieWarningContent = `
-    <div class="dataconsent-warning flex-center padding-1 hide">
+    <div class="dataconsent-warning padding-1 hide">
       <p>You need to enable all cookies in order to see this content.</p>
       <a href="#" class="button margin-vertical-2" data-open="dc-modal">
         Change cookie settings

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

@@ -1,11 +1,12 @@
-import ConsentManager from "src/decidim/data_consent/consent_manager";
+import ConsentManager from "./consent_manager";
 
 const initDialog = (manager) => {
   if (Object.keys(manager.state).length > 0) {
     return;
   }
+
   const dialogWrapper = document.querySelector("#dc-dialog-wrapper");
-  dialogWrapper.classList.remove("hide");
+  dialogWrapper.hidden = false
 
   const acceptAllButton = dialogWrapper.querySelector("#dc-dialog-accept");
   const rejectAllButton = dialogWrapper.querySelector("#dc-dialog-reject");
@@ -13,37 +14,20 @@ const initDialog = (manager) => {
 
   acceptAllButton.addEventListener("click", () => {
     manager.acceptAll();
-    dialogWrapper.style.display = "none";
+    dialogWrapper.hidden = true;
   });
 
   rejectAllButton.addEventListener("click", () => {
     manager.rejectAll();
-    dialogWrapper.style.display = "none";
+    dialogWrapper.hidden = true;
   });
 
   settingsButton.addEventListener("click", () => {
-    dialogWrapper.style.display = "none";
+    dialogWrapper.hidden = true;
   });
 }
 
 const initModal = (manager) => {
-  const categoryElements = manager.modal.querySelectorAll(".category-wrapper");
-
-  categoryElements.forEach((categoryEl) => {
-    const categoryButton = categoryEl.querySelector(".dc-title");
-    const categoryDescription = categoryEl.querySelector(".dc-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("#dc-modal-accept");
   const rejectAllButton = manager.modal.querySelector("#dc-modal-reject");
   const saveSettingsButton = manager.modal.querySelector("#dc-modal-save");
@@ -89,7 +73,7 @@ document.addEventListener("DOMContentLoaded", () => {
     return;
   }
 
-  const categories = [...modal.querySelectorAll(".category-wrapper")].map((el) => el.dataset.id)
+  const categories = [...modal.querySelectorAll("[data-id]")].map((el) => el.dataset.id)
   const manager = new ConsentManager({
     modal: modal,
     categories: categories,

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

@@ -1,119 +1,133 @@
 import UploadModal from "src/decidim/direct_uploads/upload_modal";
-import { truncateFilename, createHiddenInput } from "src/decidim/direct_uploads/upload_utility";
-import { escapeHtml } from "src/decidim/utilities/text";
+import { truncateFilename } from "src/decidim/direct_uploads/upload_utility";
+import { escapeHtml, escapeQuotes } from "src/decidim/utilities/text";
 
-const loadAttachments = (modal) => {
-  Array.from(modal.activeAttachments.children).forEach((child) => {
-    const uploadItem = modal.createUploadItem(child.dataset.filename, child.dataset.title, "validated");
-    child.dataset.fileid = uploadItem.dataset.fileid;
-  })
+const updateModalTitle = (modal) => {
+  if (modal.uploadItems.children.length === 0) {
+    modal.modalTitle.innerHTML = modal.modalTitle.dataset.addlabel;
+  } else {
+    modal.modalTitle.innerHTML = modal.modalTitle.dataset.editlabel;
+  }
+  modal.updateDropZone();
 }
 
-const addInputEventListener = (modal) => {
-  modal.input.addEventListener("change", (event) => {
-    event.preventDefault();
-    const files = event.target.files;
-    Array.from(files).forEach((file) => modal.uploadFile(file));
-  })
-}
+const updateActiveUploads = (modal) => {
+  // remove the default image block, if exists
+  const defaultFile = document.getElementById(`default-active-${modal.modal.id}`)
+  if (defaultFile) {
+    defaultFile.remove()
+  }
+
+  const files = document.querySelector(`[data-active-uploads=${modal.modal.id}]`)
+  const previousId = Array.from(files.querySelectorAll("[type=hidden][id]"))
+  const isMultiple = modal.options.multiple
+
+  // fastest way to clean children nodes
+  files.textContent = ""
+
+  // divide the items between those will gonna be removed, and added
+  const [removeFiles, addFiles] = [modal.items.filter(({ removable }) => removable), modal.items.filter(({ removable }) => !removable)]
+
+  addFiles.forEach((file, ix) => {
+    let title = truncateFilename(file.name, 19)
+
+    let hidden = ""
+    if (file.hiddenField) {
+      // if there is hiddenField, this file is new
+      const fileField = isMultiple
+        ? `${modal.options.resourceName}[${modal.options.addAttribute}][${ix}][file]`
+        : `${modal.options.resourceName}[${modal.options.addAttribute}]`
 
-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;
+      hidden = `<input type="hidden" name="${fileField}" value="${file.hiddenField}" />`
     } else {
-      modal.modalTitle.innerHTML = modal.modalTitle.dataset.editlabel;
+      // otherwise, we keep the attachmentId
+      const fileField = isMultiple
+        ? `${modal.options.resourceName}[${modal.options.addAttribute}][${ix}][id]`
+        : `${modal.options.resourceName}[${modal.options.addAttribute}]`
+
+      // convert all node attributes to string
+      const attributes = Array.from(previousId.find(({ id }) => id === file.attachmentId).attributes).reduce((acc, { name, value }) => `${acc} ${name}="${value}"`, "")
+      hidden = `<input ${attributes} />`
+      hidden += `<input type="hidden" name="${fileField}" value="${file.attachmentId}" />`
     }
-    modal.updateDropZone();
-  })
-}
 
-const addDropZoneEventListeners = (modal) => {
-  modal.dropZone.addEventListener("dragenter", (event) => {
-    event.preventDefault();
-  })
+    if (modal.options.titled) {
+      const titleValue = modal.modal.querySelectorAll('input[type="text"]')[ix].value
+      // NOTE - Renaming the attachment is not supported when multiple uploader is disabled
+      const titleField = `${modal.options.resourceName}[${modal.options.addAttribute}][${ix}][title]`
+      hidden += `<input type="hidden" name="${titleField}" value="${escapeQuotes(titleValue)}" />`
 
-  modal.dropZone.addEventListener("dragover", (event) => {
-    event.preventDefault();
-    modal.dropZone.classList.add("is-dragover");
-  })
+      title = titleValue
+    }
 
-  modal.dropZone.addEventListener("dragleave", () => {
-    modal.dropZone.classList.remove("is-dragover");
-  })
+    const attachmentIdOrHiddenField = file.attachmentId
+      ? `data-attachment-id="${file.attachmentId}"`
+      : `data-hidden-field="${file.hiddenField}"`
+
+    const template = `
+      <div ${attachmentIdOrHiddenField} data-filename="${escapeQuotes(file.name)}" data-title="${escapeQuotes(title)}">
+        ${(/image/).test(file.type) && `<div><img src="" alt="${escapeQuotes(file.name)}" /></div>` || ""}
+        <span>${escapeHtml(title)} (${escapeHtml(truncateFilename(file.name))})</span>
+        ${hidden}
+      </div>
+    `
 
-  modal.dropZone.addEventListener("drop", (event) => {
-    event.preventDefault();
-    const files = event.dataTransfer.files;
-    Array.from(files).forEach((file) => modal.uploadFile(file));
+    const div = document.createElement("div")
+    div.innerHTML = template.trim()
+
+    const container = div.firstChild
+
+    modal.autoloadImage(container, file)
+
+    files.appendChild(container)
+  });
+
+  removeFiles.forEach(() => {
+    const div = document.createElement("div")
+    div.innerHTML = `<input name='${modal.options.resourceName}[remove_${modal.button.name}]' type="hidden" value="true">`
+    files.appendChild(div.firstChild)
   })
+
+  modal.updateAddAttachmentsButton();
 }
 
-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-fileid='${item.dataset.fileid}'`);
-      }
-      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 = `${escapeHtml(title)} (${escapeHtml(truncateFilename(item.dataset.filename))})`;
-      } else {
-        span.innerHTML = escapeHtml(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">`;
-    }
+const highlightDropzone = (modal) => {
+  modal.emptyItems.classList.add("is-dragover")
+  modal.uploadItems.classList.add("is-dragover")
+}
 
-    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();
-  });
+const resetDropzone = (modal) => {
+  modal.emptyItems.classList.remove("is-dragover")
+  modal.uploadItems.classList.remove("is-dragover")
 }
 
+/* NOTE: all this actions are supposed to work using the modal object,
+  so, perhaps, it would be more accurate to move all the inner listeners to the UploadModal class */
 document.addEventListener("DOMContentLoaded", () => {
-  const attachmentButtons = document.querySelectorAll("button.add-file");
+  const attachmentButtons = document.querySelectorAll("button[data-upload]");
 
   attachmentButtons.forEach((attachmentButton) => {
     const modal = new UploadModal(attachmentButton);
-    loadAttachments(modal);
-    addInputEventListener(modal);
-    addButtonEventListener(modal);
-    addDropZoneEventListeners(modal);
-    addSaveButtonEventListener(modal);
+
+    // append to the modal items array those files already validated (only in first pageload)
+    const files = document.querySelector(`[data-active-uploads=${modal.modal.id}]`);
+    [...files.children].forEach((child) => modal.preloadFiles(child));
+
+    // whenever the input fields changes, process the files
+    modal.input.addEventListener("change", (event) => modal.uploadFiles(event.target.files));
+
+    // update the modal title if there are files uploaded and load files (if previously deleted after clicking cancel)
+    modal.button.addEventListener("click", (event) => event.preventDefault() || (modal.items.length === 0 && [...files.children].forEach((child) => child.tagName === "DIV" && modal.preloadFiles(child))) || updateModalTitle(modal));
+
+    // avoid browser to open the file
+    modal.dropZone.addEventListener("dragover", (event) => event.preventDefault() || highlightDropzone(modal));
+    modal.dropZone.addEventListener("dragleave", () => resetDropzone(modal));
+    // avoid browser to open the file and then, process the files
+    modal.dropZone.addEventListener("drop", (event) => event.preventDefault() || resetDropzone(modal) || modal.uploadFiles(event.dataTransfer.files));
+
+    // update the DOM with the validated items from the modal
+    modal.saveButton.addEventListener("click", (event) => event.preventDefault() || updateActiveUploads(modal));
+    // remove the uploaded files if cancel button is clicked
+    modal.cancelButton.addEventListener("click", (event) => event.preventDefault() || modal.cleanAllFiles());
   })
 })