diff --git a/css/app.css b/css/app.css
index c4a6cb752..fb41626e3 100644
--- a/css/app.css
+++ b/css/app.css
@@ -643,6 +643,31 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
display: none;
}
+/* Preset grid */
+/* temp */
+
+.preset-grid {
+ max-height: 360px;
+}
+
+.preset-grid .grid-entry {
+ float: left;
+ width: 100px;
+ height: 100px;
+ background: red;
+ color: black;
+ margin: 10px;
+}
+
+.preset-grid-search-wrap {
+ padding: 20px;
+}
+
+.preset-grid-search {
+ width: 100%;
+ height: 20px;
+}
+
/* Map Controls */
.map-control {
diff --git a/index.html b/index.html
index d6cc123cf..b0af23ba4 100644
--- a/index.html
+++ b/index.html
@@ -90,6 +90,7 @@
+
diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js
index bcd9bbb8b..7eaa68cee 100644
--- a/js/id/ui/inspector.js
+++ b/js/id/ui/inspector.js
@@ -11,6 +11,9 @@ iD.ui.Inspector = function() {
function inspector(selection) {
+ var entity = selection.datum();
+ presetMatch = presetData.matchTags(entity);
+
var iwrap = selection.append('div')
.attr('class','inspector content hide'),
messagewrap = iwrap.append('div')
@@ -23,21 +26,23 @@ iD.ui.Inspector = function() {
.attr('class', 'inspector-buttons pad1 fillD')
.call(drawButtons);
- if (false && initial) {
- inspectorbody.call(iD.ui.presetfavs());
+ if (initial) {
+ inspectorbody.call(iD.ui.PresetGrid()
+ .presetData(presetData)
+ .entity(selection.datum())
+ .on('choose', function(preset) {
+ inspectorbody.call(drawEditor, entity, preset);
+ }));
} else {
- inspectorbody.call(drawEditor);
+ inspectorbody.call(drawEditor, entity, presetMatch);
}
iwrap.call(iD.ui.Toggle(true));
}
- function drawEditor(selection) {
+ function drawEditor(selection, entity, presetMatch) {
selection.html('');
- var entity = selection.datum();
- presetMatch = presetData.matchTags(entity);
-
var editorwrap = selection.append('div')
.attr('class', 'inspector-inner tag-wrap fillL2');
diff --git a/js/id/ui/presetgrid.js b/js/id/ui/presetgrid.js
new file mode 100644
index 000000000..892312546
--- /dev/null
+++ b/js/id/ui/presetgrid.js
@@ -0,0 +1,71 @@
+iD.ui.PresetGrid = function() {
+ var event = d3.dispatch('choose'),
+ entity,
+ presetData;
+
+ function presetgrid(selection) {
+
+ selection.html('');
+ var wrap = selection.append('div')
+ .attr('class', 'fillL');
+
+ var viable = presetData.match(entity);
+
+ var grid = wrap.append('div')
+ .attr('class', 'preset-grid')
+ .call(drawGrid, filter(''));
+
+ var searchwrap = wrap.append('div')
+ .attr('class', 'preset-grid-search-wrap');
+
+ var search = searchwrap.append('input')
+ .attr('class', 'preset-grid-search')
+ .on('keyup', function() {
+ grid.call(drawGrid, filter(search.property('value')));
+ });
+
+
+ function filter(value) {
+ value = value.toLowerCase();
+ return viable.filter(function(v) {
+ return v.name.toLowerCase().indexOf(value) !== -1;
+ });
+ }
+
+ }
+
+ function name(d) { return d.name; }
+
+ function drawGrid(selection, presets) {
+
+ var entries = selection
+ .selectAll('div.grid-entry')
+ .data(presets.slice(0, 12), name);
+
+ entries.enter()
+ .append('div')
+ .attr('class', 'grid-entry')
+ .text(name)
+ .on('click', function(d) {
+ event.choose(d);
+ });
+
+ entries.exit().remove();
+ }
+
+ presetgrid.presetData = function(_) {
+ if (!arguments.length) return presetData;
+ presetData = _;
+ return presetgrid;
+ };
+
+ presetgrid.entity = function(_) {
+ if (!arguments.length) return entity;
+ entity = _;
+ return presetgrid;
+ };
+
+
+
+ return d3.rebind(presetgrid, event, 'on');
+};