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

fix popover positioning for non-static

Browse Source
This commit is contained in:
vitalets 2012-11-20 19:24:24 +04:00
parent 89ac2389c3
commit 8f58b4488b
3 changed files with 55 additions and 33 deletions

10
src/containers/editable-container.css

@ -1,5 +1,5 @@
.editable-container,
.editable-container .popover-inner {
width: auto;
max-width: none;
}
.editable-container
{
width: auto;
white-space: nowrap;
}

2
src/containers/editable-container.js

@ -85,7 +85,7 @@ Applied as jQuery method.
this.tip().addClass('editable-container');
this.initForm();
this.tip().find(this.innerCss).empty().append(this.$form);
this.tip().find(this.innerCss).empty().append(this.$form);
this.$form.editableform('render');
},

76
src/containers/editable-popover.js

@ -18,8 +18,8 @@
initContainer: function(){
$.extend(this.containerOptions, {
trigger: 'manual',
selector: 'false',
content: ' '
selector: false,
content: 'dfgh'
});
this.call(this.containerOptions);
},
@ -31,36 +31,58 @@
/**
* move popover to new position. This function mainly copied from bootstrap-popover.
*/
setPosition: function () {
var popover = this.container(),
$tip = popover.tip(),
inside = false,
placement, pos, actualWidth, actualHeight, tp;
setPosition: function () {
(function() {
var $tip = this.tip()
, inside
, pos
, actualWidth
, actualHeight
, placement
, tp;
placement = typeof popover.options.placement === 'function' ? popover.options.placement.call(popover, $tip[0], popover.$element[0]) : popover.options.placement;
placement = typeof this.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement;
pos = popover.getPosition(inside);
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;
actualWidth = $tip[0].offsetWidth;
actualHeight = $tip[0].offsetHeight;
switch (inside ? placement.split(' ')[1] : placement) {
case 'bottom':
tp = {top:pos.top + pos.height, left:pos.left + pos.width / 2 - actualWidth / 2};
break;
case 'top':
tp = {top:pos.top - actualHeight, left:pos.left + pos.width / 2 - actualWidth / 2};
break;
case 'left':
tp = {top:pos.top + pos.height / 2 - actualHeight / 2, left:pos.left - actualWidth};
break;
case 'right':
tp = {top:pos.top + pos.height / 2 - actualHeight / 2, left:pos.left + pos.width};
break;
}
switch (inside ? placement.split(' ')[1] : placement) {
case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2};
break
case 'top':
tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2};
break
case 'left':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth};
break
case 'right':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width};
break
}
$tip.css(tp).addClass(placement).addClass('in');
}
$tip
.offset(tp)
.addClass(placement)
.addClass('in');
}).call(this.container());
}
});
//defaults