Add show_more link. Fixes #1050

CONTRIBUTING.md

@@ -37,6 +37,16 @@ The words in brackets, for example `{name}`, should not be translated into a new
 
 Translations are licensed under [WTFPL](https://raw.github.com/systemed/iD/master/LICENSE), the same license as iD.
 
+## Adding New Strings for Translation
+
+iD translates strings with a `t` function - `t('foo.bar')` translate the key
+`foo.bar` into the current language. If you introduce new translatable strings
+to iD, only display them in the interface through the `t()` function.
+
+Then, add the new string to `data/core.yaml` or `data/presets.yaml` (depending
+on whether it pertains to core code or presets). The translation system,
+Transiflex, will automatically detect the change.
+
 ## Javascript
 
 We use the [Airbnb style for Javascript](https://github.com/airbnb/javascript) with

css/app.css

@@ -668,6 +668,7 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 /* Preset grid  */
 
 .preset-grid  {
+    width:100%;
     margin-top: 60px;
     padding: 20px 10px 20px 20px;
 }
@@ -783,6 +784,17 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     margin: 5px;
 }
 
+.show-more {
+    text-align: center;
+    padding: 5px;
+    margin-top:4px;
+    border-top: 1px solid #ccc;
+}
+
+.show-more a {
+    color: #222;
+}
+
 /* Preset icon colors */
 
 .preset-icon-fill.tag-shop,
@@ -2078,3 +2090,22 @@ a.success-action {
 ::-webkit-scrollbar-corner {
     background: transparent
 }
+
+/* clearfix */
+.clearfix:after {
+	content: ".";
+	display: block;
+	clear: both;
+	visibility: hidden;
+	line-height: 0;
+	height: 0;
+}
+.clearfix {
+	display: inline-block;
+}
+html[xmlns] .clearfix {
+	display: block;
+}
+* html .clearfix {
+	height: 1%;
+}

data/core.yaml

@@ -133,6 +133,7 @@ en:
   inspector: 
     no_documentation_combination: There is no documentation available for this tag combination
     no_documentation_key: There is no documentation available for this key
+    show_more: Show More
     new_tag: New tag
     edit_tags: Edit tags
     okay: Okay

js/id/ui/preset_grid.js

@@ -1,6 +1,8 @@
 iD.ui.PresetGrid = function(context) {
     var event = d3.dispatch('choose', 'close'),
         entity,
+        default_limit = 9,
+        currently_drawn = 9,
         presets = context.presets(),
         taginfo = iD.taginfo();
 
@@ -16,13 +18,27 @@ iD.ui.PresetGrid = function(context) {
         var message = messagewrap.append('h3')
             .text(t('inspector.choose'));
 
+        var gridwrap = selection.append('div')
+            .attr('class', 'fillL inspector-body inspector-body-' + entity.geometry(context.graph()));
+
+        var grid = gridwrap.append('div')
+            .attr('class', 'preset-grid fillL clearfix')
+            .data([context.presets().defaults(entity, 36).collection]);
+
+        var show_more = gridwrap.append('div')
+            .attr('class', 'fillL show-more');
+
+        show_more.append('a')
+            .text(t('inspector.show_more'))
+            .on('click', function() {
+                grid.call(drawGrid, (currently_drawn += default_limit));
+            });
+
+        grid.call(drawGrid, default_limit);
+
         var searchwrap = selection.append('div')
             .attr('class', 'preset-grid-search-wrap inspector-inner');
 
-        var grid = selection.append('div')
-            .attr('class', 'preset-grid inspector-body fillL inspector-body-' + entity.geometry(context.graph()))
-            .call(drawGrid, context.presets().defaults(entity, 12));
-
         function keydown() {
             // hack to let delete shortcut work when search is autofocused
             if (search.property('value').length === 0 &&
@@ -48,6 +64,7 @@ iD.ui.PresetGrid = function(context) {
             if (d3.event.keyCode === 13 && value.length) {
                 choose(grid.selectAll('.grid-entry:first-child').datum());
             } else {
+                currently_drawn = default_limit;
                 grid.classed('filtered', value.length);
                 if (value.length) {
                     var results = presets.search(value);
@@ -55,9 +72,11 @@ iD.ui.PresetGrid = function(context) {
                         n: results.collection.length,
                         search: value
                     }));
-                    grid.call(drawGrid, results);
+                    grid.data([results.collection])
+                        .call(drawGrid, default_limit);
                 } else {
-                    grid.call(drawGrid, context.presets().defaults(entity, 12));
+                    grid.data([context.presets().defaults(entity, 36).collection])
+                        .call(drawGrid, default_limit);
                 }
             }
         }
@@ -81,11 +100,12 @@ iD.ui.PresetGrid = function(context) {
         }
 
         function choose(d) {
+            currently_drawn = default_limit;
             // Category
             if (d.members) {
                 search.property('value', '');
                 presets = d.members;
-                drawGrid(grid, presets);
+                grid.data([presets]).call(drawGrid, preset_limit);
 
             // Preset
             } else {
@@ -110,7 +130,7 @@ iD.ui.PresetGrid = function(context) {
 
         var presetinspect;
 
-        function drawGrid(selection, presets) {
+        function drawGrid(selection, limit) {
 
             function helpClick(d) {
                 // Display description box inline
@@ -162,9 +182,12 @@ iD.ui.PresetGrid = function(context) {
                 });
             }
 
+            show_more
+                .style('display', (selection.data()[0].length > limit) ? 'block' : 'none');
+
             var entries = selection
                 .selectAll('div.grid-entry-wrap')
-                .data(presets.collection.slice(0, 12), name);
+                .data(function(d) { return d.slice(0, limit); }, name);
 
             entries.exit()
                 .style('opacity', 1)