Add support for date pickers in scrollable dialogs

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
index 26b6e6f897a3be5895e605a8327ce4a71eb6c29b..207dffa36aaf682ca3fb88d7b8e80927ea48d085 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
@@ -6,7 +6,7 @@
  * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module     WoltLabSuite/Core/Date/Picker
  */
-define(['DateUtil', 'EventHandler', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment', 'WoltLabSuite/Core/Ui/CloseOverlay'], function(DateUtil, EventHandler, Language, ObjectMap, DomChangeListener, UiAlignment, UiCloseOverlay) {
+define(['DateUtil', 'Dom/Traverse', 'Dom/Util', 'EventHandler', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment', 'WoltLabSuite/Core/Ui/CloseOverlay'], function(DateUtil, DomTraverse, DomUtil, EventHandler, Language, ObjectMap, DomChangeListener, UiAlignment, UiCloseOverlay) {
        "use strict";
        
        var _didInit = false;
@@ -303,6 +303,14 @@ define(['DateUtil', 'EventHandler', 'Language', 'ObjectMap', 'Dom/ChangeListener
                                return;
                        }
                        
+                       var dialogContent = DomTraverse.parentByClass(input, 'dialogContent');
+                       if (dialogContent !== null) {
+                               if (!elDataBool(dialogContent, 'has-datepicker-scroll-listener')) {
+                                       dialogContent.addEventListener('scroll', this._onDialogScroll.bind(this));
+                                       elData(dialogContent, 'has-datepicker-scroll-listener', 1);
+                               }
+                       }
+                       
                        _input = input;
                        var data = _data.get(_input), date, value = elData(_input, 'value');
                        if (value) {
@@ -367,6 +375,44 @@ define(['DateUtil', 'EventHandler', 'Language', 'ObjectMap', 'Dom/ChangeListener
                        }
                },
                
+               /**
+                * Updates the position of the date picker in a dialog if the dialog content
+                * is scrolled.
+                * 
+                * @param       {Event}         event   scroll event
+                */
+               _onDialogScroll: function(event) {
+                       if (_input === null) {
+                               return;
+                       }
+                       
+                       var dialogContent = event.currentTarget;
+                       
+                       var offset = DomUtil.offset(_input);
+                       var dialogOffset = DomUtil.offset(dialogContent);
+                       
+                       // check if date picker input field is still (partially) visible
+                       if (offset.top + _input.clientHeight <= dialogOffset.top) {
+                               // top check
+                               this._close();
+                       }
+                       else if (offset.top >= dialogOffset.top + dialogContent.offsetHeight) {
+                               // bottom check
+                               this._close();
+                       }
+                       else if (offset.left <= dialogOffset.left) {
+                               // left check
+                               this._close();
+                       }
+                       else if (offset.left >= dialogOffset.left + dialogContent.offsetWidth) {
+                               // right check
+                               this._close();
+                       }
+                       else {
+                               UiAlignment.set(_datePicker, _input);
+                       }
+               },
+               
                /**
                 * Renders the full picker on init.
                 *