Add basic category support for presets

js/id/presetdata.js

@@ -1,31 +1,42 @@
 iD.presetData = function() {
     var presets = {},
         data = [],
+        categories = {},
         defaults = {
             node: [],
             area: [],
             line: []
         };
 
+    function getPreset(name) {
+        return _.find(data.concat(categories), function(d) {
+            return d.name === name;
+        });
+    }
+
     presets.data = function(_) {
         if (!arguments.length) return data;
         data = _.presets;
+        categories = _.categories;
         defaults = _.defaults;
         return presets;
     };
 
     presets.defaults = function(entity) {
         var type = entity.type == 'node' ? 'node' : entity.geometry();
-        return defaults[type].map(function(def) {
-            return _.find(data, function(d) {
-                return d.name === def;
-            });
-        });
+        return defaults[type].map(getPreset);
+    };
+
+    presets.categories = function(category) {
+        if (!arguments.length) return categories;
+        return _.find(categories, function(d) {
+            return d.name === category;
+        }).members.map(getPreset);
     };
 
     presets.match = function(entity) {
         var type = entity.type == 'node' ? 'node' : entity.geometry();
-        return data.filter(function(d) {
+        return data.concat(categories).filter(function(d) {
             return _.contains(d.match.type, type);
         });
     };

js/id/ui/presetgrid.js

@@ -22,15 +22,17 @@ iD.ui.PresetGrid = function() {
             .attr('class', 'preset-grid-search')
             .attr('type', 'search')
             .on('keyup', function() {
-                var value = search.property('value'),
-                    presets = filter(value);
-                event.message('' + presets.length + ' results for ' + value);
-                grid.call(drawGrid, presets);
-                grid.classed('filtered', value.length);
-            })
-            .on('change', function() {
-                var chosen = grid.selectAll('.grid-entry:first-child').datum();
-                if (chosen) event.choose(chosen);
+                // enter
+                if (d3.event.keyCode === 13) {
+                    var chosen = grid.selectAll('.grid-entry:first-child').datum();
+                    if (chosen) event.choose(chosen);
+                } else {
+                    var value = search.property('value'),
+                        presets = filter(value);
+                    event.message('' + presets.length + ' results for ' + value);
+                    grid.call(drawGrid, presets);
+                    grid.classed('filtered', value.length);
+                }
             });
         search.node().focus();
 
@@ -58,14 +60,25 @@ iD.ui.PresetGrid = function() {
             .append('button')
             .attr('class', 'grid-entry col3')
             .on('click', function(d) {
-                event.choose(d);
+                // Category
+                if (d.members) {
+                    drawGrid(selection, presetData.categories(d.name));
+
+                // Preset
+                } else {
+                    event.choose(d);
+                }
             });
 
         entered.append('div')
             .attr('class', function(d) {
                 var s = 'preset-icon-fill ' + entity.geometry(context.graph());
-                for (var i in d.match.tags) {
-                    s += ' tag-' + i + ' tag-' + i + '-' + d.match.tags[i];
+                if (d.members) {
+                    s += 'category';
+                } else {
+                    for (var i in d.match.tags) {
+                        s += ' tag-' + i + ' tag-' + i + '-' + d.match.tags[i];
+                    }
                 }
                 return s;
             });

presets/presets.json

@@ -711,5 +711,18 @@
             "supermarket",
             "other"
         ]
-    }
+    },
+    "categories": [
+        {
+            "match": {
+                "type": "line"
+            },
+            "icon": "road",
+            "name": "roads",
+            "members": [
+                "residential road",
+                "primary road"
+            ]
+        }
+    ]
 }