Reversible tag editing, save real changes

This commit is contained in:
Tom MacWright
2013-01-31 17:05:27 -05:00
parent 3755d80778
commit e8dc356645
2 changed files with 76 additions and 28 deletions
+20 -6
View File
@@ -20,7 +20,7 @@ iD.ui.inspector = function() {
.attr('class', 'icon big icon-pre-text big-' + entity.geometry(graph));
var name = h2.append('input')
.attr('placeholder', 'name')
.property('value', function(d) {
.property('value', function() {
return entity.tags.name || '';
})
.on('keyup', function() {
@@ -29,7 +29,8 @@ iD.ui.inspector = function() {
inspector.tags(tags);
event.change();
});
event.on('change', function() {
event.on('change.name', function() {
var tags = inspector.tags();
name.property('value', tags.name);
});
@@ -40,14 +41,26 @@ iD.ui.inspector = function() {
var inspectorwrap = inspectorbody.append('div')
.attr('class', 'inspector-inner tag-wrap fillL2');
var presetUI = iD.ui.preset()
.on('change', function(tags) {
inspector.tags(_.extend(inspector.tags(), tags));
event.change();
});
event.on('change.preset', function() {
var tags = inspector.tags();
presetUI.change(tags);
});
var inspectorpresetsearch = inspectorwrap.append('div')
.attr('class', 'inspector-preset cf')
.call(iD.ui.presetsearch()
.entity(entity)
.presetData(presetData)
.on('choose', function(preset) {
inspectorpreset.call(iD.ui.preset()
.preset(preset));
inspectorpreset.call(presetUI
.preset(preset)
.change(inspector.tags()));
}));
var inspectorpresetfavs = inspectorwrap.append('div')
@@ -55,8 +68,9 @@ iD.ui.inspector = function() {
.call(iD.ui.presetfavs()
.presetData(presetData)
.on('choose', function(preset) {
inspectorpreset.call(iD.ui.preset()
.preset(preset));
inspectorpreset.call(presetUI
.preset(preset)
.change(inspector.tags()));
inspectorpresetsearch
.select('input')
.property('value', preset.name);
+56 -22
View File
@@ -1,37 +1,67 @@
iD.ui.preset = function() {
var preset;
var event = d3.dispatch('change'),
sections,
exttags,
preset;
function getTags() {
var tags = {};
sections.selectAll('input,select')
.each(function(d) {
tags[d.key] = this.value;
});
return tags;
}
function setTags(tags) {
if (!sections) return;
sections.selectAll('input,select')
.each(function(d) {
if (tags[d.key]) {
this.value = tags[d.key];
}
});
}
function clean(o) {
var out = {};
for (var k in o) {
if (o[k] !== '') out[k] = o[k];
}
return out;
}
function key() {
var tags = clean(getTags());
event.change(tags);
}
// generate form fields for a given field.
function input(d) {
var i;
switch (d.type) {
case 'text':
this.append('input')
i = this.append('input')
.attr('type', 'text')
.attr('placeholder', d['default'] || '');
break;
case 'tel':
this.append('input')
i = this.append('input')
.attr('type', 'tel')
.attr('placeholder', '1-555-555-5555');
break;
case 'email':
this.append('input')
i = this.append('input')
.attr('type', 'email')
.attr('placeholder', 'email@domain.com');
break;
case 'url':
this.append('input')
i = this.append('input')
.attr('type', 'url')
.attr('placeholder', 'http://example.com/');
break;
case 'check':
this.append('input')
i = this.append('input')
.attr('type', 'checkbox')
.each(function() {
if (d['default']) {
@@ -39,42 +69,40 @@ iD.ui.preset = function() {
}
});
break;
case 'select':
var select = this.append('select');
i = this.append('select');
var options = d.values.slice();
options.unshift('');
select.selectAll('option')
i.selectAll('option')
.data(options)
.enter()
.append('option')
.text(String);
break;
}
if (i) {
i.on('change', key);
}
}
function presets(selection) {
selection.html('');
var sections = selection.selectAll('div.preset-section')
sections = selection.selectAll('div.preset-section')
.data(preset.main)
.enter()
.append('div')
.attr('class', 'preset-section cf');
sections.each(function(d) {
var s = d3.select(this);
var wrap = s.append('div')
.attr('class', 'preset-section-input cf');
wrap.append('div')
.attr('class', 'col4 preset-label')
.text(d.text);
input.call(wrap.append('div')
.attr('class', 'col8 preset-input'), d);
});
if (exttags) setTags(exttags);
}
presets.preset = function(_) {
@@ -83,5 +111,11 @@ iD.ui.preset = function() {
return presets;
};
return presets;
presets.change = function(_) {
exttags = _;
setTags(_);
return presets;
};
return d3.rebind(presets, event, 'on');
};