Merge branch 'maxlength-indicator' into develop

modules/ui/fields/combo.js

@@ -12,6 +12,7 @@ import { svgIcon } from '../../svg/icon';
 
 import { utilKeybinding } from '../../util/keybinding';
 import { utilArrayUniq, utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent, utilUnicodeCharsCount } from '../../util';
+import { uiLengthIndicator } from '../length_indicator';
 
 export {
     uiFieldCombo as uiFieldManyCombo,
@@ -52,6 +53,7 @@ export function uiFieldCombo(field, context) {
     var _container = d3_select(null);
     var _inputWrap = d3_select(null);
     var _input = d3_select(null);
+    var _lengthIndicator = uiLengthIndicator(context.maxCharsForTagValue());
     var _comboData = [];
     var _multiData = [];
     var _entityIDs = [];
@@ -398,6 +400,8 @@ export function uiFieldCombo(field, context) {
 
             arr = utilArrayUniq(arr);
             t[field.key] = arr.length ? arr.join(';') : undefined;
+
+            _lengthIndicator.update(t[field.key]);
         }
         dispatch.call('change', this, t);
     }
@@ -457,6 +461,12 @@ export function uiFieldCombo(field, context) {
             .call(initCombo, selection)
             .merge(_input);
 
+        if (_isSemi) {
+            _inputWrap.call(_lengthIndicator);
+        } else if (!_isMulti) {
+            _container.call(_lengthIndicator);
+        }
+
         if (_isNetwork) {
             var extent = combinedEntityExtent();
             var countryCode = extent && countryCoder.iso1A2Code(extent.center());
@@ -467,7 +477,13 @@ export function uiFieldCombo(field, context) {
             .on('change', change)
             .on('blur', change)
             .on('input', function() {
-                updateIcon(utilGetSetValue(_input));
+                let val = utilGetSetValue(_input);
+                updateIcon(val);
+                if (_isSemi && _tags[field.key]) {
+                    // when adding a new value to existing ones
+                    val += ';' + _tags[field.key];
+                }
+                _lengthIndicator.update(val);
             });
 
         _input
@@ -698,6 +714,10 @@ export function uiFieldCombo(field, context) {
             if (!Array.isArray(tags[field.key])) {
                 updateIcon(tags[field.key]);
             }
+
+            if (!isMixed) {
+                _lengthIndicator.update(tags[field.key]);
+            }
         }
     };
 

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,11 +7,14 @@ import {
     utilNoAuto,
     utilRebind
 } from '../../util';
+import { uiLengthIndicator } from '..';
 
 
 export function uiFieldTextarea(field, context) {
     var dispatch = d3_dispatch('change');
     var input = d3_select(null);
+    var _lengthIndicator = uiLengthIndicator(context.maxCharsForTagValue())
+        .silent(field.usage === 'changeset' && field.key === 'comment');
     var _tags;
 
 
@@ -22,6 +25,7 @@ export function uiFieldTextarea(field, context) {
         wrap = wrap.enter()
             .append('div')
             .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
+            .style('position', 'relative')
             .merge(wrap);
 
         input = wrap.selectAll('textarea')
@@ -35,22 +39,23 @@ export function uiFieldTextarea(field, context) {
             .on('blur', change())
             .on('change', change())
             .merge(input);
-    }
 
+        wrap.call(_lengthIndicator);
 
-    function change(onInput) {
-        return function() {
+        function change(onInput) {
+            return function() {
 
-            var val = utilGetSetValue(input);
-            if (!onInput) val = context.cleanTagValue(val);
+                var val = utilGetSetValue(input);
+                if (!onInput) val = context.cleanTagValue(val);
 
-            // don't override multiple values with blank string
-            if (!val && Array.isArray(_tags[field.key])) return;
+                // don't override multiple values with blank string
+                if (!val && Array.isArray(_tags[field.key])) return;
 
-            var t = {};
-            t[field.key] = val || undefined;
-            dispatch.call('change', this, t, onInput);
-        };
+                var t = {};
+                t[field.key] = val || undefined;
+                dispatch.call('change', this, t, onInput);
+            };
+        }
     }
 
 
@@ -63,6 +68,10 @@ export function uiFieldTextarea(field, context) {
             .attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : undefined)
             .attr('placeholder', isMixed ? t('inspector.multiple_values') : (field.placeholder() || t('inspector.unknown')))
             .classed('mixed', isMixed);
+
+        if (!isMixed) {
+            _lengthIndicator.update(tags[field.key]);
+        }
     };