[ADD] web_widget_text_count

web_widget_text_count/static/src/js/fields_text_count.js

@@ -0,0 +1,50 @@
+odoo.define('text_count', function(require) {
+    "use strict";
+
+    var registry = require('web.field_registry');
+    var basicFields = require('web.basic_fields');
+    var FieldText = basicFields.FieldText;
+
+    var FieldTextCount = FieldText.extend({
+        events: _.extend({}, FieldText.prototype.events, {
+            'input': 'count_char',
+        }),
+        supportedFieldTypes: ['text'],
+
+        start: function () {
+            var self = this;
+            return this._super().then(function(){
+                var size = 0
+                if (self.mode === 'edit') {
+                    if (self.attrs.size) {
+                        self.$el.attr('maxlength', parseInt(self.attrs.size));
+                        size = self.attrs.size - self.$el.val().length;
+                    }
+                    else{
+                        size = self.$el.val().length;
+                    }
+                    self.$el = self.$el.add($('<input class="text-counter-widget" readonly="readonly" value="'+size+'"/>'));
+                }
+            });
+        },
+
+        count_char: function (e) {
+            var $textarea = this.$el,
+                maxlength = parseInt($textarea.attr('maxlength'), 10),
+                $counter = $textarea.siblings('.text-counter-widget');
+            if (maxlength){
+                var left = maxlength - $textarea.val().length;
+                if (left < 0) {
+                    left = 0;
+                }
+            }
+            else{
+                left = $textarea.val().length;
+            }
+            $counter.val(left);
+        },
+
+    });
+
+    registry.add('text_count', FieldTextCount);
+});

web_widget_text_count/static/src/scss/field_text_count.scss

@@ -0,0 +1,12 @@
+.text-counter-widget{
+        background-color: transparent;
+        float: right;
+        white-space: pre-wrap;
+        border: 1px solid #ccc;
+        border-radius: 3px;
+        padding: 2px 4px;
+        color: #1f1f1f;
+    div.text-counter-widget {
+        white-space: pre-wrap;
+    }
+}