decidim-decidim_awesome 0.6.6 → 0.6.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5f080eae1f34847934c143b7bdc9c091632701cb339f269754640d5f2a78f879
-  data.tar.gz: 64f8f793914cf99e2f5ac37801039000936911799c518da44528698f6c3fba92
+  metadata.gz: 32cc1fc0147bd8a5daf75a5deab25f18ede902f0ceb8c9a4a0073528dec97568
+  data.tar.gz: 2ed32bdc25c0e2ab7b5b8b7362adad7a191634290b896e6f3e0f630687ba0824
 SHA512:
-  metadata.gz: 507f43c02cfe83261c5e0caa656387aba8dc7ffa15a80c70305e71736e1aeebec90a6678f663ca4de854740f17ef2960a29f9d58caf980e1c0dbd534b1d0c46b
-  data.tar.gz: 7398b5cacb4eed3ff628a7026c2934c089dcbe8b1cf9ff9cd22275228816fa1ddc9ba50909dbf4bccf4e0e671349517c8bea4485e8c3dd709868f17000ef55a2
+  metadata.gz: df2b4b28994f8ad2f11e87080c683edb9fc8f215c76a7b6e15ebd27df018317fb64daf5f1c9b3910d2bd6c676d746caadec6defdaeb57716509cb9b3b33b67d8
+  data.tar.gz: 95a51e3cf9e87c8b2c9756ad6ab11ab1ee90d252b16f99740a20e190742bb0017e88bb36357ac2031d588bcf792b86d1337fe0685c7dfb309789beb4a7aa6797

data/README.md

@@ -160,6 +160,8 @@ admins do not even see it.
 
 In order to personalize default values, create an initializer such as:
 
+> **NOTE**: this is not necessary unless you want to **disable** some features. All features are enabled by default.
+
 ```ruby
 # config/initializers/awesome_defaults.rb
 
@@ -173,6 +175,9 @@ Decidim::DecidimAwesome.configure do |config|
 
   # De-activated, admins don't even see it as an option
   config.use_markdown_editor = :disabled
+
+  # any other config var from lib/decidim/decidim_awesome.rb
+  ...
 end
 ```
 

data/app/assets/javascripts/decidim/decidim_awesome/admin.js

@@ -1,2 +1,3 @@
 // = require decidim/decidim_awesome/admin/constraints
+// = require decidim/decidim_awesome/admin/codemirror
 // = require decidim/decidim_awesome/editors/quill_editor

data/app/assets/javascripts/decidim/decidim_awesome/admin/codemirror.js.es6

@@ -0,0 +1,15 @@
+// = require codemirror
+// = require mode/css/css
+// = require keymap/sublime
+// = require_self
+
+$(() => {
+  $(".awesome-edit-config .scoped-style textarea").each((_idx, el) => {
+    console.log(el)
+    var editor = CodeMirror.fromTextArea(el, {
+      lineNumbers: true,
+      mode: "css",
+      keymap: "sublime"
+    });
+  })
+});

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

@@ -0,0 +1,48 @@
+((exports) => {
+  const hashtags = [];
+
+  const 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
+          }
+          hashtags.push(hashtag)
+          return hashtag;
+        });
+      }
+    }
+    return tags;
+  };
+
+  const removeHashtags = (text) => {
+    return text.replace(/gid:\/\/[^\s<]+/g, "");
+  };
+
+  const appendHtmlHashtags = (text, tags) => {
+    tags.forEach(tag => {
+      text += ` ${tag.html}`;
+    });
+    return text;
+  };
+
+  exports.AwesomeMap = exports.AwesomeMap || {};
+  exports.AwesomeMap.hashtags = hashtags;
+  exports.AwesomeMap.collectHashtags = collectHashtags;
+  exports.AwesomeMap.appendHtmlHashtags = appendHtmlHashtags;
+  exports.AwesomeMap.removeHashtags = removeHashtags;
+})(window);

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

@@ -0,0 +1,106 @@
+// = require leaflet.featuregroup.subgroup
+// = require decidim/decidim_awesome/awesome_map/utilities
+// = require decidim/decidim_awesome/awesome_map/categories
+// = require decidim/decidim_awesome/awesome_map/hashtags
+
+((exports) => {
+  const { collapsedMenu, options, categories } = exports.AwesomeMap;
+  const layers = {};
+  const cluster = L.markerClusterGroup();
+
+  const control = L.control.layers(null, null, {
+    position: 'topleft',
+    sortLayers: false,
+    collapsed: collapsedMenu,
+    // hideSingleBase: true
+  });
+
+  const addProposalsControls = (map, component) => {
+    // add control layer for proposals
+    layers.proposals = {
+      label: `<span class="awesome_map-component" 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(options.menu.amendments && component.amendments) {
+      layers.amendments = {
+        label: `<span class="awesome_map-component" id="awesome_map-amendments_${component.id}" 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);
+    }
+  };
+
+  const addMeetingsControls = (map, component) => {
+    // add control layer for meetings
+    layers.meetings = {
+      label: `<span class="awesome_map-component" 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);
+  };
+
+  const addSearchControls = () => {
+    $(control.getContainer()).contents("form").after(`<div id="awesome_map-categories-control" class="active"><b class="awesome_map-title-control">${window.DecidimAwesome.texts.categories}</b><div class="categories-container"></div></div>
+    <div id="awesome_map-hashtags-control"><b class="awesome_map-title-control">${window.DecidimAwesome.texts.hashtags}</b><div class="hashtags-container"></div><a href="#" class="awesome_map-toggle_all_tags">${window.DecidimAwesome.texts.select_deselect_all}</a></div>`);
+  };
+
+  const addCategoriesControls = (map) => {
+    if(categories && categories.length) {
+      categories.forEach((category) => {
+        // add control layer for this category
+      const label = `<i class="awesome_map-category-${category.id}"></i> ${category.name}`;
+      layers[category.id] = {
+        label: label,
+        group: L.featureGroup.subGroup(cluster)
+      };
+      layers[category.id].group.addTo(map);
+      // In the next iteration to be sure layers are rendered
+      setTimeout(() => {
+        $('#awesome_map-categories-control .categories-container').append(`<label data-layer="${category.id}" class="awesome_map-category-${category.id}${category.parent?" subcategory":""}"><input type="checkbox" class="awesome_map-categories-selector" checked><span>${label}</span></label>`);
+      });
+    });
+  }
+  };
+
+  // Hashtags are collected directly from proposals (this is different than categories)
+  const addHashtagsControls = (map, hashtags, marker) => {
+     // show hashtag layer
+    if(hashtags && hashtags.length) {
+      $('#awesome_map-hashtags-control').show();
+      hashtags.forEach(hashtag => {
+        // Add layer if not exists, otherwise just add the marker to the group
+        if(!layers[hashtag.tag]) {
+          layers[hashtag.tag] = {
+            label: hashtag.name,
+            group: L.featureGroup.subGroup(cluster)
+          };
+          layers[hashtag.tag].group.addTo(map);
+          $('#awesome_map-hashtags-control .hashtags-container').append(`<label data-layer="${hashtag.tag}" class="awesome_map-hashtag-${hashtag.tag}"><input type="checkbox" class="awesome_map-hashtags-selector" checked><span>${hashtag.name}</span></label>`);
+          // Call a trigger, might be in service for customizations
+          exports.AwesomeMap.hashtagAdded(hashtag, $('#awesome_map-hashtags-control .hashtags-container'));
+        }
+        marker.addTo(layers[hashtag.tag].group);
+
+        const $label = $(`label.awesome_map-hashtag-${hashtag.tag}`);
+        // update number of items
+        $label.attr("title", (parseInt($label.attr("title") || 0) + 1) + " " +  window.DecidimAwesome.texts.items);
+      });
+    }
+  };
+
+  exports.AwesomeMap.layers = layers;
+  exports.AwesomeMap.control = control;
+  exports.AwesomeMap.cluster = cluster;
+  exports.AwesomeMap.addProposalsControls = addProposalsControls;
+  exports.AwesomeMap.addMeetingsControls = addMeetingsControls;
+  exports.AwesomeMap.addSearchControls = addSearchControls;
+  exports.AwesomeMap.addCategoriesControls = addCategoriesControls;
+  exports.AwesomeMap.addHashtagsControls = addHashtagsControls;
+  exports.AwesomeMap.hashtagAdded = $.noop;
+})(window);

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

@@ -1,13 +1,14 @@
 // = require jsrender.min
 // = require decidim/map
 // = require leaflet.featuregroup.subgroup
+// = require decidim/decidim_awesome/awesome_map/utilities
 // = require decidim/decidim_awesome/awesome_map/categories
 // = require decidim/decidim_awesome/awesome_map/legacy_proposals
 // = require decidim/decidim_awesome/awesome_map/meetings
 // = require_self
 
 ((exports) => {
-  const { fetchProposals, fetchMeetings, getCategory } = exports.AwesomeMap;
+  const { fetchProposals, fetchMeetings, getCategory, amendments } = exports.AwesomeMap;
 
   const collapsedMenu = $("#map").data("collapsed");
   const show = {
@@ -22,14 +23,12 @@
   const popupProposalTemplateId = "legacy-marker-proposal-popup";
 
   const cluster = L.markerClusterGroup();
-  const amendments = [];
-
   const layers = {};
 
   const control = L.control.layers(null, null, {
-    position: 'topleft', 
+    position: 'topleft',
     sortLayers: false,
-    collapsed: collapsedMenu, 
+    collapsed: collapsedMenu,
     // hideSingleBase: true
   });
   const allMarkers = [];
@@ -39,26 +38,20 @@
         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]) {
@@ -86,7 +79,7 @@
     cluster.addTo(map);
 
     // Load markers
-    components.forEach((component) => {  
+    components.forEach((component) => {
       if(component.type == "proposals") {
         // add control layer for proposals
         layers.proposals = {
@@ -108,7 +101,7 @@
 
         fetchProposals(component, '', (element, marker) => {
             if(show[element.state || 'notAnswered']) {
-              drawMarker(element, marker, component).addTo(layers.proposals.group)   
+              drawMarker(element, marker, component).addTo(layers.proposals.group)
             }
           }, () => {
             // finall call
@@ -122,7 +115,7 @@
             });
           });
       }
-      
+
       if(component.type == "meetings") {
         // add control layer for meetings
         layers.meetings = {
@@ -131,7 +124,7 @@
         };
         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);
           }, () => {
@@ -167,12 +160,12 @@
 
       // watch events for subcategories syncronitzation
       const getCatFromClass = (name) => {
-        let id = name.match(/awesome_map-category_(\d+)/) 
+        let id = name.match(/awesome_map-category_(\d+)/)
         if(!id) return;
         const cat = getCategory(id[1]);
         if(!cat || !cat.name) return;
 
-        return cat;        
+        return cat;
       };
 
       const indeterminateInput = (id) => {

data/app/assets/javascripts/decidim/decidim_awesome/awesome_map/legacy_proposals.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
@@ -48,7 +49,7 @@
       })
     });
 
-    element.body = element.body.replace(/\n/g, "<br>");
+    element.body = truncate(element.body.replace(/\n/g, "<br>"));
     callback(element, marker);
   };
 

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

@@ -1,82 +1,41 @@
-// = 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,
+    cluster,
+    control,
+    addProposalsControls,
+    addMeetingsControls,
+    addSearchControls,
+    addCategoriesControls,
+    addHashtagsControls,
+    fetchProposals,
+    fetchMeetings,
+    options,
+    show,
+    components,
+    amendments,
+    allMarkers,
+    drawMarker,
+    getCategory
+  } = exports.AwesomeMap;
+
+  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 {
+      map.fitBounds(cluster.getBounds(), { padding: [50, 50] });
     }
-
-    return marker;
   };
 
   const loadElements = (map) => {
@@ -85,131 +44,168 @@
     cluster.addTo(map);
 
     // 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);
+            // console.log(element.state, show[element.state || 'notAnswered'], show, element);
             if(show[element.state || 'notAnswered']) {
-              drawMarker(element, marker, component).addTo(layers.proposals.group)   
+              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] });
+          }, () => { // 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);
-                item.marker.addTo(layers.amendments.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);
-      
-        fetchMeetings(component, '', (element, marker) => {
+        }
+
+        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] });
+          }, () => autoResizeMap(map) );
+        }
+      });
+
+    /*
+    * 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();
       }
     });
 
-
-    // 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);
+    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);
+        }
       }
-
-      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 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")];
+        console.log(el, layer, map)
+        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) => {
+
+  $("#map").on("ready.decidim", (_e, map) => {
+    if(options.center) {
+      map.setView(options.center, options.zoom);
+    }
     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);