Add ability to use different input types

From bernat#544
thejandroman · Jan 15, 2019 · 6d93ac9 · 6d93ac9
1 parent 1b779e6
commit 6d93ac9
Showing 1 changed file with 24 additions and 12 deletions.
diff --git a/lib/assets/javascripts/best_in_place.js b/lib/assets/javascripts/best_in_place.js
@@ -93,9 +93,9 @@ BestInPlaceEditor.prototype = {
 
     update: function () {
         'use strict';
-        
+
         this.element.trigger(jQuery.Event("best_in_place:before-update"));
-        
+
         var editor = this,
             value = this.getValue();
 
@@ -212,8 +212,13 @@ BestInPlaceEditor.prototype = {
         if (self.formType === "select" || self.formType === "checkbox") {
             self.values = self.collection;
             self.collectionValue = self.element.data("bipValue") || self.collectionValue;
-        }
-    },
+        } else if (self.formType === "input") {
+            if (self.html_attrs != null && self.html_attrs["type"] != null) {
+                self.input_type  = self.html_attrs["type"];
+            } else {
+                self.input_type = "text";
+            }
+        },
 
     bindForm: function () {
         'use strict';
@@ -389,7 +394,7 @@ BestInPlaceEditor.forms = {
                 .attr('action', 'javascript:void(0);')
                 .attr('style', 'display:inline');
             var input_elt = jQuery(document.createElement('input'))
-                .attr('type', 'text')
+                .attr('type', this.input_type)
                 .attr('name', this.attributeName)
                 .val(this.display_value);
 
@@ -404,15 +409,15 @@ BestInPlaceEditor.forms = {
             this.element.html(output);
             this.setHtmlAttributes();
 
-            this.element.find("input[type='text']")[0].select();
+            this.element.find("input[type='" + this.input_type + "']")[0].select();
             this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler);
             if (this.cancelButton) {
                 this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.input.cancelButtonHandler);
             }
             if (!this.okButton) {
-                this.element.find("input[type='text']").bind('blur', {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler);
+                this.element.find("input[type='" + this.input_type + "']").bind('blur', {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler);
             }
-            this.element.find("input[type='text']").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler);
+            this.element.find("input[type='" + this.input_type + "']").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler);
             this.blurTimer = null;
             this.userClicked = false;
         },
@@ -424,7 +429,17 @@ BestInPlaceEditor.forms = {
 
         // When buttons are present, use a timer on the blur event to give precedence to clicks
         inputBlurHandler: function (event) {
-            'use strict';
+          'use strict';
+
+          // Checking if input value is valid (native html5 validation)
+          // If browser doesn't supports html5 validation willValidate property will be 'undefined' and
+          // no check will be performed
+          var input = event.data.editor.element.find("input[type='" + event.data.editor.input_type + "']").get(0);
+          if (input.willValidate == true && !input.validity.valid) {
+            event.data.editor.abort();
+            return;
+          }
+
             if (event.data.editor.okButton) {
                 event.data.editor.blurTimer = setTimeout(function () {
                     if (!event.data.editor.userClicked) {
@@ -681,6 +696,3 @@ jQuery.fn.best_in_place = function () {
 
     return this;
 };
-
-
-