decidim-decidim_awesome 0.6.5 → 0.7.2

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

@@ -1,215 +1,207 @@
-// = require jsrender.min
-// = require leaflet.featuregroup.subgroup
+// = require decidim/decidim_awesome/awesome_map/layers
+// = require decidim/decidim_awesome/awesome_map/utilities
+// = require decidim/decidim_awesome/awesome_map/markers
 // = 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 = $("#awesome-map").data("collapsed");
-  const show = {
-    withdrawn: $("#awesome-map").data("show-withdrawn"),
-    accepted: $("#awesome-map").data("show-accepted"),
-    evaluating: $("#awesome-map").data("show-evaluating"),
-    notAnswered: $("#awesome-map").data("show-not-answered"),
-    rejected: $("#awesome-map").data("show-rejected")
-  };
-  const components = $("#awesome-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");
-
-    $($.templates(`#${tmpl}`).render(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);
+  const {
+    layers,
+    hideControls,
+    cluster,
+    control,
+    addProposalsControls,
+    addMeetingsControls,
+    addSearchControls,
+    addCategoriesControls,
+    addHashtagsControls,
+    fetchProposals,
+    fetchMeetings,
+    options,
+    show,
+    components,
+    amendments,
+    allMarkers,
+    drawMarker,
+    getCategory
+  } = exports.AwesomeMap;
+  const $ = exports.$; // eslint-disable-line
+
+  exports.AwesomeMap.allMarkersLoaded = $.noop;
+
+  const autoResizeMap = (map) => {
+    // Setup center/zoom options if specified, otherwise fitbounds
+    if(options().center) {
+      map.setView(options().center, options().zoom);
+    } else if(cluster.getBounds().isValid()) {
+      map.fitBounds(cluster.getBounds(), { padding: [50, 50] });
     }
-
-    return marker;
   };
 
-  const loadElements = (map) => {
+  exports.AwesomeMap.loadMapElements = (map) => {
+    autoResizeMap(map);
     // legends
     control.addTo(map);
     cluster.addTo(map);
+    if(hideControls()) {
+      $(control.getContainer()).hide()
+    }
 
     // Load markers
-    components.forEach((component) => {  
+    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.amendments}</span>`,
-            group: L.featureGroup.subGroup(cluster)
-          }
-          control.addOverlay(layers.amendments.group, layers.amendments.label);
-          layers.amendments.group.addTo(map);
-        }
+        addProposalsControls(map, component);
 
         fetchProposals(component, '', (element, marker) => {
-            console.log(element.state, show[element.state || 'notAnswered'], show, element);
-            if(show[element.state || 'notAnswered']) {
-              drawMarker(element, marker, component).addTo(layers.proposals.group)   
+          // console.log(element.state, show[element.state || 'notAnswered'], show, element);
+          if(show()[element.state || 'notAnswered']) {
+            drawMarker(element, marker, component).addTo(layers.proposals.group);
+            // Add hashtags menu items here, only hashtags with proposals associated will be present
+            if(options().menu.hashtags) {
+              addHashtagsControls(map, element.hashtags, marker);
             }
-          }, () => {
-            // 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);
+          }
+        }, () => { // final call
+          // Setup center/zoom options if specified, otherwise fitbounds
+          autoResizeMap(map);
+
+          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);
+              if(options().menu.amendments) {
                 item.marker.addTo(layers.amendments.group);
               }
-            });
+            }
           });
+          // Call a trigger, might be useful for customizations
+          exports.AwesomeMap.allMarkersLoaded();
+        });
       }
-      
-      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);
-      
+
+      if(options().menu.meetings && component.type == "meetings") {
+        addMeetingsControls(map, component);
+
         fetchMeetings(component, '', (element, marker) => {
-            drawMarker(element, marker, component).addTo(layers.meetings.group);
-          }, () => {
-            map.fitBounds(cluster.getBounds(), { padding: [50, 50] });
-          });
+          drawMarker(element, marker, component).addTo(layers.meetings.group);
+        }, () => autoResizeMap(map) );
       }
     });
 
-
-    // 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);
+    /*
+    * We add all categories and hide those that have no proposals
+    * This is done this way to ensure all parent categories are displayed
+    * even if the have not proposals associated
+    */
+    addSearchControls(map);
+    addCategoriesControls(map);
+
+    // category events
+    $("#awesome-map").on("change", ".awesome_map-categories-selector", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const id = $(e.target).closest("label").data("layer");
+      const cat = getCategory(id);
+      // console.log("changed, layer", id, "cat", cat, "checked", e.target.checked, e);
+      if(cat) {
+        const layer = layers[cat.id];
+        if(e.target.checked) {
+          // show group of markers
+          map.addLayer(layer.group);
+
+          // if it's a children, put the parent to indeterminate
+          indeterminateInput(cat.parent);
+        } else {
+          // hide group of markers
+          map.removeLayer(layer.group);
+          // if it's a children, put the parent to indeterminate
+          cat.children().forEach((c) => {
+            let $el = $(`.awesome_map-category-${c.id}`);
+            if($el.parent().prev().prop("checked")) {
+              $el.click();
+            }
+          });
+        }
+        // sync tags
+        updateHashtagLayers();
       }
+    });
 
-      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();
-        });
+    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);
+        }
+      }
+    };
+
+    const updateHashtagLayers = () => {
+      // hide all
+      $(".awesome_map-hashtags-selector").each((_idx, el) => {
+        const layer = layers[$(el).closest("label").data("layer")];
+        if(layer) {
+          map.removeLayer(layer.group);
+        }
       });
-
-      // 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);
-          }
+      // show selected only
+      $(".awesome_map-hashtags-selector:checked").each((_idx, el) => {
+        const layer = layers[$(el).closest("label").data("layer")];
+        if(layer) {
+          map.addLayer(layer.group);
         }
-      };
-
-      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();
-          }
-        });
+      // hide non-selected categories
+      $(".awesome_map-categories-selector:not(:checked)").each((_idx, el) => {
+        const layer = layers[$(el).closest("label").data("layer")];
+        if(layer) {
+          map.addLayer(layer.group);
+          map.removeLayer(layer.group);
+        }
       });
+    };
+
+    // hashtag events
+    $("#awesome-map").on("change", ".awesome_map-hashtags-selector", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const tag = $(e.target).closest("label").data("layer");
+      // console.log("changed, layer", tag, "checked", e.target.checked, e);
+      if(tag) {
+        updateHashtagLayers();
+      }
+    });
 
-    }
+    // select/deselect all tags
+    $("#awesome-map").on("click", ".awesome_map-toggle_all_tags", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      $("#awesome-map .awesome_map-hashtags-selector").prop("checked", $("#awesome-map .awesome_map-hashtags-selector:checked").length < $("#awesome-map .awesome_map-hashtags-selector").length);
+      updateHashtagLayers();
+    });
 
+    // sub-layer hashtag title toggle
+    $("#awesome-map").on("click", ".awesome_map-title-control", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      $("#awesome_map-hashtags-control").toggleClass("active");
+    });
   };
 
-  $("#map").on("ready.decidim", (ev, map) => {
-    loadElements(map);
-  });
-
+  // order hashtags alphabetically
+  exports.AwesomeMap.hashtagAdded = (_hashtag, $div) => {
+    let $last = $div.contents("label:last");
+    if($last.prev("label").length) {
+      // move the label to order it alphabetically
+      $div.contents("label").each((_idx, el) => {
+        if($(el).text().localeCompare($last.text()) > 0) {
+          $(el).before($last);
+          return false;
+        }
+      });
+    }
+  };
 })(window);

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

@@ -0,0 +1,56 @@
+// = require jsrender.min
+// = require decidim/decidim_awesome/awesome_map/layers
+// = require decidim/decidim_awesome/awesome_map/categories
+
+((exports) => {
+  const { getCategory, layers } = exports.AwesomeMap;
+
+  const popupMeetingTemplateId = "marker-meeting-popup";
+  const popupProposalTemplateId = "marker-proposal-popup";
+  const allMarkers = [];
+
+  const drawMarker = (element, marker, component) => {
+    let tmpl = component.type === "proposals" ? popupProposalTemplateId : popupMeetingTemplateId,
+        node = document.createElement("div");
+
+    $($.templates(`#${tmpl}`).render(element)).appendTo(node);
+
+    marker.bindPopup(node, {
+      maxwidth: 640,
+      minWidth: 500,
+      keepInView: true,
+      className: "map-info"
+    }).openPopup();
+
+    allMarkers.push({
+      marker: marker,
+      component: component,
+      element: element
+    });
+
+    // Add to category layer
+    let cat = getCategory(element.category);
+    if(layers[cat.id]) {
+      $('#awesome_map-categories-control').show();
+      marker.addTo(layers[cat.id].group);
+      // show category if hidden
+      const $label = $(`label.awesome_map-category-${cat.id}`);
+      const $parent = $(`label.awesome_map-category-${cat.parent}`);
+      $label.show();
+      // update number of items
+      $label.attr("title", (parseInt($label.attr("title") || 0) + 1) + " " +  window.DecidimAwesome.texts.items);
+      // show parent if apply
+      $parent.show();
+      $parent.attr("title", (parseInt($parent.attr("title") || 0) + 1) + " " +  window.DecidimAwesome.texts.items);
+    }
+
+    // update component stats
+    const $component = $(`#awesome_map-component_${component.id}`);
+    $component.attr("title", parseInt($component.attr("title") || 0) + 1);
+
+    return marker;
+  };
+
+  exports.AwesomeMap.allMarkers = allMarkers;
+  exports.AwesomeMap.drawMarker = drawMarker;
+})(window);

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

@@ -1,8 +1,9 @@
 // = require decidim/decidim_awesome/awesome_map/api_fetcher
 // = require decidim/decidim_awesome/awesome_map/categories
+// = require decidim/decidim_awesome/awesome_map/utilities
 
 ((exports) => {
-  const { getCategory } = exports.AwesomeMap;
+  const { getCategory, truncate } = exports.AwesomeMap;
   const query = `query ($id: ID!, $after: String!) {
     component(id: $id) {
         id
@@ -56,10 +57,10 @@
       }
     }`;
 
+  // Shows a human figure instead of a dot
   const MeetingIcon = L.DivIcon.SVGIcon.extend({
     options: {
       fillColor: "#ef604d",
-      iconSize: {x: 300, y:150},
       opacity: 0
     },
     _createPathDescription: function() {
@@ -93,14 +94,14 @@
     });
 
     element.title.translation = ApiFetcher.findTranslation(element.title.translations);
-    element.description.translation = ApiFetcher.findTranslation(element.description.translations).replace(/\n/g, "<br>");;
+    element.description.translation = truncate(ApiFetcher.findTranslation(element.description.translations)).replace(/\n/g, "<br>");
     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
@@ -110,8 +111,8 @@
       if(result) {
         result.component.meetings.edges.forEach((element) => {
           if(!element.node) return;
-          
-          if(element.node.coordinates) {
+
+          if(element.node.coordinates && element.node.coordinates.latitude && element.node.coordinates.longitude) {
             element.node.link = component.url + '/meetings/' + element.node.id;
             createMarker(element.node, callback);
           }

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

@@ -1,8 +1,10 @@
 // = require decidim/decidim_awesome/awesome_map/api_fetcher
 // = require decidim/decidim_awesome/awesome_map/categories
+// = require decidim/decidim_awesome/awesome_map/hashtags
+// = require decidim/decidim_awesome/awesome_map/utilities
 
 ((exports) => {
-  const { getCategory } = exports.AwesomeMap;
+  const { getCategory, truncate, collectHashtags, removeHashtags, appendHtmlHashtags } = exports.AwesomeMap;
   const query = `query ($id: ID!, $after: String!) {
     component(id: $id) {
         id
@@ -14,7 +16,7 @@
               endCursor
             }
             edges {
-              node {  
+              node {
                 id
                 state
                 title {
@@ -49,6 +51,7 @@
       }
     }`;
 
+  let amendments = [];
   const ProposalIcon = L.DivIcon.SVGIcon.DecidimIcon;
 
   const createMarker = (element, callback) => {
@@ -59,7 +62,9 @@
     });
 
     element.title.translation = ApiFetcher.findTranslation(element.title.translations);
-    element.body.translation = ApiFetcher.findTranslation(element.body.translations).replace(/\n/g, "<br>");
+    const body = ApiFetcher.findTranslation(element.body.translations);
+    element.hashtags = collectHashtags(body);
+    element.body.translation = appendHtmlHashtags(truncate(removeHashtags(body)).replace(/\n/g, "<br>"), element.hashtags);
 
     callback(element, marker);
   };
@@ -74,11 +79,18 @@
       if(result) {
         result.component.proposals.edges.forEach((element) => {
           if(!element.node) return;
-          
-          if(element.node.coordinates) {
+
+          if(element.node.coordinates && element.node.coordinates.latitude && element.node.coordinates.longitude) {
             element.node.link = component.url + '/proposals/' + element.node.id;
             createMarker(element.node, callback);
           }
+
+          // Check if it has amendments, add it to a list
+          if(element.node.amendments && element.node.amendments.length) {
+            element.node.amendments.forEach((amendment) => {
+              amendments.push(amendment.emendation.id);
+            });
+          }
         });
         if (result.component.proposals.pageInfo.hasNextPage) {
           fetchProposals(component, result.component.proposals.pageInfo.endCursor, callback, finalCall);
@@ -91,4 +103,5 @@
 
   exports.AwesomeMap = exports.AwesomeMap || {};
   exports.AwesomeMap.fetchProposals = fetchProposals;
+  exports.AwesomeMap.amendments = amendments;
 })(window);

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

@@ -0,0 +1,57 @@
+//= require jquery.truncate
+
+((exports) => {
+  const $ = exports.$; // eslint-disable-line
+
+  const sanitizeCenter = (string) => {
+    if(string) {
+      const parts = string.split(",")
+      if (parts.length >= 2) {
+        const lat = parseFloat(parts[0]);
+        const lng = parseFloat(parts[1]);
+        if(lat && lng) {
+          return [lat, lng];
+        }
+      }
+    }
+    return null
+  };
+  const options = () => {
+    return {
+      length: $("#awesome-map").data("truncate") || 255,
+      center: sanitizeCenter($("#awesome-map").data("map-center")),
+      zoom: $("#awesome-map").data("map-zoom"),
+      menu: {
+        amendments: $("#awesome-map").data("menu-amendments"),
+        meetings: $("#awesome-map").data("menu-meetings"),
+        hashtags: $("#awesome-map").data("menu-hashtags")
+      }
+    }
+  };
+
+  const truncate = (string) => {
+    return $.truncate(string, options());
+  };
+
+  const show = () => {
+    return {
+      withdrawn: $("#awesome-map").data("show-withdrawn"),
+      accepted: $("#awesome-map").data("show-accepted"),
+      evaluating: $("#awesome-map").data("show-evaluating"),
+      notAnswered: $("#awesome-map").data("show-not-answered"),
+      rejected: $("#awesome-map").data("show-rejected")
+    }
+  };
+
+  const hideControls = () => $("#awesome-map").data("hide-controls");
+  const collapsedMenu = () => $("#awesome-map").data("collapsed");
+  const components = () => $("#awesome-map").data("components");
+
+  exports.AwesomeMap = exports.AwesomeMap || {};
+  exports.AwesomeMap.truncate = truncate;
+  exports.AwesomeMap.options = options;
+  exports.AwesomeMap.show = show;
+  exports.AwesomeMap.collapsedMenu = collapsedMenu;
+  exports.AwesomeMap.hideControls = hideControls;
+  exports.AwesomeMap.components = components;
+})(window);