decidim-core 0.24.3 → 0.25.0.rc1

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

@@ -0,0 +1,56 @@
+const DEFAULT_MESSAGES = {
+  correctErrors: "There are errors on the form, please correct them."
+};
+let MESSAGES = DEFAULT_MESSAGES;
+
+export default class FormValidator {
+  static configureMessages(messages) {
+    MESSAGES = $.extend(DEFAULT_MESSAGES, messages);
+  }
+
+  constructor(form) {
+    this.$form = form;
+
+    this.$form.on("form-error.decidim", () => {
+      this.handleError();
+    });
+  }
+
+  handleError() {
+    this.announceFormError();
+
+    $(".is-invalid-input:first", this.$form).focus();
+  }
+
+  /**
+   * This announces immediately to the screen reader that there are errors on
+   * the form that need to be fixed. Does not work on all screen readers but
+   * works e.g. in Windows+Firefox+NVDA and macOS+Safari+VoiceOver
+   * combinations.
+   *
+   * @returns {undefined}
+   */
+  announceFormError() {
+    let $announce = $(".sr-announce", this.$form);
+    if ($announce.length > 0) {
+      $announce.remove();
+    }
+    $announce = $("<div />");
+    $announce.attr("class", "sr-announce show-for-sr");
+    $announce.attr("aria-live", "assertive");
+    this.$form.prepend($announce);
+
+    setTimeout(() => {
+      $announce.text(MESSAGES.correctErrors);
+    }, 100);
+  }
+}
+
+$(() => {
+  $("form").each((_i, el) => {
+    $(el).data("form-validator", new FormValidator($(el)));
+  });
+  $(document).on("forminvalid.zf.abide", function(_ev, form) {
+    form.trigger("form-error.decidim");
+  })
+});

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

@@ -0,0 +1,65 @@
+import "foundation-datepicker/js/locales/foundation-datepicker.ar"
+import "foundation-datepicker/js/locales/foundation-datepicker.az"
+import "foundation-datepicker/js/locales/foundation-datepicker.bg"
+import "foundation-datepicker/js/locales/foundation-datepicker.bs"
+import "foundation-datepicker/js/locales/foundation-datepicker.ca"
+import "foundation-datepicker/js/locales/foundation-datepicker.cs"
+import "foundation-datepicker/js/locales/foundation-datepicker.cy"
+import "foundation-datepicker/js/locales/foundation-datepicker.da"
+import "foundation-datepicker/js/locales/foundation-datepicker.de"
+import "foundation-datepicker/js/locales/foundation-datepicker.el"
+import "foundation-datepicker/js/locales/foundation-datepicker.en-GB"
+import "foundation-datepicker/js/locales/foundation-datepicker.eo"
+import "foundation-datepicker/js/locales/foundation-datepicker.es"
+import "foundation-datepicker/js/locales/foundation-datepicker.et"
+import "foundation-datepicker/js/locales/foundation-datepicker.eu"
+import "foundation-datepicker/js/locales/foundation-datepicker.fa"
+import "foundation-datepicker/js/locales/foundation-datepicker.fi"
+import "foundation-datepicker/js/locales/foundation-datepicker.fo"
+import "foundation-datepicker/js/locales/foundation-datepicker.fr-CH"
+import "foundation-datepicker/js/locales/foundation-datepicker.fr"
+import "foundation-datepicker/js/locales/foundation-datepicker.gl"
+import "foundation-datepicker/js/locales/foundation-datepicker.he"
+import "foundation-datepicker/js/locales/foundation-datepicker.hr"
+import "foundation-datepicker/js/locales/foundation-datepicker.hu"
+import "foundation-datepicker/js/locales/foundation-datepicker.hy"
+import "foundation-datepicker/js/locales/foundation-datepicker.id"
+import "foundation-datepicker/js/locales/foundation-datepicker.is"
+import "foundation-datepicker/js/locales/foundation-datepicker.it-CH"
+import "foundation-datepicker/js/locales/foundation-datepicker.it"
+import "foundation-datepicker/js/locales/foundation-datepicker.ja"
+import "foundation-datepicker/js/locales/foundation-datepicker.ka"
+import "foundation-datepicker/js/locales/foundation-datepicker.kh"
+import "foundation-datepicker/js/locales/foundation-datepicker.kk"
+import "foundation-datepicker/js/locales/foundation-datepicker.ko"
+import "foundation-datepicker/js/locales/foundation-datepicker.kr"
+import "foundation-datepicker/js/locales/foundation-datepicker.lv"
+import "foundation-datepicker/js/locales/foundation-datepicker.me"
+import "foundation-datepicker/js/locales/foundation-datepicker.mk"
+import "foundation-datepicker/js/locales/foundation-datepicker.mn"
+import "foundation-datepicker/js/locales/foundation-datepicker.ms"
+import "foundation-datepicker/js/locales/foundation-datepicker.nb"
+import "foundation-datepicker/js/locales/foundation-datepicker.nl-BE"
+import "foundation-datepicker/js/locales/foundation-datepicker.nl"
+import "foundation-datepicker/js/locales/foundation-datepicker.no"
+import "foundation-datepicker/js/locales/foundation-datepicker.pl"
+import "foundation-datepicker/js/locales/foundation-datepicker.pt-br"
+import "foundation-datepicker/js/locales/foundation-datepicker.pt"
+import "foundation-datepicker/js/locales/foundation-datepicker.ro"
+import "foundation-datepicker/js/locales/foundation-datepicker.rs"
+import "foundation-datepicker/js/locales/foundation-datepicker.rs-latin"
+import "foundation-datepicker/js/locales/foundation-datepicker.ru"
+import "foundation-datepicker/js/locales/foundation-datepicker.sk"
+import "foundation-datepicker/js/locales/foundation-datepicker.sl"
+import "foundation-datepicker/js/locales/foundation-datepicker.sq"
+import "foundation-datepicker/js/locales/foundation-datepicker.sr"
+import "foundation-datepicker/js/locales/foundation-datepicker.sr-latin"
+import "foundation-datepicker/js/locales/foundation-datepicker.sv"
+import "foundation-datepicker/js/locales/foundation-datepicker.sw"
+import "foundation-datepicker/js/locales/foundation-datepicker.th"
+import "foundation-datepicker/js/locales/foundation-datepicker.tr"
+import "foundation-datepicker/js/locales/foundation-datepicker.uk"
+import "foundation-datepicker/js/locales/foundation-datepicker.vi"
+import "foundation-datepicker/js/locales/foundation-datepicker.zh-CN"
+import "foundation-datepicker/js/locales/foundation-datepicker.zh-TW"
+

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

@@ -0,0 +1,54 @@
+import Tribute from "src/decidim/vendor/tribute"
+
+$(() => {
+  $("[data-decidim-geocoding]").each((_i, el) => {
+    const $input = $(el);
+    const $fieldContainer = $input.parent();
+
+    $fieldContainer.addClass("has-tribute");
+
+    const tribute = new Tribute(
+      {
+        autocompleteMode: true,
+        // autocompleteSeparator: / \+ /, // See below, requires Tribute update
+        allowSpaces: true,
+        positionMenu: false,
+        replaceTextSuffix: "",
+        menuContainer: $fieldContainer.get(0),
+        noMatchTemplate: null,
+        values: (text, cb) => {
+          $input.trigger("geocoder-suggest.decidim", [text, cb]);
+        }
+      }
+    );
+
+    // Port https://github.com/zurb/tribute/pull/406
+    // This changes the autocomplete separator from space to " + " so that
+    // we can do searches such as "streetname 4" including a space. Otherwise
+    // this would do two separate searches for "streetname" and "4".
+    tribute.range.getLastWordInText = (text) => {
+      const final = text.replace(/\u00A0/g, " ");
+      const wordsArray = final.split(/ \+ /);
+      const worldsCount = wordsArray.length - 1;
+
+      return wordsArray[worldsCount].trim();
+    };
+
+    tribute.attach($input.get(0));
+
+    $input.on("tribute-replaced", function(ev) {
+      const selectedItem = ev.detail.item.original;
+      $input.trigger("geocoder-suggest-select.decidim", [selectedItem]);
+
+      // Not all geocoding autocomplete APIs include the coordinates in the
+      // suggestions response. Therefore, some APIs may require additional
+      // query for the coordinates, which should trigger this event for the
+      // input element.
+      if (selectedItem.coordinates) {
+        $input.trigger("geocoder-suggest-coordinates.decidim", [selectedItem.coordinates]);
+      }
+    });
+
+    $input.data("geocoder-tribute", tribute);
+  });
+});

data/app/packs/src/decidim/geocoding/attach_input.js

@@ -0,0 +1,127 @@
+/* eslint-disable require-jsdoc */
+import getCoordinateInputName from "./coordinate_input"
+
+/**
+ * You can use this method to "attach" front-end geocoding to any forms in the
+ * front-end which have address fields with geocoding autocompletion
+ * functionality already applied to them.
+ *
+ * To learn more about the front-end geocoding autocompletion, please refer to
+ * the maps documentation at: /docs/customization/maps.md.
+ *
+ * When the geocoding autocompletion finishes, most of the times, its results
+ * will also contain the geocoordinate information for the selected address.
+ * This method allows you to pass these coordinates (latitude and longitude)
+ * to the same front-end form where the geocoding autocompletion address field
+ * is located at (which is the $input you pass to this method). The latitude
+ * and longitude coordinates will be added or "attached" to the form once the
+ * user selects one of the suggested addresses.
+ *
+ * Therefore, if there was the following geocoding autocompletion field at
+ * your form:
+ *   <input
+ *     id="record_address"
+ *     type="text"
+ *     name="record[address]"
+ *     data-decidim-geocoding="{&quot;url&quot;:&quot;https://photon.example.org/api/&quot;}"
+ *   />
+ *
+ * You would then "attach" the geocoding result coordinates to the same form
+ * where this input is at as follows:
+ *   $(document).ready(function() {
+ *     window.Decidim.attachGeocoding($("#record_address"));
+ *   });
+ *
+ * Now, after the user selects one of the suggested geocoding autocompletion
+ * addresses and the geocoding autocompletion API provides the coordinates in
+ * the results, you would have the following fields automatically generated
+ * to your form:
+ *   <input id="record_address" type="text" name="record[address]" value="Selected address, 00210, City" ... />
+ *   <input id="record_latitude" type="hidden" name="record[latitude]" value="1.123" />
+ *   <input id="record_longitude" type="hidden" name="record[longitude]" value="2.234" />
+ *
+ * If you would not do the attachment, these hidden longitude and latitude
+ * fields would not be generated and the geocoding would have to happen at the
+ * server-side when the form is submitted. The problem with that approach
+ * would be that the server-side address geocoding could potentially result in
+ * different coordinates than what the user actually selected in the front-end
+ * because the autocompletion API can return different coordinates than the
+ * geocoding API. Another reason is to avoid unnecessary calls to the
+ * geocoding API as the front-end geocoding suggestion already returned the
+ * coordinate values we need.
+ *
+ * @param {jQuery} $input The input jQuery element for the geocoded address
+ *   field.
+ * @param {Object} options (optional) Extra options if you want to customize
+ *   the latitude and longitude element IDs or names from the default.
+ * @param {function} callback (optional) Callback to run when updating the coordinates values
+ * @returns {void}
+ */
+
+export default function attachGeocoding($input, options, callback) {
+  const attachOptions = $.extend({}, options);
+  const inputIdParts = $input.attr("id").split("_");
+  inputIdParts.pop();
+
+  const idPrefix = `${inputIdParts.join("_")}`;
+  const config = $.extend({
+    latitudeId: `${idPrefix}_latitude`,
+    longitudeId: `${idPrefix}_longitude`,
+    latitudeName: getCoordinateInputName("latitude", $input, attachOptions),
+    longitudeName: getCoordinateInputName("longitude", $input, attachOptions)
+  }, options);
+  let geocoded = false;
+
+  const createCoordinateFields = () => {
+    let $latitude = $(`#${config.latitudeId}`);
+    if ($latitude.length < 1) {
+      $latitude = $(`<input type="hidden" name="${config.latitudeName}" id="${config.latitudeId}" />`);
+      $input.after($latitude);
+    }
+
+    let $longitude = $(`#${config.longitudeId}`);
+    if ($longitude.length < 1) {
+      $longitude = $(`<input type="hidden" name="${config.longitudeName}" id="${config.longitudeId}" />`);
+      $input.after($longitude);
+    }
+  }
+  const clearCoordinateFields = () => {
+    if (geocoded) {
+      return;
+    }
+
+    $(`#${config.latitudeId}`).val("").removeAttr("value");
+    $(`#${config.longitudeId}`).val("").removeAttr("value");
+  };
+  const setCoordinates = (coordinates) => {
+    createCoordinateFields();
+
+    $(`#${config.latitudeId}`).val(coordinates[0]).attr("value", coordinates[0]);
+    $(`#${config.longitudeId}`).val(coordinates[1]).attr("value", coordinates[1]);
+  }
+
+  // When the user changes the value of the coordinate field without selecting
+  // any of the geocoding autocomplete results, clear the current latitude and
+  // longitude values to let the backend do the geocoding. Once a geocoding
+  // autocomplete value has been selected, assume the user just wants to
+  // refine the address formatting without changing the location point value.
+  // If they want, they can still modify the point in the next step of the
+  // proposal creation/editing.
+  $input.on("change.decidim", () => {
+    clearCoordinateFields();
+  });
+
+  // When we receive the geocoding event on the field, update the coordinate
+  // values.
+  $input.on("geocoder-suggest-coordinates.decidim", (_ev, coordinates) => {
+    setCoordinates(coordinates);
+    geocoded = true;
+    callback(coordinates)
+  });
+
+  // Set the initial values if the field defines the coordinates
+  const coordinates = `${$input.data("coordinates")}`.split(",").map(parseFloat);
+  if (Array.isArray(coordinates) && coordinates.length === 2) {
+    setCoordinates(coordinates);
+  }
+}

data/app/packs/src/decidim/geocoding/coordinate_input.js

@@ -0,0 +1,21 @@
+/**
+ * Get coordinate input name from a given $input
+ * @param {string} coordinate - Allows to find 'latitude' or 'longitude' field.
+ * @param {jQuery} $input - Address input field
+ * @param {Object} options (optional) - Extra options
+ * @returns {string} - Returns input name
+ */
+export default function getCoordinateInputName(coordinate, $input, options) {
+  const key = `${coordinate}Name`;
+  if (options[key]) {
+    return options[key];
+  }
+
+  const inputName = $input.attr("name");
+  const subNameMatch = /\[[^\]]+\]$/;
+  if (inputName.match(subNameMatch)) {
+    return inputName.replace(subNameMatch, `[${coordinate}]`);
+  }
+
+  return coordinate;
+}

data/app/packs/src/decidim/geocoding/format_address.js

@@ -0,0 +1,27 @@
+/* eslint-disable require-jsdoc */
+
+// If you want to customize the geocoder address format which is displayed
+// when showing the geocoding results list, add this configuration code to
+// your geocoder at config/initializers/decidim.rb:
+// config.maps = {
+//   # ... other configs ...
+//   autocomplete: {
+//     address_format: [%w(street houseNumber), "city", "country"]
+//   }
+// }
+//
+// For the available address keys, refer to the provider's own documentation.
+const compact = (items) => items.filter(
+  (part) => part !== null && typeof part !== "undefined" && `${part}`.trim().length > 0
+);
+
+export default function formatAddress(object, keys, separator = ", ") {
+  const parts = keys.map((key) => {
+    if (Array.isArray(key)) {
+      return formatAddress(object, key, " ");
+    }
+    return object[key] || object[key.toLowerCase()];
+  })
+
+  return compact(parts).join(separator).trim();
+}

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

@@ -0,0 +1,101 @@
+import "src/decidim/geocoding"
+import formatAddress from "src/decidim/geocoding/format_address"
+
+/**
+ * For the available address format keys, refer to:
+ * https://developer.here.com/documentation/geocoder-autocomplete/dev_guide/topics/resource-type-response-suggest.html
+ */
+$(() => {
+  const generateAddressLabel = formatAddress;
+
+  $("[data-decidim-geocoding]").each((_i, el) => {
+    const $input = $(el);
+    const config = $input.data("decidim-geocoding");
+    const queryMinLength = config.queryMinLength || 2;
+    const addressFormat = config.addressFormat || [
+      ["street", "houseNumber"],
+      "district",
+      "city",
+      "county",
+      "state",
+      "country"
+    ];
+    const language = $("html").attr("lang");
+    let currentSuggestionQuery = null;
+
+    if (!config.apiKey || config.apiKey.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: "https://autocomplete.geocoder.ls.hereapi.com/6.2/suggest.json",
+          data: {
+            apiKey: config.apiKey,
+            query: query,
+            language: language
+          },
+          dataType: "json"
+        }).done((resp) => {
+          if (resp.suggestions) {
+            return callback(resp.suggestions.map((item) => {
+              const label = generateAddressLabel(item.address, addressFormat);
+
+              return {
+                key: label,
+                value: label,
+                locationId: item.locationId
+              }
+            }));
+          }
+          return null;
+        });
+      }, 200);
+    });
+
+    $input.on("geocoder-suggest-select.decidim", (_ev, selectedItem) => {
+      $.ajax({
+        method: "GET",
+        url: "https://geocoder.ls.hereapi.com/6.2/geocode.json",
+        data: {
+          apiKey: config.apiKey,
+          gen: 9,
+          jsonattributes: 1,
+          locationid: selectedItem.locationId
+        },
+        dataType: "json"
+      }).done((resp) => {
+        if (!resp.response || !Array.isArray(resp.response.view) ||
+          resp.response.view.length < 1
+        ) {
+          return;
+        }
+
+        const view = resp.response.view[0];
+        if (!Array.isArray(view.result) || view.result.length < 1) {
+          return;
+        }
+
+        const result = view.result[0];
+        const coordinates = [
+          result.location.displayPosition.latitude,
+          result.location.displayPosition.longitude
+        ];
+
+        $input.trigger(
+          "geocoder-suggest-coordinates.decidim",
+          [coordinates]
+        );
+      });
+    });
+  })
+})