CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-13 01:02:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify inspector function nesting; cleanup

Browse Source
This commit is contained in:
John Firebaugh
2013-01-02 21:16:09 -08:00
parent 2860cc2fcb
commit ec6c74ebcd
3 changed files with 173 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/app.css
View File

@@ -452,7 +452,7 @@ button.Browse .label {
position:relative;
}
.inspector-wrap a.permalink {
.inspector-inner.head a {
text-decoration:none;
margin-right: 10px;
display: inline-block

342
js/id/ui/inspector.js
View File

@@ -4,213 +4,211 @@ iD.Inspector = function() {
taginfo = iD.taginfo(),
inspectorwrap;
function drawhead(selection) {
function osmLink(d) {
return 'http://www.openstreetmap.org/browse/' + d.type + '/' + d.osmId();
}
function emitChangeDirection(d) { event.changeWayDirection(d); }
function emitSplitWay(d) { event.splitWay(d); }
selection.html('');
function inspector(selection) {
var entity = selection.datum();
selection.html("").append('button')
.attr('class', 'narrow close')
.html("<span class='icon close'></span>")
.on('click', function() {
event.close(entity);
});
selection.append('div')
.attr('class', 'head inspector-inner')
.call(drawHead);
var inspectorbody = selection.append('div')
.attr('class', 'inspector-body');
inspectorwrap = inspectorbody.append('ul')
.attr('class', 'inspector-inner tag-wrap fillL2');
inspectorwrap.append('h4')
.text('Edit tags');
var formsel = drawTags(entity.tags);
inspectorbody.append('div')
.attr('class', 'inspector-buttons')
.call(drawButtons);
var inHeight = inspectorbody.node().offsetHeight;
inspectorbody.style('display', 'none')
.style('margin-top', (-inHeight) + 'px');
var inspectortoggle = selection.append('button')
.attr('class', 'inspector-toggle action')
.on('click', function() {
inspectortoggle.style('display', 'none');
inspectorbody
.style('display', 'block')
.transition()
.style('margin-top', '0px');
});
formsel.selectAll('input').node().focus();
inspectortoggle.append('span')
.text('Details')
.attr('class','label');
}
function drawHead(selection) {
var entity = selection.datum();
var h2 = selection.append('h2');
h2.append('span').attr('class', function(d) {
var icons = { way: 'line', node: 'point' };
return 'icon big icon-pre-text big-' + icons[d.type];
});
h2.append('span').text(iD.util.friendlyName(selection.datum()));
h2.append('span')
.attr('class', function(d) {
var icons = { way: 'line', node: 'point' };
return 'icon big icon-pre-text big-' + icons[d.type];
});
h2.append('span')
.text(iD.util.friendlyName(entity));
selection.append('a')
.attr('class', 'permalink')
.attr('href', osmLink)
.attr('href', function() {
return 'http://www.openstreetmap.org/browse/' + entity.type + '/' + entity.osmId();
})
.text('View on OSM');
if (selection.datum().type === 'way') {
if (entity.type === 'way') {
selection.append('a')
.attr('class', 'permalink')
.attr('href', '#')
.text('Reverse Direction')
.on('click', emitChangeDirection);
.on('click', function() { event.changeWayDirection(entity); });
}
if (selection.datum().type === 'node' && !selection.datum()._poi) {
if (entity.type === 'node' && !entity._poi) {
selection.append('a')
.attr('class', 'permalink')
.attr('href', '#')
.text('Split Way')
.on('click', emitSplitWay);
.on('click', function() { event.splitWay(entity); });
}
}
function inspector(selection) {
selection.each(function(entity) {
function drawButtons(selection) {
selection.append('button')
.attr('class', 'apply wide action')
.html("<span class='icon icon-pre-text apply'></span><span class='label'>Apply</span>")
.on('click', apply);
function draw(tags) {
selection.append('button')
.attr('class', 'delete wide action')
.html("<span class='icon icon-pre-text delete'></span><span class='label'>Delete</span>")
.on('click', function(entity) { event.remove(entity); });
}
function emptyTag(d) {
return d.key === '';
}
function drawTags(tags) {
tags = d3.entries(tags);
tags.push({ key: '', value: ''});
function pushMore() {
if (d3.event.keyCode === 9) {
draw(inspector.tags());
}
}
var li = inspectorwrap.selectAll('li')
.data(tags, function(d) { return d.key; });
function bindTypeahead() {
var row = d3.select(this),
key = row.selectAll('.key'),
value = row.selectAll('.value');
li.exit().remove();
key.call(d3.typeahead()
.data(function(_, callback) {
taginfo.keys({query: key.property('value')}, function(err, data) {
callback(data.data.map(function (d) {
return {value: d.key};
}));
});
}));
var row = li.enter().append('li').attr('class','tag-row');
var inputs = row.append('div').attr('class','input-wrap');
value.call(d3.typeahead()
.data(function(_, callback) {
taginfo.values({key: key.property('value'), query: value.property('value')}, function(err, data) {
callback(data.data.map(function (d) {
return {value: d.value, title: d.description};
}));
});
}));
}
li.classed('tag-row-empty', function(d) { return d.key === ''; });
tags = d3.entries(tags);
tags.push({ key: '', value: ''});
inputs.append('input')
.property('type', 'text')
.attr('class', 'key')
.property('value', function(d) { return d.key; });
var li = inspectorwrap.selectAll('li')
.data(tags, function(d) { return d.key; });
inputs.append('input')
.property('type', 'text')
.attr('class', 'value')
.property('value', function(d) { return d.value; })
.on('keydown.push-more', pushMore);
li.exit().remove();
inputs.each(bindTypeahead);
var row = li.enter().append('li').attr('class','tag-row');
var inputs = row.append('div').attr('class','input-wrap');
var removeBtn = row.append('button')
.attr('tabindex', -1)
.attr('class','remove minor')
.on('click', removeTag);
li.classed('tag-row-empty', emptyTag);
removeBtn.append('span').attr('class', 'icon remove');
inputs.append('input')
.property('type', 'text')
.attr('class', 'key')
.property('value', function(d) { return d.key; });
inputs.append('input')
.property('type', 'text')
.attr('class', 'value')
.property('value', function(d) { return d.value; })
.on('keydown.push-more', pushMore);
inputs.each(bindTypeahead);
var removeBtn = row.append('button')
.attr('tabindex', -1)
.attr('class','remove minor')
.on('click', removeTag);
removeBtn.append('span').attr('class', 'icon remove');
var helpBtn = row.append('button')
.attr('tabindex', -1)
.attr('class', 'tag-help minor')
.append('a')
.attr('tabindex', -1)
.attr('target', '_blank')
.on('click', function(d) {
taginfo.docs(d, 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;
var mod = iD.modal();
mod.select('.content')
.datum(en)
.call(iD.tagReference);
}
});
d3.event.preventDefault();
})
.attr('href', function(d) {
return 'http://taginfo.openstreetmap.org/keys/' + d.key;
var helpBtn = row.append('button')
.attr('tabindex', -1)
.attr('class', 'tag-help minor')
.append('a')
.attr('tabindex', -1)
.attr('target', '_blank')
.on('click', function(d) {
taginfo.docs(d, function(err, docs) {
var en = _.find(docs, function(d) {
return d.lang == 'en';
});
helpBtn.append('span').attr('class', 'icon inspect');
return li;
}
function removeTag(d) {
var tags = inspector.tags();
delete tags[d.key];
draw(tags);
}
function apply(entity) {
event.changeTags(entity, inspector.tags());
event.close(entity);
}
function drawbuttons(selection) {
selection.append('button')
.attr('class', 'apply wide action')
.html("<span class='icon icon-pre-text apply'></span><span class='label'>Apply</span>")
.on('click', apply);
selection.append('button')
.attr('class', 'delete wide action')
.html("<span class='icon icon-pre-text delete'></span><span class='label'>Delete</span>")
.on('click', function(entity) { event.remove(entity); });
}
selection.html("").append('button')
.attr('class', 'narrow close')
.html("<span class='icon close'></span>")
.on('click', function() {
event.close(entity);
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;
var mod = iD.modal();
mod.select('.content')
.datum(en)
.call(iD.tagReference);
}
});
d3.event.preventDefault();
})
.attr('href', function(d) {
return 'http://taginfo.openstreetmap.org/keys/' + d.key;
});
selection.append('div')
.attr('class', 'head inspector-inner')
.call(drawhead);
helpBtn.append('span').attr('class', 'icon inspect');
var inspectorbody = selection.append('div')
.attr('class', 'inspector-body');
return li;
}
inspectorwrap = inspectorbody
.append('ul').attr('class', 'inspector-inner tag-wrap fillL2');
function pushMore() {
if (d3.event.keyCode === 9) {
drawTags(inspector.tags());
}
}
inspectorwrap.append('h4').text('Edit tags');
function bindTypeahead() {
var row = d3.select(this),
key = row.selectAll('.key'),
value = row.selectAll('.value');
var formsel = draw(entity.tags);
inspectorbody.append('div')
.attr('class', 'inspector-buttons').call(drawbuttons);
var inHeight = inspectorbody.node().offsetHeight;
inspectorbody.style('display', 'none')
.style('margin-top', (-inHeight) + 'px');
var inspectortoggle = selection.append('button')
.attr('class', 'inspector-toggle action')
.on('click', function() {
inspectortoggle.style('display', 'none');
inspectorbody
.style('display', 'block')
.transition()
.style('margin-top', '0px');
key.call(d3.typeahead()
.data(function(_, callback) {
taginfo.keys({query: key.property('value')}, function(err, data) {
callback(data.data.map(function (d) {
return {value: d.key};
}));
});
}));
formsel.select('input').node().focus();
value.call(d3.typeahead()
.data(function(_, callback) {
taginfo.values({key: key.property('value'), query: value.property('value')}, function(err, data) {
callback(data.data.map(function (d) {
return {value: d.value, title: d.description};
}));
});
}));
}
inspectortoggle.append('span')
.text('Details')
.attr('class','label');
});
function removeTag(d) {
var tags = inspector.tags();
delete tags[d.key];
drawTags(tags);
}
function apply(entity) {
event.changeTags(entity, inspector.tags());
event.close(entity);
}
inspector.tags = function () {

2
test/spec/modes/add_point.js
View File

@@ -8,6 +8,8 @@ describe("iD.modes.AddPoint", function () {
controller = iD.Controller(map, history);
container.call(map);
container.append('div')
.attr('class', 'inspector-wrap');
mode = iD.modes.AddPoint();
controller.enter(mode);