Remove preset list limit, fix insertBox

css/app.css

@@ -679,12 +679,12 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 
 .preset-grid  {
     width:100%;
-    padding: 20px 10px 10px 20px;
+    padding: 20px 20px 10px 20px;
     border-bottom: 1px solid #ccc;
 }
 
 .grid-button-wrap {
-    padding: 0 10px 10px 0;
+    padding-bottom: 10px;
     height: 70px;
 }
 
@@ -788,16 +788,8 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     margin: 5px;
 }
 
-.subgrid {
-    width: 100%;
-    width: -webkit-calc(100% + 10px);
-    width: calc(100% + 10px);
-    margin-left: -10px;
-    overflow: hidden;
-}
-
 .subgrid .preset-grid {
-    padding: 10px 0 0 10px;
+    padding: 10px 10px 0 10px;
     border: 1px solid #CCC;
     margin-top: 0;
     border-radius: 8px;

js/id/ui/preset_grid.js

@@ -1,7 +1,5 @@
 iD.ui.PresetGrid = function(context, entity) {
     var event = d3.dispatch('choose', 'close'),
-        defaultLimit = 9,
-        currentlyDrawn = 9,
         presets,
         newFeature = false;
 
@@ -37,16 +35,7 @@ iD.ui.PresetGrid = function(context, entity) {
 
         var grid = gridwrap.append('div')
             .attr('class', 'preset-grid fillL cf')
-            .data([context.presets().defaults(entity, 36).collection]);
-
-        var showMore = gridwrap.append('button')
-            .attr('class', 'fillL show-more')
-            .text(t('inspector.show_more'))
-            .on('click', function() {
-                grid.call(drawGrid, (currentlyDrawn += defaultLimit));
-            });
-
-        grid.call(drawGrid, defaultLimit);
+            .call(drawGrid, context.presets().defaults(entity, 36));
 
         function keydown() {
             // hack to let delete shortcut work when search is autofocused
@@ -73,7 +62,6 @@ iD.ui.PresetGrid = function(context, entity) {
             if (d3.event.keyCode === 13 && value.length) {
                 choose(grid.selectAll('.grid-entry:first-child').datum());
             } else {
-                currentlyDrawn = defaultLimit;
                 grid.classed('filtered', value.length);
                 if (value.length) {
                     var results = presets.search(value);
@@ -81,11 +69,9 @@ iD.ui.PresetGrid = function(context, entity) {
                         n: results.collection.length,
                         search: value
                     }));
-                    grid.data([results.collection])
-                        .call(drawGrid, defaultLimit);
+                    grid.call(drawGrid, results);
                 } else {
-                    grid.data([context.presets().defaults(entity, 36).collection])
-                        .call(drawGrid, defaultLimit);
+                    grid.call(drawGrid, context.presets().defaults(entity, 36));
                 }
             }
         }
@@ -118,8 +104,7 @@ iD.ui.PresetGrid = function(context, entity) {
 
                     subgrid.append('div')
                         .attr('class', 'preset-grid fillL3 cf fl')
-                        .data([d.members.collection])
-                        .call(drawGrid, 1000);
+                        .call(drawGrid, d.members);
 
                     subgrid.style('max-height', '0px')
                         .style('padding-bottom', '0px')
@@ -136,8 +121,6 @@ iD.ui.PresetGrid = function(context, entity) {
             }
         }
 
-        function name(d) { return d.name(); }
-
         // Inserts a div inline after the entry for the provided entity
         // Used for preset descriptions, and for expanding categories
         function insertBox(grid, entity, klass) {
@@ -164,7 +147,7 @@ iD.ui.PresetGrid = function(context, entity) {
                 if (d === entity) index = i;
             });
 
-            if (index > shownIndex) index++;
+            if (index >= shownIndex) index++;
 
             var elem = document.createElement('div');
             grid.node().insertBefore(elem, grid.node().childNodes[index + 1]);
@@ -176,12 +159,12 @@ iD.ui.PresetGrid = function(context, entity) {
             return newbox;
         }
 
-        function drawGrid(selection, limit) {
+        function drawGrid(grid, presets) {
 
             function helpClick(d) {
                 d3.event.stopPropagation();
 
-                var presetinspect = insertBox(selection, d, 'preset-inspect');
+                var presetinspect = insertBox(grid, d, 'preset-inspect');
 
                 if (!presetinspect) return;
 
@@ -197,16 +180,11 @@ iD.ui.PresetGrid = function(context, entity) {
                 tagReference.show();
             }
 
-            if (selection.node() === grid.node()) {
-                showMore
-                    .style('display', (selection.data()[0].length > limit) ? 'block' : 'none');
-            }
+            grid.selectAll('.preset-inspect, .subgrid').remove();
 
-            selection.selectAll('.preset-inspect, .subgrid').remove();
-
-            var entries = selection
-                .selectAll('div.grid-entry-wrap')
-                .data(function(d) { return d.slice(0, limit); }, name);
+            var entries = grid
+                .selectAll('.grid-entry-wrap')
+                .data(presets.collection, function(d) { return d.id; });
 
             entries.exit()
                 .remove();
@@ -231,15 +209,15 @@ iD.ui.PresetGrid = function(context, entity) {
 
             var label = buttonInner.append('div')
                 .attr('class','label')
-                .text(name);
+                .text(function(d) { return d.name(); });
 
             entered.filter(function(d) { return !d.members; })
                 .append('button')
                 .attr('tabindex', -1)
                 .attr('class', 'tag-reference-button minor')
-                .on('click', helpClick, selection)
+                .on('click', helpClick)
                 .append('span')
-                    .attr('class', 'icon inspect');
+                .attr('class', 'icon inspect');
 
             entries.order();
         }