Skip to content

Commit

Permalink
Fix 'bootstrap popover falls off page if editable is too close to win…
Browse files Browse the repository at this point in the history
…dow edge'

Fix 'bootstrap popover falls off page if editable is too close to window edge'.


Reference:
    twbs/bootstrap#6713
    twbs/bootstrap#7399
    https://gist.github.com/nonumber/5257443
  • Loading branch information
belerweb committed Jul 13, 2013
1 parent 2dcde6c commit 63f8c0c
Showing 1 changed file with 80 additions and 16 deletions.
96 changes: 80 additions & 16 deletions src/containers/editable-popover.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,11 @@
, actualWidth
, actualHeight
, placement
, tp;
, tp
, tpt
, tpb
, tpl
, tpr;

placement = typeof this.options.placement === 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
Expand All @@ -87,20 +91,80 @@
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;
}
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)
Expand All @@ -112,4 +176,4 @@
}
});

}(window.jQuery));
}(window.jQuery));

0 comments on commit 63f8c0c

Please sign in to comment.