decidim-core 0.22.0 → 0.23.0

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

@@ -1,136 +1,46 @@
-// = require leaflet
-// = require leaflet-tilelayer-here
-// = require leaflet-svg-icon
-// = require leaflet.markercluster
-// = require jquery-tmpl
+// = require decidim/map/factory
 // = require_self
 
-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`;
+((exports) => {
+  const $ = exports.$; // eslint-disable-line
 
-    const style = `width:${this.options.iconSize.x}px; height:${this.options.iconSize.y}px;`;
+  exports.Decidim = exports.Decidim || {};
 
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="${className}" style="${style}">${path}${circle}${text}</svg>`;
+  $(() => {
+    // Load the map controller factory method in the document.ready handler to
+    // allow overriding it by any script that is loaded before the document is
+    // ready.
+    const createMapController = exports.Decidim.createMapController;
 
-    return svg;
-  }
-});
+    let $mapElements = $("[data-decidim-map]");
+    if ($mapElements.length < 1 && $("#map").length > 0) {
+      throw new Error(
+        "DEPRECATION: Please update your maps customizations or include 'decidim/map/legacy.js' for legacy support!"
+      );
+    }
 
-const popupTemplateId = "marker-popup";
-$.template(popupTemplateId, $(`#${popupTemplateId}`).html());
+    $mapElements.each((_i, el) => {
+      const $map = $(el);
+      let mapId = $map.attr("id");
+      if (!mapId) {
+        mapId = `map-${Math.random().toString(36).substr(2, 9)}`;
+        $map.attr("id", mapId);
+      }
 
-const addMarkers = (markersData, markerClusters, map) => {
-  const bounds = new L.LatLngBounds(markersData.map((markerData) => [markerData.latitude, markerData.longitude]));
+      const mapConfig = $map.data("decidim-map");
+      const ctrl = createMapController(mapId, mapConfig);
+      const map = ctrl.load();
 
-  markersData.forEach((markerData) => {
-    let marker = L.marker([markerData.latitude, markerData.longitude], {
-      icon: new L.DivIcon.SVGIcon.DecidimIcon({
-        fillColor: window.Decidim.mapConfiguration.markerColor
-      }),
-      keyboard: true,
-      title: markerData.title
-    });
-    let node = document.createElement("div");
-
-    $.tmpl(popupTemplateId, markerData).appendTo(node);
-
-    marker.bindPopup(node, {
-      maxwidth: 640,
-      minWidth: 500,
-      keepInView: true,
-      className: "map-info"
-    }).openPopup();
-
-    markerClusters.addLayer(marker);
-  });
-
-  map.addLayer(markerClusters);
-  map.fitBounds(bounds, { padding: [100, 100] });
-};
-
-const loadMap = (mapId, markersData) => {
-  let markerClusters = L.markerClusterGroup();
-
-  if (window.Decidim.currentMap) {
-    window.Decidim.currentMap.remove();
-    window.Decidim.currentMap = null;
-  }
-
-  const map = L.map(mapId);
-
-  L.tileLayer.here(window.Decidim.mapConfiguration).addTo(map);
+      $map.data("map", map);
+      $map.data("map-controller", ctrl);
 
-  if (markersData.length > 0) {
-    addMarkers(markersData, markerClusters, map);
-  } else {
-    map.fitWorld();
-  }
+      $map.trigger("configure.decidim", [map, mapConfig]);
 
-  map.scrollWheelZoom.disable();
+      ctrl.start();
 
-  // Fix the keyboard navigation on the map
-  map.on("popupopen", (ev) => {
-    const $popup = $(ev.popup.getElement());
-    $popup.attr("tabindex", 0).focus();
-  });
-  map.on("popupclose", (ev) => {
-    $(ev.popup._source._icon).focus();
+      // Indicates the map is loaded with the map objects initialized and ready
+      // to be used.
+      $map.trigger("ready.decidim", [map, mapConfig]);
+    });
   });
-
-  return map;
-};
-
-window.Decidim = window.Decidim || {};
-
-window.Decidim.loadMap = loadMap;
-window.Decidim.currentMap =  null;
-window.Decidim.mapConfiguration = {};
-
-$(() => {
-  const mapId = "map";
-  const $map = $(`#${mapId}`);
-
-  const markersData = $map.data("markers-data");
-  const hereAppId = $map.data("here-app-id");
-  const hereAppCode = $map.data("here-app-code");
-  const hereApiKey = $map.data("here-api-key");
-
-  let markerColor = getComputedStyle(document.documentElement).getPropertyValue("--primary");
-  if (!markerColor || markerColor.length < 1) {
-    markerColor = "#ef604d";
-  }
-
-  let mapApiConfig = null;
-  if (hereApiKey) {
-    mapApiConfig = { apiKey: hereApiKey };
-  } else {
-    mapApiConfig = {
-      appId: hereAppId,
-      appCode: hereAppCode
-    };
-  }
-  window.Decidim.mapConfiguration = $.extend({
-    markerColor: markerColor
-  }, mapApiConfig);
-
-  if ($map.length > 0) {
-    window.Decidim.currentMap = loadMap(mapId, markersData);
-  }
-});
+})(window);

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);