diff --git a/css/80_app.css b/css/80_app.css index 83a6b051c..998ed6bba 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2336,6 +2336,7 @@ div.combobox { right: 0; } +.form-field-input-wrap > input:focus + span.length-indicator-wrap, .form-field-input-wrap > textarea:focus + span.length-indicator-wrap, .form-field-input-wrap > textarea:focus + div.combobox-caret + span.length-indicator-wrap { visibility: visible; diff --git a/modules/ui/fields/input.js b/modules/ui/fields/input.js index db55fa600..92de39beb 100644 --- a/modules/ui/fields/input.js +++ b/modules/ui/fields/input.js @@ -9,6 +9,7 @@ import { t, localizer } from '../../core/localizer'; import { utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent } from '../../util'; import { svgIcon } from '../../svg/icon'; import { cardinal } from '../../osm/node'; +import { uiLengthIndicator } from '..'; export { uiFieldText as uiFieldColour, @@ -25,6 +26,7 @@ export function uiFieldText(field, context) { var input = d3_select(null); var outlinkButton = d3_select(null); var wrap = d3_select(null); + var _lengthIndicator = uiLengthIndicator(context.maxCharsForTagValue()); var _entityIDs = []; var _tags; var _phoneFormats = {}; @@ -93,6 +95,7 @@ export function uiFieldText(field, context) { .on('blur', change()) .on('change', change()); + wrap.call(_lengthIndicator); if (field.type === 'tel') { updatePhonePlaceholder(); @@ -365,6 +368,10 @@ export function uiFieldText(field, context) { var disabled = !validIdentifierValueForLink(); outlinkButton.classed('disabled', disabled); } + + if (!isMixed) { + _lengthIndicator.update(tags[field.key]); + } }; diff --git a/modules/ui/fields/localized.js b/modules/ui/fields/localized.js index d86fc79c6..1a040f152 100644 --- a/modules/ui/fields/localized.js +++ b/modules/ui/fields/localized.js @@ -10,6 +10,7 @@ import { svgIcon } from '../../svg'; import { uiTooltip } from '../tooltip'; import { uiCombobox } from '../combobox'; import { utilArrayUniq, utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent, utilUniqueDomId } from '../../util'; +import { uiLengthIndicator } from '../length_indicator'; var _languagesArray = []; @@ -19,6 +20,7 @@ export function uiFieldLocalized(field, context) { var wikipedia = services.wikipedia; var input = d3_select(null); var localizedInputs = d3_select(null); + var _lengthIndicator = uiLengthIndicator(context.maxCharsForTagValue()); var _countryCode; var _tags; @@ -181,6 +183,8 @@ export function uiFieldLocalized(field, context) { .on('blur', change()) .on('change', change()); + wrap.call(_lengthIndicator); + var translateButton = wrap.selectAll('.localized-add') .data([0]); @@ -497,6 +501,10 @@ export function uiFieldLocalized(field, context) { _selection .call(localized); + + if (!isMixed) { + _lengthIndicator.update(tags[field.key]); + } }; diff --git a/modules/ui/fields/textarea.js b/modules/ui/fields/textarea.js index 1824fac34..59fe8b6a2 100644 --- a/modules/ui/fields/textarea.js +++ b/modules/ui/fields/textarea.js @@ -7,7 +7,7 @@ import { utilNoAuto, utilRebind } from '../../util'; -import { uiLengthIndicator } from '../length_indicator'; +import { uiLengthIndicator } from '..'; export function uiFieldTextarea(field, context) {