add length indicator to regular text (and localized) fields

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;

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]);
+        }
     };
 
 

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]);
+        }
     };
 
 

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) {