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); + }); +};