From 9c9cce5c50693889dbad085f8b7e7b2389e7ba12 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Fri, 22 Mar 2013 12:47:54 -0700 Subject: [PATCH] Inline tag reference in tag list (#256) --- combobox.html | 1 - css/app.css | 6 ++- index.html | 1 - js/id/ui/key_reference.js | 37 -------------- js/id/ui/tag_reference.js | 100 +++++++++++++++++++++----------------- js/id/ui/taglist.js | 86 +++++--------------------------- test/index.html | 1 - 7 files changed, 72 insertions(+), 160 deletions(-) delete mode 100644 js/id/ui/key_reference.js 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 @@ -