From 5a2091344b20c32277a316ebb4bb0786d6676c98 Mon Sep 17 00:00:00 2001 From: Talv Date: Sat, 13 Jan 2018 03:46:46 +0100 Subject: [PATCH] Add support for Bootstrap4 --- Gruntfile.js | 34 +++++++++- src/containers/editable-popover4.js | 67 +++++++++++++++++++ src/editable-form/editable-form-bootstrap4.js | 63 +++++++++++++++++ 3 files changed, 163 insertions(+), 1 deletion(-) create mode 100644 src/containers/editable-popover4.js create mode 100644 src/editable-form/editable-form-bootstrap4.js diff --git a/Gruntfile.js b/Gruntfile.js index 6ae968a6..49f626c5 100644 --- a/Gruntfile.js +++ b/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' ]); diff --git a/src/containers/editable-popover4.js b/src/containers/editable-popover4.js new file mode 100644 index 00000000..7f553bc7 --- /dev/null +++ b/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)); diff --git a/src/editable-form/editable-form-bootstrap4.js b/src/editable-form/editable-form-bootstrap4.js new file mode 100644 index 00000000..2bd6cac7 --- /dev/null +++ b/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'+ + ''+ + ''+ + ''; + + //error classes + $.fn.editableform.errorGroupClass = 'has-error'; + $.fn.editableform.errorBlockClass = null; + //engine + $.fn.editableform.engine = 'bs4'; +}(window.jQuery)); \ No newline at end of file