Bootstrap5 support
This commit is contained in:
Micha
226
src/containers/editable-popover5.js
Normal file
226
src/containers/editable-popover5.js
Normal file
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* Editable Popover3 (for Bootstrap 3)
|
||||
* ---------------------
|
||||
* requires bootstrap-popover.js
|
||||
*/
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
//extend methods
|
||||
$.extend($.fn.editableContainer.Popup.prototype, {
|
||||
containerName: 'popover',
|
||||
containerDataName: 'bs.popover',
|
||||
innerCss: '.popover-content',
|
||||
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('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) {
|
||||
case 'bottom':
|
||||
tp = tpb;
|
||||
break;
|
||||
case 'top':
|
||||
tp = tpt;
|
||||
break;
|
||||
case 'left':
|
||||
tp = tpl;
|
||||
break;
|
||||
case 'right':
|
||||
tp = tpr;
|
||||
break;
|
||||
}
|
||||
|
||||
$tip
|
||||
.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;
|
||||
var autoPlace = autoToken.test(placement);
|
||||
if (autoPlace) {
|
||||
placement = placement.replace(autoToken, '') || 'top';
|
||||
}
|
||||
|
||||
|
||||
var pos = this.getPosition();
|
||||
var actualWidth = $tip[0].offsetWidth;
|
||||
var actualHeight = $tip[0].offsetHeight;
|
||||
|
||||
if (autoPlace) {
|
||||
var $parent = this.$element.parent();
|
||||
|
||||
var orgPlacement = placement;
|
||||
var docScroll = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth();
|
||||
var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight();
|
||||
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;
|
||||
|
||||
$tip
|
||||
.removeClass(orgPlacement)
|
||||
.addClass(placement);
|
||||
}
|
||||
|
||||
|
||||
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight);
|
||||
|
||||
this.applyPlacement(calculatedOffset, placement);
|
||||
|
||||
|
||||
}).call(this.container());
|
||||
/*jshint laxcomma: false, eqeqeq: true*/
|
||||
}
|
||||
});
|
||||
|
||||
}(window.jQuery));
|
||||
Reference in New Issue
Block a user