name field is now localizable

This commit is contained in:
Ansis Brammanis
2013-04-16 16:32:39 -04:00
parent 913e8982cc
commit dd35ed91d9
7 changed files with 201 additions and 5 deletions
+45 -1
View File
@@ -962,7 +962,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
height: 65px;
}
.form-field-name input {
.form-field-name input.localized-main {
height: 35px;
font-size: 18px;
font-weight: bold;
@@ -1194,6 +1194,50 @@ input[type=number] {
content: none;
}
.form-field .localized-main {
width: 90%;
border-radius: 0 0 0 4px;
}
.form-field .localized-add {
width: 10%;
height: 35px;
border-radius: 0 0 4px 0;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
vertical-align: top;
}
.form-field .localized-wrap .entry .localized-lang {
border-top: none;
border-right: none;
border-radius: 0;
width: 30%;
}
.form-field .localized-wrap .entry .localized-value {
border-top: none;
border-radius: 0;
width: 60%;
}
.form-field .localized-wrap .entry .localized-remove {
height: 30px;
border-radius: 0;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
vertical-align: top;
width: 10%;
}
.form-field .localized-wrap .entry:last-child .localized-lang {
border-radius: 0 0 0 4px;
}
.form-field .localized-wrap .entry:last-child .localized-remove {
border-radius: 0 0 4px 0;
}
.form-field .wiki-lang {
width: 30%;
border-right: none;
+1 -1
View File
@@ -286,7 +286,7 @@
},
"name": {
"key": "name",
"type": "text",
"type": "localized",
"label": "Name"
},
"natural": {
+2 -2
View File
@@ -1,5 +1,5 @@
{
"key": "name",
"type": "text",
"type": "localized",
"label": "Name"
}
}
+1
View File
@@ -31,6 +31,7 @@
"url",
"radio",
"textarea",
"localized",
"wikipedia"
],
"required": true
+1
View File
@@ -102,6 +102,7 @@
<script src='js/id/ui/preset/combo.js'></script>
<script src='js/id/ui/preset/defaultcheck.js'></script>
<script src='js/id/ui/preset/input.js'></script>
<script src='js/id/ui/preset/localized.js'></script>
<script src='js/id/ui/preset/maxspeed.js'></script>
<script src='js/id/ui/preset/radio.js'></script>
<script src='js/id/ui/preset/textarea.js'></script>
+4 -1
View File
@@ -115,7 +115,10 @@ iD.ui.preset = function(context, entity, preset) {
.duration(200)
.style('padding-top', '20px')
.style('max-height', '240px')
.style('opacity', '1');
.style('opacity', '1')
.each('end', function(d) {
d3.select(this).style('max-height', '');
});
var label = enter.append('label')
.attr('class', 'form-label')
+147
View File
@@ -0,0 +1,147 @@
iD.ui.preset.localized = function(field, context) {
var event = d3.dispatch('change', 'close'),
input, localizedInputs;
function i(selection) {
input = selection.append('input')
.attr('type', 'text')
.attr('id', 'preset-input-' + field.id)
.attr('class', 'localized-main')
.attr('placeholder', field.placeholder || '')
.on('blur', change)
.on('change', change)
.call(iD.behavior.accept().on('accept', event.close));
selection.append('button')
.attr('class', 'localized-add')
.on('click', addBlank)
.append('span')
.attr('class', 'icon');
localizedInputs = selection.append('div')
.attr('class', 'localized-wrap');
}
function addBlank() {
var data = localizedInputs.selectAll('div.entry').data();
data.push({ lang: '', value: '' });
localizedInputs.call(render, data);
}
function change() {
var t = {};
t[field.key] = d3.select(this).property('value'),
event.change(t);
}
function key(lang) { return field.key + ':' + lang; }
function changeLang(d) {
var value = d3.select(this).property('value'),
t = {},
language = _.find(iD.data.wikipedia, function(d) {
return d[0].toLowerCase() === value.toLowerCase() ||
d[1].toLowerCase() === value.toLowerCase();
});
if (language) value = language[2];
t[key(d.lang)] = '';
if (d.value) t[key(value)] = d.value;
event.change(t);
d.lang = value;
}
function changeValue(d) {
var t = {};
t[key(d.lang)] = d3.select(this).property('value') || '';
event.change(t);
}
function fetcher(value, __, cb) {
var v = value.toLowerCase();
cb(iD.data.wikipedia.filter(function(d) {
return d[0].toLowerCase().indexOf(v) >= 0 ||
d[1].toLowerCase().indexOf(v) >= 0 ||
d[2].toLowerCase().indexOf(v) >= 0;
}).map(function(d) {
return { value: d[1] };
}));
}
function render(selection, data) {
var wraps = selection.selectAll('div.entry').
data(data, function(d) { return d.lang; });
wraps.enter().append('div')
.attr('class', 'entry')
.each(function(d) {
var wrap = d3.select(this);
var langcombo = d3.combobox().fetcher(fetcher);
wrap.append('input')
.attr('class', 'localized-lang')
.attr('type', 'text')
.on('blur', changeLang)
.on('change', changeLang)
.call(langcombo);
wrap.append('input')
.on('blur', changeValue)
.on('change', changeValue)
.attr('type', 'text')
.attr('class', 'localized-value');
wrap.append('button')
.attr('class', 'localized-remove')
.on('click', function(d) {
var t = {};
t[key(d.lang)] = '';
event.change(t);
d3.select(this.parentNode).remove();
})
.append('span').attr('class', 'icon remove');
});
wraps.exit().remove();
selection.selectAll('.entry').select('.localized-lang').property('value', function(d) {
var lang = _.find(iD.data.wikipedia, function(lang) {
return lang[2] === d.lang;
});
return lang ? lang[1] : d.lang;
});
selection.selectAll('.entry').select('.localized-value').property('value', function(d) {
return d.value;
});
}
i.tags = function(tags) {
input.property('value', tags[field.key] || '');
var postfixed = [];
for (var i in tags) {
var m = i.match(new RegExp(field.key + ':([a-z]+)'));
if (m && m[1]) {
postfixed.push({ lang: m[1], value: tags[i]});
}
}
localizedInputs.call(render, postfixed);
};
i.focus = function() {
title.node().focus();
};
return d3.rebind(i, event, 'on');
};