From dcc60cb49794bb9408da312848f5e217b939a4f7 Mon Sep 17 00:00:00 2001
From: Ansis Brammanis <ansis.brammanis@gmail.com>
Date: Thu, 21 Mar 2013 00:22:50 -0400
Subject: [PATCH] inline categories for preset grid

---
 css/app.css             |  30 +++++++++--
 js/id/ui/preset_grid.js | 117 +++++++++++++++++++++++-----------------
 2 files changed, 94 insertions(+), 53 deletions(-)

diff --git a/css/app.css b/css/app.css
index cadacef08..0334658c5 100644
--- a/css/app.css
+++ b/css/app.css
@@ -726,10 +726,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     background: rgba(0,0,0,.9);
 }
 
-.preset-inspect {
-  background: white;
-}
-
 .grid-entry > .icon {
     position: absolute;
     top: 30px;left: 0px; right: 0px;
@@ -809,6 +805,32 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     margin: 5px;
 }
 
+.subgrid {
+    overflow: hidden;
+}
+
+.subgrid .preset-grid {
+    background: #eee;
+    margin-top: 0px;
+    border-radius: 4px;
+}
+
+.subgrid .arrow {
+    border: solid rgba(0, 0, 0, 0);
+    border-width: 10px;
+    border-bottom-color: #eee;
+    width: 0;
+    height: 0;
+    margin-left: 50px;
+    margin-top: -10px;
+}
+.subgrid.arrow-1 .arrow {
+    margin-left: 165px;
+}
+.subgrid.arrow-2 .arrow {
+    margin-left: 280px;
+}
+
 .show-more {
     text-align: center;
     width: 100%;
diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js
index 03d501813..4f36e01e2 100644
--- a/js/id/ui/preset_grid.js
+++ b/js/id/ui/preset_grid.js
@@ -108,10 +108,26 @@ iD.ui.PresetGrid = function(context, entity) {
         function choose(d) {
             // Category
             if (d.members) {
-                search.property('value', '');
-                presets = d.members.collection;
-                currently_drawn = presets.length;
-                grid.data([presets]).call(drawGrid, currently_drawn);
+                var subgrid = insertBox(grid, d, 'subgrid');
+
+                if (subgrid) {
+                    subgrid.append('div')
+                        .attr('class', 'arrow');
+
+                    subgrid.append('div')
+                        .attr('class', 'preset-grid fillL cf fl')
+                        .data([d.members.collection])
+                        .call(drawGrid, 1000);
+
+                    subgrid.style('max-height', '0px')
+                        .style('padding-top', '0px')
+                        .style('padding-bottom', '0px')
+                        .transition()
+                        .duration(300)
+                        .style('padding-top', '10px')
+                        .style('padding-bottom', '20px')
+                        .style('max-height', (d.members.collection.length / 3 * 150) + 200 + 'px');
+                }
 
             // Preset
             } else {
@@ -134,55 +150,56 @@ iD.ui.PresetGrid = function(context, entity) {
             return s;
         }
 
-        var presetinspect, inspectindex = null;
+        // Inserts a div inline after the entry for the provided entity
+        // Used for preset descriptions, and for expanding categories
+        function insertBox(grid, entity, klass) {
+
+            var entries = grid.selectAll('button.grid-entry'),
+                shown = grid.selectAll('.box-insert'),
+                shownIndex = Infinity,
+                index;
+
+            if (shown.node()) {
+                shown.transition()
+                    .duration(200)
+                    .style('opacity','0')
+                    .style('max-height', '0px')
+                    .style('padding-top', '0px')
+                    .style('padding-bottom', '0px')
+                    .each('end', function() {
+                        shown.remove();
+                    });
+
+
+                if (shown.datum() === entity && shown.classed(klass)) return;
+                shownIndex = Array.prototype.indexOf.call(shown.node().parentNode.childNodes, shown.node());
+            }
+
+            entries.each(function(d, i) {
+                if (d === entity) index = i;
+            });
+
+            var insertIndex = index + 3 - index % 3;
+            if (insertIndex > shownIndex) insertIndex ++;
+
+            var elem = document.createElement('div');
+            grid.node().insertBefore(elem, grid.node().childNodes[insertIndex]);
+
+            var newbox = d3.select(elem)
+                .attr('class', 'col12 box-insert ' + klass + ' arrow-' + (index % 3))
+                .datum(entity);
+
+            return newbox;
+        }
 
         function drawGrid(selection, limit) {
 
             function helpClick(d) {
-                // Display description box inline
                 d3.event.stopPropagation();
 
-                var entry = this.parentNode,
-                    index,
-                    entries = selection.selectAll('button.grid-entry');
+                var presetinspect = insertBox(selection, d, 'preset-inspect');
 
-                if (presetinspect) {
-
-                    var old = presetinspect;
-                    old
-                        .transition()
-                        .duration(200)
-                        .style('opacity','0')
-                        .style('max-height', '0px')
-                        .style('padding-top', '0px')
-                        .style('padding-bottom', '0px')
-                        .each('end', function() {
-                            old.remove();
-                        });
-
-                    if (presetinspect.datum() === d) {
-                        presetinspect = null;
-                        inspectindex = null;
-                        return;
-                    }
-                }
-
-                entries.each(function(d, i) {
-                    if (this === entry) index = i;
-                });
-
-
-                index = Math.floor(index/3) * 3 + 4;
-
-                // account for already display inspect box
-                var adjust = (inspectindex !== null && index > inspectindex) ? 1 : 0;
-
-                var selector = 'div:nth-child(' + (index + adjust) + ')';
-                inspectindex = index;
-
-                presetinspect = selection.insert('div', selector)
-                    .attr('class', 'preset-inspect col12')
-                    .datum(d);
+                if (!presetinspect) return;
 
                 presetinspect
                     .style('max-height', '0px')
@@ -230,10 +247,12 @@ iD.ui.PresetGrid = function(context, entity) {
                     .style('opacity','1');
             }
 
-            show_more
-                .style('display', (selection.data()[0].length > limit) ? 'block' : 'none');
+            if (selection.node() === grid.node()) {
+                show_more
+                    .style('display', (selection.data()[0].length > limit) ? 'block' : 'none');
+            }
 
-            selection.selectAll('.preset-inspect').remove();
+            selection.selectAll('.preset-inspect, .subgrid').remove();
 
             var entries = selection
                 .selectAll('div.grid-entry-wrap')