← All changes
|
assets/libs/select2-dropdownPosition/select2-dropdownPosition.js
+102
-0
5.6.1
→
6.0.3
View file →
| @@ -1,0 +1,102 @@ | ||
| 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); | |