diff --git a/css/app.css b/css/app.css index 046acb59b..1185ee2a3 100644 --- a/css/app.css +++ b/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; diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js index 5097004c1..905e58de6 100644 --- a/js/id/ui/preset_grid.js +++ b/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(); }