decidim-core 0.20.0 → 0.23.1.rc1

data/app/assets/javascripts/decidim/geocoding/attach_input.js.es6

@@ -0,0 +1,106 @@
+((exports) => {
+  const $ = exports.$; // eslint-disable-line
+
+  const 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;
+  }
+
+  /**
+   * 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.
+   * @returns {void}
+   */
+  const attachGeocoding = ($input, options) => {
+    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);
+
+    $input.on("geocoder-suggest-coordinates.decidim", (_ev, coordinates) => {
+      let $latitude = $(`#${config.latitudeId}`);
+      let $longitude = $(`#${config.longitudeId}`);
+      if ($latitude.length < 1) {
+        $latitude = $(`<input type="hidden" name="${config.latitudeName}" id="${config.latitudeId}" />`);
+        $input.after($latitude);
+      }
+      if ($longitude.length < 1) {
+        $longitude = $(`<input type="hidden" name="${config.longitudeName}" id="${config.longitudeId}" />`);
+        $input.after($longitude);
+      }
+
+      $latitude.val(coordinates[0]).attr("value", coordinates[0]);
+      $longitude.val(coordinates[1]).attr("value", coordinates[1]);
+    });
+  };
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.attachGeocoding = attachGeocoding;
+})(window);

data/app/assets/javascripts/decidim/geocoding/format_address.js.es6

@@ -0,0 +1,29 @@
+((exports) => {
+  // 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
+  );
+  const 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();
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.geocodingFormatAddress = formatAddress;
+})(window);

data/app/assets/javascripts/decidim/geocoding/provider/here.js.es6

@@ -0,0 +1,107 @@
+// = require decidim/geocoding
+// = require_self
+
+/**
+ * For the available address format keys, refer to:
+ * https://developer.here.com/documentation/geocoder-autocomplete/dev_guide/topics/resource-type-response-suggest.html
+ */
+((exports) => {
+  const $ = exports.$; // eslint-disable-line
+
+  exports.Decidim = exports.Decidim || {};
+
+  $(() => {
+    const generateAddressLabel = exports.Decidim.geocodingFormatAddress;
+
+    $("[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]
+          );
+        });
+      });
+    })
+  });
+})(window);

data/app/assets/javascripts/decidim/geocoding/provider/photon.js.es6

@@ -0,0 +1,77 @@
+// = require decidim/geocoding
+// = require_self
+
+/**
+ * For the available address format keys, refer to:
+ * https://github.com/komoot/photon
+ */
+((exports) => {
+  const $ = exports.$; // eslint-disable-line
+
+  exports.Decidim = exports.Decidim || {};
+
+  $(() => {
+    const generateAddressLabel = exports.Decidim.geocodingFormatAddress;
+
+    $("[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);
+      });
+    })
+  });
+})(window);

data/app/assets/javascripts/decidim/history.js.es6

@@ -29,10 +29,25 @@
     }
   };
 
+  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;
+  };
+
   exports.Decidim = exports.Decidim || {};
   exports.Decidim.History = {
     registerCallback,
     unregisterCallback,
-    pushState
+    pushState,
+    replaceState,
+    state
   };
 })(window);

data/app/assets/javascripts/decidim/icon.js.es6

@@ -0,0 +1,42 @@
+((exports) => {
+  const DEFAULT_ATTRIBUTES = {
+    role: "none presentation"
+  };
+
+  /**
+   * 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.
+   */
+  exports.Decidim.icon = (iconKey, attributes = {}) => {
+    const iconAttributes = exports.$.extend(DEFAULT_ATTRIBUTES, attributes);
+    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]}`;
+      }
+    });
+
+    const iconsPath = exports.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>`);
+    }
+    $el.attr(htmlAttributes);
+
+    return $("<div />").append($el).html();
+  };
+})(window);

data/app/assets/javascripts/decidim/identity_selector_dialog.js.es6

@@ -0,0 +1,61 @@
+/**
+ * Makes the #select-identity-button to open a popup for the user to
+ * select with which identity he wants to perform an action.
+ *
+ */
+$(document).ready(function () {
+
+  let button = $("#select-identity-button"),
+      identitiesUrl = null,
+      userIdentitiesDialog = $("#user-identities");
+
+  if (userIdentitiesDialog.length) {
+    identitiesUrl = userIdentitiesDialog.data("reveal-identities-url");
+
+    button.click(function () {
+      $.ajax(identitiesUrl).done(function(response) {
+        userIdentitiesDialog.html(response).foundation("open");
+        button.trigger("ajax:success")
+      });
+    });
+  }
+});
+
+
+/**
+ * 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) {
+      let liTag = $(elem)
+      liTag.on("click", function() {
+        let method = liTag.data("method"),
+            urlDataAttr = null;
+        if (method === "POST") {
+          urlDataAttr = "create_url";
+        } else {
+          urlDataAttr = "destroy_url";
+        }
+        $.ajax({
+          url: liTag.data(urlDataAttr),
+          method: method,
+          dataType: "script",
+          success: function() {
+            if (liTag.hasClass("selected")) {
+              liTag.removeClass("selected")
+              liTag.find(".icon--circle-check").addClass("invisible")
+              liTag.data("method", "POST")
+            } else {
+              liTag.addClass("selected")
+              liTag.find(".icon--circle-check").removeClass("invisible")
+              liTag.data("method", "DELETE")
+            }
+          }
+        })
+      })
+    });
+  });
+})