in modules/ui/sections/raw_membership_editor.js [288:557]
function renderDisclosureContent(selection) {
var memberships = getMemberships();
var list = selection.selectAll('.member-list')
.data([0]);
list = list.enter()
.append('ul')
.attr('class', 'member-list')
.merge(list);
var items = list.selectAll('li.member-row-normal')
.data(memberships, function(d) {
return d.hash;
});
items.exit()
.each(unbind)
.remove();
// Enter
var itemsEnter = items.enter()
.append('li')
.attr('class', 'member-row member-row-normal form-field');
// highlight the relation in the map while hovering on the list item
itemsEnter.on('mouseover', function(d3_event, d) {
utilHighlightEntities([d.relation.id], true, context);
})
.on('mouseout', function(d3_event, d) {
utilHighlightEntities([d.relation.id], false, context);
});
var labelEnter = itemsEnter
.append('label')
.attr('class', 'field-label')
.attr('for', function(d) {
return d.domId;
});
var labelLink = labelEnter
.append('span')
.attr('class', 'label-text')
.append('a')
.attr('href', '#')
.on('click', selectRelation);
labelLink
.append('span')
.attr('class', 'member-entity-type')
.html(function(d) {
var matched = presetManager.match(d.relation, context.graph());
return (matched && matched.name()) || t('inspector.relation');
});
labelLink
.append('span')
.attr('class', 'member-entity-name')
.html(function(d) {
const matched = presetManager.match(d.relation, context.graph());
// hide the network from the name if there is NSI match
return utilDisplayName(d.relation, matched.suggestion);
});
labelEnter
.append('button')
.attr('class', 'remove member-delete')
.call(svgIcon('#iD-operation-delete'))
.on('click', deleteMembership);
labelEnter
.append('button')
.attr('class', 'member-zoom')
.attr('title', t('icons.zoom_to'))
.call(svgIcon('#iD-icon-framed-dot', 'monochrome'))
.on('click', zoomToRelation);
var wrapEnter = itemsEnter
.append('div')
.attr('class', 'form-field-input-wrap form-field-input-member');
wrapEnter
.append('input')
.attr('class', 'member-role')
.attr('id', function(d) {
return d.domId;
})
.property('type', 'text')
.property('value', function(d) {
return typeof d.role === 'string' ? d.role : '';
})
.attr('title', function(d) {
return Array.isArray(d.role) ? d.role.filter(Boolean).join('\n') : d.role;
})
.attr('placeholder', function(d) {
return Array.isArray(d.role) ? t('inspector.multiple_roles') : t('inspector.role');
})
.classed('mixed', function(d) {
return Array.isArray(d.role);
})
.call(utilNoAuto)
.on('blur', changeRole)
.on('change', changeRole);
if (taginfo) {
wrapEnter.each(bindTypeahead);
}
var newMembership = list.selectAll('.member-row-new')
.data(_showBlank ? [0] : []);
// Exit
newMembership.exit()
.remove();
// Enter
var newMembershipEnter = newMembership.enter()
.append('li')
.attr('class', 'member-row member-row-new form-field');
var newLabelEnter = newMembershipEnter
.append('label')
.attr('class', 'field-label');
newLabelEnter
.append('input')
.attr('placeholder', t('inspector.choose_relation'))
.attr('type', 'text')
.attr('class', 'member-entity-input')
.call(utilNoAuto);
newLabelEnter
.append('button')
.attr('class', 'remove member-delete')
.call(svgIcon('#iD-operation-delete'))
.on('click', function() {
list.selectAll('.member-row-new')
.remove();
});
var newWrapEnter = newMembershipEnter
.append('div')
.attr('class', 'form-field-input-wrap form-field-input-member');
newWrapEnter
.append('input')
.attr('class', 'member-role')
.property('type', 'text')
.attr('placeholder', t('inspector.role'))
.call(utilNoAuto);
// Update
newMembership = newMembership
.merge(newMembershipEnter);
newMembership.selectAll('.member-entity-input')
.on('blur', cancelEntity) // if it wasn't accepted normally, cancel it
.call(nearbyCombo
.on('accept', acceptEntity)
.on('cancel', cancelEntity)
);
// Container for the Add button
var addRow = selection.selectAll('.add-row')
.data([0]);
// enter
var addRowEnter = addRow.enter()
.append('div')
.attr('class', 'add-row');
var addRelationButton = addRowEnter
.append('button')
.attr('class', 'add-relation');
addRelationButton
.call(svgIcon('#iD-icon-plus', 'light'));
addRelationButton
.call(uiTooltip().title(t.html('inspector.add_to_relation')).placement(localizer.textDirection() === 'ltr' ? 'right' : 'left'));
addRowEnter
.append('div')
.attr('class', 'space-value'); // preserve space
addRowEnter
.append('div')
.attr('class', 'space-buttons'); // preserve space
// update
addRow = addRow
.merge(addRowEnter);
addRow.select('.add-relation')
.on('click', function() {
_showBlank = true;
section.reRender();
list.selectAll('.member-entity-input').node().focus();
});
function acceptEntity(d) {
if (!d) {
cancelEntity();
return;
}
// remove hover-higlighting
if (d.relation) utilHighlightEntities([d.relation.id], false, context);
var role = context.cleanRelationRole(list.selectAll('.member-row-new .member-role').property('value'));
addMembership(d, role);
}
function cancelEntity() {
var input = newMembership.selectAll('.member-entity-input');
input.property('value', '');
// remove hover-higlighting
context.surface().selectAll('.highlighted')
.classed('highlighted', false);
}
function bindTypeahead(d) {
var row = d3_select(this);
var role = row.selectAll('input.member-role');
var origValue = role.property('value');
function sort(value, data) {
var sameletter = [];
var other = [];
for (var i = 0; i < data.length; i++) {
if (data[i].value.substring(0, value.length) === value) {
sameletter.push(data[i]);
} else {
other.push(data[i]);
}
}
return sameletter.concat(other);
}
role.call(uiCombobox(context, 'member-role')
.fetcher(function(role, callback) {
var rtype = d.relation.tags.type;
taginfo.roles({
debounce: true,
rtype: rtype || '',
geometry: context.graph().geometry(_entityIDs[0]),
query: role
}, function(err, data) {
if (!err) callback(sort(role, data));
});
})
.on('cancel', function() {
role.property('value', origValue);
})
);
}
function unbind() {
var row = d3_select(this);
row.selectAll('input.member-role')
.call(uiCombobox.off, context);
}
}