decidim-core 0.24.3 → 0.25.0.rc1

data/app/{assets/javascripts/decidim/conversations.js.es6 → packs/src/decidim/conversations.js}

@@ -3,14 +3,14 @@
  * To apply this to a page, at least one element must have the class "scroll-to-last-message".
  * @returns {void}
  */
-const scrollToLastMessage = () => {
+const scrollToLastMessage = function() {
   if ($(".scroll-to-last-message").length > 0) {
     window.scrollTo({
       top: $(".conversation-chat:last-child").offset().top,
       behavior: "smooth"
     });
   }
-};
+}
 
 $(document).ready(() => {
   scrollToLastMessage();

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

@@ -0,0 +1,272 @@
+export default class DataPicker {
+  constructor(pickers) {
+    this.modal = this._createModalContainer();
+    this.modal.appendTo($("body"));
+    this.current = null;
+
+    pickers.each((_index, picker) => {
+      this.activate(picker);
+    });
+  }
+
+  activate(picker) {
+    let $picker = $(picker);
+
+    this._setCurrentPicker($picker, null);
+
+    let input = "hidden",
+        name = this.current.name,
+        values = this.current.values;
+
+    if (this.current.multiple) {
+      name += "[]";
+    }
+
+    $("div", values).each((_index2, div) => {
+      let value = $("a", div).data("picker-value");
+      $(div).prepend($(`<input type="${input}" checked name="${name}" value="${value}"/>`));
+    });
+
+    $picker.on("click", "a", (event) => {
+      event.preventDefault();
+      if ($picker.hasClass("disabled")) {
+        return;
+      }
+      const isMultiPicker = $picker.hasClass("picker-multiple");
+
+      if ($(this._targetFromEvent(event)).hasClass("picker-prompt") || !isMultiPicker) {
+        this._openPicker($picker, this._targetFromEvent(event));
+      }  else if (this._targetFromEvent(event).tagName === "A") {
+        this._removeValue($picker, this._targetFromEvent(event).parentNode);
+      } else {
+        this._removeValue($picker, this._targetFromEvent(event));
+      }
+    });
+
+    $picker.on("click", "input", (event) => {
+      this._removeValue($picker, this._targetFromEvent(event));
+    });
+
+    if (this.current.autosort) {
+      this._sort();
+    }
+  }
+
+  enabled(picker, value) {
+    $(picker).toggleClass("disabled", !value);
+    $("input", picker).attr("disabled", !value);
+  }
+
+  clear(picker) {
+    $(".picker-values", picker).html("");
+  }
+
+  save(picker) {
+    return $(".picker-values div:has(input:checked)", picker).map((_index, div) => {
+      let $link = $("a", div);
+      return {
+        value: $("input", div).val(),
+        text: $link.text(),
+        url: $link.attr("href")
+      };
+    }).get();
+  }
+
+  load(picker, savedData) {
+    this._setCurrentPicker($(picker), null);
+    $.each(savedData, (_index, data) => {
+      this._choose(data, { interactive: false, modify: false });
+    });
+    if (this.current.autosort) {
+      this._sort();
+    }
+  }
+
+  _createModalContainer() {
+    // Add a header because we are referencing the title element with
+    // `aria-labelledby`. If the title doesn't exist, the "labelled by"
+    // reference is incorrect.
+    const headerHtml = '<div class="scope-picker picker-header"><h6 id="data_picker-title" class="h2"></h6></div>';
+
+    return $(`<div class="small reveal" id="data_picker-modal" aria-hidden="true" aria-live="assertive" role="dialog" aria-labelledby="data_picker-title" data-reveal data-multiple-opened="true">
+             <div class="data_picker-modal-content">${headerHtml}</div>
+             <button class="close-button" data-close type="button" data-reveal-id="data_picker-modal"><span aria-hidden="true">&times;</span></button>
+             </div>`);
+  }
+
+  _openPicker($picker, target) {
+    this._setCurrentPicker($picker, target);
+    this._load($("a", target).attr("href"));
+  }
+
+  _setCurrentPicker($picker, target) {
+    let $target = false;
+    if (target && !$(target).hasClass("picker-prompt")) {
+      $target = $(target);
+    }
+
+    this.current = {
+      picker: $picker,
+      name: $picker.data("picker-name"),
+      values: $picker.find(".picker-values"),
+      multiple: $picker.hasClass("picker-multiple"),
+      autosort: $picker.hasClass("picker-multiple") && $picker.hasClass("picker-autosort"),
+      target: $target
+    };
+  }
+
+  _load(url) {
+    $.ajax(url).done((resp) => {
+      let modalContent = $(".data_picker-modal-content", this.modal);
+      modalContent.html(resp);
+      this._handleLinks(modalContent);
+      this._handleCheckboxes(modalContent);
+      this.modal.foundation("open");
+    });
+  }
+
+  _handleLinks(content) {
+    $("a", content).each((_index, link) => {
+      let $link = $(link);
+      $link.click((event) => {
+        event.preventDefault();
+        if ($link.data("close") || $link.data("close") === "") {
+          return;
+        }
+
+        let chooseUrl = $link.attr("href");
+        if (chooseUrl) {
+          if (typeof $link.data("picker-choose") === "undefined") {
+            this._load(chooseUrl);
+          } else {
+            this._choose(
+              { url: chooseUrl, value: $link.data("picker-value") || "", text: $link.data("picker-text") || "" }
+            );
+          }
+        }
+      });
+    });
+  }
+
+  _handleCheckboxes(content) {
+    $("input[type=checkbox][data-picker-choose]", content).each((_index, checkbox) => {
+      const $checkbox = $(checkbox);
+      checkbox.checked = this._targetFromValue($checkbox.val()) !== null;
+    }).change((event) => {
+      const $checkbox = $(event.target);
+      if (event.target.checked) {
+        this._choose(
+          { url: $checkbox.data("picker-url"), value: $checkbox.val() || "", text: $checkbox.data("picker-text") || "" },
+          { modify: false, close: false }
+        );
+      }
+      else {
+        this._removeValue(this.current.picker, this._targetFromValue($checkbox.val()));
+      }
+    });
+  }
+
+  _choose(data, opts = {}) {
+    const options = Object.assign({ interactive: true, modify: true, close: true }, opts);
+
+    let dataText = this._escape(data.text);
+    let choosenOption = null;
+
+    if (!this.current.target && options.modify) {
+      this.current.target = this._targetFromValue(data.value);
+    }
+
+    // Add or update value appearance
+    if (this.current.target && options.modify) {
+      let link = $("a", this.current.target);
+      link.data("picker-value", data.value);
+      link.attr("href", data.url);
+      choosenOption = this.current.target;
+      if (this.current.multiple) {
+        link.html(`&times;&nbsp;${dataText}`);
+      } else {
+        link.text(dataText);
+      }
+    } else {
+      let input = "hidden",
+          name = this.current.name;
+
+      if (this.current.multiple) {
+        name += "[]";
+        choosenOption = $(`<div><input type="${input}" checked name="${name}"/><a href="${data.url}" data-picker-value="${data.value}" class="label primary">&times;&nbsp;${dataText}</a></div>`);
+      } else {
+        choosenOption = $(`<div><input type="${input}" checked name="${name}"/><a href="${data.url}" data-picker-value="${data.value}">${dataText}</a></div>`);
+      }
+      choosenOption.appendTo(this.current.values);
+
+      if (!this.current.target) {
+        this.current.target = choosenOption;
+      }
+    }
+
+    // Set input value
+    let $input = $("input", choosenOption);
+    $input.attr("value", data.value);
+
+    if (this.current.autosort) {
+      this._sort();
+    }
+
+    if (options.interactive) {
+      // Raise changed event
+      $input.trigger("change");
+      this._removeErrors();
+
+      if (options.close) {
+        this._close();
+      }
+    }
+  }
+
+  _sort() {
+    const values = $(".picker-values", this.current.picker);
+    values.children().sort((item1, item2) => $("input", item1).val() - $("input", item2).val()).detach().appendTo(values);
+  }
+
+  _close() {
+    // Close modal and unset target element
+    this.modal.foundation("close");
+    this.current.target = null;
+  }
+
+  _removeValue($picker, target) {
+    if (target) {
+      this._setCurrentPicker($picker, target);
+      // Fadeout (with time) doesn't work in system tests
+      let fadeoutTime = 500;
+      if (navigator && navigator.webdriver) {
+        fadeoutTime = 0;
+      }
+      this.current.target.fadeOut(fadeoutTime, () => {
+        this.current.target.remove();
+        this.current.target = null;
+      });
+    }
+  }
+
+  _removeErrors() {
+    let parent = this.current.picker.parent();
+    $(".is-invalid-input", parent).removeClass("is-invalid-input");
+    $(".is-invalid-label", parent).removeClass("is-invalid-label");
+    $(".form-error.is-visible", parent).removeClass("is-visible");
+  }
+
+  _escape(str) {
+    return str.replace(/[\u00A0-\u9999<>&]/gim, function (char) {
+      return `&#${char.charCodeAt(0)};`;
+    });
+  }
+
+  _targetFromEvent(event) {
+    return event.target.parentNode;
+  }
+
+  _targetFromValue(value) {
+    return $(`[data-picker-value=${value}]`, this.current.picker).parent()[0] || null;
+  }
+}

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

@@ -0,0 +1,23 @@
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds.
+ * @param {Object} context - the context for the called function.
+ * @param {Function} func - the function to be executed.
+ * @param {int} wait - number of milliseconds to wait before executing the function.
+ * @private
+ * @returns {Void} - Returns nothing.
+ */
+export default function delayed(context, func, wait) {
+  let timeout = null;
+
+  return function(...args) {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      timeout = null;
+      Reflect.apply(func, context, args);
+    }, wait);
+  }
+}

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

@@ -0,0 +1,29 @@
+/* eslint-disable require-jsdoc */
+
+// This will apply some fixes for the Foundation dropdown menu element
+// according to W3C instructions at:
+// https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html
+//
+// NOTE:
+// This needs to run AFTER Foundation has been initialized because those
+// initializers will affect the drop down menu elements.
+export default function fixDropdownMenus() {
+  $("[data-dropdown-menu]").each((_i, element) => {
+    // This will break navigation on macOS VoiceOver app since it will let the
+    // user to focus on the li element instead of the <a> element where we
+    // actually need the focus to be in.
+    $("li.is-dropdown-submenu-parent", element).removeAttr("aria-haspopup").removeAttr("aria-label");
+    // Foundation marks the wrong role for the submenu elements
+    $("ul.is-dropdown-submenu", element).attr("role", "menu");
+  })
+}
+
+// Ensure the first element is always focused when a dropdown is opened as
+// this would not always happen when using a screen reader. If this is not
+// done, the screen reader will stay quiet when the menu opens which can lead
+// to the blind user not understanding the menu has opened.
+$(() => {
+  $("[data-dropdown-menu]").on("show.zf.dropdownMenu", (_i, element) => {
+    $("li:first > a", element).focus();
+  });
+})

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

@@ -0,0 +1,72 @@
+/* eslint-disable require-jsdoc */
+
+import lineBreakButtonHandler from "src/decidim/editor/linebreak_module"
+
+const quillFormats = ["bold", "italic", "link", "underline", "header", "list", "video", "image", "alt", "break"];
+
+export default function createQuillEditor(container) {
+  const toolbar = $(container).data("toolbar");
+  const disabled = $(container).data("disabled");
+
+  let quillToolbar = [
+    ["bold", "italic", "underline", "linebreak"],
+    [{ list: "ordered" }, { list: "bullet" }],
+    ["link", "clean"]
+  ];
+
+  if (toolbar === "full") {
+    quillToolbar = [
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      ...quillToolbar,
+      ["video"]
+    ];
+  } else if (toolbar === "basic") {
+    quillToolbar = [
+      ...quillToolbar,
+      ["video"]
+    ];
+  }
+
+  const $input = $(container).siblings('input[type="hidden"]');
+  container.innerHTML = $input.val() || "";
+
+  const quill = new Quill(container, {
+    modules: {
+      linebreak: {},
+      toolbar: {
+        container: quillToolbar,
+        handlers: {
+          "linebreak": lineBreakButtonHandler
+        }
+      }
+    },
+    formats: quillFormats,
+    theme: "snow"
+  });
+
+  if (disabled) {
+    quill.disable();
+  }
+
+  quill.on("text-change", () => {
+    const text = quill.getText();
+
+    // Triggers CustomEvent with the cursor position
+    // It is required in input_mentions.js
+    let event = new CustomEvent("quill-position", {
+      detail: quill.getSelection()
+    });
+    container.dispatchEvent(event);
+
+    if (text === "\n" || text === "\n\n") {
+      $input.val("");
+    } else {
+      $input.val(quill.root.innerHTML);
+    }
+  });
+  // After editor is ready, linebreak_module deletes two extraneous new lines
+  quill.emitter.emit("editor-ready");
+
+  return quill;
+}
+

data/app/packs/src/decidim/editor/attribute_diff.js

@@ -0,0 +1,28 @@
+/* eslint-disable require-jsdoc */
+
+// ORGINAL: https://github.com/quilljs/delta/blob/ddda3bf088cda3ec03d5dbcc1179679d147f3a02/src/AttributeMap.ts
+export default function attributeDiff(attributes1, attributes2) {
+  let alpha = attributes1;
+  let beta = attributes2;
+  if (typeof alpha !== "object") {
+    alpha = {};
+  }
+  if (typeof beta !== "object") {
+    beta = {};
+  }
+  const attributes = Object.keys(alpha).concat(Object.keys(beta)).reduce((attrs, key) => {
+    // ORGINAL: import isEqual from 'lodash.isequal'; if (!isEqual(a[key], b[key]))
+    if ((alpha[key] !== beta[key])) {
+      attrs[key] = null;
+      if (beta[key]) {
+        attrs[key] = beta[key]
+      }
+    }
+    return attrs;
+  }, {});
+
+  if (Object.keys(attributes).length > 0) {
+    return attributes;
+  }
+  return null;
+}