tracer/x-editable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added bs5 images

Browse Source
This commit is contained in:
Micha 2025-03-04 14:33:33 +01:00
parent 80932401bd
commit 55d950d703
3 changed files with 119 additions and 105 deletions

103
dist/bootstrap5-editable/js/bootstrap-editable.js vendored

@ -4632,69 +4632,76 @@ $(function(){
}(window.jQuery)); }(window.jQuery));
/* /*
Editableform based on Twitter Bootstrap 3 Editableform based on Bootstrap 5 (No jQuery)
*/ */
(function ($) { (() => {
"use strict"; "use strict";
//store parent methods class EditableForm {
const pInitInput = $.fn.editableform.Constructor.prototype.initInput; constructor(formElement, inputOptions = {}) {
this.formElement = formElement;
$.extend($.fn.editableform.Constructor.prototype, { this.inputOptions = inputOptions;
// initTemplate: function() { this.inputType = inputOptions.type || "text";
// this.$form = $($.fn.editableform.template); this.initInput();
// this.$form.find('.control-group').addClass('form-group');
// this.$form.find('.editable-error-block').addClass('help-block');
// },
initInput: function() {
pInitInput.apply(this);
//for bs3 set default class `input-sm` to standard inputs
const emptyInputClass = this.input.options.inputclass === null || this.input.options.inputclass === false;
const defaultClass = 'input-sm';
//bs3 add `form-control` class to standard inputs
const 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 editable');
if(emptyInputClass) {
this.input.options.inputclass = defaultClass;
this.input.$input.addClass(defaultClass);
} }
initInput() {
// Supported input types
const stdTypes = ["text", "select", "textarea", "password", "email", "url", "tel", "number", "range", "time", "typeaheadjs"];
if (stdTypes.includes(this.inputType)) {
this.formElement.classList.add("form-control", "editable");
} }
// Automatically open select dropdown when clicked // Automatically open select dropdown when clicked
if (this.input.type === 'select') { if (this.inputType === "select") {
setTimeout(() => { setTimeout(() => {
this.input.$input.focus().click(); this.formElement.focus();
this.formElement.click();
}, 50); }, 50);
} }
//apply bs3 size class also to buttons (to fit size of control) // Apply Bootstrap 5 button size classes
const $btn = this.$form.find('.editable-buttons'); const buttonContainer = this.formElement.closest(".editable-buttons");
const classes = emptyInputClass ? [defaultClass] : this.input.options.inputclass.split(' '); if (buttonContainer) {
for(let i=0; i<classes.length; i++) { if (this.inputOptions.inputClass && this.inputOptions.inputClass.includes("input-lg")) {
if(classes[i].toLowerCase() === 'input-lg') { buttonContainer.querySelectorAll("button").forEach(btn => btn.classList.add("btn-lg"));
$btn.find('button').removeClass('btn-sm').addClass('btn-lg'); }
} }
} }
} }
});
//buttons // Create buttons dynamically
$.fn.editableform.buttons = function createEditableButtons() {
'<button type="submit" class="btn btn-primary btn-sm editable-submit">'+ const btnContainer = document.createElement("div");
'<i class="bi bi-check"></i>'+ btnContainer.classList.add("editable-buttons");
'</button>'+
'<button type="button" class="btn btn-secondary btn-sm editable-cancel">'+
'<i class="bi bi-x"></i>'+
'</button>';
//error classes const submitButton = document.createElement("button");
$.fn.editableform.errorGroupClass = 'has-error'; submitButton.type = "submit";
$.fn.editableform.errorBlockClass = null; submitButton.classList.add("btn", "btn-primary", "btn-sm", "editable-submit");
//engine submitButton.innerHTML = '<i class="bi bi-check"></i>';
$.fn.editableform.engine = 'bs3';
}(window.jQuery)); const cancelButton = document.createElement("button");
cancelButton.type = "button";
cancelButton.classList.add("btn", "btn-secondary", "btn-sm", "editable-cancel");
cancelButton.innerHTML = '<i class="bi bi-x"></i>';
btnContainer.appendChild(submitButton);
btnContainer.appendChild(cancelButton);
return btnContainer;
}
// Apply Bootstrap 5 validation classes
function applyErrorStyles(element) {
element.classList.add("is-invalid");
const errorBlock = document.createElement("div");
errorBlock.classList.add("invalid-feedback");
errorBlock.innerText = "Invalid input"; // You can dynamically update this message
element.after(errorBlock);
}
})();
/** /**
* Editable Popover3 (for Bootstrap 3) * Editable Popover3 (for Bootstrap 3)
* --------------------- * ---------------------

2
dist/bootstrap5-editable/js/bootstrap-editable.min.js vendored

File diff suppressed because one or more lines are too long

103
src/editable-form/editable-form-bootstrap5.js

@ -1,64 +1,71 @@
/* /*
Editableform based on Twitter Bootstrap 3 Editableform based on Bootstrap 5 (No jQuery)
*/ */
(function ($) { (() => {
"use strict"; "use strict";
//store parent methods class EditableForm {
const pInitInput = $.fn.editableform.Constructor.prototype.initInput; constructor(formElement, inputOptions = {}) {
this.formElement = formElement;
$.extend($.fn.editableform.Constructor.prototype, { this.inputOptions = inputOptions;
// initTemplate: function() { this.inputType = inputOptions.type || "text";
// this.$form = $($.fn.editableform.template); this.initInput();
// this.$form.find('.control-group').addClass('form-group');
// this.$form.find('.editable-error-block').addClass('help-block');
// },
initInput: function() {
pInitInput.apply(this);
//for bs3 set default class `input-sm` to standard inputs
const emptyInputClass = this.input.options.inputclass === null || this.input.options.inputclass === false;
const defaultClass = 'input-sm';
//bs3 add `form-control` class to standard inputs
const 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 editable');
if(emptyInputClass) {
this.input.options.inputclass = defaultClass;
this.input.$input.addClass(defaultClass);
} }
initInput() {
// Supported input types
const stdTypes = ["text", "select", "textarea", "password", "email", "url", "tel", "number", "range", "time", "typeaheadjs"];
if (stdTypes.includes(this.inputType)) {
this.formElement.classList.add("form-control", "editable");
} }
// Automatically open select dropdown when clicked // Automatically open select dropdown when clicked
if (this.input.type === 'select') { if (this.inputType === "select") {
setTimeout(() => { setTimeout(() => {
this.input.$input.focus().click(); this.formElement.focus();
this.formElement.click();
}, 50); }, 50);
} }
//apply bs3 size class also to buttons (to fit size of control) // Apply Bootstrap 5 button size classes
const $btn = this.$form.find('.editable-buttons'); const buttonContainer = this.formElement.closest(".editable-buttons");
const classes = emptyInputClass ? [defaultClass] : this.input.options.inputclass.split(' '); if (buttonContainer) {
for(let i=0; i<classes.length; i++) { if (this.inputOptions.inputClass && this.inputOptions.inputClass.includes("input-lg")) {
if(classes[i].toLowerCase() === 'input-lg') { buttonContainer.querySelectorAll("button").forEach(btn => btn.classList.add("btn-lg"));
$btn.find('button').removeClass('btn-sm').addClass('btn-lg'); }
} }
} }
} }
});
//buttons // Create buttons dynamically
$.fn.editableform.buttons = function createEditableButtons() {
'<button type="submit" class="btn btn-primary btn-sm editable-submit">'+ const btnContainer = document.createElement("div");
'<i class="bi bi-check"></i>'+ btnContainer.classList.add("editable-buttons");
'</button>'+
'<button type="button" class="btn btn-secondary btn-sm editable-cancel">'+
'<i class="bi bi-x"></i>'+
'</button>';
//error classes const submitButton = document.createElement("button");
$.fn.editableform.errorGroupClass = 'has-error'; submitButton.type = "submit";
$.fn.editableform.errorBlockClass = null; submitButton.classList.add("btn", "btn-primary", "btn-sm", "editable-submit");
//engine submitButton.innerHTML = '<i class="bi bi-check"></i>';
$.fn.editableform.engine = 'bs3';
}(window.jQuery)); const cancelButton = document.createElement("button");
cancelButton.type = "button";
cancelButton.classList.add("btn", "btn-secondary", "btn-sm", "editable-cancel");
cancelButton.innerHTML = '<i class="bi bi-x"></i>';
btnContainer.appendChild(submitButton);
btnContainer.appendChild(cancelButton);
return btnContainer;
}
// Apply Bootstrap 5 validation classes
function applyErrorStyles(element) {
element.classList.add("is-invalid");
const errorBlock = document.createElement("div");
errorBlock.classList.add("invalid-feedback");
errorBlock.innerText = "Invalid input"; // You can dynamically update this message
element.after(errorBlock);
}
})();