diff --git a/css/app.css b/css/app.css
index bd5fb13c9..2821fcffa 100644
--- a/css/app.css
+++ b/css/app.css
@@ -116,6 +116,11 @@ table th {
text-align:left;
}
+table.tags, table.tags td, table.tags th {
+ border: 1px solid #CCC;
+ padding: 4px;
+}
+
/* UI Lists
------------------------------------------------------- */
diff --git a/index.html b/index.html
index e44acbd39..f55466c55 100644
--- a/index.html
+++ b/index.html
@@ -52,6 +52,7 @@
+
diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js
index 52d96150c..c92162ba2 100644
--- a/js/id/ui/inspector.js
+++ b/js/id/ui/inspector.js
@@ -140,28 +140,49 @@ iD.Inspector = function() {
.attr('tabindex', -1)
.attr('target', '_blank')
.on('click', function(d) {
- taginfo.docs(_.extend({}, d, {
- geometry: entity.geometry()
- }), function(err, docs) {
- var en = _.find(docs, function(d) {
- return d.lang == 'en';
- });
- if (en) {
- var types = [];
- if (en.on_area) types.push('area');
- if (en.on_node) types.push('point');
- if (en.on_way) types.push('line');
- en.types = types;
- iD.modal()
- .select('.content')
- .datum(en)
- .call(iD.tagReference);
- } else {
- iD.flash()
- .select('.content')
- .text('This is no documentation available for this tag combination');
- }
+ var params = _.extend({}, d, {
+ geometry: entity.geometry()
});
+ if (d.key && d.value) {
+ taginfo.docs(params, function(err, docs) {
+ var en = _.find(docs, function(d) {
+ return d.lang == 'en';
+ });
+ if (en) {
+ var types = [];
+ if (en.on_area) types.push('area');
+ if (en.on_node) types.push('point');
+ if (en.on_way) types.push('line');
+ en.types = types;
+ console.log(en);
+ iD.modal()
+ .select('.content')
+ .datum(en)
+ .call(iD.tagReference);
+ } else {
+ iD.flash()
+ .select('.content')
+ .text('This is no documentation available for this tag combination');
+ }
+ });
+ } else if (d.key) {
+ taginfo.values(params, function(err, values) {
+ if (values.data.length) {
+ iD.modal()
+ .select('.content')
+ .datum({
+ data: values.data,
+ title: 'Key:' + params.key,
+ geometry: params.geometry
+ })
+ .call(iD.keyReference);
+ } else {
+ iD.flash()
+ .select('.content')
+ .text('This is no documentation available for this key');
+ }
+ });
+ }
d3.event.preventDefault();
})
.attr('href', function(d) {
diff --git a/js/id/ui/key_reference.js b/js/id/ui/key_reference.js
new file mode 100644
index 000000000..0fcdd1d04
--- /dev/null
+++ b/js/id/ui/key_reference.js
@@ -0,0 +1,37 @@
+iD.keyReference = function(selection) {
+ selection.each(function() {
+
+ var selection = d3.select(this),
+ data = selection.datum(),
+ header = selection.append('div')
+ .attr('class','modal-section')
+ .append('h2'),
+ body = selection.append('div')
+ .attr('class', 'modal-section');
+
+ header.append('span').attr('class', 'icon big icon-pre-text big-' + data.geometry);
+ header.append('span').text(data.title);
+ body.append('h3').text('Common Values');
+
+ var table = body.append('table')
+ .attr('class', 'tags'),
+ thead = table.append('thead');
+
+ thead.append('th').text('Value');
+ thead.append('th').text('Description');
+ thead.append('th').text('Count');
+
+ var rows = table.selectAll('tr')
+ .data(data.data)
+ .enter()
+ .append('tr');
+
+ var cols = rows.selectAll('td')
+ .data(function(d, i) {
+ return [d.value, d.description || "", d.count];
+ })
+ .enter()
+ .append('td')
+ .text(String);
+ });
+};