Use input number and toLocaleString for numeric fields

To get a proper virtual keyboard on mobile, it is needed to use a input of
type 'number' when editing a numeric field. But as it is not possible to
ensure to display non signifiant digits, a text input is used with the
toLocaleString method.
Also the lang attribute is repeated on the number input because not all
browsers manage to use the global as default.

issue5233
review43621002

CHANGELOG

@@ -1,3 +1,4 @@
+* Use input number and toLocaleString for numeric fields
 * Show related record names for all windows
 * Allow to edit Many2One from tree view
 * Use translated values when exporting Reference and Selection fields

index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!-- This file is part of Tryton.  The COPYRIGHT file at the top level of
 this repository contains the full copyright notices and license terms. -->
-<html style="overflow: auto;">
+<html style="overflow: auto;" lang="en">
     <head>
         <meta charset="utf-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1"/>

src/model.js

@@ -1710,12 +1710,13 @@
             }
             var value = this.get(record);
             if (value !== null) {
+                var options = {};
                 var digits = this.digits(record, factor);
                 if (digits) {
-                    return (value * factor).toFixed(digits[1]);
-                } else {
-                    return '' + (value * factor);
+                    options.minimumFractionDigits = digits[1];
+                    options.maximumFractionDigits = digits[1];
                 }
+                return (value * factor).toLocaleString(Sao.i18n.getlang(), options);
             } else {
                 return '';
             }

src/sao.js

@@ -207,6 +207,7 @@ var Sao = {};
                  navigator.userLanguage ||
                  'en').replace('-', '_');
         }
+        jQuery('html').attr('lang', lang);
         Sao.i18n.setLocale(lang);
         moment.locale(lang.slice(0, 2));
         return jQuery.getJSON('locale/' + lang + '.json', function(data) {
@@ -230,6 +231,7 @@ var Sao = {};
         return Sao.i18n.getLocale();
     };
     Sao.i18n.setlang();
+    Sao.i18n.locale = {};
 
     Sao.get_preferences = function() {
         var session = Sao.Session.current_session;
@@ -256,6 +258,7 @@ var Sao = {};
                         }
                         prm.resolve(preferences);
                     });
+                    Sao.i18n.locale = preferences.locale;
                     return prm;
                 });
             });

src/view/form.js

@@ -1489,10 +1489,28 @@ function eval_pyson(value){
         init: function(field_name, model, attributes) {
             Sao.View.Form.Integer._super.init.call(this, field_name, model,
                 attributes);
-            this.input.attr('type', 'text');
             this.input.attr('width', 8);
+            this.input_text = this.input.clone().appendTo(this.group);
+            this.input_text.attr('type', 'text');
+            this.input.attr('type', 'number');
+            this.input.attr('step', 1);
+            this.input.attr('lang', Sao.i18n.getlang());
             this.group.css('width', '');
             this.factor = Number(attributes.factor || 1);
+
+            this.input.hide().on('focusout', function() {
+                this.input.hide();
+                this.input_text.show();
+            }.bind(this));
+            this.input_text.on('focusin', function() {
+                if (!this.input.prop('readonly')) {
+                    this.input_text.hide();
+                    this.input.show();
+                    window.setTimeout(function() {
+                        this.input.focus();
+                    }.bind(this));
+                }
+            }.bind(this));
         },
         set_value: function(record, field) {
             field.set_client(record, this.input.val(), undefined, this.factor);
@@ -1500,14 +1518,52 @@ function eval_pyson(value){
         get_client_value: function(record, field) {
             var value = '';
             if (field) {
-                value = field.get_client(record, this.factor);
+                value = field.get(record);
+                if (value !== null) {
+                    value *= this.factor;
+                }
             }
             return value;
+        },
+        display: function(record, field) {
+            Sao.View.Form.Integer._super.display.call(this, record, field);
+            var value = '';
+            if (field) {
+                value = field.get_client(record, this.factor);
+            }
+            this.input_text.val(value);
+            this.input_text.attr('maxlength', this.input.attr('maxlength'));
+            this.input_text.attr('size', this.input.attr('size'));
+        },
+        set_readonly: function(readonly) {
+            Sao.View.Form.Integer._super.set_readonly.call(this, readonly);
+            this.input_text.prop('readonly', readonly);
+        },
+        focus: function() {
+            if (!this.input.prop('readonly')) {
+                this.input_text.hide();
+                this.input.show().focus();
+            } else {
+                this.input_text.focus();
+            }
         }
     });
 
     Sao.View.Form.Float = Sao.class_(Sao.View.Form.Integer, {
-        class_: 'form-float'
+        class_: 'form-float',
+        display: function(record, field) {
+            var digits = 'any';
+            if (record) {
+                digits = field.digits(record, this.factor);
+                if (digits) {
+                    digits = digits[1];
+                } else {
+                    digits = 'any';
+                }
+            }
+            this.input.attr('step', Math.pow(10, -digits));
+            Sao.View.Form.Float._super.display.call(this, record, field);
+        }
     });
 
     Sao.View.Form.Selection = Sao.class_(Sao.View.Form.Widget, {

src/view/tree.js

@@ -1240,7 +1240,7 @@
                             }.bind(this), 0);
                         }.bind(this));
                 } else if (event_.which == Sao.common.ESC_KEYCODE) {
-                    this.get_static_el().show();
+                    this.get_static_el().show().find('[tabindex=0]').focus();
                     current_td = this.get_active_td();
                     current_td.on('click keypress',
                             {column: this.edited_column, td: current_td},