| 1 |
(function($) { |
| 2 |
|
| 3 |
var Defaults = $.fn.select2.amd.require('select2/defaults'); |
| 4 |
|
| 5 |
$.extend(Defaults.defaults, { |
| 6 |
dropdownPosition: 'auto' |
| 7 |
}); |
| 8 |
|
| 9 |
var AttachBody = $.fn.select2.amd.require('select2/dropdown/attachBody'); |
| 10 |
|
| 11 |
var _positionDropdown = AttachBody.prototype._positionDropdown; |
| 12 |
|
| 13 |
AttachBody.prototype._positionDropdown = function() { |
| 14 |
|
| 15 |
var $window = $(window); |
| 16 |
|
| 17 |
var isCurrentlyAbove = this.$dropdown.hasClass('select2-dropdown--above'); |
| 18 |
var isCurrentlyBelow = this.$dropdown.hasClass('select2-dropdown--below'); |
| 19 |
|
| 20 |
var newDirection = null; |
| 21 |
|
| 22 |
var offset = this.$container.offset(); |
| 23 |
|
| 24 |
offset.bottom = offset.top + this.$container.outerHeight(false); |
| 25 |
|
| 26 |
var container = { |
| 27 |
height: this.$container.outerHeight(false) |
| 28 |
}; |
| 29 |
|
| 30 |
container.top = offset.top; |
| 31 |
container.bottom = offset.top + container.height; |
| 32 |
|
| 33 |
var dropdown = { |
| 34 |
height: this.$dropdown.outerHeight(false) |
| 35 |
}; |
| 36 |
|
| 37 |
var viewport = { |
| 38 |
top: $window.scrollTop(), |
| 39 |
bottom: $window.scrollTop() + $window.height() |
| 40 |
}; |
| 41 |
|
| 42 |
var enoughRoomAbove = viewport.top < (offset.top - dropdown.height); |
| 43 |
var enoughRoomBelow = viewport.bottom > (offset.bottom + dropdown.height); |
| 44 |
|
| 45 |
var css = { |
| 46 |
left: offset.left, |
| 47 |
top: container.bottom |
| 48 |
}; |
| 49 |
|
| 50 |
// Determine what the parent element is to use for calciulating the offset |
| 51 |
var $offsetParent = this.$dropdownParent; |
| 52 |
|
| 53 |
// For statically positoned elements, we need to get the element |
| 54 |
// that is determining the offset |
| 55 |
if ($offsetParent.css('position') === 'static') { |
| 56 |
$offsetParent = $offsetParent.offsetParent(); |
| 57 |
} |
| 58 |
|
| 59 |
var parentOffset = $offsetParent.offset(); |
| 60 |
|
| 61 |
css.top -= parentOffset.top |
| 62 |
css.left -= parentOffset.left; |
| 63 |
|
| 64 |
var dropdownPositionOption = this.options.get('dropdownPosition'); |
| 65 |
|
| 66 |
if (dropdownPositionOption === 'above' || dropdownPositionOption === 'below') { |
| 67 |
|
| 68 |
newDirection = dropdownPositionOption; |
| 69 |
|
| 70 |
} else { |
| 71 |
|
| 72 |
if (!isCurrentlyAbove && !isCurrentlyBelow) { |
| 73 |
newDirection = 'below'; |
| 74 |
} |
| 75 |
|
| 76 |
if (!enoughRoomBelow && enoughRoomAbove && !isCurrentlyAbove) { |
| 77 |
newDirection = 'above'; |
| 78 |
} else if (!enoughRoomAbove && enoughRoomBelow && isCurrentlyAbove) { |
| 79 |
newDirection = 'below'; |
| 80 |
} |
| 81 |
|
| 82 |
} |
| 83 |
|
| 84 |
if (newDirection == 'above' || |
| 85 |
(isCurrentlyAbove && newDirection !== 'below')) { |
| 86 |
css.top = container.top - parentOffset.top - dropdown.height; |
| 87 |
} |
| 88 |
|
| 89 |
if (newDirection != null) { |
| 90 |
this.$dropdown |
| 91 |
.removeClass('select2-dropdown--below select2-dropdown--above') |
| 92 |
.addClass('select2-dropdown--' + newDirection); |
| 93 |
this.$container |
| 94 |
.removeClass('select2-container--below select2-container--above') |
| 95 |
.addClass('select2-container--' + newDirection); |
| 96 |
} |
| 97 |
|
| 98 |
this.$dropdownContainer.css(css); |
| 99 |
|
| 100 |
}; |
| 101 |
|
| 102 |
})(window.jQuery); |
