decidim-core 0.24.3 → 0.25.0.rc1

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

@@ -0,0 +1,185 @@
+/**
+ * CheckBoxesTree component.
+ */
+export default class CheckBoxesTree {
+  constructor() {
+    this.checkboxesTree = document.querySelectorAll("[data-checkboxes-tree]");
+    if (!this.checkboxesTree) {
+      return;
+    }
+
+    this.globalChecks = document.querySelectorAll("[data-global-checkbox] input");
+    this.globalChecks.forEach((global) => {
+      if (global.value === "") {
+        global.classList.add("ignore-filter")
+      }
+    });
+    this.checkGlobalCheck();
+
+    // Event listeners
+    this.checkboxesTree.forEach((input) => input.addEventListener("click", (event) => this.checkTheCheckBoxes(event.target)));
+    document.querySelectorAll("[data-children-checkbox] input").forEach((input) => {
+      input.addEventListener("change", (event) => this.checkTheCheckParent(event.target));
+    });
+
+    // Review parent checkboxes on initial load
+    document.querySelectorAll("[data-children-checkbox] input").forEach((input) => {
+      this.checkTheCheckParent(input);
+    });
+  }
+
+  /**
+   * Set checkboxes as checked if included in given values
+   * @public
+   * @param {Array} checkboxes - array of checkboxs to check
+   * @param {Array} values - values of checkboxes that should be checked
+   * @returns {Void} - Returns nothing.
+   */
+  updateChecked(checkboxes, values) {
+    checkboxes.each((index, checkbox) => {
+      if ((checkbox.value === "" && values.length === 1) || (checkbox.value !== "" && values.includes(checkbox.value))) {
+        checkbox.checked = true;
+        this.checkTheCheckBoxes(checkbox);
+        this.checkTheCheckParent(checkbox);
+      }
+    });
+  }
+
+  /**
+   * Set the container form(s) for the component, to disable ignored filters before submitting them
+   * @public
+   * @param {query} theForm - form or forms where the component will be used
+   * @returns {Void} - Returns nothing.
+   */
+  setContainerForm(theForm) {
+    theForm.on("submit ajax:before", () => {
+      theForm.find(".ignore-filters input, input.ignore-filter").each((idx, elem) => {
+        elem.disabled = true;
+      });
+    });
+
+    theForm.on("ajax:send", () => {
+      theForm.find(".ignore-filters input, input.ignore-filter").each((idx, elem) => {
+        elem.disabled = false;
+      });
+    });
+  }
+
+  /**
+   * Handles the click action on any checkbox.
+   * @private
+   * @param {Input} target - the input that has been checked
+   * @returns {Void} - Returns nothing.
+   */
+  checkTheCheckBoxes(target) {
+    // Quis custodiet ipsos custodes?
+    const targetChecks = target.dataset.checkboxesTree;
+    const checkStatus = target.checked;
+    const allChecks = document.querySelectorAll(`#${targetChecks} input[type='checkbox']`);
+
+    allChecks.forEach((input) => {
+      input.checked = checkStatus;
+      input.indeterminate = false;
+      input.classList.add("ignore-filter");
+    });
+  }
+
+  /**
+   * Update global checkboxes state when the current selection changes
+   * @private
+   * @returns {Void} - Returns nothing.
+   */
+  checkGlobalCheck() {
+    this.globalChecks.forEach((global) => {
+      const checksContext = global.dataset.checkboxesTree;
+      const totalInputs = document.querySelectorAll(
+        `#${checksContext} input[type='checkbox']`
+      );
+      const checkedInputs = document.querySelectorAll(
+        `#${checksContext} input[type='checkbox']:checked`
+      );
+      const indeterminateInputs = Array.from(totalInputs).filter((checkbox) => checkbox.indeterminate)
+
+      if (checkedInputs.length === 0 && indeterminateInputs.length === 0) {
+        global.checked = false;
+        global.indeterminate = false;
+      } else if (checkedInputs.length === totalInputs.length && indeterminateInputs.length === 0) {
+        global.checked = true;
+        global.indeterminate = false;
+      } else {
+        global.checked = true;
+        global.indeterminate = true;
+      }
+
+      totalInputs.forEach((input) => {
+        if (global.indeterminate && !input.indeterminate) {
+          input.classList.remove("ignore-filter");
+        } else {
+          input.classList.add("ignore-filter");
+        }
+        const subfilters = input.parentNode.parentNode.nextElementSibling;
+        if (subfilters && subfilters.classList.contains("filters__subfilters")) {
+          if (input.indeterminate) {
+            subfilters.classList.remove("ignore-filters");
+          } else {
+            subfilters.classList.add("ignore-filters");
+          }
+        }
+      });
+    });
+  }
+
+  /**
+   * Update children checkboxes state when the current selection changes
+   * @private
+   * @param {Input} input - the checkbox to check its parent
+   * @returns {Void} - Returns nothing.
+   */
+  checkTheCheckParent(input) {
+    const checkBoxContext = $(input).parents(".filters__subfilters").attr("id");
+    if (!checkBoxContext) {
+      this.checkGlobalCheck();
+      return;
+    }
+
+    const parentCheck = document.querySelector(
+      `[data-checkboxes-tree=${checkBoxContext}]`
+    );
+    const totalCheckSiblings = document.querySelectorAll(
+      `#${checkBoxContext} > div > [data-children-checkbox] > input, #${checkBoxContext} > [data-children-checkbox] > input`
+    );
+    const checkedSiblings = document.querySelectorAll(
+      `#${checkBoxContext} > div > [data-children-checkbox] > input:checked, #${checkBoxContext} > [data-children-checkbox] > input:checked`
+    );
+    const indeterminateSiblings = Array.from(totalCheckSiblings).filter((checkbox) => checkbox.indeterminate)
+
+    if (checkedSiblings.length === 0 && indeterminateSiblings.length === 0) {
+      parentCheck.checked = false;
+      parentCheck.indeterminate = false;
+    } else if (checkedSiblings.length === totalCheckSiblings.length && indeterminateSiblings.length === 0) {
+      parentCheck.checked = true;
+      parentCheck.indeterminate = false;
+    } else {
+      parentCheck.checked = true;
+      parentCheck.indeterminate = true;
+    }
+
+    totalCheckSiblings.forEach((sibling) => {
+      if (parent.indeterminate && !sibling.indeterminate) {
+        sibling.classList.remove("ignore-filter");
+      } else {
+        sibling.classList.add("ignore-filter");
+      }
+      const subfilters = sibling.parentNode.parentNode.nextElementSibling;
+      if (subfilters && subfilters.classList.contains("filters__subfilters")) {
+        if (sibling.indeterminate) {
+          subfilters.classList.remove("ignore-filters");
+        } else {
+          subfilters.classList.add("ignore-filters");
+        }
+      }
+    });
+
+    this.checkTheCheckParent(parentCheck);
+  }
+}

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

@@ -0,0 +1,119 @@
+import select from "select";
+
+/**
+ * This provides functionality to add clipboard copy functionality to buttons
+ * on the page. The element to be copied from has to be defined for the button
+ * using a `data` attribute and the target element has to be a form input.
+ *
+ * Usage:
+ *   1. Create the button:
+ *     <button class="button"
+ *      data-clipboard-copy="#target-input-element"
+ *      data-clipboard-copy-label="Copied!"
+ *      data-clipboard-copy-message="The text was successfully copied to clipboard."
+ *      aria-label="Copy the text to clipboard">
+ *        <%= icon "clipboard", role: "presentation", "aria-hidden": true %>
+ *        Copy to clipboard
+ *    </button>
+ *
+ *   2. Make sure the target element exists on the page:
+ *     <input id="target-input-element" type="text" value="This text will be copied.">
+ *
+ * Options through data attributes:
+ * - `data-clipboard-copy` = The jQuery selector for the target input element
+ *   where text will be copied from.
+ * - `data-clipboard-copy-label` = The label that will be shown in the button
+ *   after a succesful copy.
+ * - `data-clipboard-copy-message` = The text that will be announced to screen
+ *   readers after a successful copy.
+ */
+
+// How long the "copied" text is shown in the copy element after successful
+// copy.
+const CLIPBOARD_COPY_TIMEOUT = 5000;
+
+$(() => {
+  $(document).on("click", "[data-clipboard-copy]", (ev) => {
+    const $el = $(ev.target);
+    if (!$el.data("clipboard-copy") || $el.data("clipboard-copy").length < 1) {
+      return;
+    }
+
+    const $input = $($el.data("clipboard-copy"));
+    if ($input.length < 1 || !$input.is("input, textarea, select")) {
+      return;
+    }
+
+    // Get the available text to clipboard.
+    const selectedText = select($input[0]);
+    if (!selectedText || selectedText.length < 1) {
+      return;
+    }
+
+    // Move the selected text to clipboard.
+    const $temp = $(`<textarea>${selectedText}</textarea>`).css({
+      width: 1,
+      height: 1
+    });
+    $el.after($temp);
+    $temp.select();
+
+    const copyDone = () => {
+      $temp.remove();
+      $el.focus();
+    };
+    try {
+      // document.execCommand is deprecated but the Clipboard API is not
+      // supported by IE (which unfortunately is still a thing).
+      if (!document.execCommand("copy")) {
+        return;
+      }
+    } catch (err) {
+      copyDone();
+      return;
+    }
+    copyDone();
+
+    // Change the label to indicate the copying was successful.
+    const label = $el.data("clipboard-copy-label");
+    if (label) {
+      let to = $el.data("clipboard-copy-label-timeout");
+      if (to) {
+        clearTimeout(to);
+      }
+
+      if (!$el.data("clipboard-copy-label-original")) {
+        $el.data("clipboard-copy-label-original", $el.html());
+      }
+
+      $el.html(label);
+      to = setTimeout(() => {
+        $el.html($el.data("clipboard-copy-label-original"));
+        $el.removeData("clipboard-copy-label-original");
+        $el.removeData("clipboard-copy-label-timeout");
+      }, CLIPBOARD_COPY_TIMEOUT);
+      $el.data("clipboard-copy-label-timeout", to)
+    }
+
+    // Alert the screen reader what just happened (the link was copied).
+    let message = $el.data("clipboard-copy-message");
+    if (message) {
+      let $msg = $el.data("clipboard-message-element");
+      if ($msg) {
+        if ($msg.html() === message) {
+          // Try to hint the screen reader to re-read the text in the message
+          // element.
+          message += "&nbsp;";
+        }
+      } else {
+        $msg = $('<div aria-role="alert" aria-live="assertive" aria-atomic="true" class="clipboard-announcement show-for-sr"></div>');
+        $el.after($msg);
+        $el.data("clipboard-message-element", $msg);
+      }
+
+      // Add the non breaking space always to content to try to force the
+      // screen reader to reannounce the added text.
+      $msg.html(message);
+    }
+  });
+});

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

@@ -0,0 +1,15 @@
+/* eslint-disable no-invalid-this */
+
+import Foundation from "foundation-sites"
+
+$(() => {
+  // True if small devices
+  if (!Foundation.MediaQuery.atLeast("medium")) {
+    const $speaker = $(".js-conference")
+
+    $speaker.hover(function () {
+      const top = $(window).scrollTop() + ($(window).height() * 0.1)
+      $(this).find(".js-bio").css("top", top)
+    })
+  }
+});

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

@@ -0,0 +1,17 @@
+export default class Configuration {
+  constructor() {
+    this.config = {};
+  }
+
+  set(key, value = null) {
+    if (typeof key === "object") {
+      this.config = { ...this.config, ...key };
+    } else {
+      this.config[key] = value;
+    }
+  }
+
+  get(key) {
+    return this.config[key];
+  }
+}

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

@@ -0,0 +1,171 @@
+/**
+ * A custom confirm dialog for Decidim based on Foundation reveals.
+ *
+ * Note that this needs to be loaded before the application JS in order for
+ * it to gain control over the confirm events BEFORE rails-ujs is loaded.
+ */
+
+import Rails from "@rails/ujs"
+
+let TEMPLATE_HTML = null;
+
+class ConfirmDialog {
+  constructor(sourceElement) {
+    this.$modal = $(TEMPLATE_HTML);
+    this.$source = sourceElement;
+    this.$content = $(".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();
+  }
+
+  confirm(message) {
+    this.$content.html(message);
+
+    this.$buttonConfirm.off("click");
+    this.$buttonCancel.off("click");
+
+    return new Promise((resolve) => {
+      this.$buttonConfirm.on("click", (ev) => {
+        ev.preventDefault();
+
+        this.$modal.foundation("close");
+        resolve(true);
+        this.$source.focus();
+      });
+      this.$buttonCancel.on("click", (ev) => {
+        ev.preventDefault();
+
+        this.$modal.foundation("close");
+        resolve(false);
+        this.$source.focus();
+      });
+
+      this.$modal.foundation("open").on("closed.zf.reveal", () => {
+        this.$modal.remove();
+      });
+    });
+  }
+}
+
+// Override the default confirm dialog by Rails
+// See:
+// https://github.com/rails/rails/blob/fba1064153d8e2f4654df7762a7d3664b93e9fc8/actionview/app/assets/javascripts/rails-ujs/features/confirm.coffee
+//
+// There is apparently a better way coming in Rails 6:
+// https://github.com/rails/rails/commit/e9aa7ecdee0aa7bb4dcfa5046881bde2f1fe21cc#diff-e1aaa45200e9adcbcb8baf1c5375b5d1
+//
+// The old approach is broken according to https://github.com/rails/rails/issues/36686#issuecomment-514213323
+// so for the moment this needs to be executed **before** Rails.start()
+const allowAction = (ev, element) => {
+  const message = $(element).data("confirm");
+  if (!message) {
+    return true;
+  }
+
+  if (!Rails.fire(element, "confirm")) {
+    return false;
+  }
+
+  if (TEMPLATE_HTML === null) {
+    TEMPLATE_HTML = $("#confirm-modal")[0].outerHTML;
+    $("#confirm-modal").remove();
+  }
+
+  const dialog = new ConfirmDialog(
+    $(element)
+  );
+  dialog.confirm(message).then((answer) => {
+    const completed = Rails.fire(element, "confirm:complete", [answer]);
+    if (answer && completed) {
+      // Allow the event to propagate normally and re-dispatch it without
+      // the confirm data attribute which the Rails internal method is
+      // checking.
+      $(element).data("confirm", null);
+      $(element).removeAttr("data-confirm");
+
+      // The submit button click events won't do anything if they are
+      // dispatched as is. In these cases, just submit the underlying form.
+      if (ev.type === "click" &&
+        (
+          $(element).is('button[type="submit"]') ||
+          $(element).is('input[type="submit"]')
+        )
+      ) {
+        $(element).parents("form").submit();
+      } else {
+        let origEv = ev.originalEvent || ev;
+        let newEv = origEv;
+        if (typeof Event === "function") {
+          // Clone the event because otherwise some click events may not
+          // work properly when re-dispatched.
+          newEv = new origEv.constructor(origEv.type, origEv);
+        }
+        ev.target.dispatchEvent(newEv);
+      }
+    }
+  });
+
+  return false;
+};
+const handleConfirm = (ev, element) => {
+  if (!allowAction(ev, element)) {
+    Rails.stopEverything(ev);
+  }
+};
+const getMatchingEventTarget = (ev, selector) => {
+  let target = ev.target;
+  while (!(!(target instanceof Element) || Rails.matches(target, selector))) {
+    target = target.parentNode;
+  }
+
+  if (target instanceof Element) {
+    return target;
+  }
+
+  return null;
+};
+const handleDocumentEvent = (ev, matchSelectors) => {
+  return matchSelectors.some((currentSelector) => {
+    let target = getMatchingEventTarget(ev, currentSelector);
+    if (target === null) {
+      return false;
+    }
+
+    handleConfirm(ev, target);
+    return true;
+  });
+};
+
+document.addEventListener("click", (ev) => {
+  return handleDocumentEvent(ev, [
+    Rails.linkClickSelector,
+    Rails.buttonClickSelector,
+    Rails.formInputClickSelector
+  ]);
+});
+document.addEventListener("change", (ev) => {
+  return handleDocumentEvent(ev, [Rails.inputChangeSelector]);
+});
+document.addEventListener("submit", (ev) => {
+  return handleDocumentEvent(ev, [Rails.formSubmitSelector]);
+});
+
+// This is needed for the confirm dialog to work with Foundation Abide.
+// Abide registers its own submit click listeners since Foundation 5.6.x
+// which will be handled before the document listeners above. This would
+// break the custom confirm functionality when used with Foundation Abide.
+document.addEventListener("DOMContentLoaded", function() {
+  $(Rails.formInputClickSelector).on("click.confirm", (ev) => {
+    handleConfirm(ev, getMatchingEventTarget(ev, Rails.formInputClickSelector));
+  });
+});