Inline tag reference in tag list (#256)

This commit is contained in:
John Firebaugh
2013-03-22 12:47:54 -07:00
parent aef17c1968
commit 9c9cce5c50
7 changed files with 72 additions and 160 deletions
-1
View File
@@ -70,7 +70,6 @@
<script src='js/id/ui/save.js'></script>
<script src='js/id/ui/tag_reference.js'></script>
<script src='js/id/ui/tail.js'></script>
<script src='js/id/ui/key_reference.js'></script>
<script src='js/id/actions.js'></script>
<script src="js/id/actions/add_midpoint.js"></script>
+5 -1
View File
@@ -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;
-1
View File
@@ -79,7 +79,6 @@
<script src='js/id/ui/spinner.js'></script>
<script src='js/id/ui/restore.js'></script>
<script src='js/id/ui/tag_reference.js'></script>
<script src='js/id/ui/key_reference.js'></script>
<script src='js/id/ui/preset.js'></script>
<script src='js/id/ui/lasso.js'></script>
<script src='js/id/ui/source_switch.js'></script>
-37
View File
@@ -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);
});
};
+56 -44
View File
@@ -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'));
});
}
};
+11 -75
View File
@@ -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();
-1
View File
@@ -81,7 +81,6 @@
<script src='../js/id/ui/splash.js'></script>
<script src='../js/id/ui/restore.js'></script>
<script src='../js/id/ui/tag_reference.js'></script>
<script src='../js/id/ui/key_reference.js'></script>
<script src='../js/id/ui/preset.js'></script>
<script src='../js/id/ui/lasso.js'></script>
<script src='../js/id/ui/source_switch.js'></script>