decidim-decidim_awesome 0.5.1

data/app/assets/javascripts/decidim/decidim_awesome/awesome_map/categories.js.es6

@@ -0,0 +1,25 @@
+((exports) => {
+
+  const 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 = exports.AwesomeMap.categories.find((c) => c.id == id);
+      if(cat) {
+        cat.children = () => {
+          return exports.AwesomeMap.categories.filter((c) => c.parent === cat.id );
+        }
+        return cat;
+      }
+    }
+    return defaultCat;
+  };
+
+  exports.AwesomeMap = exports.AwesomeMap || {};
+  exports.AwesomeMap.getCategory = getCategory;
+})(window);

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

@@ -0,0 +1,215 @@
+// = require decidim/map
+// = require leaflet.featuregroup.subgroup
+// = require decidim/decidim_awesome/awesome_map/categories
+// = require decidim/decidim_awesome/awesome_map/proposals
+// = require decidim/decidim_awesome/awesome_map/meetings
+// = require_self
+
+((exports) => {
+  const { fetchProposals, fetchMeetings, getCategory } = exports.AwesomeMap;
+
+  const collapsedMenu = $("#map").data("collapsed");
+  const components = $("#map").data("components");
+  const popupMeetingTemplateId = "marker-meeting-popup";
+  const popupProposalTemplateId = "marker-proposal-popup";
+
+  const cluster = L.markerClusterGroup();
+  const amendments = [];
+
+  const layers = {};
+
+  const control = L.control.layers(null, null, {
+    position: 'topleft', 
+    sortLayers: false,
+    collapsed: collapsedMenu, 
+    // hideSingleBase: true
+  });
+  const allMarkers = [];
+
+  const drawMarker = (element, marker, component) => {
+    let tmpl = component.type === "proposals" ? popupProposalTemplateId : popupMeetingTemplateId,
+        node = document.createElement("div");
+
+    $.tmpl($(`#${tmpl}`), element).appendTo(node);
+    
+    marker.bindPopup(node, {
+      maxwidth: 640,
+      minWidth: 500,
+      keepInView: true,
+      className: "map-info"
+    }).openPopup();
+    
+    allMarkers.push({
+      marker: marker,
+      component: component,
+      element: element
+    });
+
+    // Check if it has amendments, add it to a list
+    if(element.amendments && element.amendments.length) {
+      element.amendments.forEach((amendment) => {
+        amendments.push(amendment.emendation.id);
+      });
+    }
+    // Add to category layer
+    let cat = getCategory(element.category);
+    if(layers[cat.id]) {
+      marker.addTo(layers[cat.id].group);
+      // show category if hidden
+      const $label = $(`.awesome_map-category_${cat.id}`).closest("label");
+      const $parent = $(`.awesome_map-category_${cat.parent}`).closest("label");
+      $label.show();
+      // update number of items
+      $label.attr("title", parseInt($label.attr("title") || 0) + 1);
+      // show parent if apply
+      $parent.show();
+      $parent.attr("title", parseInt($parent.attr("title") || 0) + 1);
+      // update component stats
+      const $component = $(`#awesome_map-component-${component.id}`);
+      $component.attr("title", parseInt($component.attr("title") || 0) + 1);
+    }
+
+    return marker;
+  };
+
+  const loadElements = (map) => {
+    // legends
+    control.addTo(map);
+    cluster.addTo(map);
+
+    // Load markers
+    components.forEach((component) => {  
+      if(component.type == "proposals") {
+        // add control layer for proposals
+        layers.proposals = {
+          label: `<span id="awesome_map-component-${component.id}" title="0">${component.name || window.DecidimAwesome.texts.proposals}</span>`,
+          group: L.featureGroup.subGroup(cluster)
+        };
+        control.addOverlay(layers.proposals.group, layers.proposals.label);
+        layers.proposals.group.addTo(map);
+
+        // add control layer for amendments if any
+        if(component.amendments) {
+          layers.amendments = {
+            label: `<span id="awesome_map-component-${component.d}" title="0">${window.DecidimAwesome.texts.amendment}/span>`,
+            group: L.featureGroup.subGroup(cluster)
+          }
+          control.addOverlay(layers.amendments.group, layers.amendments.label);
+          layers.amendments.group.addTo(map);
+        }
+
+        fetchProposals(component, '', (element, marker) => {
+            drawMarker(element, marker, component).addTo(layers.proposals.group);
+          }, () => {
+            // finall call
+            map.fitBounds(cluster.getBounds(), { padding: [50, 50] });
+            allMarkers.forEach((item) => {
+              // add marker to amendments layers if it's an amendment
+              if(amendments.find((a) => a == item.element.id)) {
+                item.marker.removeFrom(layers.proposals.group);
+                item.marker.addTo(layers.amendments.group);
+              }
+            });
+          });
+      }
+      
+      if(component.type == "meetings") {
+        // add control layer for meetings
+        layers.meetings = {
+          label: `<span id="awesome_map-component-${component.id}" title="0">${component.name || window.DecidimAwesome.texts.meetings}/span>`,
+          group: L.featureGroup.subGroup(cluster)
+        };
+        control.addOverlay(layers.meetings.group, layers.meetings.label);
+        layers.meetings.group.addTo(map);
+      
+        fetchMeetings(component, '', (element, marker) => {
+            drawMarker(element, marker, component).addTo(layers.meetings.group);
+          }, () => {
+            map.fitBounds(cluster.getBounds(), { padding: [50, 50] });
+          });
+      }
+    });
+
+
+    // add categories control layers
+    if(window.AwesomeMap.categories.length) {
+      let lastLayer = layers[Object.keys(layers)[Object.keys(layers).length - 1]];
+      // Add Categories "title"
+      if(lastLayer) {
+        lastLayer.label = `${lastLayer.label}<hr><b>${window.DecidimAwesome.texts.categories}</b>`;
+        control.removeLayer(lastLayer.group);
+        control.addOverlay(lastLayer.group, lastLayer.label);
+      }
+
+      window.AwesomeMap.categories.forEach((category) => {
+        // add control layer for this category
+        layers[category.id] = {
+          label: `<i class="awesome_map-category_${category.id}"></i> ${category.name}`,
+          group: L.featureGroup.subGroup(cluster)
+        };
+        layers[category.id].group.addTo(map);
+        control.addOverlay(layers[category.id].group, layers[category.id].label);
+        // hide layer by default, it will be activated if there's any marker in it
+        setTimeout(() => {
+          $(`.awesome_map-category_${category.id}`).closest("label").hide();
+        });
+      });
+
+      // watch events for subcategories syncronitzation
+      const getCatFromClass = (name) => {
+        let id = name.match(/awesome_map-category_(\d+)/) 
+        if(!id) return;
+        const cat = getCategory(id[1]);
+        if(!cat || !cat.name) return;
+
+        return cat;        
+      };
+
+      const indeterminateInput = (id) => {
+        $('[class^="awesome_map-category_"]').parent().prev().prop("indeterminate", false);
+        if(id) {
+          let $input = $(`.awesome_map-category_${id}`).parent().prev();
+          if(!$input.prop("checked")) {
+            $input.prop("indeterminate", true);
+          }
+        }
+      };
+
+      map.on('overlayadd', (e) => {
+        const cat = getCatFromClass(e.name);
+        if(!cat) return;
+        // if it's a children, put the parent to indeterminate
+        indeterminateInput(cat.parent);
+      });
+
+      // on remove a parent category, remove all children
+      map.on('overlayremove', (e) => {
+        const cat = getCatFromClass(e.name);
+        if(!cat) return;
+        cat.children().forEach((c) => {
+          let $el = $(`.awesome_map-category_${c.id}`);
+          if($el.parent().prev().prop("checked")) {
+            $el.click();
+          }
+        });
+      });
+
+    }
+
+  };
+
+  // currentMap might not be loaded yet so let's delay a bit
+  // TODO: improve this
+  const waitMap = () => {
+    if(exports.Decidim && exports.Decidim.currentMap) {
+      loadElements(exports.Decidim.currentMap);
+    } else {
+      setTimeout(() => {
+        waitMap();
+      }, 100);
+    }
+  };
+
+  waitMap();
+
+})(window);

data/app/assets/javascripts/decidim/decidim_awesome/awesome_map/meetings.js.es6

@@ -0,0 +1,129 @@
+// = require decidim/decidim_awesome/awesome_map/api_fetcher
+// = require decidim/decidim_awesome/awesome_map/categories
+
+((exports) => {
+  const { getCategory } = exports.AwesomeMap;
+  const 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
+                  }
+                }
+                description {
+                  translations {
+                    text
+                    locale
+                  }
+                }
+                startTime
+                location {
+                  translations {
+                    text
+                    locale
+                  }
+                }
+                address
+                locationHints {
+                  translations {
+                    text
+                    locale
+                  }
+                }
+                coordinates {
+                  latitude
+                  longitude
+                }
+                category {
+                  id
+                }
+              }
+            }
+          }
+        }
+      }
+    }`;
+
+  const MeetingIcon = L.DivIcon.SVGIcon.extend({
+    options: {
+      fillColor: "#ef604d",
+      iconSize: {x: 300, y:150},
+      opacity: 0
+    },
+    _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";
+    },
+    _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;
+    }
+  });
+
+  const createMarker = (element, callback) => {
+    const marker = L.marker([element.coordinates.latitude, element.coordinates.longitude], {
+      icon: new MeetingIcon({
+        fillColor: getCategory(element.category).color
+      })
+    });
+
+    element.title.translation = ApiFetcher.findTranslation(element.title.translations);
+    element.description.translation = ApiFetcher.findTranslation(element.description.translations);
+    element.location.translation = ApiFetcher.findTranslation(element.location.translations);
+    element.locationHints.translation = ApiFetcher.findTranslation(element.locationHints.translations);
+    callback(element, marker);
+  };
+
+  const fetchMeetings = (component, after, callback, finalCall = () => {}) => {
+    
+    const variables = {
+      "id": component.id,
+      "after": after
+    };
+    const api = new ApiFetcher(query, variables);
+    api.fetchAll((result) => {
+      result.component.meetings.edges.forEach((element) => {
+        if(!element.node) return;
+        
+        if(element.node.coordinates) {
+          element.node.link = component.url + '/meetings/' + element.node.id;
+          createMarker(element.node, callback);
+        }
+      });
+
+      if (result.component.meetings.pageInfo.hasNextPage) {
+        fetchMeetings(component, result.component.meetings.pageInfo.endCursor, callback, finalCall);
+      } else {
+        finalCall();
+      }
+    });
+  };
+
+  exports.AwesomeMap = exports.AwesomeMap || {};
+  exports.AwesomeMap.fetchMeetings = fetchMeetings;
+})(window);

data/app/assets/javascripts/decidim/decidim_awesome/awesome_map/proposals.js.es6

@@ -0,0 +1,78 @@
+// = require decidim/decidim_awesome/awesome_map/api_fetcher
+// = require decidim/decidim_awesome/awesome_map/categories
+
+((exports) => {
+  const { getCategory } = exports.AwesomeMap;
+  const query = `query ($id: ID!, $after: String!) {
+    component(id: $id) {
+        id
+        __typename
+        ... on Proposals {
+          proposals(first: 50, after: $after){
+            pageInfo {
+              hasNextPage
+              endCursor
+            }
+            edges {
+              node {  
+                id
+                title
+                body
+                address
+                coordinates {
+                  latitude
+                  longitude
+                }
+                amendments {
+                  emendation {
+                    id
+                  }
+                }
+                category {
+                  id
+                }
+              }
+            }
+          }
+        }
+      }
+    }`;
+
+  const ProposalIcon = L.DivIcon.SVGIcon.DecidimIcon;
+
+  const createMarker = (element, callback) => {
+    const marker = L.marker([element.coordinates.latitude, element.coordinates.longitude], {
+      icon: new ProposalIcon({
+        fillColor: getCategory(element.category).color
+      })
+    });
+
+    callback(element, marker);
+  };
+
+  const fetchProposals = (component, after, callback, finalCall = () => {}) => {
+    const variables = {
+      "id": component.id,
+      "after": after
+    };
+    const api = new ApiFetcher(query, variables);
+    api.fetchAll((result) => {
+      result.component.proposals.edges.forEach((element) => {
+        if(!element.node) return;
+        
+        if(element.node.coordinates) {
+          element.node.link = component.url + '/proposals/' + element.node.id;
+          createMarker(element.node, callback);
+        }
+      });
+      if (result.component.proposals.pageInfo.hasNextPage) {
+        fetchProposals(component, result.component.proposals.pageInfo.endCursor, callback, finalCall);
+      } else {
+        finalCall();
+      }
+    });
+  };
+
+  exports.AwesomeMap = exports.AwesomeMap || {};
+  exports.AwesomeMap.fetchProposals = fetchProposals;
+})(window);