map features master checkbox

Adds a master checkbox which selects/deselects all map features. (closes openstreetmap#2904)
kepta · Feb 21, 2016 · 7cf55ae · 7cf55ae
1 parent df53b01
commit 7cf55ae
Showing 1 changed file with 52 additions and 0 deletions.
diff --git a/js/id/ui/map_data.js b/js/id/ui/map_data.js
@@ -246,6 +246,26 @@ iD.ui.MapData = function(context) {
                 .remove();
         }
 
+        function updateSelectAll(selection, active) {
+          var items = selection.selectAll('li')
+            .filter(function() {
+                // filter out list item 'Select All' itself
+                return !d3.select(this).classed('select-all');
+            });
+
+          // keeps a record of all list items checked
+          var allFeatureSelected = true;
+
+          items.classed('active', function(e) {
+            allFeatureSelected = allFeatureSelected && active(e);
+            return active(e);
+          });
+
+          selection.selectAll('li.select-all')
+            .classed('active', allFeatureSelected)
+            .selectAll('input')
+            .property('checked', allFeatureSelected);
+        }
 
         function update() {
             dataLayerContainer.call(drawMapillaryItems);
@@ -254,6 +274,7 @@ iD.ui.MapData = function(context) {
             fillList.call(drawList, fills, 'radio', 'area_fill', setFill, showsFill);
 
             featureList.call(drawList, features, 'checkbox', 'feature', clickFeature, showsFeature);
+            featureList.call(updateSelectAll, showsFeature);
         }
 
         function hidePanel() {
@@ -275,6 +296,22 @@ iD.ui.MapData = function(context) {
             context.map().pan([0,0]);  // trigger a redraw
         }
 
+        function toggleSelectAll(selection, toggle) {
+          selection.selectAll('li')
+            .filter(function() {
+                return !d3.select(this).classed('select-all');
+            })
+            .classed('active', toggle)
+            .selectAll('input')
+            .property('checked', function(e) {
+              if (d3.select(this).node().checked !== toggle) {
+                context.features().toggle(e);
+              }
+            });
+
+          update();
+        }
+
         function setVisible(show) {
             if (show !== shown) {
                 button.classed('active', show);
@@ -381,6 +418,21 @@ iD.ui.MapData = function(context) {
         var featureList = featureContainer.append('ul')
             .attr('class', 'layer-list layer-feature-list');
 
+        var selectAll = featureList.append('li')
+            .attr('class', 'layer select-all')
+            .append('label');
+
+        selectAll.append('input')
+            .attr('class', 'layer-feature-select-all')
+            .attr('type', 'checkbox')
+            .attr('name', 'select-all')
+            .on('click', function() {
+              var isChecked = d3.select(this).node().checked;
+              featureList.call(toggleSelectAll, isChecked);
+            });
+
+        selectAll.append('span').text('Select All');
+
 
         context.features()
             .on('change.map_data-update', update);