diff --git a/combobox.html b/combobox.html
index 72c7ea538..c24384cb9 100644
--- a/combobox.html
+++ b/combobox.html
@@ -70,7 +70,6 @@
-
diff --git a/css/app.css b/css/app.css
index 1db4c0e90..567606a01 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1209,7 +1209,7 @@ div.combobox {
.tag-row {
width: 100%;
position: relative;
- height: 30px;
+ clear: both;
}
.tag-row input {
@@ -1255,6 +1255,10 @@ div.combobox {
left: -20px
}
+.tag-row div.tag-help {
+ display: hidden;
+}
+
.tag-row:hover input.value,
.tag-row:hover input.key {
border-radius: 0;
diff --git a/index.html b/index.html
index 5b928ea28..95c2f9a9c 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,6 @@
-
diff --git a/js/id/ui/key_reference.js b/js/id/ui/key_reference.js
deleted file mode 100644
index c5e2b206f..000000000
--- a/js/id/ui/key_reference.js
+++ /dev/null
@@ -1,37 +0,0 @@
-iD.ui.keyReference = function(selection) {
- selection.each(function() {
-
- var selection = d3.select(this),
- data = selection.datum(),
- header = selection.append('div')
- .attr('class','modal-section fillL')
- .append('h2'),
- body = selection.append('div')
- .attr('class', 'modal-section fillL2');
-
- 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) {
- return [d.value, d.description || "", d.count];
- })
- .enter()
- .append('td')
- .text(String);
- });
-};
diff --git a/js/id/ui/tag_reference.js b/js/id/ui/tag_reference.js
index 67ae91b84..d5d919d8b 100644
--- a/js/id/ui/tag_reference.js
+++ b/js/id/ui/tag_reference.js
@@ -1,50 +1,62 @@
-iD.ui.tagReference = function(selection) {
- selection.each(function() {
- function g(x) { return function(d) { return d[x]; }; }
- var selection = d3.select(this);
- var header = selection.append('div')
- .attr('class','modal-section fillL header')
- .append('h3');
+iD.ui.TagReference = function(entity, tag) {
+ var taginfo = iD.taginfo();
- header.selectAll('span.icon')
- .data(g('types'))
- .enter()
- .append('span')
- .attr('title', function(d) {
- return t('tag_reference.used_with', {type: d});
- })
- .attr('class', function(d) {
- return 'icon big icon-pre-text big-' + d;
+ function findLocal(docs) {
+ var locale = iD.detect().locale.toLowerCase(),
+ localized;
+
+ localized = _.find(docs, function(d) {
+ return d.lang.toLowerCase() === locale;
+ });
+ if (localized) return localized;
+
+ // try the non-regional version of a language, like
+ // 'en' if the language is 'en-US'
+ if (locale.indexOf('-') !== -1) {
+ var first = locale.split('-')[0];
+ localized = _.find(docs, function(d) {
+ return d.lang.toLowerCase() === first;
});
- header.append('span')
- .text(g('title'));
-
- var referenceBody = selection.append('div')
- .attr('class','modal-section fillL2');
-
- referenceBody
- .append('h4')
- .text(t('tag_reference.description'));
-
- if (selection.datum().image) {
- referenceBody
- .append('img')
- .attr('class', 'wiki-image')
- .attr('src', selection.datum().image.image_url);
+ if (localized) return localized;
}
- referenceBody
- .append('p')
- .text(g('description'));
+ // finally fall back to english
+ return _.find(docs, function(d) {
+ return d.lang.toLowerCase() === 'en';
+ });
+ }
- referenceBody
- .append('a')
- .attr('target', '_blank')
- .attr('href', function(d) {
- return 'http://wiki.openstreetmap.org/wiki/' + d.title;
- })
- .text(function(d) {
- return t('tag_reference.on_wiki', {tag: d.title});
- });
- });
+ return function(selection) {
+ selection.html('');
+
+ taginfo.docs({key: tag.key}, function(err, docs) {
+ if (!err && docs) {
+ docs = findLocal(docs);
+ }
+
+ if (!docs || !docs.description) {
+ return selection.text(t('inspector.no_documentation_key'));
+ }
+
+ var referenceBody = selection.append('div')
+ .attr('class','modal-section fillL2');
+
+ if (docs.image && docs.image.thumb_url_prefix) {
+ referenceBody
+ .append('img')
+ .attr('class', 'wiki-image')
+ .attr('src', docs.image.thumb_url_prefix + "100" + docs.image.thumb_url_suffix);
+ }
+
+ referenceBody
+ .append('p')
+ .text(docs.description);
+
+ referenceBody
+ .append('a')
+ .attr('target', '_blank')
+ .attr('href', 'http://wiki.openstreetmap.org/wiki/' + docs.title)
+ .text(t('inspector.reference'));
+ });
+ }
};
diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js
index 81042d679..f34dbfa26 100644
--- a/js/id/ui/taglist.js
+++ b/js/id/ui/taglist.js
@@ -94,89 +94,25 @@ iD.ui.Taglist = function(context, entity) {
removeBtn.append('span')
.attr('class', 'icon delete');
- function findLocal(docs) {
- var locale = iD.detect().locale.toLowerCase(),
- localized;
-
- localized = _.find(docs, function(d) {
- return d.lang.toLowerCase() === locale;
- });
- if (localized) return localized;
-
- // try the non-regional version of a language, like
- // 'en' if the language is 'en-US'
- if (locale.indexOf('-') !== -1) {
- var first = locale.split('-')[0];
- localized = _.find(docs, function(d) {
- return d.lang.toLowerCase() === first;
- });
- if (localized) return localized;
- }
-
- // finally fall back to english
- return _.find(docs, function(d) {
- return d.lang.toLowerCase() === 'en';
- });
- }
-
- function keyValueReference(err, docs) {
- var local;
- if (!err && docs) {
- local = findLocal(docs);
- }
- if (local) {
- var types = [];
- if (local.on_area) types.push('area');
- if (local.on_node) types.push('point');
- if (local.on_way) types.push('line');
- local.types = types;
- iD.ui.modal(context.container())
- .select('.content')
- .datum(local)
- .call(iD.ui.tagReference);
- } else {
- iD.ui.flash(context.container())
- .select('.content')
- .append('h3')
- .text(t('inspector.no_documentation_combination'));
- }
- }
-
- function keyReference(err, values, params) {
- if (!err && values.length) {
- iD.ui.modal(context.container())
- .select('.content')
- .datum({
- data: values,
- title: 'Key:' + params.key,
- geometry: params.geometry
- })
- .call(iD.ui.keyReference);
- } else {
- iD.ui.flash(context.container())
- .select('.content')
- .append('h3')
- .text(t('inspector.no_documentation_key'));
- }
- }
-
var helpBtn = row.append('button')
.attr('tabindex', -1)
.attr('class', 'tag-help minor')
- .on('click', function(d) {
- var params = _.extend({}, d, {
- geometry: entity.geometry(context.graph())
- });
- if (d.key && d.value) {
- taginfo.docs(params, keyValueReference);
- } else if (d.key) {
- taginfo.values(params, keyReference);
- }
+ .on('click', function(tag) {
+ row.selectAll('div.tag-help')
+ .style('display', 'none');
+
+ d3.select(d3.select(this).node().parentNode)
+ .select('div.tag-help')
+ .style('display', 'block')
+ .call(iD.ui.TagReference(entity, tag));
});
helpBtn.append('span')
.attr('class', 'icon inspect');
+ row.append('div')
+ .attr('class', 'tag-help');
+
if (initial && tags.length === 1 &&
tags[0].key === '' && tags[0].value === '') {
focusNewKey();
diff --git a/test/index.html b/test/index.html
index c6c1f11c7..770d33e21 100644
--- a/test/index.html
+++ b/test/index.html
@@ -81,7 +81,6 @@
-