decidim-core 0.26.2 → 0.27.0.rc2

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/data_consent/consent_manager.js

@@ -0,0 +1,136 @@
+import Cookies from "js-cookie";
+
+class ConsentManager {
+  // Options should contain the following keys:
+  // - modal - HTML element of the data consent modal (e.g. "<div id="dc-modal">Foo bar</div>")
+  // - categories - Available data consent 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 has not given the necessary data consent 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), {
+      domain: document.location.host.split(":")[0],
+      sameSite: "Lax",
+      expires: 365,
+      secure: window.location.protocol === "https:"
+    });
+    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) => {
+        if (original.childNodes && original.childNodes.length) {
+          const content = Array.from(original.childNodes).find((childNode) => {
+            return childNode.nodeType === Node.COMMENT_NODE;
+          });
+          if (!content) {
+            return;
+          }
+          const newElement = document.createElement("div");
+          newElement.innerHTML = content.nodeValue;
+          original.parentNode.replaceChild(newElement.firstElementChild, original);
+        }
+      });
+    } else {
+      document.querySelectorAll("iframe").forEach((original) => {
+        const newElement = document.createElement("div");
+        newElement.className = "disabled-iframe";
+        newElement.appendChild(document.createComment(`${original.outerHTML}`));
+        original.parentNode.replaceChild(newElement, original);
+      });
+    }
+  }
+
+  triggerWarnings() {
+    document.querySelectorAll(".disabled-iframe").forEach((original) => {
+      if (original.querySelector(".dataconsent-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