decidim-core 0.26.9 → 0.27.0.rc1

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

@@ -0,0 +1,298 @@
+import AutoCompleteJS from "@tarekraafat/autocomplete.js";
+
+export default class AutoComplete {
+  constructor(el, options = {}) {
+    this.element = el;
+    this.stickySelectedSpan = null;
+    this.clearStickySelectionSpan = null;
+    this.stickyHiddenInput = null;
+    this.promptDiv = null;
+    const thresholdTemp = options.threshold || 2;
+    this.options = Object.assign({
+      // Defines name of the hidden input (e.g. assembly_member[user_id])
+      name: null,
+      // Placeholder of the visible input field
+      placeholder: "",
+      // Defines what happens after user has selected value from suggestions
+      // sticky - Allows selecting a single value and not editing the value after selected (e.g. as the admin autocomplete fields)
+      // single - Allows selecting a single value and editing the selected text after the selection (e.g. geocoding field)
+      // multi - Allows selecting multiple values
+      // null (default) - Disable selection event handling in this class
+      mode: null,
+      // Defines if we show input help (e.g. "Type at least three characters to search") or not.
+      searchPrompt: false,
+      // Defines search prompt message, only shown if showPrompt is enabled!
+      searchPromptText: `Type at least ${thresholdTemp} characters to search`,
+      // Defines items that are selected already when page is loaded before user selects them. (e.g. when form submit fails)
+      selected: null,
+      // Defines how many characters input has to have before we start searching
+      threshold: thresholdTemp,
+      // Defines how many results to show in the autocomplete selection list
+      // by maximum.
+      maxResults: 10,
+      // Defines the data keys against which to match the user input when
+      // searching through the results. For example, when the following
+      // data is returned by the API:
+      //   { id: 123, name: "John", nickname: "john", __typename: "User" }
+      //
+      // You can define the data keys array as ["name", "nickname"] in
+      // which case the results shown to user would be only those that
+      // have matching text in these defined fields.
+      dataMatchKeys: null,
+      // The data source is a method that gets the callback parameter as
+      // its first argument which should be called with the results array
+      // once they are returned by the API.
+      // For example:
+      //   (query, callback) => {
+      //     (async () => {
+      //       const results = await callAjax(`/api/url?query=${query}`);
+      //       callback(results);
+      //     })();
+      //   }
+      //
+      // Signature: (callback: Function)
+      dataSource: () => [],
+      // Filters the data list returned by the data source before it is shown
+      // to the user. Can be used e.g. to hide already selected values from
+      // the list.
+      dataFilter: null,
+      // Delay in milliseconds how long to wait after user action before
+      // doing a backend request.
+      delay: 200,
+      // Allows modifying the suggested items before they are displayed in the list
+      // Signature: (element: HTMLElement, value: Object)
+      modifyResult: null
+    }, options);
+
+    this.autocomplete = new AutoCompleteJS({
+      selector: () => this.element,
+      placeHolder: options.placeholder,
+      // Delay (milliseconds) before autocomplete engine starts. It's preventing many queries when user is typing fast.
+      debounce: 200,
+      threshold: this.options.threshold,
+      data: {
+        keys: this.options.dataMatchKeys,
+        src: async (query) => {
+          const fetchResults = () => {
+            return new Promise((resolve) => {
+              this.options.dataSource(query, resolve);
+            });
+          }
+
+          try {
+            return await fetchResults();
+          } catch (error) {
+            return error;
+          }
+        },
+        filter: (list) => {
+          if (this.options.dataFilter) {
+            return this.options.dataFilter(list);
+          }
+
+          return list;
+        }
+      },
+      resultsList: {
+        maxResults: this.options.maxResults
+      },
+      resultItem: {
+        element: (item, data) => {
+          if (!this.options.modifyResult) {
+            return;
+          }
+
+          this.options.modifyResult(item, data.value);
+        }
+      },
+      events: {
+        input: {
+          blur: () => {
+            this.promptDiv.style.display = "none";
+          }
+        }
+      }
+    });
+
+    this.acWrapper = this.element.closest(".autoComplete_wrapper");
+    this.element.ac = this.autocomplete;
+
+    // Stop input field from bubbling open and close events to parent elements,
+    // because foundation closes modal from these events.
+    const stopPropagation = (event) => {
+      event.stopPropagation();
+    }
+    this.element.addEventListener("close", stopPropagation);
+    this.element.addEventListener("open", stopPropagation);
+
+    this.createPromptDiv();
+
+    switch (this.options.mode) {
+    case "sticky":
+      this.createStickySelect(this.options.name);
+      break;
+    case "multi":
+      this.createMultiSelect(this.options.name);
+      break;
+    default:
+    }
+  }
+
+  setInput(value) {
+    this.autocomplete.input.value = value;
+  }
+
+  handleEvent(event) {
+    switch (this.options.mode) {
+    case "single":
+      this.setInput(event.detail.selection.value[event.detail.selection.key]);
+      break;
+    case "sticky":
+      this.handleStickyEvents(event);
+      break;
+    case "multi":
+      this.handleMultiEvents(event);
+      break;
+    default:
+    }
+  }
+
+  handleMultiEvents(event) {
+    switch (event.type) {
+    case "selection":
+      this.addMultiSelectItem(event.detail.selection);
+      break;
+    default:
+    }
+  }
+
+  handleStickyEvents(event) {
+    switch (event.type) {
+    case "selection":
+      this.addStickySelectItem(event.detail.selection);
+      break;
+    case "click":
+      if (event.target === this.clearStickySelectionSpan) {
+        this.removeStickySelection();
+      }
+      break;
+    case "keyup":
+      if (this.stickyHiddenInput.value !== "" && event.target === this.element && (["Escape", "Backspace", "Delete"].includes(event.key) || (/^[a-z0-9]$/i).test(event.key))) {
+        this.removeStickySelection();
+      } else if (this.options.searchPrompt) {
+        if (this.stickyHiddenInput.value === "" && this.element.value.length < this.options.threshold) {
+          this.promptDiv.style.display = "block";
+        } else {
+          this.promptDiv.style.display = "none";
+        }
+      }
+      break;
+    default:
+    }
+  }
+
+  createHiddenInput(value) {
+    const hiddenInput = document.createElement("input");
+    hiddenInput.name = this.options.name;
+    hiddenInput.type = "hidden";
+    if (value) {
+      hiddenInput.value = value;
+    }
+    this.acWrapper.prepend(hiddenInput);
+    return hiddenInput;
+  }
+
+  removeStickySelection() {
+    this.stickyHiddenInput.value = "";
+    this.element.placeholder = this.options.placeholder;
+    this.clearStickySelectionSpan.style.display = "none";
+    this.stickySelectedSpan.style.display = "none";
+  }
+
+  addStickySelectItem(selection) {
+    this.stickyHiddenInput.value = selection.value.value;
+    this.element.placeholder = "";
+    this.stickySelectedSpan.innerHTML = selection.value[selection.key];
+    this.stickySelectedSpan.style.display = "block";
+    this.clearStickySelectionSpan.style.display = "block";
+    this.setInput("");
+  }
+
+  addMultiSelectItem(selection) {
+    this.setInput("");
+    const chosen = document.createElement("span");
+    chosen.classList.add("label", "primary", "autocomplete__selected-item", "multi");
+    chosen.innerHTML = selection.value[selection.key];
+    const clearSelection = document.createElement("span");
+    clearSelection.classList.add("clear-multi-selection");
+    clearSelection.innerHTML = "&times;";
+    clearSelection.setAttribute("data-remove", selection.value.value);
+    clearSelection.addEventListener("click", (evt) => {
+      const hiddenInput = this.acWrapper.querySelector(`input[type='hidden'][value='${selection.value.value}']`);
+      if (hiddenInput) {
+        hiddenInput.remove();
+        evt.target.parentElement.remove();
+      }
+    });
+    chosen.appendChild(clearSelection);
+
+    const multiSelectWrapper = this.acWrapper.querySelector(".multiselect");
+    const inputContainer = multiSelectWrapper.querySelector("span.input-container");
+    multiSelectWrapper.insertBefore(chosen, inputContainer);
+    this.createHiddenInput(selection.value.value);
+  }
+
+  createStickySelect() {
+    this.stickySelectedSpan = document.createElement("span");
+    this.stickySelectedSpan.classList.add("autocomplete__selected-item", "sticky");
+    this.stickySelectedSpan.style.display = "none";
+    this.stickySelectedSpan.addEventListener("click", () => this.element.focus());
+    this.stickyHiddenInput = this.createHiddenInput();
+
+    this.clearStickySelectionSpan = document.createElement("span");
+    this.clearStickySelectionSpan.className = "clear-sticky-selection";
+    this.clearStickySelectionSpan.innerHTML = "&times;";
+    this.clearStickySelectionSpan.style.display = "none";
+    this.clearStickySelectionSpan.addEventListener("click", this);
+
+    this.element.addEventListener("selection", this);
+    this.element.addEventListener("keyup", this);
+
+    this.acWrapper.insertBefore(this.clearStickySelectionSpan, this.element);
+    this.acWrapper.insertBefore(this.stickySelectedSpan, this.element);
+    if (this.options.selected) {
+      this.addStickySelectItem(this.options.selected);
+    }
+  }
+
+  createMultiSelect() {
+    const multiSelectWrapper = document.createElement("div");
+    multiSelectWrapper.classList.add("multiselect");
+
+    const inputContainer = document.createElement("span");
+    inputContainer.classList.add("input-container");
+
+    multiSelectWrapper.appendChild(inputContainer);
+    this.acWrapper.prepend(multiSelectWrapper);
+    inputContainer.appendChild(this.element);
+
+    this.element.addEventListener("selection", this);
+    multiSelectWrapper.addEventListener("click", () => {
+      this.element.focus();
+    })
+
+    if (this.options.selected) {
+      this.options.selected.forEach((selection) => {
+        this.addMultiSelectItem(selection);
+      })
+    }
+  }
+
+  createPromptDiv() {
+    this.promptDiv = document.createElement("div");
+    this.promptDiv.classList.add("search-prompt");
+    this.promptDiv.style.display = "none";
+    this.promptDiv.innerHTML = this.options.searchPromptText;
+    this.acWrapper.appendChild(this.promptDiv);
+  }
+}

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