Add possibility to select all/none of sections in a category (also fixes #3)

2 files changed, 59 insertions, 9 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
index eb5548c..12a9b8d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -48,6 +48,18 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 body > aside > nav > ul h3 { font-size: 1.6rem; }
+body > aside > nav > ul h3 span {
+    position: relative;
+    border: 0.4rem solid #0009;
+    display: inline-block;
+    float: right;
+    width: 0.5rem;
+    height: 0.5rem;
+}
+body > aside > nav > ul h3 span.selected {
+    border-color: transparent;
+    background-color: #0009;
+}
 body > aside > nav > ul > li ul { display: none; }
 body > aside > nav > ul > li.active ul { display: block; }
 
@@ -110,3 +122,4 @@ body > aside nav > ul > li#c-9 { background-color: #D3A9B5; }
 .marker.popup .change.c-2 { border-color: #7E8A0E; }
 .marker.popup .change.c-13 { border-color: #677362; }
 .marker.popup .change.c-9 { border-color: #D3A9B5; }
+
diff --git a/assets/mapper.js b/assets/mapper.js
index f549c5c..39cd713 100644
--- a/assets/mapper.js
+++ b/assets/mapper.js
@@ -109,6 +109,9 @@ const Categories = [
     ], "color":"#D3A9B5"}
 ]
 
+// Store known sections (refs #3)
+const KnownSections = []
+
 // Our map
 const map = L.map('map')
 const mcg = L.markerClusterGroup({
@@ -125,7 +128,8 @@ const SectionLayers = []
 // Prepare Markers for lazy-loading
 Categories.forEach(function(c) {
     c.subcategories.forEach(function(s) {
-	Markers[s.id] = {}
+	KnownSections.push(s.id) // refs #3
+	Markers[s.id] = []
 	if (USE_GEOJSON === true) {
 	    SectionLayers[s.id] = L.geoJSON([], {
 		filter: function(feature, layer) {
@@ -166,7 +170,14 @@ function navSetup() {
     Categories.forEach(function(c, i) {
 	var li = $('<li>')
 	var h3 = $('<h3>')
+	var cs = $('<span>')
+	cs.click(function(e) {
+	    $(this).toggleClass('selected')
+	    toggleAllSections(c.id, $(this).hasClass('selected'))
+	    return false
+	})
 	h3.html(c.name)
+	    .append(cs)
 	li.append(h3)
 	    .attr('id', 'c-' + c.id)
 	    .click(function(e) {
@@ -217,6 +228,29 @@ function toggleMarkers(sec_id) {
 }
 
 /**
+ * Select or deselect all sections in the navbar for a given category
+**/
+function toggleAllSections(cat_id, active) {
+    console.log('toggleAllSections(' + cat_id + ', ' + active + ')')
+    categorySections(cat_id).forEach(function(s) {
+	var section = $('#s-' + s.id)
+	if (active) {
+	    sectionOnMap(s.id)
+	    section.addClass('active')
+	} else {
+	    sectionOffMap(s.id)
+	    section.removeClass('active')
+	}
+    })
+}
+
+function categorySections(cat_id) {
+    return Categories.find(function(c) { return c.id == cat_id }).subcategories
+}
+    
+
+
+/**
  * Retrieve markers for given section from the JSON API
  *
  * @param String sec_id HTML attribute id for the wanted section
@@ -359,9 +393,16 @@ function markerFor(data) {
 
 const asset_uri = $('script[src$="mapper.js"]' ).attr( 'src' ).replace( 'mapper.js', '' )
 
-function iconFor(data) {
+// Find parent Category ID from data.subcategories (fixes #3)
+function categoryIdFromData(data) {
+    var section = data.subcategories.find(function(s) {
+	return KnownSections.includes(s.id)
+    })
+    return $('#s-' + section.id).parents('li').attr('id').substr(2)
+}
 
-    var cat_id = $('#s-' + data.subcategories[0].id).parents('li').attr('id').substr(2)
+function iconFor(data) {
+    var cat_id = categoryIdFromData(data)
     var color = Categories.find(function(el){ return el.id == cat_id }).color
 //    console.log(asset_uri + 'img/')
 
@@ -373,14 +414,10 @@ function iconFor(data) {
 
 function markerPopupFor(data) {
     var template = $('#popup-template').html()
-    try {
-	var cat_id = $('#s-' + data.subcategories[0].id).parents('li').attr('id')
-    } catch(e) {
-	var cat_id = 'c-0'
-    }
+    var cat_id = categoryIdFromData(data)
     return Mustache.render(template, {
 	marker: data,
-	cat_id: cat_id
+	cat_id: 'c-' + cat_id
     })
 }