decidim-decidim_awesome 0.7.2 → 0.8.0

data/app/packs/src/decidim/decidim_awesome/awesome_map/api/fetcher.js

@@ -0,0 +1,131 @@
+import ApiFetcher from "src/decidim/decidim_awesome/awesome_map/api/api_fetcher";
+
+export default class Fetcher {
+  constructor(controller) {
+    this.controller = controller;
+    this.config = {
+      length: controller.awesomeMap.config.length || 255
+    };
+    this.onFinished = () => {};
+    this.onNode = () => {};
+    this.hashtags = [];
+
+    this.collection = this.controller.component.type;
+    // override in specific components:
+    this.query = `query ($id: ID!, $after: String!) {
+        component(id: $id) {
+          id
+          __typename
+        }
+      }`;
+  }
+
+  fetch(after = "") {
+    const variables = {
+      "id": this.controller.component.id,
+      "after": after
+    };
+    const api = new ApiFetcher(this.query, variables);
+    api.fetchAll((result) => {
+      if (result) {
+        const collection = result.component[this.collection];
+        // console.log("collection",collection)
+        
+        collection.edges.forEach((element) => {
+          let node = element.node;
+          if (!node) {
+            return;
+          }
+      
+          if (node.coordinates && node.coordinates.latitude && node.coordinates.longitude) {
+            this.decorateNode(node);
+            this.onNode(node)
+          }
+        });
+
+        if (collection.pageInfo.hasNextPage) {
+          this.fetch(collection.pageInfo.endCursor);
+        } else {
+          this.onFinished();
+        }
+      }
+    });
+  }
+
+  decorateNode(node) {
+    const body = this.findTranslation(node.body.translations);
+    const title = this.findTranslation(node.title.translations);
+    node.hashtags = this.collectHashtags(title);
+    node.hashtags = node.hashtags.concat(this.collectHashtags(body));
+    // hashtags in the title look ugly, lets replace the gid:... structure with the tag #name
+    node.title.translation = this.replaceHashtags(title, node.hashtags);
+    node.body.translation = this.appendHtmlHashtags(this.truncate(this.removeHashtags(body)).replace(/\n/g, "<br>"), node.hashtags);
+    node.link = `${this.controller.component.url}/${this.collection}/${node.id}`;
+  }
+
+  findTranslation(translations) {
+    let text, 
+        lang = document.querySelector("html").getAttribute("lang");
+    
+    translations.forEach((t) => {
+      if (t.text) {
+        if (!text || t.locale == lang) {
+          text = t.text
+        }
+      }
+    });
+    return text;
+  }
+
+  collectHashtags(text) {
+    let tags = [];
+    if (text) {
+      const gids = text.match(/gid:\/\/[^\s<]+/g)
+      if (gids) {
+        tags = gids.filter((gid) => gid.indexOf("/Decidim::Hashtag/") != -1).map((gid) => {
+          const parts = gid.split("/");
+          const fromSelector = parts[5].charAt(0) == "_";
+          const tag = fromSelector
+            ? parts[5].substr(1)
+            : parts[5];
+          const name = `#${tag}`;
+          const html = `<a href="/search?term=${name}">${name}</a>`;
+          const hashtag = {
+            color: getComputedStyle(document.documentElement).getPropertyValue("--secondary"),
+            gid: gid,
+            id: parseInt(parts[4], 10),
+            fromSelector: fromSelector,
+            tag: tag,
+            name: name,
+            html: html
+          }
+          this.hashtags.push(hashtag)
+          return hashtag;
+        });
+      }
+    }
+    return tags;
+  }
+
+  replaceHashtags(text, hashtags) {
+    hashtags.forEach((tag) => {
+      text = text.replace(tag.gid, tag.name)
+    });
+    return text;
+  }
+
+  removeHashtags(text) {
+    return text.replace(/gid:\/\/[^\s<]+/g, "");
+  }
+
+  appendHtmlHashtags(text, tags) {
+    tags.forEach((tag) => {
+      text += ` ${tag.html}`;
+    });
+    return text;
+  }
+
+  truncate(html) {
+    return $.truncate(html, this.config);
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/api/meetings_fetcher.js

@@ -0,0 +1,59 @@
+import Fetcher from "src/decidim/decidim_awesome/awesome_map/api/fetcher";
+
+export default class MeetingsFetcher extends Fetcher {
+  constructor(controller) {
+    super(controller);
+    this.query = `query ($id: ID!, $after: String!) {
+    component(id: $id) {
+        id
+        __typename
+        ... on Meetings {
+          meetings(first: 50, after: $after) {
+            pageInfo {
+              hasNextPage
+              endCursor
+            }
+            edges {
+              node {
+                id
+                title {
+                  translations {
+                    text
+                    locale
+                  }
+                }
+                body: description {
+                  translations {
+                    text
+                    locale
+                  }
+                }
+                startTime
+                location {
+                  translations {
+                    text
+                    locale
+                  }
+                }
+                address
+                locationHints {
+                  translations {
+                    text
+                    locale
+                  }
+                }
+                coordinates {
+                  latitude
+                  longitude
+                }
+                category {
+                  id
+                }
+              }
+            }
+          }
+        }
+      }
+    }`;
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/api/proposals_fetcher.js

@@ -0,0 +1,52 @@
+import Fetcher from "src/decidim/decidim_awesome/awesome_map/api/fetcher";
+
+export default class ProposalsFetcher extends Fetcher {
+  constructor(controller) {
+    super(controller);
+    this.query = `query ($id: ID!, $after: String!) {
+      component(id: $id) {
+          id
+          __typename
+          ... on Proposals {
+            proposals(first: 50, after: $after){
+              pageInfo {
+                hasNextPage
+                endCursor
+              }
+              edges {
+                node {
+                  id
+                  state
+                  title {
+                    translations {
+                      text
+                      locale
+                    }
+                  }
+                  body {
+                    translations {
+                      text
+                      locale
+                    }
+                  }
+                  address
+                  coordinates {
+                    latitude
+                    longitude
+                  }
+                  amendments {
+                    emendation {
+                      id
+                    }
+                  }
+                  category {
+                    id
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`;
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/awesome_map.js

@@ -0,0 +1,130 @@
+import * as L from "leaflet";
+import "src/decidim/map/icon.js" // comes with Decidim
+import "src/decidim/vendor/leaflet-tilelayer-here"
+import "leaflet.markercluster"; // Comes with Decidim
+import "leaflet.featuregroup.subgroup" // included in this package.json
+import "src/vendor/jquery.truncate"
+import "jsrender"
+
+import ControlsUI from "src/decidim/decidim_awesome/awesome_map/controls_ui";
+import ProposalsController from "src/decidim/decidim_awesome/awesome_map/controllers/proposals_controller";
+import MeetingsController from "src/decidim/decidim_awesome/awesome_map/controllers/meetings_controller";
+
+export default class AwesomeMap {
+  constructor(map, config) {
+    this.map = map;
+    this.categories = window.AwesomeMap && window.AwesomeMap.categories || []
+    this.config = $.extend({
+      length: 255,
+      center: null,
+      zoom: 8,
+      menu: {
+        amendments: false,
+        meetings: false,
+        categories: true,
+        hashtags: false,
+        mergeComponents: false
+      },
+      show: {
+        withdrawn: false,
+        accepted: false,
+        evaluating: false,
+        notAnswered: false,
+        rejected: false
+      },
+      hideControls: false,
+      collapsedMenu: false,
+      components: []
+    }, config);
+    this.layers = {};
+    this.cluster = new L.MarkerClusterGroup();
+    this.map.addLayer(this.cluster);
+    this.controls = new ControlsUI(this);
+    this.allMarkers = [];
+    this.onFinished = () => {};
+    this.controllers = {};
+    this.loading = [];
+    this._firstController = {};
+  }
+
+  // Queries the API and load all the markers
+  loadControllers() {
+    this.autoResize();
+    this.controls.attach();
+
+    this.config.components.forEach((component) => {
+      const controller = this._getController(component);
+      if (controller) {
+        controller.loadNodes();
+        this.loading.push(component.type);
+        controller.onFinished = () => {
+          this.loading.pop();
+          this.autoResize();
+
+          if (this.loading.length == 0) {
+            this.controls.$loading.hide();
+            // call trigger as all loads are finished
+            this.onFinished();
+          }
+        };
+      }
+    });
+  }
+
+  autoResize() {
+    // Setup center/zoom options if specified, otherwise fitbounds
+    const bounds = this.cluster.getBounds()
+    if (this.config.center && this.config.zoom) {
+      this.map.setView(this.config.center, this.config.zoom);
+    } else if (bounds.isValid()) {
+      // this.map.fitBounds(bounds, { padding: [50, 50] }); // this doesn't work much of the time, probably some race condition
+      this.map.fitBounds([[bounds.getNorth(), bounds.getEast()], [bounds.getSouth(), bounds.getWest()]], { padding: [50, 50] });
+    }
+  }
+
+  getCategory(category) {
+    let defaultCat = {
+      color: getComputedStyle(document.documentElement).getPropertyValue("--primary"),
+      children: () => {},
+      parent: null,
+      name: null
+    };
+
+    if (category) {
+      let id = category.id
+        ? parseInt(category.id, 10)
+        : parseInt(category, 10);
+      let cat = this.categories.find((c) => c.id == id);
+      if (cat) {
+        cat.children = () => {
+          return this.categories.filter((c) => c.parent === cat.id);
+        }
+        return cat;
+      }
+    }
+    return defaultCat;
+  }
+
+  _getController(component) {
+    let controller;
+
+    if (component.type == "proposals") {
+      controller = new ProposalsController(this, component);
+    }
+    if (component.type == "meetings" && this.config.menu.meetings) {
+      controller = new MeetingsController(this, component);
+    }
+
+    if (controller) {
+      // Agrupate layers for controlling components
+      if (this._firstController[component.type] && this.config.menu.mergeComponents) {
+        controller.controls = this._firstController[component.type].controls;
+      } else  {
+        controller.addControls();
+      }
+      this._firstController[component.type] = this._firstController[component.type] || controller;
+      this.controllers[component.type] = controller;
+      return this.controllers[component.type]
+    }
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/controller.js

@@ -0,0 +1,112 @@
+import * as L from "leaflet";
+
+export default class Controller {
+  constructor(awesomeMap, component) {
+    this.awesomeMap = awesomeMap;
+    this.component = component;
+    this.templateId = "marker-meeting-popup";
+    this.controls = {
+      label: this.getLabel(),
+      group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
+    };
+    this.onFinished = () => {};
+    this.allMarkers = [];
+
+  }
+
+  getLabel() {
+    let text = this.awesomeMap.config.menu.mergeComponents || !this.component.name 
+      ? window.DecidimAwesome.texts[this.component.type]
+      : this.component.name;
+    return `<span class="awesome_map-component" id="awesome_map-component_${this.component.id}" title="0" data-layer="${this.component.type}">${text}</span>`
+  }
+
+  setFetcher(Fetcher) {
+    this.fetcher = new Fetcher(this);
+    this.fetcher.onFinished = () => {
+      // console.log(`all ${this.component.type} loaded`, this)
+      this._onFinished();
+    };
+  }
+
+  addControls() {
+    this.awesomeMap.controls.main.addOverlay(this.controls.group, this.controls.label);
+    this.awesomeMap.map.addLayer(this.controls.group);
+  }
+
+  loadNodes() {
+    // to override
+  }
+
+  addMarker(marker, node) {
+
+    /* theorically, this should be enough to create popups on markers but looks that there is som bug in leaflet that sometimes prevents this to work
+    let node = document.createElement("div");
+    // console.log("addMarker", marker, "node", node)
+    node.innerHTML = $.templates(`#${this.templateId}`).render(node);
+    marker.bindPopup(node, {
+      maxwidth: 640,
+      minWidth: 500,
+      keepInView: true,
+      className: "map-info"
+    }); */
+
+    marker.on("click", () => {
+      let dom = document.createElement("div");
+      dom.innerHTML = $.templates(`#${this.templateId}`).render(node);
+
+      let pop = L.popup({
+        maxwidth: 640,
+        minWidth: 500,
+        keepInView: true,
+        className: "map-info"
+
+      }).setLatLng(marker.getLatLng()).setContent(dom);
+      this.awesomeMap.map.addlayer(pop);
+    });
+
+    this.controls.group.addLayer(marker);
+
+    this.allMarkers.push({
+      marker: marker,
+      component: this.component,
+      node: node
+    });
+
+    this.addMarkerCategory(marker, node.category);
+    this.addMarkerHashtags(marker, node.hashtags);
+  }
+
+  addMarkerCategory(marker, category) {
+    // Add to category layer
+    const cat = this.awesomeMap.getCategory(category);
+    if (this.awesomeMap.layers[cat.id]) {
+      marker.addTo(this.awesomeMap.layers[cat.id].group);
+      this.awesomeMap.controls.showCategory(cat);
+    }   
+  }
+
+  addMarkerHashtags(marker, hashtags) {
+    // Add hashtag layer
+    if (this.awesomeMap.config.menu.hashtags) {
+      this.awesomeMap.controls.addHashtagsControls(hashtags, marker);
+    }
+  }
+
+  // Override if needed (call this.onFinished() at the end!)
+  _onFinished() {
+    this.awesomeMap.controls.updateStats(`component_${this.component.id}`, this.allMarkers.length);
+    this.onFinished();
+  }
+
+  createIcon(Builder, color) {
+    return new Builder({
+      color: "#000000",
+      fillColor: color,
+      circleFillColor: color,
+      weight: 1,
+      stroke: color,
+      fillOpacity: 0.9
+    });
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/meetings_controller.js

@@ -0,0 +1,31 @@
+import * as L from "leaflet";
+import Controller from "src/decidim/decidim_awesome/awesome_map/controllers/controller";
+import MeetingsFetcher from "src/decidim/decidim_awesome/awesome_map/api/meetings_fetcher";
+
+const MeetingIcon = L.DivIcon.SVGIcon.DecidimIcon.extend({
+  _createPathDescription: function() {
+    return "M 15.991543,4 C 7.3956015,4 2.9250351,10.5 3.000951,16.999999 3.1063486,26.460968 12.747693,30.000004 15.991543,43 19.242091,30.000004 29,26.255134 29,16.999999 29,10.5 23.951131,4 15.996007,4 m -0.153508,2.6000001 a 2.1720294,2.1076698 0 0 1 2.330514,2.1124998 2.177008,2.1125006 0 0 1 -4.354016,0 2.1720294,2.1076698 0 0 1 2.023502,-2.1124998 m -2.651707,4.8056679 h 5.610202 l 3.935584,7.569899 -1.926038,0.934266 -2.009546,-3.859265 v 14.557403 h -2.484243 v -9.126003 h -0.642162 v 9.126003 H 13.190347 V 16.050568 l -2.009545,3.859265 -1.926036,-0.934266 3.935581,-7.569899";
+  }
+});
+
+export default class MeetingsController extends Controller {
+  constructor(awesomeMap, component) {
+    super(awesomeMap, component)
+    this.templateId = "marker-meeting-popup";
+    this.setFetcher(MeetingsFetcher);
+  }
+
+  loadNodes() {
+    // for each meeting, create a marker with an associated popup
+    this.fetcher.onNode = (meeting) => {
+      let marker = new L.Marker([meeting.coordinates.latitude, meeting.coordinates.longitude], {
+        icon: this.createIcon(MeetingIcon, this.awesomeMap.getCategory(meeting.category).color),
+        title: meeting.title.translation
+      });
+      // console.log("new meeting", meeting, marker)
+      this.addMarker(marker, meeting);
+    };
+
+    this.fetcher.fetch();
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/proposals_controller.js

@@ -0,0 +1,88 @@
+import * as L from "leaflet";
+import Controller from "src/decidim/decidim_awesome/awesome_map/controllers/controller";
+import ProposalsFetcher from "src/decidim/decidim_awesome/awesome_map/api/proposals_fetcher";
+
+const ProposalIcon = L.DivIcon.SVGIcon.DecidimIcon.extend({
+  options: {
+    fillColor: "#ef604d",
+    fillOpacity: 0.8,
+    strokeWidth: 1,
+    strokeOpcacity: 1
+  }
+});
+export default class ProposalsController extends Controller {
+  constructor(awesomeMap, component) {
+    super(awesomeMap, component)
+    this.templateId = "marker-proposal-popup";
+    this.amendments = {};
+    this.setFetcher(ProposalsFetcher);
+  }
+
+  addControls() {
+    super.addControls();
+
+    // add control layer for amendments if any
+    if (this.awesomeMap.config.menu.amendments && this.component.amendments && !this.awesomeMap.layers.amendments) {
+      this.awesomeMap.layers.amendments = {
+        label: `<span class="awesome_map-component" id="awesome_map-amendments_${this.component.id}" title="0" data-layer="amendments">${window.DecidimAwesome.texts.amendments}</span>`,
+        group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
+      }
+      this.awesomeMap.controls.main.addOverlay(this.awesomeMap.layers.amendments.group, this.awesomeMap.layers.amendments.label);
+      this.awesomeMap.layers.amendments.group.addTo(this.awesomeMap.map);
+    }
+  }
+
+  loadNodes() {
+    // for each proposal, create a marker with an associated popup
+    this.fetcher.onNode = (proposal) => {
+      let marker = new L.Marker([proposal.coordinates.latitude, proposal.coordinates.longitude], {
+        icon: this.createIcon(ProposalIcon, this.awesomeMap.getCategory(proposal.category).color),
+        title: proposal.title.translation
+      });
+
+      // Check if it has amendments, add it to a list
+      // also assign parent's proposal categories to it
+      if (proposal.amendments && proposal.amendments.length) {
+        proposal.amendments.forEach((amendment) => {
+          this.amendments[amendment.emendation.id] = proposal;
+        });
+      }
+
+      // console.log("new proposal", proposal, "marker",  marker)
+      this.addMarker(marker, proposal);
+    };
+
+    this.fetcher.fetch();
+  }
+
+  _onFinished() {
+    const iterableAmendments = Object.entries(this.amendments);
+    this.awesomeMap.controls.updateStats(`component_${this.component.id}`, this.allMarkers.length - iterableAmendments.length);
+    this.awesomeMap.controls.updateStats(`amendments_${this.component.id}`, iterableAmendments.length);
+
+    // Process all amendments
+    iterableAmendments.forEach((amendment) => {
+      const marker = this.allMarkers.find((item) => item.node.id == amendment[0]);
+      const parent = amendment[1];
+      // console.log("marker", marker, "parent proposal", parent)
+      // add marker to amendments layers and remove it from proposals
+      if (marker) {
+        try { 
+          marker.marker.removeFrom(this.controls.group) 
+        } catch (e) { 
+          console.error("error removeFrom marker", marker, "layer", this.controls.group,  e);
+        }
+        if (this.awesomeMap.config.menu.amendments) {
+          marker.marker.addTo(this.awesomeMap.layers.amendments.group);
+          // mimic parent category (amendments doesn't have categories)
+          if (parent.category) {
+            marker.marker.setIcon(this.createIcon(ProposalIcon, this.awesomeMap.getCategory(parent.category).color));
+            this.addMarkerCategory(marker.marker, parent.category)
+          }
+        }
+      }
+    });
+
+    this.onFinished();
+  }
+}