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:51:12 +01:00
parent 55d950d703
commit 8d6ea5e084
3 changed files with 203 additions and 409 deletions

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

@ -4702,232 +4702,129 @@ Editableform based on Bootstrap 5 (No jQuery)
} }
})(); })();
/** /*
* Editable Popover3 (for Bootstrap 3) * Editable Popover (for Bootstrap 5, No jQuery)
* --------------------- */
* requires bootstrap-popover.js import { Popover } from "bootstrap";
*/
(function ($) {
"use strict";
//extend methods class EditablePopover {
$.extend($.fn.editableContainer.Popup.prototype, { constructor(element, options = {}) {
containerName: 'popover', this.element = element;
containerDataName: 'bs.popover', this.options = Object.assign({
innerCss: '.popover-content', placement: "top",
defaults: $.fn.popover.Constructor.DEFAULTS, trigger: "manual",
content: " ",
container: "body"
}, options);
initContainer: function(){ this.popoverInstance = null;
$.extend(this.containerOptions, { this.initPopover();
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('destroy');
},
setContainerOption: function(key, value) {
this.container().options[key] = value;
},
/** initPopover() {
* move popover to new position. This function mainly copied from bootstrap-popover. this.popoverInstance = new Popover(this.element, {
*/ placement: this.options.placement,
/*jshint laxcomma: true, eqeqeq: false*/ trigger: this.options.trigger,
setPosition: function () { content: this.options.content,
html: true
});
(function() { if (this.element.dataset.template) {
/* this.template = this.element.dataset.template;
var $tip = this.tip() this.element.removeAttribute("data-template");
, inside }
, pos
, actualWidth
, actualHeight
, placement
, tp
, tpt
, tpb
, tpl
, tpr;
placement = typeof this.options.placement === 'function' ? this.show();
this.options.placement.call(this, $tip[0], this.$element[0]) : }
this.options.placement;
inside = /in/.test(placement); show() {
if (this.popoverInstance) {
$tip this.popoverInstance.show();
// .detach() }
//vitalets: remove any placement class because otherwise they dont influence on re-positioning of visible popover }
.removeClass('top right bottom left')
.css({ top: 0, left: 0, display: 'block' });
// .insertAfter(this.$element);
pos = this.getPosition(inside);
actualWidth = $tip[0].offsetWidth; hide() {
actualHeight = $tip[0].offsetHeight; if (this.popoverInstance) {
this.popoverInstance.hide();
}
}
placement = inside ? placement.split(' ')[1] : placement; destroy() {
if (this.popoverInstance) {
this.popoverInstance.dispose();
this.popoverInstance = null;
}
}
tpb = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}; setOption(key, value) {
tpt = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}; if (this.popoverInstance) {
tpl = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}; this.popoverInstance._config[key] = value;
tpr = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}; }
}
switch (placement) { setPosition() {
case 'bottom': if (!this.popoverInstance) {
if ((tpb.top + actualHeight) > ($(window).scrollTop() + $(window).height())) { return;
if (tpt.top > $(window).scrollTop()) { }
placement = 'top';
} else if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
placement = 'right';
} else if (tpl.left > $(window).scrollLeft()) {
placement = 'left';
} else {
placement = 'right';
}
}
break;
case 'top':
if (tpt.top < $(window).scrollTop()) {
if ((tpb.top + actualHeight) < ($(window).scrollTop() + $(window).height())) {
placement = 'bottom';
} else if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
placement = 'right';
} else if (tpl.left > $(window).scrollLeft()) {
placement = 'left';
} else {
placement = 'right';
}
}
break;
case 'left':
if (tpl.left < $(window).scrollLeft()) {
if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
placement = 'right';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'top';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'bottom';
} else {
placement = 'right';
}
}
break;
case 'right':
if ((tpr.left + actualWidth) > ($(window).scrollLeft() + $(window).width())) {
if (tpl.left > $(window).scrollLeft()) {
placement = 'left';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'top';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'bottom';
}
}
break;
}
switch (placement) { const tip = this.element.nextElementSibling; // Popover element
case 'bottom': if (!tip) {
tp = tpb; return;
break; }
case 'top':
tp = tpt;
break;
case 'left':
tp = tpl;
break;
case 'right':
tp = tpr;
break;
}
$tip let placement = typeof this.options.placement === "function" ? this.options.placement(tip, this.element) : this.options.placement;
.offset(tp)
.addClass(placement)
.addClass('in');
*/
var $tip = this.tip();
var placement = typeof this.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement;
var autoToken = /\s?auto?\s?/i; const autoToken = /\s?auto?\s?/i;
var autoPlace = autoToken.test(placement); const autoPlace = autoToken.test(placement);
if (autoPlace) { if (autoPlace) {
placement = placement.replace(autoToken, '') || 'top'; placement = placement.replace(autoToken, "") || "top";
} }
var pos = this.getPosition();
var actualWidth = $tip[0].offsetWidth;
var actualHeight = $tip[0].offsetHeight;
if (autoPlace) { const pos = this.element.getBoundingClientRect();
var $parent = this.$element.parent(); const actualWidth = tip.offsetWidth;
const actualHeight = tip.offsetHeight;
var orgPlacement = placement; if (autoPlace) {
var docScroll = document.documentElement.scrollTop || document.body.scrollTop; const parent = this.element.parentElement || document.body;
var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth(); const docScroll = document.documentElement.scrollTop || document.body.scrollTop;
var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight(); const parentWidth = parent === document.body ? window.innerWidth : parent.offsetWidth;
var parentLeft = this.options.container == 'body' ? 0 : $parent.offset().left; const parentHeight = parent === document.body ? window.innerHeight : parent.offsetHeight;
const parentLeft = parent === document.body ? 0 : parent.getBoundingClientRect().left;
placement = placement == 'bottom' && pos.top + pos.height + actualHeight - docScroll > parentHeight ? 'top' : placement = placement === "bottom" && pos.top + pos.height + actualHeight - docScroll > parentHeight ? "top" :
placement == 'top' && pos.top - docScroll - actualHeight < 0 ? 'bottom' : placement === "top" && pos.top - docScroll - actualHeight < 0 ? "bottom" :
placement == 'right' && pos.right + actualWidth > parentWidth ? 'left' : placement === "right" && pos.right + actualWidth > parentWidth ? "left" :
placement == 'left' && pos.left - actualWidth < parentLeft ? 'right' : placement === "left" && pos.left - actualWidth < parentLeft ? "right" :
placement; placement;
$tip tip.classList.remove(...["top", "bottom", "left", "right"]);
.removeClass(orgPlacement) tip.classList.add(placement);
.addClass(placement); }
}
const calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight);
this.applyPlacement(tip, calculatedOffset, placement);
}
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight); getCalculatedOffset(placement, pos, actualWidth, actualHeight) {
switch (placement) {
case "bottom":
return { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 };
case "top":
return { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 };
case "left":
return { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth };
case "right":
return { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width };
}
}
this.applyPlacement(calculatedOffset, placement); applyPlacement(tip, offset, placement) {
tip.style.top = `${offset.top}px`;
tip.style.left = `${offset.left}px`;
}).call(this.container()); tip.classList.add("show", placement);
/*jshint laxcomma: false, eqeqeq: true*/ }
} }
});
}(window.jQuery));
/* ========================================================= /* =========================================================
* bootstrap-datepicker.js * bootstrap-datepicker.js

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

File diff suppressed because one or more lines are too long

305
src/containers/editable-popover5.js

@ -1,226 +1,123 @@
/** /*
* Editable Popover3 (for Bootstrap 3) * Editable Popover (for Bootstrap 5, No jQuery)
* --------------------- */
* requires bootstrap-popover.js import { Popover } from "bootstrap";
*/
(function ($) {
"use strict";
//extend methods class EditablePopover {
$.extend($.fn.editableContainer.Popup.prototype, { constructor(element, options = {}) {
containerName: 'popover', this.element = element;
containerDataName: 'bs.popover', this.options = Object.assign({
innerCss: '.popover-content', placement: "top",
defaults: $.fn.popover.Constructor.DEFAULTS, trigger: "manual",
content: " ",
container: "body"
}, options);
initContainer: function(){ this.popoverInstance = null;
$.extend(this.containerOptions, { this.initPopover();
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('destroy');
},
setContainerOption: function(key, value) {
this.container().options[key] = value;
},
/** initPopover() {
* move popover to new position. This function mainly copied from bootstrap-popover. this.popoverInstance = new Popover(this.element, {
*/ placement: this.options.placement,
/*jshint laxcomma: true, eqeqeq: false*/ trigger: this.options.trigger,
setPosition: function () { content: this.options.content,
html: true
});
(function() { if (this.element.dataset.template) {
/* this.template = this.element.dataset.template;
var $tip = this.tip() this.element.removeAttribute("data-template");
, inside }
, pos
, actualWidth
, actualHeight
, placement
, tp
, tpt
, tpb
, tpl
, tpr;
placement = typeof this.options.placement === 'function' ? this.show();
this.options.placement.call(this, $tip[0], this.$element[0]) : }
this.options.placement;
inside = /in/.test(placement); show() {
if (this.popoverInstance) {
$tip this.popoverInstance.show();
// .detach() }
//vitalets: remove any placement class because otherwise they dont influence on re-positioning of visible popover }
.removeClass('top right bottom left')
.css({ top: 0, left: 0, display: 'block' });
// .insertAfter(this.$element);
pos = this.getPosition(inside);
actualWidth = $tip[0].offsetWidth; hide() {
actualHeight = $tip[0].offsetHeight; if (this.popoverInstance) {
this.popoverInstance.hide();
}
}
placement = inside ? placement.split(' ')[1] : placement; destroy() {
if (this.popoverInstance) {
this.popoverInstance.dispose();
this.popoverInstance = null;
}
}
tpb = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}; setOption(key, value) {
tpt = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}; if (this.popoverInstance) {
tpl = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}; this.popoverInstance._config[key] = value;
tpr = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}; }
}
switch (placement) { setPosition() {
case 'bottom': if (!this.popoverInstance) {
if ((tpb.top + actualHeight) > ($(window).scrollTop() + $(window).height())) { return;
if (tpt.top > $(window).scrollTop()) { }
placement = 'top';
} else if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
placement = 'right';
} else if (tpl.left > $(window).scrollLeft()) {
placement = 'left';
} else {
placement = 'right';
}
}
break;
case 'top':
if (tpt.top < $(window).scrollTop()) {
if ((tpb.top + actualHeight) < ($(window).scrollTop() + $(window).height())) {
placement = 'bottom';
} else if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
placement = 'right';
} else if (tpl.left > $(window).scrollLeft()) {
placement = 'left';
} else {
placement = 'right';
}
}
break;
case 'left':
if (tpl.left < $(window).scrollLeft()) {
if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
placement = 'right';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'top';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'bottom';
} else {
placement = 'right';
}
}
break;
case 'right':
if ((tpr.left + actualWidth) > ($(window).scrollLeft() + $(window).width())) {
if (tpl.left > $(window).scrollLeft()) {
placement = 'left';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'top';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'bottom';
}
}
break;
}
switch (placement) { const tip = this.element.nextElementSibling; // Popover element
case 'bottom': if (!tip) {
tp = tpb; return;
break; }
case 'top':
tp = tpt;
break;
case 'left':
tp = tpl;
break;
case 'right':
tp = tpr;
break;
}
$tip let placement = typeof this.options.placement === "function" ? this.options.placement(tip, this.element) : this.options.placement;
.offset(tp)
.addClass(placement)
.addClass('in');
*/
var $tip = this.tip();
var placement = typeof this.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement;
var autoToken = /\s?auto?\s?/i; const autoToken = /\s?auto?\s?/i;
var autoPlace = autoToken.test(placement); const autoPlace = autoToken.test(placement);
if (autoPlace) { if (autoPlace) {
placement = placement.replace(autoToken, '') || 'top'; placement = placement.replace(autoToken, "") || "top";
} }
var pos = this.getPosition();
var actualWidth = $tip[0].offsetWidth;
var actualHeight = $tip[0].offsetHeight;
if (autoPlace) { const pos = this.element.getBoundingClientRect();
var $parent = this.$element.parent(); const actualWidth = tip.offsetWidth;
const actualHeight = tip.offsetHeight;
var orgPlacement = placement; if (autoPlace) {
var docScroll = document.documentElement.scrollTop || document.body.scrollTop; const parent = this.element.parentElement || document.body;
var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth(); const docScroll = document.documentElement.scrollTop || document.body.scrollTop;
var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight(); const parentWidth = parent === document.body ? window.innerWidth : parent.offsetWidth;
var parentLeft = this.options.container == 'body' ? 0 : $parent.offset().left; const parentHeight = parent === document.body ? window.innerHeight : parent.offsetHeight;
const parentLeft = parent === document.body ? 0 : parent.getBoundingClientRect().left;
placement = placement == 'bottom' && pos.top + pos.height + actualHeight - docScroll > parentHeight ? 'top' : placement = placement === "bottom" && pos.top + pos.height + actualHeight - docScroll > parentHeight ? "top" :
placement == 'top' && pos.top - docScroll - actualHeight < 0 ? 'bottom' : placement === "top" && pos.top - docScroll - actualHeight < 0 ? "bottom" :
placement == 'right' && pos.right + actualWidth > parentWidth ? 'left' : placement === "right" && pos.right + actualWidth > parentWidth ? "left" :
placement == 'left' && pos.left - actualWidth < parentLeft ? 'right' : placement === "left" && pos.left - actualWidth < parentLeft ? "right" :
placement; placement;
$tip tip.classList.remove(...["top", "bottom", "left", "right"]);
.removeClass(orgPlacement) tip.classList.add(placement);
.addClass(placement); }
}
const calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight);
this.applyPlacement(tip, calculatedOffset, placement);
}
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight); getCalculatedOffset(placement, pos, actualWidth, actualHeight) {
switch (placement) {
case "bottom":
return { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 };
case "top":
return { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 };
case "left":
return { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth };
case "right":
return { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width };
}
}
this.applyPlacement(calculatedOffset, placement); applyPlacement(tip, offset, placement) {
tip.style.top = `${offset.top}px`;
tip.style.left = `${offset.left}px`;
}).call(this.container()); tip.classList.add("show", placement);
/*jshint laxcomma: false, eqeqeq: true*/ }
} }
});
}(window.jQuery));