181 lines
6.9 KiB
JavaScript
181 lines
6.9 KiB
JavaScript
/**
|
|
* Editable Popover
|
|
* ---------------------
|
|
* requires bootstrap-popover.js
|
|
*/
|
|
(function ($) {
|
|
"use strict";
|
|
|
|
//extend methods
|
|
$.extend($.fn.editableContainer.Popup.prototype, {
|
|
containerName: 'popover',
|
|
//for compatibility with bootstrap <= 2.2.1 (content inserted into <p> instead of directly .popover-content)
|
|
innerCss: $.fn.popover && $($.fn.popover.defaults.template).find('p').length ? '.popover-content p' : '.popover-content',
|
|
defaults: $.fn.popover.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*/
|
|
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');
|
|
|
|
}).call(this.container());
|
|
/*jshint laxcomma: false*/
|
|
}
|
|
});
|
|
|
|
}(window.jQuery));
|