Add support for Bootstrap4

Gruntfile.js

@@ -48,6 +48,27 @@ function getFiles() {
                //inputs+'datetime/bootstrap-datetimepicker/css/datetimepicker.css'
                 ]
         }, 
+        bootstrap4: {
+            filePrefix: 'bootstrap', //to have bootstrap-editable.js instead of bootstrap4-editable
+            form: [forms+'editable-form-bootstrap4.js'],
+            container: [containers+'editable-popover4.js'],
+            inputs: [
+                inputs+'date/bootstrap-datepicker/js/bootstrap-datepicker.js',
+                inputs+'date/date.js', 
+                inputs+'date/datefield.js', 
+                inputs+'datetime/datetime.js', 
+                inputs+'datetime/datetimefield.js'
+                //don't build datetime lib, should be included manually 
+                //inputs+'datetime/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js',
+                //no typeahead in bs4
+                //inputs+'typeahead.js'
+                ], 
+            css: [
+                inputs+'date/bootstrap-datepicker/css/datepicker.css'
+               //don't build datetime lib, should be included manually
+               //inputs+'datetime/bootstrap-datetimepicker/css/datetimepicker.css'
+                ]
+        }, 
         jqueryui: {
             form: [forms+'editable-form-jqueryui.js'],
             container: [containers+'editable-tooltip.js'],
@@ -150,7 +171,7 @@ module.exports = function(grunt) {
 
 //test on several jquery versions
  var qunit_testover = [];
- ['bs3', 'bootstrap', 'jqueryui', 'plain'].forEach(function(f){
+ ['bs4', 'bs3', 'bootstrap', 'jqueryui', 'plain'].forEach(function(f){
      ['popup', 'inline'].forEach(function(c){
          ['1.7.2', '1.8.3', '1.9.1', '1.10.2', '2.0.3'].forEach(function(jqver) {
              qunit_testover.push('http://localhost:8000/test/index.html?f='+f+'&c='+c+'&jquery='+jqver+module); 
@@ -199,6 +220,14 @@ module.exports = function(grunt) {
                  ]
           }
       },
+      bootstrap4: {
+          options: {
+            urls: [
+                  'http://localhost:8000/test/index.html?f=bs4&c=popup'+module,
+                  'http://localhost:8000/test/index.html?f=bs4&c=inline'+module
+                 ]
+          }
+      },
       jqueryui: {
           options: {
             urls:[
@@ -268,6 +297,7 @@ module.exports = function(grunt) {
         dist: {
             files: [
             //image
+            {expand: true, flatten: true, dest: '<%= dist %>/bootstrap4-editable/img/', src: 'src/img/*'}, 
             {expand: true, flatten: true, dest: '<%= dist %>/bootstrap3-editable/img/', src: 'src/img/*'}, 
             {expand: true, flatten: true, dest: '<%= dist %>/bootstrap-editable/img/', src: 'src/img/*'},
             {expand: true, flatten: true, dest: '<%= dist %>/jqueryui-editable/img/', src: 'src/img/*'},
@@ -299,11 +329,13 @@ module.exports = function(grunt) {
   //test task
   grunt.registerTask('test', ['jshint', 'connect', 'qunit:bootstrap2']);
   grunt.registerTask('test3', ['jshint', 'connect', 'qunit:bootstrap3']);
+  grunt.registerTask('test-bs4', ['jshint', 'connect', 'qunit:bootstrap4']);
   grunt.registerTask('testall', [
     'jshint', 
     'connect', 
     'qunit:bootstrap2', 
     'qunit:bootstrap3', 
+    'qunit:bootstrap4',
     'qunit:jqueryui', 
     'qunit:plain'
   ]);  

src/containers/editable-popover4.js

@@ -0,0 +1,67 @@
+/**
+* Editable Popover for Bootstrap 4 based on Popper.js
+* ---------------------
+* requires bootstrap-popover.js
+*/
+(function ($) {
+    "use strict";
+
+    //extend methods
+    $.extend($.fn.editableContainer.Popup.prototype, {
+        containerName: 'popover',
+        containerDataName: 'bs.popover',
+        innerCss: '.popover-body',
+        defaults: $.fn.popover.Constructor.DEFAULTS,
+
+        initContainer: function(){
+            $.extend(this.containerOptions, {
+                trigger: 'manual',
+                selector: false,
+                content: ' ',
+                template: this.defaults.template
+            });
+
+            //as template property is used in inputs, hide it from popover
+            var t;
+            if(this.$element.data('template')) {
+                t = this.$element.data('template');
+                this.$element.removeData('template');
+            }
+
+            this.call(this.containerOptions);
+
+            if(t) {
+                //restore data('template')
+                this.$element.data('template', t);
+            }
+        },
+
+        /* show */
+        innerShow: function () {
+            this.call('show');
+        },
+
+        /* hide */
+        innerHide: function () {
+            this.call('hide');
+        },
+
+        /* destroy */
+        innerDestroy: function() {
+            this.call('dispose');
+        },
+
+        setContainerOption: function(key, value) {
+            this.container().options[key] = value;
+        },
+
+        setPosition: function () {
+            (function() {}).call(this.container());
+        },
+
+        tip: function() {
+            return this.container() ? $(this.container().tip) : null;
+        }
+    });
+
+}(window.jQuery));

src/editable-form/editable-form-bootstrap4.js

@@ -0,0 +1,63 @@
+/*
+Editableform based on Twitter Bootstrap 3
+*/
+(function ($) {
+    "use strict";
+
+    //store parent methods
+    var pInitInput = $.fn.editableform.Constructor.prototype.initInput;
+
+    $.extend($.fn.editableform.Constructor.prototype, {
+        initTemplate: function() {
+            this.$form = $($.fn.editableform.template); 
+            this.$form.find('.control-group').addClass('form-group');
+            this.$form.find('.editable-error-block').addClass('help-block');
+        },
+        initInput: function() {  
+            pInitInput.apply(this);
+
+            var emptyInputClass = this.input.options.inputclass === null || this.input.options.inputclass === false;
+            var defaultClass = 'form-control-sm';
+
+            //bs3 add `form-control` class to standard inputs
+            var stdtypes = 'text,select,textarea,password,email,url,tel,number,range,time,typeaheadjs'.split(','); 
+            if(~$.inArray(this.input.type, stdtypes)) {
+                this.input.$input.addClass('form-control');
+                if(emptyInputClass) {
+                    this.input.options.inputclass = defaultClass;
+                    this.input.$input.addClass(defaultClass);
+                }
+            }             
+
+            //apply size class also to buttons (to fit size of control)
+            var $btn = this.$form.find('.editable-buttons');
+            var classes = emptyInputClass ? [defaultClass] : this.input.options.inputclass.split(' ');
+            for(var i=0; i<classes.length; i++) {
+                // `btn-sm` is default now
+                /*
+                if(classes[i].toLowerCase() === 'input-sm') { 
+                    $btn.find('button').addClass('btn-sm');  
+                }
+                */
+                if(classes[i].toLowerCase() === 'input-lg') {
+                    $btn.find('button').removeClass('btn-sm').addClass('btn-lg'); 
+                }
+            }
+        }
+    });    
+
+    //buttons
+    $.fn.editableform.buttons = 
+      '<button type="submit" class="btn btn-primary btn-sm editable-submit">'+
+        '<i class="fa fa-check" aria-hidden="true"></i>'+
+      '</button>'+
+      '<button type="button" class="btn btn-default btn-sm editable-cancel">'+
+        '<i class="fa fa-times" aria-hidden="true"></i>'+
+      '</button>';         
+
+    //error classes
+    $.fn.editableform.errorGroupClass = 'has-error';
+    $.fn.editableform.errorBlockClass = null;  
+    //engine
+    $.fn.editableform.engine = 'bs4';  
+}(window.jQuery));