First pass at "Add to Relation" (#1539)

This commit is contained in:
John Firebaugh
2013-06-04 15:32:06 -07:00
parent 3312c4aa4c
commit 467d01d339
7 changed files with 116 additions and 10 deletions

View File

@@ -1043,6 +1043,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
.inspector-hover .toggle-list button::before,
.inspector-hover .toggle-list button:not(.active),
.inspector-hover .inspector-inner .add-tag,
.inspector-hover .inspector-inner .add-relation,
.inspector-hover .toggle-list button.remove .icon {
height: 0;
width: 0;
@@ -1730,6 +1731,23 @@ img.wiki-image {
padding-left: 10px;
}
.member-row-new .member-entity-input {
border-radius: 4px 4px 0 0;
border: 1px solid #cfcfcf;
}
.add-relation {
width: 40%;
height: 30px;
background: rgba(0,0,0,.5);
border-radius: 4px;
margin-top: 10px;
}
.add-relation:hover {
background: rgba(0,0,0,.8);
}
/* Map Controls */
.map-controls {

View File

@@ -68,6 +68,8 @@ en:
relation: Deleted a relation.
multiple: "Deleted {n} objects."
incomplete_relation: This feature can't be deleted because it hasn't been fully downloaded.
add_member:
annotation: Added a member to a relation.
delete_member:
annotation: Removed a member from a relation.
connect:
@@ -168,7 +170,6 @@ en:
no_documentation_combination: There is no documentation available for this tag combination
no_documentation_key: There is no documentation available for this key
show_more: Show More
new_tag: New tag
view_on_osm: View on openstreetmap.org
all_tags: All tags
all_members: All members

View File

@@ -90,6 +90,9 @@
},
"incomplete_relation": "This feature can't be deleted because it hasn't been fully downloaded."
},
"add_member": {
"annotation": "Added a member to a relation."
},
"delete_member": {
"annotation": "Removed a member from a relation."
},
@@ -210,7 +213,6 @@
"no_documentation_combination": "There is no documentation available for this tag combination",
"no_documentation_key": "There is no documentation available for this key",
"show_more": "Show More",
"new_tag": "New tag",
"view_on_osm": "View on openstreetmap.org",
"all_tags": "All tags",
"all_members": "All members",

View File

@@ -121,6 +121,7 @@
<script src='js/id/actions.js'></script>
<script src="js/id/actions/add_midpoint.js"></script>
<script src="js/id/actions/add_member.js"></script>
<script src='js/id/actions/add_entity.js'></script>
<script src='js/id/actions/add_vertex.js'></script>
<script src='js/id/actions/change_member.js'></script>

View File

@@ -0,0 +1,5 @@
iD.actions.AddMember = function(relationId, member, memberIndex) {
return function(graph) {
return graph.replace(graph.entity(relationId).addMember(member, memberIndex));
}
};

View File

@@ -1,5 +1,5 @@
iD.ui.RawMembershipEditor = function(context) {
var id;
var id, showBlank;
function selectRelation(d) {
context.enter(iD.modes.Select(context, [d.relation.id]));
@@ -12,12 +12,43 @@ iD.ui.RawMembershipEditor = function(context) {
t('operations.change_role.annotation'));
}
function addMembership(d, role) {
showBlank = false;
context.perform(
iD.actions.AddMember(d.relation.id, {id: id, type: context.entity(id).type, role: role}),
t('operations.add_member.annotation'))
}
function deleteMembership(d) {
context.perform(
iD.actions.DeleteMember(d.relation.id, d.index),
t('operations.delete_member.annotation'));
}
function relations(q) {
var result = [],
graph = context.graph();
context.intersects(context.extent()).forEach(function(entity) {
if (entity.type !== 'relation')
return;
var presetName = context.presets().match(entity, graph).name(),
entityName = iD.util.displayName(entity) || '';
if (q && entityName.toLowerCase().indexOf(q) === -1 &&
presetName.toLowerCase().indexOf(q) === -1)
return;
result.push({
relation: entity,
value: presetName + ' ' + entityName
});
});
return result;
}
function rawMembershipEditor(selection) {
var entity = context.entity(id),
memberships = [];
@@ -49,11 +80,11 @@ iD.ui.RawMembershipEditor = function(context) {
$list.enter().append('ul')
.attr('class', 'member-list');
var $items = $list.selectAll('li')
var $items = $list.selectAll('li.member-row-normal')
.data(memberships, function(d) { return iD.Entity.key(d.relation) + ',' + d.index; });
var $enter = $items.enter().append('li')
.attr('class', 'member-row form-field');
.attr('class', 'member-row member-row-normal form-field');
var $label = $enter.append('label')
.attr('class', 'form-label')
@@ -62,7 +93,7 @@ iD.ui.RawMembershipEditor = function(context) {
.on('click', selectRelation);
$label.append('span')
.attr('class','member-entity-type')
.attr('class', 'member-entity-type')
.text(function(d) { return context.presets().match(d.relation, context.graph()).name(); });
$label.append('span')
@@ -86,6 +117,58 @@ iD.ui.RawMembershipEditor = function(context) {
$items.exit()
.remove();
if (showBlank) {
var $new = $list.selectAll('.member-row-new')
.data([0]);
$enter = $new.enter().append('li')
.attr('class', 'member-row member-row-new form-field');
$enter.append('input')
.attr('type', 'text')
.attr('class', 'member-entity-input')
.call(d3.combobox()
.fetcher(function(value, _, callback) {
callback(relations(value));
})
.on('accept', function(d) {
addMembership(d, $new.select('.member-role').property('value'));
}));
$enter.append('input')
.attr('class', 'member-role')
.property('type', 'text')
.attr('maxlength', 255)
.attr('placeholder', t('inspector.role'))
.on('change', changeRole);
$enter.append('button')
.attr('tabindex', -1)
.attr('class', 'remove button-input-action member-delete minor')
.on('click', deleteMembership)
.append('span')
.attr('class', 'icon delete');
} else {
$list.selectAll('.member-row-new')
.remove();
}
var $add = $wrap.selectAll('.add-relation')
.data([0]);
$add.enter().append('button')
.attr('class', 'add-relation')
.append('span')
.attr('class', 'icon plus light');
$wrap.selectAll('.add-relation')
.on('click', function() {
showBlank = true;
content($wrap);
$list.selectAll('.member-entity-input').node().focus();
});
}
}

View File

@@ -47,10 +47,6 @@ iD.ui.RawTagEditor = function(context) {
$enter.append('span')
.attr('class', 'icon plus light');
$enter.append('span')
.attr('class', 'label')
.text(t('inspector.new_tag'));
$newTag.on('click', addTag);
var $items = $list.selectAll('li')