Skip to content

Commit

Permalink
Add support for Bootstrap4
Browse files Browse the repository at this point in the history
  • Loading branch information
Talv committed Jan 13, 2018
1 parent 69221eb commit 5a20913
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 1 deletion.
34 changes: 33 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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:[
Expand Down Expand Up @@ -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/*'},
Expand Down Expand Up @@ -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'
]);
Expand Down
67 changes: 67 additions & 0 deletions src/containers/editable-popover4.js
Original file line number Diff line number Diff line change
@@ -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));
63 changes: 63 additions & 0 deletions src/editable-form/editable-form-bootstrap4.js
Original file line number Diff line number Diff line change
@@ -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));

0 comments on commit 5a20913

Please sign in to comment.