decidim-core 0.24.3 → 0.25.0.rc1

data/app/packs/src/decidim/geocoding/provider/photon.js

@@ -0,0 +1,71 @@
+import "src/decidim/geocoding"
+import formatAddress from "src/decidim/geocoding/format_address"
+
+/**
+ * For the available address format keys, refer to:
+ * https://github.com/komoot/photon
+ */
+$(() => {
+  const generateAddressLabel = formatAddress;
+
+  $("[data-decidim-geocoding]").each((_i, el) => {
+    const $input = $(el);
+    const config = $input.data("decidim-geocoding");
+    const queryMinLength = config.queryMinLength || 2;
+    // Default Photon installation only supports these languages but for
+    // custom instances, you can configure the supported languages.
+    const supportedLanguages = config.supportedLanguages || ["de", "en", "it", "fr"];
+    const defaultLanguage  = config.defaultLanguage || "en";
+    const addressFormat = config.addressFormat || [
+      "name",
+      ["street", "housenumber"],
+      "postcode",
+      "city",
+      "state",
+      "country"
+    ];
+    let language = $("html").attr("lang");
+    if (!supportedLanguages.includes(language)) {
+      language = defaultLanguage;
+    }
+    let currentSuggestionQuery = null;
+
+    if (!config.url || config.url.length < 1) {
+      return;
+    }
+
+    $input.on("geocoder-suggest.decidim", (_ev, query, callback) => {
+      clearTimeout(currentSuggestionQuery);
+
+      // Do not trigger API calls on short queries
+      if (`${query}`.trim().length < queryMinLength) {
+        return;
+      }
+
+      currentSuggestionQuery = setTimeout(() => {
+        $.ajax({
+          method: "GET",
+          url: config.url,
+          data: {
+            q: query, // eslint-disable-line
+            lang: language
+          },
+          dataType: "json"
+        }).done((resp) => {
+          if (resp.features) {
+            return callback(resp.features.map((item) => {
+              const label = generateAddressLabel(item.properties, addressFormat);
+
+              return {
+                key: label,
+                value: label,
+                coordinates: item.geometry.coordinates
+              }
+            }));
+          }
+          return null;
+        });
+      }, 200);
+    });
+  })
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable require-jsdoc */
+/* eslint-disable no-prototype-builtins, no-restricted-syntax, no-param-reassign */
+
+let callbacks = {};
+
+export default function registerCallback(callbackId, callback) {
+  callbacks[callbackId] = callback;
+}
+
+const unregisterCallback = (callbackId) => {
+  callbacks[callbackId] = null;
+}
+
+const pushState = (url, state = null) => {
+  if (window.history) {
+    window.history.pushState(state, null, url);
+  }
+};
+
+const replaceState = (url, state = null) => {
+  if (window.history) {
+    window.history.replaceState(state, null,  url);
+  }
+};
+
+const state = () => {
+  if (window.history) {
+    return window.history.state;
+  }
+  return null;
+};
+
+window.onpopstate = (event) => {
+  // Ensure the event is caused by user action
+  if (event.isTrusted) {
+    for (let callbackId in callbacks) {
+      if (callbacks.hasOwnProperty(callbackId)) {
+        callbacks[callbackId](event.state);
+      }
+    }
+  }
+}
+
+export { registerCallback, unregisterCallback, pushState, replaceState, state };

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

@@ -0,0 +1,51 @@
+const DEFAULT_ATTRIBUTES = {
+  role: "img",
+  "aria-hidden": "true"
+};
+
+/**
+ * Generates a Decidim icon element and returns it as a string.
+ * @param {String} iconKey - the key of the icon to be generated
+ * @param {Object} attributes - extra attributes to define for the icon SVG
+ * @param {int} wait - number of milliseconds to wait before executing the function.
+ * @private
+ * @returns {Void} - Returns nothing.
+ */
+export default function icon(iconKey, attributes = {}) {
+  const iconAttributes = $.extend(DEFAULT_ATTRIBUTES, attributes);
+  const corsMode = window.Decidim.config.get("cors_enabled");
+  const title = iconAttributes.title || iconAttributes.ariaLabel;
+  Reflect.deleteProperty(iconAttributes, "title");
+
+  const htmlAttributes = {
+    "class": `icon icon--${iconKey}`
+  };
+  Object.keys(iconAttributes).forEach((key) => {
+    // Convert the key to dash-format.
+    const newKey = key.replace(/([A-Z])/g, (ucw) => `-${ucw[0].toLowerCase()}`);
+    if (typeof htmlAttributes[key] === "undefined") {
+      htmlAttributes[newKey] = iconAttributes[key];
+    } else {
+      htmlAttributes[newKey] = `${htmlAttributes[newKey]} ${iconAttributes[key]}`;
+    }
+  });
+
+  let iconsPath =  ""
+  if (corsMode === true) {
+    iconsPath = window.Decidim.config.get("icons_path");
+  }
+
+  const elHtml = `<svg><use href="${iconsPath}#icon-${iconKey}"></use></svg>`;
+  const $el = $(elHtml);
+  if (title) {
+    $el.prepend(`<title>${title}</title>`);
+  } else {
+    // This keeps accessibility audit tools happy
+    $el.prepend(`<title>${iconKey}</title>`);
+    // Force hidden if title is not defined
+    htmlAttributes["aria-hidden"] = "true";
+  }
+  $el.attr(htmlAttributes);
+
+  return $("<div />").append($el).html();
+}

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

@@ -3,8 +3,7 @@
  * select with which identity he wants to perform an action.
  *
  */
-$(document).ready(function () {
-
+$(() => {
   let button = $("#select-identity-button"),
       identitiesUrl = null,
       userIdentitiesDialog = $("#user-identities");
@@ -26,7 +25,7 @@ $(document).ready(function () {
  * Manage the identity selector for endorsements.
  *
  */
-$(document).ready(function () {
+$(() => {
   $("#select-identity-button").on("ajax:success", function() {
     // once reveal popup has been rendered register event callbacks
     $("#user-identities ul.reveal__list li").each(function(index, elem) {

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

@@ -0,0 +1,23 @@
+import moment from "moment"
+
+$(() => {
+  const $impersonationWarning = $(".impersonation-warning");
+  if ($impersonationWarning.length) {
+    const endsAt = moment($impersonationWarning.data("session-ends-at"));
+    const exitInterval = setInterval(() => {
+      const diff = (endsAt - moment()) / 60000;
+      const diffInMinutes = Math.round(diff);
+      $impersonationWarning.find(".minutes").html(diffInMinutes);
+
+      if (diff <= 0) {
+        window.location.reload();
+      }
+    }, 1000);
+
+    // Prevent reload when page is already unloading, otherwise it may cause infinite reloads.
+    window.addEventListener("beforeunload", () => {
+      clearInterval(exitInterval);
+      return;
+    });
+  }
+});

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

@@ -0,0 +1,69 @@
+/* eslint-disable no-invalid-this */
+
+import svg4everybody from "svg4everybody"
+import formDatePicker from "src/decidim/form_datepicker"
+import fixDropdownMenus from "src/decidim/dropdowns_menus"
+import createQuillEditor from "src/decidim/editor"
+import Configuration from "src/decidim/configuration"
+import ExternalLink from "src/decidim/external_link"
+import updateExternalDomainLinks from "src/decidim/external_domain_warning"
+import InputCharacterCounter from "src/decidim/input_character_counter"
+import FormValidator from "src/decidim/form_validator"
+import CommentsComponent from "src/decidim/comments/comments.component"
+import DataPicker from "src/decidim/data_picker"
+import FormFilterComponent from "src/decidim/form_filter"
+import addInputEmoji from "src/decidim/input_emoji"
+
+window.Decidim = window.Decidim || {};
+window.Decidim.config = new Configuration()
+window.Decidim.ExternalLink = ExternalLink;
+window.Decidim.InputCharacterCounter = InputCharacterCounter;
+window.Decidim.FormValidator = FormValidator;
+window.Decidim.DataPicker = DataPicker;
+window.Decidim.CommentsComponent = CommentsComponent;
+window.Decidim.addInputEmoji = addInputEmoji;
+
+$(() => {
+  window.theDataPicker = new DataPicker($(".data-picker"));
+
+  $(document).foundation();
+
+  fixDropdownMenus();
+
+  svg4everybody();
+
+  // Prevent data-open buttons e.g. from submitting the underlying form in
+  // authorized action buttons.
+  $("[data-open]").on("click", (event) => {
+    event.preventDefault();
+  });
+
+  formDatePicker();
+
+  $(".editor-container").each((_idx, container) => {
+    createQuillEditor(container);
+  });
+
+  $('a[target="_blank"]').each((_i, elem) => {
+    const $link = $(elem);
+    $link.data("external-link", new ExternalLink($link));
+  });
+
+  // Mount comments component
+  $("[data-decidim-comments]").each((_i, el) => {
+    const $el = $(el);
+    const comments = new CommentsComponent($el, $el.data("decidim-comments"));
+    comments.mountComponent();
+    $(el).data("comments", comments);
+  });
+
+  $("form.new_filter").each(function () {
+    const formFilter = new FormFilterComponent($(this));
+
+    formFilter.mountComponent();
+  })
+
+  updateExternalDomainLinks($("body"))
+
+  addInputEmoji()
+});

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

@@ -0,0 +1,38 @@
+$(() => {
+  const $inputs = $("input[data-autojump]");
+  const DELETE_KEY_CODE = 8;
+
+  // Initialize
+  $inputs.on("keydown", (event) => {
+    // Don't do anything if there is selected text
+    if (event.target.selectionStart !== event.target.selectionEnd) {
+      return;
+    }
+
+    if (event.originalEvent.key.length === 1 && event.target.dataset.jumpNext) {
+      if (
+        event.target.value.length ===
+        parseInt(event.target.dataset.maxLength, 10)
+      ) {
+        event.preventDefault();
+        setTimeout(() => {
+          const next = $(event.target.dataset.jumpNext);
+          next.val(event.originalEvent.key);
+          next.trigger("focus");
+        }, 1);
+      }
+    } else if (
+      event.originalEvent.keyCode === DELETE_KEY_CODE &&
+      event.target.dataset.jumpPrev
+    ) {
+      if (event.target.value.length === 0) {
+        event.preventDefault();
+        setTimeout(() => {
+          const prev = $(event.target.dataset.jumpPrev);
+          prev.val(prev.val().slice(0, -1));
+          prev.trigger("focus");
+        }, 1);
+      }
+    }
+  });
+});

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

@@ -0,0 +1,121 @@
+const COUNT_KEY = "%count%";
+const DEFAULT_MESSAGES = {
+  charactersAtLeast: {
+    one: `at least ${COUNT_KEY} character`,
+    other: `at least ${COUNT_KEY} characters`
+  },
+  charactersLeft: {
+    one: `${COUNT_KEY} character left`,
+    other: `${COUNT_KEY} characters left`
+  }
+};
+let MESSAGES = DEFAULT_MESSAGES;
+
+export default class InputCharacterCounter {
+  static configureMessages(messages) {
+    MESSAGES = $.extend(DEFAULT_MESSAGES, messages);
+  }
+
+  constructor(input) {
+    this.$input = input;
+    this.$target = $(this.$input.data("remaining-characters"));
+    this.minCharacters = parseInt(this.$input.attr("minlength"), 10);
+    this.maxCharacters = parseInt(this.$input.attr("maxlength"), 10);
+
+    if (this.$target.length < 1) {
+      let targetId = null;
+      if (this.$input.attr("id") && this.$input.attr("id").length > 0) {
+        targetId = `${this.$input.attr("id")}_characters`;
+      } else {
+        targetId = `characters_${Math.random().toString(36).substr(2, 9)}`;
+      }
+
+      this.$target = $(`<span id="${targetId}" class="form-input-extra-before" />`)
+
+      // If input is a hidden for WYSIWYG editor add it at the end
+      if (this.$input.parent().is(".editor")) {
+        this.$input.parent().after(this.$target);
+      }
+      // Prefix and suffix columns are wrapped in columns, so put the
+      // character counter before that.
+      else if (
+        this.$input.parent().is(".columns") &&
+        this.$input.parent().parent().is(".row")
+      ) {
+        this.$input.parent().parent().after(this.$target);
+      } else {
+        this.$input.after(this.$target);
+      }
+    }
+
+    if (this.$target.length > 0 && (this.maxCharacters > 0 || this.minCharacters > 0)) {
+      this.bindEvents();
+    }
+  }
+
+  bindEvents() {
+    // In WYSIWYG editors (Quill) we need to find the active editor from the
+    // DOM node. Quill has the experimental "find" method that should work
+    // fine in this case
+    if (Quill && this.$input.parent().is(".editor")) {
+      // Wait until the next javascript loop so Quill editors are created
+      setTimeout(() => {
+        const editor = Quill.find(this.$input.siblings(".editor-container")[0]);
+        editor.on("text-change", () => {
+          this.updateStatus();
+        });
+      })
+    }
+    this.$input.on("keyup", () => {
+      this.updateStatus();
+    });
+    if (this.$input.get(0) !== null) {
+      this.$input.get(0).addEventListener("emoji.added", () => {
+        this.updateStatus();
+      });
+    }
+    this.updateStatus();
+  }
+
+  updateStatus() {
+    const numCharacters = this.$input.val().length;
+    const showMessages = [];
+
+    if (this.minCharacters > 0) {
+      let message = MESSAGES.charactersAtLeast.other;
+      if (this.minCharacters === 1) {
+        message = MESSAGES.charactersAtLeast.one;
+      }
+      showMessages.push(message.replace(COUNT_KEY, this.minCharacters));
+    }
+
+    if (this.maxCharacters > 0) {
+      const remaining = this.maxCharacters - numCharacters;
+      let message = MESSAGES.charactersLeft.other;
+      if (remaining === 1) {
+        message = MESSAGES.charactersLeft.one;
+      }
+      showMessages.push(message.replace(COUNT_KEY, remaining));
+    }
+
+    this.$target.text(showMessages.join(", "));
+  }
+}
+
+const createCharacterCounter = ($input) => {
+  $input.data("remaining-characters-counter", new InputCharacterCounter($input));
+}
+
+$(() => {
+  $("input[type='text'], textarea, .editor>input[type='hidden']").each((_i, elem) => {
+    const $input = $(elem);
+
+    if (!$input.is("[minlength]") && !$input.is("[maxlength]")) {
+      return;
+    }
+
+    createCharacterCounter($input);
+  });
+});
+
+export { InputCharacterCounter, createCharacterCounter };

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

@@ -0,0 +1,33 @@
+import { EmojiButton } from "@joeattardi/emoji-button";
+
+// eslint-disable-next-line require-jsdoc
+export default function addInputEmoji() {
+  const containers = document.querySelectorAll("[data-input-emoji]");
+
+  if (containers.length) {
+    containers.forEach((elem) => {
+      const picker = new EmojiButton({
+        position: "bottom-end"
+      });
+
+      const wrapper = document.createElement("div");
+      wrapper.className = "emoji__container"
+      const btnContainer = document.createElement("div");
+      btnContainer.className = "emoji__trigger"
+      btnContainer.innerHTML = '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>'
+
+      elem.parentNode.insertBefore(wrapper, elem);
+      wrapper.appendChild(elem);
+      wrapper.appendChild(btnContainer);
+
+      btnContainer.addEventListener("click", () => picker.togglePicker(btnContainer))
+
+      picker.on("emoji", ({ emoji }) => {
+        elem.value += ` ${emoji} `
+
+        const event = new Event("emoji.added");
+        elem.dispatchEvent(event);
+      });
+    })
+  }
+};