[WIP] add string length indicator and max-length message

modules/ui/fields/textarea.js

@@ -7,11 +7,13 @@ import {
     utilNoAuto,
     utilRebind
 } from '../../util';
+import { uiLengthIndicator } from '../length_indicator';
 
 
 export function uiFieldTextarea(field, context) {
     var dispatch = d3_dispatch('change');
     var input = d3_select(null);
+    var _lengthIndicator = uiLengthIndicator(context.maxCharsForTagValue());
     var _tags;
 
 
@@ -22,6 +24,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 +38,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 +67,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]);
+        }
     };