added bs5 images
This commit is contained in:
Micha
parent
55d950d703
commit
8d6ea5e084
dist/bootstrap5-editable/js
src/containers
297
dist/bootstrap5-editable/js/bootstrap-editable.js
vendored
297
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: ' ',
|
initPopover() {
|
||||||
template: this.defaults.template
|
this.popoverInstance = new Popover(this.element, {
|
||||||
|
placement: this.options.placement,
|
||||||
|
trigger: this.options.trigger,
|
||||||
|
content: this.options.content,
|
||||||
|
html: true
|
||||||
});
|
});
|
||||||
|
|
||||||
//as template property is used in inputs, hide it from popover
|
if (this.element.dataset.template) {
|
||||||
var t;
|
this.template = this.element.dataset.template;
|
||||||
if(this.$element.data('template')) {
|
this.element.removeAttribute("data-template");
|
||||||
t = this.$element.data('template');
|
|
||||||
this.$element.removeData('template');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.call(this.containerOptions);
|
this.show();
|
||||||
|
|
||||||
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;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* move popover to new position. This function mainly copied from bootstrap-popover.
|
|
||||||
*/
|
|
||||||
/*jshint laxcomma: true, eqeqeq: false*/
|
|
||||||
setPosition: function () {
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
/*
|
|
||||||
var $tip = this.tip()
|
|
||||||
, inside
|
|
||||||
, pos
|
|
||||||
, actualWidth
|
|
||||||
, actualHeight
|
|
||||||
, placement
|
|
||||||
, tp
|
|
||||||
, tpt
|
|
||||||
, tpb
|
|
||||||
, tpl
|
|
||||||
, tpr;
|
|
||||||
|
|
||||||
placement = typeof this.options.placement === 'function' ?
|
|
||||||
this.options.placement.call(this, $tip[0], this.$element[0]) :
|
|
||||||
this.options.placement;
|
|
||||||
|
|
||||||
inside = /in/.test(placement);
|
|
||||||
|
|
||||||
$tip
|
|
||||||
// .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;
|
|
||||||
actualHeight = $tip[0].offsetHeight;
|
|
||||||
|
|
||||||
placement = inside ? placement.split(' ')[1] : placement;
|
|
||||||
|
|
||||||
tpb = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2};
|
|
||||||
tpt = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2};
|
|
||||||
tpl = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth};
|
|
||||||
tpr = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width};
|
|
||||||
|
|
||||||
switch (placement) {
|
|
||||||
case 'bottom':
|
|
||||||
if ((tpb.top + actualHeight) > ($(window).scrollTop() + $(window).height())) {
|
|
||||||
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) {
|
show() {
|
||||||
case 'bottom':
|
if (this.popoverInstance) {
|
||||||
tp = tpb;
|
this.popoverInstance.show();
|
||||||
break;
|
}
|
||||||
case 'top':
|
|
||||||
tp = tpt;
|
|
||||||
break;
|
|
||||||
case 'left':
|
|
||||||
tp = tpl;
|
|
||||||
break;
|
|
||||||
case 'right':
|
|
||||||
tp = tpr;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$tip
|
hide() {
|
||||||
.offset(tp)
|
if (this.popoverInstance) {
|
||||||
.addClass(placement)
|
this.popoverInstance.hide();
|
||||||
.addClass('in');
|
}
|
||||||
*/
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
if (this.popoverInstance) {
|
||||||
|
this.popoverInstance.dispose();
|
||||||
|
this.popoverInstance = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var $tip = this.tip();
|
setOption(key, value) {
|
||||||
|
if (this.popoverInstance) {
|
||||||
|
this.popoverInstance._config[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var placement = typeof this.options.placement == 'function' ?
|
setPosition() {
|
||||||
this.options.placement.call(this, $tip[0], this.$element[0]) :
|
if (!this.popoverInstance) {
|
||||||
this.options.placement;
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var autoToken = /\s?auto?\s?/i;
|
const tip = this.element.nextElementSibling; // Popover element
|
||||||
var autoPlace = autoToken.test(placement);
|
if (!tip) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let placement = typeof this.options.placement === "function" ? this.options.placement(tip, this.element) : this.options.placement;
|
||||||
|
|
||||||
|
const autoToken = /\s?auto?\s?/i;
|
||||||
|
const autoPlace = autoToken.test(placement);
|
||||||
if (autoPlace) {
|
if (autoPlace) {
|
||||||
placement = placement.replace(autoToken, '') || 'top';
|
placement = placement.replace(autoToken, "") || "top";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const pos = this.element.getBoundingClientRect();
|
||||||
var pos = this.getPosition();
|
const actualWidth = tip.offsetWidth;
|
||||||
var actualWidth = $tip[0].offsetWidth;
|
const actualHeight = tip.offsetHeight;
|
||||||
var actualHeight = $tip[0].offsetHeight;
|
|
||||||
|
|
||||||
if (autoPlace) {
|
if (autoPlace) {
|
||||||
var $parent = this.$element.parent();
|
const parent = this.element.parentElement || document.body;
|
||||||
|
const docScroll = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
|
const parentWidth = parent === document.body ? window.innerWidth : parent.offsetWidth;
|
||||||
|
const parentHeight = parent === document.body ? window.innerHeight : parent.offsetHeight;
|
||||||
|
const parentLeft = parent === document.body ? 0 : parent.getBoundingClientRect().left;
|
||||||
|
|
||||||
var orgPlacement = placement;
|
placement = placement === "bottom" && pos.top + pos.height + actualHeight - docScroll > parentHeight ? "top" :
|
||||||
var docScroll = document.documentElement.scrollTop || document.body.scrollTop;
|
placement === "top" && pos.top - docScroll - actualHeight < 0 ? "bottom" :
|
||||||
var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth();
|
placement === "right" && pos.right + actualWidth > parentWidth ? "left" :
|
||||||
var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight();
|
placement === "left" && pos.left - actualWidth < parentLeft ? "right" :
|
||||||
var parentLeft = this.options.container == 'body' ? 0 : $parent.offset().left;
|
|
||||||
|
|
||||||
placement = placement == 'bottom' && pos.top + pos.height + actualHeight - docScroll > parentHeight ? 'top' :
|
|
||||||
placement == 'top' && pos.top - docScroll - actualHeight < 0 ? 'bottom' :
|
|
||||||
placement == 'right' && pos.right + actualWidth > parentWidth ? 'left' :
|
|
||||||
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);
|
||||||
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight);
|
this.applyPlacement(tip, calculatedOffset, placement);
|
||||||
|
|
||||||
this.applyPlacement(calculatedOffset, placement);
|
|
||||||
|
|
||||||
|
|
||||||
}).call(this.container());
|
|
||||||
/*jshint laxcomma: false, eqeqeq: true*/
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
}(window.jQuery));
|
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 };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
applyPlacement(tip, offset, placement) {
|
||||||
|
tip.style.top = `${offset.top}px`;
|
||||||
|
tip.style.left = `${offset.left}px`;
|
||||||
|
tip.classList.add("show", placement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* =========================================================
|
/* =========================================================
|
||||||
* bootstrap-datepicker.js
|
* bootstrap-datepicker.js
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -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: ' ',
|
initPopover() {
|
||||||
template: this.defaults.template
|
this.popoverInstance = new Popover(this.element, {
|
||||||
|
placement: this.options.placement,
|
||||||
|
trigger: this.options.trigger,
|
||||||
|
content: this.options.content,
|
||||||
|
html: true
|
||||||
});
|
});
|
||||||
|
|
||||||
//as template property is used in inputs, hide it from popover
|
if (this.element.dataset.template) {
|
||||||
var t;
|
this.template = this.element.dataset.template;
|
||||||
if(this.$element.data('template')) {
|
this.element.removeAttribute("data-template");
|
||||||
t = this.$element.data('template');
|
|
||||||
this.$element.removeData('template');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.call(this.containerOptions);
|
this.show();
|
||||||
|
|
||||||
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;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* move popover to new position. This function mainly copied from bootstrap-popover.
|
|
||||||
*/
|
|
||||||
/*jshint laxcomma: true, eqeqeq: false*/
|
|
||||||
setPosition: function () {
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
/*
|
|
||||||
var $tip = this.tip()
|
|
||||||
, inside
|
|
||||||
, pos
|
|
||||||
, actualWidth
|
|
||||||
, actualHeight
|
|
||||||
, placement
|
|
||||||
, tp
|
|
||||||
, tpt
|
|
||||||
, tpb
|
|
||||||
, tpl
|
|
||||||
, tpr;
|
|
||||||
|
|
||||||
placement = typeof this.options.placement === 'function' ?
|
|
||||||
this.options.placement.call(this, $tip[0], this.$element[0]) :
|
|
||||||
this.options.placement;
|
|
||||||
|
|
||||||
inside = /in/.test(placement);
|
|
||||||
|
|
||||||
$tip
|
|
||||||
// .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;
|
|
||||||
actualHeight = $tip[0].offsetHeight;
|
|
||||||
|
|
||||||
placement = inside ? placement.split(' ')[1] : placement;
|
|
||||||
|
|
||||||
tpb = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2};
|
|
||||||
tpt = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2};
|
|
||||||
tpl = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth};
|
|
||||||
tpr = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width};
|
|
||||||
|
|
||||||
switch (placement) {
|
|
||||||
case 'bottom':
|
|
||||||
if ((tpb.top + actualHeight) > ($(window).scrollTop() + $(window).height())) {
|
|
||||||
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) {
|
show() {
|
||||||
case 'bottom':
|
if (this.popoverInstance) {
|
||||||
tp = tpb;
|
this.popoverInstance.show();
|
||||||
break;
|
}
|
||||||
case 'top':
|
|
||||||
tp = tpt;
|
|
||||||
break;
|
|
||||||
case 'left':
|
|
||||||
tp = tpl;
|
|
||||||
break;
|
|
||||||
case 'right':
|
|
||||||
tp = tpr;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$tip
|
hide() {
|
||||||
.offset(tp)
|
if (this.popoverInstance) {
|
||||||
.addClass(placement)
|
this.popoverInstance.hide();
|
||||||
.addClass('in');
|
}
|
||||||
*/
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
if (this.popoverInstance) {
|
||||||
|
this.popoverInstance.dispose();
|
||||||
|
this.popoverInstance = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var $tip = this.tip();
|
setOption(key, value) {
|
||||||
|
if (this.popoverInstance) {
|
||||||
|
this.popoverInstance._config[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var placement = typeof this.options.placement == 'function' ?
|
setPosition() {
|
||||||
this.options.placement.call(this, $tip[0], this.$element[0]) :
|
if (!this.popoverInstance) {
|
||||||
this.options.placement;
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var autoToken = /\s?auto?\s?/i;
|
const tip = this.element.nextElementSibling; // Popover element
|
||||||
var autoPlace = autoToken.test(placement);
|
if (!tip) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let placement = typeof this.options.placement === "function" ? this.options.placement(tip, this.element) : this.options.placement;
|
||||||
|
|
||||||
|
const autoToken = /\s?auto?\s?/i;
|
||||||
|
const autoPlace = autoToken.test(placement);
|
||||||
if (autoPlace) {
|
if (autoPlace) {
|
||||||
placement = placement.replace(autoToken, '') || 'top';
|
placement = placement.replace(autoToken, "") || "top";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const pos = this.element.getBoundingClientRect();
|
||||||
var pos = this.getPosition();
|
const actualWidth = tip.offsetWidth;
|
||||||
var actualWidth = $tip[0].offsetWidth;
|
const actualHeight = tip.offsetHeight;
|
||||||
var actualHeight = $tip[0].offsetHeight;
|
|
||||||
|
|
||||||
if (autoPlace) {
|
if (autoPlace) {
|
||||||
var $parent = this.$element.parent();
|
const parent = this.element.parentElement || document.body;
|
||||||
|
const docScroll = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
|
const parentWidth = parent === document.body ? window.innerWidth : parent.offsetWidth;
|
||||||
|
const parentHeight = parent === document.body ? window.innerHeight : parent.offsetHeight;
|
||||||
|
const parentLeft = parent === document.body ? 0 : parent.getBoundingClientRect().left;
|
||||||
|
|
||||||
var orgPlacement = placement;
|
placement = placement === "bottom" && pos.top + pos.height + actualHeight - docScroll > parentHeight ? "top" :
|
||||||
var docScroll = document.documentElement.scrollTop || document.body.scrollTop;
|
placement === "top" && pos.top - docScroll - actualHeight < 0 ? "bottom" :
|
||||||
var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth();
|
placement === "right" && pos.right + actualWidth > parentWidth ? "left" :
|
||||||
var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight();
|
placement === "left" && pos.left - actualWidth < parentLeft ? "right" :
|
||||||
var parentLeft = this.options.container == 'body' ? 0 : $parent.offset().left;
|
|
||||||
|
|
||||||
placement = placement == 'bottom' && pos.top + pos.height + actualHeight - docScroll > parentHeight ? 'top' :
|
|
||||||
placement == 'top' && pos.top - docScroll - actualHeight < 0 ? 'bottom' :
|
|
||||||
placement == 'right' && pos.right + actualWidth > parentWidth ? 'left' :
|
|
||||||
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);
|
||||||
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight);
|
this.applyPlacement(tip, calculatedOffset, placement);
|
||||||
|
|
||||||
this.applyPlacement(calculatedOffset, placement);
|
|
||||||
|
|
||||||
|
|
||||||
}).call(this.container());
|
|
||||||
/*jshint laxcomma: false, eqeqeq: true*/
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
}(window.jQuery));
|
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 };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
applyPlacement(tip, offset, placement) {
|
||||||
|
tip.style.top = `${offset.top}px`;
|
||||||
|
tip.style.left = `${offset.left}px`;
|
||||||
|
tip.classList.add("show", placement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user