diff --git a/css/app.css b/css/app.css index 5dd1d3ad9..bc637da8c 100644 --- a/css/app.css +++ b/css/app.css @@ -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 diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js index f9d133f6d..50041ef63 100644 --- a/js/id/ui/inspector.js +++ b/js/id/ui/inspector.js @@ -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("") + .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("Apply") + .on('click', apply); - function draw(tags) { + selection.append('button') + .attr('class', 'delete wide action') + .html("Delete") + .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("Apply") - .on('click', apply); - selection.append('button') - .attr('class', 'delete wide action') - .html("Delete") - .on('click', function(entity) { event.remove(entity); }); - } - - selection.html("").append('button') - .attr('class', 'narrow close') - .html("") - .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 () { diff --git a/test/spec/modes/add_point.js b/test/spec/modes/add_point.js index c78370d42..26cfcd013 100644 --- a/test/spec/modes/add_point.js +++ b/test/spec/modes/add_point.js @@ -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);