decidim-core 0.20.0 → 0.23.1.rc1

data/app/assets/javascripts/decidim/map/controller.js.es6

@@ -0,0 +1,92 @@
+// = require jquery-tmpl
+// = require decidim/map/icon
+// = require_self
+
+((exports) => {
+  const $ = exports.$; // eslint-disable-line
+  const L = exports.L; // eslint-disable-line
+
+  const CONTROLLER_REGISTRY = {};
+
+  class MapControllerRegistry {
+    static getController(mapId) {
+      return CONTROLLER_REGISTRY[mapId];
+    }
+
+    static setController(mapId, map) {
+      CONTROLLER_REGISTRY[mapId] = map;
+    }
+
+    static findByMap(map) {
+      return Object.values(CONTROLLER_REGISTRY).find((ctrl) => {
+        return ctrl.getMap() === map;
+      });
+    }
+  }
+
+  class MapController {
+    constructor(mapId, config) {
+      // Remove the old map if there is already one with the same ID.
+      const old = MapControllerRegistry.getController(mapId);
+      if (old) {
+        old.remove();
+      }
+
+      this.mapId = mapId;
+      this.config = $.extend({
+        popupTemplateId: "marker-popup",
+        markerColor: "#ef604d"
+      }, config);
+
+      this.map = null;
+
+      MapControllerRegistry.setController(mapId, this);
+    }
+
+    getConfig() {
+      return this.config;
+    }
+
+    getMap() {
+      return this.map;
+    }
+
+    load() {
+      this.map = L.map(this.mapId);
+
+      this.map.scrollWheelZoom.disable();
+
+      // Fix the keyboard navigation on the map
+      this.map.on("popupopen", (ev) => {
+        const $popup = $(ev.popup.getElement());
+        $popup.attr("tabindex", 0).focus();
+      });
+      this.map.on("popupclose", (ev) => {
+        $(ev.popup._source._icon).focus();
+      });
+
+      return this.map;
+    }
+
+    // Override this in the specific map controllers.
+    start() {}
+
+    remove() {
+      if (this.map) {
+        this.map.remove();
+        this.map = null;
+      }
+    }
+
+    createIcon() {
+      return new L.DivIcon.SVGIcon.DecidimIcon({
+        fillColor: this.config.markerColor,
+        iconSize: L.point(28, 36)
+      });
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.MapController = MapController;
+  exports.Decidim.MapControllerRegistry = MapControllerRegistry;
+})(window);

data/app/assets/javascripts/decidim/map/controller/markers.js.es6

@@ -0,0 +1,65 @@
+((exports) => {
+  exports.Decidim = exports.Decidim || {};
+
+  const MapController = exports.Decidim.MapController;
+
+  class MapMarkersController extends MapController {
+    start() {
+      this.markerClusters = null;
+
+      if (Array.isArray(this.config.markers) && this.config.markers.length > 0) {
+        this.addMarkers(this.config.markers);
+      } else {
+        this.map.fitWorld();
+      }
+    }
+
+    addMarkers(markersData) {
+      if (this.markerClusters === null) {
+        this.markerClusters = L.markerClusterGroup();
+        this.map.addLayer(this.markerClusters);
+      }
+
+      // Pre-compiles the template
+      $.template(
+        this.config.popupTemplateId,
+        $(`#${this.config.popupTemplateId}`).html()
+      );
+
+      const bounds = new L.LatLngBounds(
+        markersData.map(
+          (markerData) => [markerData.latitude, markerData.longitude]
+        )
+      );
+
+      markersData.forEach((markerData) => {
+        let marker = L.marker([markerData.latitude, markerData.longitude], {
+          icon: this.createIcon(),
+          keyboard: true,
+          title: markerData.title
+        });
+        let node = document.createElement("div");
+
+        $.tmpl(this.config.popupTemplateId, markerData).appendTo(node);
+        marker.bindPopup(node, {
+          maxwidth: 640,
+          minWidth: 500,
+          keepInView: true,
+          className: "map-info"
+        }).openPopup();
+
+        this.markerClusters.addLayer(marker);
+      });
+
+      this.map.fitBounds(bounds, { padding: [100, 100] });
+    }
+
+    clearMarkers() {
+      this.map.removeLayer(this.markerClusters);
+      this.markerClusters = L.markerClusterGroup();
+      this.map.addLayer(this.markerClusters);
+    }
+  }
+
+  exports.Decidim.MapMarkersController = MapMarkersController;
+})(window);

data/app/assets/javascripts/decidim/map/controller/static.es6

@@ -0,0 +1,48 @@
+((exports) => {
+  exports.Decidim = exports.Decidim || {};
+
+  const MapController = exports.Decidim.MapController;
+  const openLink = exports.open;
+
+  class MapStaticController extends MapController {
+    start() {
+      this.map.removeControl(this.map.zoomControl);
+      this.map.dragging.disable();
+      this.map.touchZoom.disable();
+      this.map.doubleClickZoom.disable();
+      this.map.scrollWheelZoom.disable();
+      this.map.boxZoom.disable();
+      this.map.keyboard.disable();
+      if (this.map.tap) {
+        this.map.tap.disable();
+      }
+
+      if (this.config.latitude && this.config.longitude) {
+        const coordinates = [this.config.latitude, this.config.longitude];
+
+        this.map.panTo(coordinates);
+        const marker = L.marker(coordinates, {
+          icon: this.createIcon(),
+          keyboard: true,
+          title: this.config.title
+        }).addTo(this.map);
+        marker._icon.removeAttribute("tabindex");
+      }
+      if (this.config.zoom) {
+        this.map.setZoom(this.config.zoom);
+      } else {
+        this.map.setZoom(15);
+      }
+
+      if (this.config.link) {
+        this.map._container.addEventListener("click", (ev) => {
+          ev.preventDefault();
+          this.map._container.focus();
+          openLink(this.config.link, "_blank");
+        });
+      }
+    }
+  }
+
+  exports.Decidim.MapStaticController = MapStaticController;
+})(window);

data/app/assets/javascripts/decidim/map/factory.js.es6

@@ -0,0 +1,51 @@
+// = require decidim/map/controller
+// = require decidim/map/controller/markers
+// = require decidim/map/controller/static
+// = require_self
+
+((exports) => {
+  exports.Decidim = exports.Decidim || {};
+
+  const { MapMarkersController, MapStaticController } = exports.Decidim;
+
+  /**
+   * A factory method that creates a new map controller instance. This method
+   * can be overridden in order to return different types of maps for
+   * differently configured map elements.
+   *
+   * For instance, one map could pass an extra `type` configuration with the
+   * value "custom" for the map element, this factory method would identify
+   * it and then return a different controller for that map than the default.
+   * This would allow this types of maps to function differently.
+   *
+   * An example how to use in the ERB view:
+   *   <%= dynamic_map_for type: "custom" do %>
+   *     <%= javascript_include_tag "map_customization" %>
+   *   <% end %>
+   *
+   * And then the actual customization at `map_customization.js.es6`:
+   *   var originalCreateMapController = window.Decidim.createMapController;
+   *   window.Decidim.createMapController = (mapId, config) => {
+   *     if (config.type === "custom") {
+   *       // Obviously you need to implement CustomMapController for this to
+   *       // work.
+   *       return new window.Decidim.CustomMapController(mapId, config);
+   *     }
+   *
+   *     return originalCreateMapController(mapId, config);
+   *   }
+   *
+   * @param {string} mapId The ID of the map element.
+   * @param {Object} config The map configuration object.
+   * @returns {MapController} The controller for the map.
+   */
+  const createMapController = (mapId, config) => {
+    if (config.type === "static") {
+      return new MapStaticController(mapId, config);
+    }
+
+    return new MapMarkersController(mapId, config);
+  }
+
+  exports.Decidim.createMapController = createMapController;
+})(window);

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

@@ -0,0 +1,31 @@
+((exports) => {
+  const L = exports.L; // eslint-disable-line
+
+  L.DivIcon.SVGIcon.DecidimIcon = L.DivIcon.SVGIcon.extend({
+    options: {
+      fillColor: "#ef604d",
+      opacity: 0
+    },
+    _createPathDescription: function() {
+      return "M14 1.17a11.685 11.685 0 0 0-11.685 11.685c0 11.25 10.23 20.61 10.665 21a1.5 1.5 0 0 0 2.025 0c0.435-.435 10.665-9.81 10.665-21A11.685 11.685 0 0 0 14 1.17Zm0 17.415A5.085 5.085 0 1 1 19.085 13.5 5.085 5.085 0 0 1 14 18.585Z";
+    },
+    _createCircle: function() {
+      return ""
+    },
+    // Improved version of the _createSVG, essentially the same as in later
+    // versions of Leaflet. It adds the `px` values after the width and height
+    // CSS making the focus borders work correctly across all browsers.
+    _createSVG: function() {
+      const path = this._createPath();
+      const circle = this._createCircle();
+      const text = this._createText();
+      const className = `${this.options.className}-svg`;
+
+      const style = `width:${this.options.iconSize.x}px; height:${this.options.iconSize.y}px;`;
+
+      const svg = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="${className}" style="${style}">${path}${circle}${text}</svg>`;
+
+      return svg;
+    }
+  });
+})(window);

data/app/assets/javascripts/decidim/map/legacy.js.es6

@@ -0,0 +1,87 @@
+// = require leaflet
+// = require leaflet-tilelayer-here
+// = require leaflet-svg-icon
+// = require leaflet.markercluster
+// = require decidim/map/factory
+// = require_self
+
+/**
+ * @deprecated
+ *
+ * This adds support for the legacy style of map configuration and the methods
+ * available globally. This is not really needed unless someone is still relying
+ * on these methods or the have customizations that are hard to update.
+ */
+((exports) => {
+  exports.Decidim = exports.Decidim || {};
+
+  const legacyMapSupport = ($map) => {
+    const hereAppId = $map.data("here-app-id");
+    const hereAppCode = $map.data("here-app-code");
+    const hereApiKey = $map.data("here-api-key");
+
+    let mapApiConfig = null;
+    if (hereApiKey) {
+      mapApiConfig = { apiKey: hereApiKey };
+    } else if (hereAppId && hereAppCode) {
+      mapApiConfig = {
+        appId: hereAppId,
+        appCode: hereAppCode
+      };
+    } else {
+      throw new Error("Legacy map support: Please provide the HERE API configuration");
+    }
+
+    const markersData = $map.data("markers-data");
+
+    let markerColor = getComputedStyle(document.documentElement).getPropertyValue("--primary");
+    if (!markerColor || markerColor.length < 1) {
+      markerColor = "#ef604d";
+    }
+
+    // Configure the map element with the new style
+    const mapConfig = {
+      markerColor,
+      popupTemplateId: "marker-popup",
+      markers: markersData,
+      tileLayer: mapApiConfig
+    }
+
+    $map.data("decidim-map", mapConfig);
+
+    exports.Decidim.mapConfiguration = $.extend({
+      markerColor: markerColor
+    }, mapApiConfig);
+  };
+
+  const loadMap = (mapId, markersData) => {
+    // Allow the configured map service to configure the map, e.g. attaching the
+    // tile layer to the map.
+    const $map = $(`#${mapId}`);
+    $map.data("markers-data", markersData);
+    legacyMapSupport($map);
+
+    const mapData = $map.data("decidim-map");
+    const ctrl = exports.Decidim.createMapController(mapId, mapData);
+    const map = ctrl.load();
+
+    L.tileLayer.here(mapData.tileLayer).addTo(map);
+
+    ctrl.start();
+
+    exports.Decidim.currentMap = map;
+
+    return map;
+  };
+
+  $(() => {
+    const $map = $("#map");
+    if ($map.length > 0) {
+      loadMap($map.attr("id"), $map.data("markers-data"));
+    }
+  });
+
+  exports.Decidim.loadMap = loadMap;
+  exports.Decidim.currentMap = null;
+  exports.Decidim.mapConfiguration = {};
+})(window);

data/app/assets/javascripts/decidim/map/provider/default.js.es6

@@ -0,0 +1,22 @@
+// = require leaflet
+// = require leaflet-svg-icon
+// = require leaflet.markercluster
+// = require_self
+// = require decidim/map
+
+/**
+ * NOTE:
+ * This has to load before decidim/map in order for it to apply correctly when
+ * the map is initialized. The document.ready handler set by this script has to
+ * be registered before decidim/map registers its own.
+ */
+((exports) => {
+  const $ = exports.$; // eslint-disable-line
+
+  $(() => {
+    $("[data-decidim-map]").on("configure.decidim", (_ev, map, mapConfig) => {
+      const tilesConfig = mapConfig.tileLayer;
+      L.tileLayer(tilesConfig.url, tilesConfig.options).addTo(map);
+    });
+  });
+})(window);

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

@@ -0,0 +1,22 @@
+// = require leaflet
+// = require leaflet-tilelayer-here
+// = require leaflet-svg-icon
+// = require leaflet.markercluster
+// = require_self
+// = require decidim/map
+
+/**
+ * NOTE:
+ * This has to load before decidim/map in order for it to apply correctly when
+ * the map is initialized. The document.ready handler set by this script has to
+ * be registered before decidim/map registers its own.
+ */
+((exports) => {
+  const $ = exports.$; // eslint-disable-line
+
+  $(() => {
+    $("[data-decidim-map]").on("configure.decidim", (_ev, map, mapConfig) => {
+      L.tileLayer.here(mapConfig.tileLayer).addTo(map);
+    });
+  });
+})(window);

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

@@ -1,28 +1,9 @@
-// = require_self
-
-$(() => {
-  const { pushState, registerCallback } = window.Decidim.History;
-
-  $(document).on("click", ".order-by a", (event) => {
-    const $target = $(event.target);
-
-    $target.parents(".menu").find("a:first").text($target.text());
-
-    pushState($target.attr("href"));
-  })
-
-  registerCallback("orders", () => {
-    const url = window.location.toString();
-    const match = url.match(/order=([^&]*)/);
-    const $orderMenu = $(".order-by .menu");
-    let order = $orderMenu.find(".menu a:first").data("order");
-
-    if (match) {
-      order = match[1];
-    }
-
-    const linkText = $orderMenu.find(`.menu a[data-order="${order}"]`).text();
-
-    $orderMenu.find("a:first").text(linkText);
-  });
-});
+// This is left for backwards compatibility. The actual functionality has been
+// moved to results_listing.js.es6.
+//
+// = results_listing
+
+if (window.console) {
+  // eslint-disable-next-line no-console
+  console.log("decidim/orders.js is deprecated, please use decidim/results_listing.js instead.");
+}