decidim-decidim_awesome 0.6.3 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7731085ea63b1e475bc932df6a856fb15f4895ebaec108aacac0ef51698f80bb
-  data.tar.gz: 633a38263369173bc782046137a3a91a6b0a0759690a39d5759f8eb6abb2bb3a
+  metadata.gz: 431402f5979263fb5886d2285f64cb81bea75efd183e461d87cc3fff5a5f31fd
+  data.tar.gz: 8b842985079085bd7ed837287e051572a6bbe51de233f8b1ccb5b0df63d35316
 SHA512:
-  metadata.gz: '08415d52fa955527e623c3efca7f04a1d5456cedc8cbaca918329700cc4dd963bcc5c895eccc496b67ffa04410ad36067d380d71152f545c698e9fb334c521dc'
-  data.tar.gz: c9d394b5f3080b25c0e7d1ba88b1d55ce668f537e2ee07c2401ebff37acfff5d6e49ece69bc6bf518d38b468e1ee430ab7c193e0b1489f1ed8395ccea4fbcb66
+  metadata.gz: 99427312051b0d7f486ba7070cd8eaab79f370cdc8c200e7b0f38de3f90236399fa6c44d86204d2e90d97cda0f15ab62b42a778bbfa8114126df4e70b86b9605
+  data.tar.gz: 31cab4d0be0fc9d3add07cf9e33976cf6708ed96771d55c57415b9d0fcd060f09a8f1b2275fbeca284c7e9e168494849c40bc02bd1db6fedc0b03bbf2eb78100

data/README.md

@@ -1,6 +1,7 @@
 # Decidim::DecidimAwesome
 
-[![Build](https://github.com/Platoniq/decidim-module-decidim_awesome/workflows/Build/badge.svg)](https://github.com/Platoniq/decidim-module-decidim_awesome/actions)
+[![[CI] Test 0.24](https://github.com/Platoniq/decidim-module-decidim_awesome/actions/workflows/test%20-24.yml/badge.svg)](https://github.com/Platoniq/decidim-module-decidim_awesome/actions/workflows/test%20-24.yml)
+[![[CI] Test 0.23](https://github.com/Platoniq/decidim-module-decidim_awesome/actions/workflows/test%20-23.yml/badge.svg)](https://github.com/Platoniq/decidim-module-decidim_awesome/actions/workflows/test%20-23.yml)
 [![Maintainability](https://api.codeclimate.com/v1/badges/2dada53525dd5a944089/maintainability)](https://codeclimate.com/github/Platoniq/decidim-module-decidim_awesome/maintainability)
 [![Test Coverage](https://codecov.io/gh/Platoniq/decidim-module-decidim_awesome/branch/master/graph/badge.svg?token=TFBMCLLZJG)](undefined)
 
@@ -33,7 +34,7 @@ Each hack can be scoped to one or more specific participatory spaces or componen
 
 #### 1. Image support for the Quill editor
 
-Modifies the WYSIWYG editor in Decidim by adding the possibility to insert images. When uploading images, Drag & Drop is supported. Images will be uploaded to the server and inserted as external resources (it doesn't use base64 inline encoding).
+Modifies the WYSIWYG editor in Decidim by adding the possibility to insert images. When uploading images, Drag & Drop is supported. Images will be uploaded to the server and inserted as external resources (it doesn't use base64 in-line encoding).
 
 This feature allows you use images in newsletters as well.
 
@@ -71,13 +72,13 @@ Many scopes can be defined for every tweak.
 
 This is a component you can add in any participatory space. It retrieves all the geolocated content in that participatory space (meetings or proposals) and displays it in a big map.
 
-It also provides a simple search by category, each category is assignated to a different color.
+It also provides a simple search by category, each category is assigned to a different color.
 
 ![Awesome map](examples/awesome-map.png)
 
 #### 7. Allow Decidim to use custom CSS themes for every tenant
 
-When customizind CSS for a Decidim installation, each change affects all the organizations (tenant).
+When customizing CSS for a Decidim installation, each change affects all the organizations (tenant).
 
 This feature allows to customize each organization css without affecting the others in the same Decidim installation.
 
@@ -106,12 +107,20 @@ With this feature you can have a support chat in Decidim. It is linked to a [Tel
 
 ![Intergram screenshot](examples/intergram.png)
 
-#### 10. Custom CSS applied only according scopes restrictions
+#### 10. Custom CSS applied only according scoped restrictions
 
-For instance, with this feature you can create directly from the admin a CSS snipped that is only applied globally, in a particular assembly or even a single proposal!
+With this feature you can create directly in the admin a CSS snipped that is only applied globally, in a particular assembly or even a single proposal!
 
 ![CSS screenshot](examples/custom_styles.png)
 
+#### 11. Change the main menu of Decidim entirely!
+
+Feel free to hide, modify or add items in the Decidim's main menu. You can also change the order, establish some conditions (like showing only for logged users) or open in a new window.
+
+![Menu hacks screenshot](examples/menu-1.png)
+![Menu hacks screenshot](examples/menu-2.png)
+![Menu hacks screenshot](examples/menu-3.png)
+![Menu hacks screenshot](examples/menu-4.png)
 
 #### To be continued...
 
@@ -127,7 +136,7 @@ Some things in the road-map:
 Add this line to your application's Gemfile:
 
 ```ruby
-gem "decidim-decidim_awesome", "~> 0.6.3"
+gem "decidim-decidim_awesome", "~> 0.7.0"
 ```
 
 And then execute:
@@ -144,6 +153,7 @@ Depending on your Decidim version, choose the corresponding Awesome version to e
 |---|---|
 | 0.5.x | 0.21.x, 0.22.x |
 | 0.6.x | 0.22.x, 0.23.x |
+| 0.7.x | 0.23.x, 0.24.x |
 
 ## Configuration
 
@@ -152,6 +162,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
 
@@ -165,6 +177,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/config/decidim_admin_decidim_awesome_manifest.js

@@ -1,2 +1,3 @@
 // = link decidim/decidim_awesome/admin.js
+// = link decidim/decidim_awesome/legacy_admin.js
 // = link decidim/decidim_awesome/admin/form_exit_warn.js

data/app/assets/config/decidim_decidim_awesome_manifest.js

@@ -1,3 +1,3 @@
+// = link decidim/decidim_awesome/legacy_application.js
 // = link decidim/decidim_awesome/application.js
-// = link decidim/decidim_awesome/awesome_map/legacy_map.js
 // = link decidim/decidim_awesome/awesome_map/map.js

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