From df91eb295986a62266655bb3880864fa4faf8f21 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 26 Nov 2018 17:13:55 -0500 Subject: [PATCH] Cleanup style, make sure multilingual fields always render --- css/80_app.css | 5 +++ modules/ui/fields/input.js | 9 +++--- modules/ui/fields/localized.js | 57 ++++++++++++++++++++++------------ 3 files changed, 46 insertions(+), 25 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 5e03428d5..afe4aa1fe 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1743,6 +1743,11 @@ a.hide-toggle { /* Field - Localized Name ------------------------------------------------------- */ +.localized-input-wrap { + display: flex; + flex: 1 1 100%; +} + .form-field .localized-add { position: relative; border: 1px solid #ccc; diff --git a/modules/ui/fields/input.js b/modules/ui/fields/input.js index 9cf1eb7af..ba21fa70e 100644 --- a/modules/ui/fields/input.js +++ b/modules/ui/fields/input.js @@ -56,15 +56,12 @@ export function uiFieldText(field, context) { input .classed('disabled', !!isSuggestion) + .attr('readonly', isSuggestion || null) .on('input', change(true)) .on('blur', change()) .on('change', change()); - if (field.id === 'brand') { - selection.call(isSuggestion ? _brandTip : _brandTip.destroy); - } - if (field.type === 'tel' && nominatim && _entity) { var center = _entity.extent(context.graph()).center(); nominatim.countryCode(center, function (err, countryCode) { @@ -116,8 +113,10 @@ export function uiFieldText(field, context) { // A "suggestion" preset (brand name) // Put suggestion keys in `field.keys` so delete button can remove them all. field.keys = Object.keys(preset.removeTags) - .filter(function(k) { return k !== pKey; }); + .filter(function(k) { return k !== pKey && k !== 'name'; }); } + + selection.call(isSuggestion ? _brandTip : _brandTip.destroy); } } diff --git a/modules/ui/fields/localized.js b/modules/ui/fields/localized.js index 24be2140f..28b8d2fb9 100644 --- a/modules/ui/fields/localized.js +++ b/modules/ui/fields/localized.js @@ -28,6 +28,8 @@ export function uiFieldLocalized(field, context) { var wikipedia = services.wikipedia; var input = d3_select(null); var localizedInputs = d3_select(null); + var _selection = d3_select(null); + var _multilingual = []; var _isLocked = false; var _brandTip = tooltip().title(t('inspector.lock.brand')).placement('bottom'); var _buttonTip = tooltip().title(t('translate.translate')).placement('left'); @@ -35,7 +37,7 @@ export function uiFieldLocalized(field, context) { var _entity; - function checkLocked() { + function calcLocked() { var preset = _entity && context.presets().match(_entity, context.graph()); var isSuggestion = preset && preset.suggestion; var showsBrand = preset && preset.fields @@ -44,8 +46,21 @@ export function uiFieldLocalized(field, context) { } + function calcMultilingual(tags) { + _multilingual = []; + for (var k in tags) { + var m = k.match(/^(.*):([a-zA-Z_-]+)$/); + if (m && m[1] === field.key && m[2]) { + _multilingual.push({ lang: m[2], value: tags[k] }); + } + } + _multilingual.reverse(); + } + + function localized(selection) { - checkLocked(); + _selection = selection; + calcLocked(); var preset = _entity && context.presets().match(_entity, context.graph()); var wrap = selection.selectAll('.localized-input-wrap') @@ -127,7 +142,7 @@ export function uiFieldLocalized(field, context) { input .classed('disabled', !!_isLocked) - .attr('readonly', _isLocked) + .attr('readonly', _isLocked || null) .on('input', change(true)) .on('blur', change()) .on('change', change()); @@ -149,6 +164,10 @@ export function uiFieldLocalized(field, context) { .on('click', addNew); + if (_entity && !_multilingual.length) { + calcMultilingual(_entity.tags); + } + localizedInputs = selection.selectAll('.localized-multilingual') .data([0]); @@ -157,9 +176,12 @@ export function uiFieldLocalized(field, context) { .attr('class', 'localized-multilingual') .merge(localizedInputs); + localizedInputs + .call(renderMultilingual); + localizedInputs.selectAll('button, input') .classed('disabled', !!_isLocked) - .attr('readonly', _isLocked); + .attr('readonly', _isLocked || null); @@ -202,17 +224,16 @@ export function uiFieldLocalized(field, context) { d3_event.preventDefault(); if (_isLocked) return; - var data = localizedInputs.selectAll('div.entry').data(); var defaultLang = utilDetect().locale.toLowerCase().split('-')[0]; - var langExists = _find(data, function(datum) { return datum.lang === defaultLang;}); + var langExists = _find(_multilingual, function(datum) { return datum.lang === defaultLang;}); var isLangEn = defaultLang.indexOf('en') > -1; if (isLangEn || langExists) { defaultLang = ''; } - data.push({ lang: defaultLang, value: '' }); + _multilingual.push({ lang: defaultLang, value: '' }); localizedInputs - .call(renderMultilingual, data); + .call(renderMultilingual); } @@ -284,9 +305,9 @@ export function uiFieldLocalized(field, context) { } - function renderMultilingual(selection, data) { + function renderMultilingual(selection) { var wraps = selection.selectAll('div.entry') - .data(data, function(d) { return d.lang; }); + .data(_multilingual, function(d) { return d.lang; }); wraps.exit() .transition() @@ -310,6 +331,7 @@ export function uiFieldLocalized(field, context) { var label = wrap .append('label') + .attr('class', 'form-label'); label .append('span') @@ -320,7 +342,7 @@ export function uiFieldLocalized(field, context) { .append('div') .attr('class', 'form-label-button-wrap') .append('button') - .attr('class', 'minor remove-icon') + .attr('class', 'minor remove-icon-multilingual') .on('click', function(d){ if (_isLocked) return; d3_event.preventDefault(); @@ -395,16 +417,10 @@ export function uiFieldLocalized(field, context) { utilGetSetValue(input, tags[field.key] || ''); - var postfixed = []; - for (var k in tags) { - var m = k.match(/^(.*):([a-zA-Z_-]+)$/); - if (m && m[1] === field.key && m[2]) { - postfixed.push({ lang: m[2], value: tags[k] }); - } - } + calcMultilingual(tags); - localizedInputs - .call(renderMultilingual, postfixed.reverse()); + _selection + .call(localized); }; @@ -416,6 +432,7 @@ export function uiFieldLocalized(field, context) { localized.entity = function(val) { if (!arguments.length) return _entity; _entity = val; + _multilingual = []; return localized; };