From 289b4a48711aafae7308ea8dac8a10f291f93d8e Mon Sep 17 00:00:00 2001 From: Matthias Schmidt Date: Fri, 2 Aug 2013 14:16:51 +0200 Subject: [PATCH] Overhauls dropdown behaviour in overlays during scrolling --- wcfsetup/install/files/js/WCF.js | 52 +++++++++++++++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js index 9a2e3aa0ee..b91a5d3e81 100755 --- a/wcfsetup/install/files/js/WCF.js +++ b/wcfsetup/install/files/js/WCF.js @@ -737,7 +737,45 @@ WCF.Dropdown = { WCF.DOMNodeInsertedHandler.addCallback('WCF.Dropdown', $.proxy(this.init, this)); } - $(document).on('scroll', $.proxy(this._toggle, this)); + $(document).on('scroll', $.proxy(this._scroll, this)); + }, + + /** + * Handles dropdown positions in overlays when scrolling in the overlay. + * + * @param object event + */ + _dialogScroll: function(event) { + var $dialogContent = $(event.currentTarget); + $dialogContent.find('.dropdown.dropdownOpen').each(function(index, element) { + var $dropdown = $(element); + var $scrollTolerance = $(element).height() / 2; + + // check if dropdown toggle is still (partially) visible + if ($dropdown.offset().top + $scrollTolerance <= $dialogContent.offset().top) { // top check + WCF.Dropdown.toggleDropdown($dropdown.wcfIdentify()); + } + else if ($dropdown.offset().top >= $dialogContent.offset().top + $dialogContent.height()) { // bottom check + WCF.Dropdown.toggleDropdown($dropdown.wcfIdentify()); + } + else { + WCF.Dropdown.setAlignmentByID($dropdown.wcfIdentify()); + } + }); + }, + + /** + * Handles dropdown positions in overlays when scrolling in the document. + * + * @param object event + */ + _scroll: function(event) { + for (var $containerID in this._dropdowns) { + var $dropdown = this._dropdowns[$containerID]; + if ($dropdown.data('isOverlayDropdownButton') && $dropdown.hasClass('dropdownOpen')) { + this.setAlignmentByID($containerID); + } + } }, /** @@ -825,6 +863,18 @@ WCF.Dropdown = { _toggle: function(event, targetID) { var $targetID = (event === null) ? targetID : $(event.currentTarget).data('target'); + // check if 'isOverlayDropdownButton' is set which indicates if + // the dropdown toggle is in an overlay + var $target = this._dropdowns[$targetID]; + if ($target && $target.data('isOverlayDropdownButton') === undefined) { + var $dialogContent = $target.parents('.dialogContent'); + $target.data('isOverlayDropdownButton', $dialogContent.length > 0); + + if ($dialogContent.length) { + $dialogContent.on('scroll', this._dialogScroll); + } + } + // close all dropdowns for (var $containerID in this._dropdowns) { var $dropdown = this._dropdowns[$containerID]; -- 2.20.1