From e1a048dfd5b0e962397881fcbe2859a332cdfcd1 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 9 Sep 2016 12:05:21 +0200 Subject: [PATCH] Interactive dropdowns now stick during scroll --- wcfsetup/install/files/js/WCF.js | 57 +++++++++++-------- .../files/js/WoltLabSuite/Core/Dom/Util.js | 18 ++++++ .../WoltLabSuite/Core/Ui/Page/Header/Fixed.js | 20 ++++--- .../files/style/ui/dropdownInteractive.scss | 6 ++ 4 files changed, 68 insertions(+), 33 deletions(-) diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js index 299e3d81bc..e19b619bef 100755 --- a/wcfsetup/install/files/js/WCF.js +++ b/wcfsetup/install/files/js/WCF.js @@ -1010,12 +1010,6 @@ WCF.Dropdown.Interactive.Handler = { if (this._dropdownContainer === null) { this._dropdownContainer = $('
').appendTo(document.body); WCF.CloseOverlayHandler.addCallback('WCF.Dropdown.Interactive.Handler', $.proxy(this.closeAll, this)); - - window.addEventListener('scroll', (function (event) { - if (!document.documentElement.classList.contains('pageOverlayActive')) { - this.closeAll(); - } - }).bind(this)); } var $instance = new WCF.Dropdown.Interactive.Instance(this._dropdownContainer, triggerElement, identifier, options); @@ -1156,14 +1150,20 @@ WCF.Dropdown.Interactive.Instance = Class.extend({ this._pointer = $('').appendTo(this._container); - require(['Environment'], function(Environment) { - if (Environment.platform() === 'desktop' && $itemContainer !== null) { - // use jQuery scrollbar on desktop, mobile browsers have a similar display built-in - $itemContainer.perfectScrollbar({ - suppressScrollX: true - }); + require(['Environment', 'EventHandler'], (function(Environment, EventHandler) { + if (Environment.platform() === 'desktop') { + EventHandler.add('com.woltlab.wcf.pageHeaderFixed', 'change', (function (data) { + this.render(); + }).bind(this)); + + if ($itemContainer !== null) { + // use jQuery scrollbar on desktop, mobile browsers have a similar display built-in + $itemContainer.perfectScrollbar({ + suppressScrollX: true + }); + } } - }); + }).bind(this)); this._container.appendTo(dropdownContainer); }, @@ -1262,22 +1262,29 @@ WCF.Dropdown.Interactive.Instance = Class.extend({ * Renders the dropdown. */ render: function() { - if (window.matchMedia('(max-width: 767px)').matches) { - this._container.css({ - bottom: '', - left: '', - right: '', - top: elById('pageHeader').clientHeight + 'px' - }); - } - else { - require(['Ui/Alignment'], (function(UiAlignment) { + require(['Dom/Util', 'Ui/Alignment', 'Ui/Screen'], (function (DomUtil, UiAlignment, UiScreen) { + if (UiScreen.is('screen-lg')) { + this._container[0].classList.remove('interactiveDropdownFixed'); + UiAlignment.set(this._container[0], this._triggerElement[0], { horizontal: 'right', pointer: true }); - }).bind(this)); - } + + if (DomUtil.getFixedParent(this._triggerElement[0]) !== null) { + this._container[0].classList.add('interactiveDropdownFixed'); + this._container[0].style.setProperty('top', this._triggerElement[0].clientHeight + 'px', ''); + } + } + else { + this._container.css({ + bottom: '', + left: '', + right: '', + top: elById('pageHeader').clientHeight + 'px' + }); + } + }).bind(this)); }, /** diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js index da590cb25b..2b14943084 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js @@ -432,6 +432,24 @@ define(['Environment', 'StringUtil'], function(Environment, StringUtil) { */ isAtNodeEnd: function(element, ancestor) { return _isBoundaryNode(element, ancestor, 'next'); + }, + + /** + * Returns the first ancestor element with position fixed or null. + * + * @param {Element} element target element + * @returns {(Element|null)} first ancestor with position fixed or null + */ + getFixedParent: function (element) { + while (element && element !== document.body) { + if (window.getComputedStyle(element).getPropertyValue('position') === 'fixed') { + return element; + } + + element = element.offsetParent; + } + + return null; } }; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js index 2861b35bb9..90c9a085cc 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js @@ -134,14 +134,18 @@ define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen', _isFixed = (window.pageYOffset > _triggerHeight); - _pageHeader.classList[_isFixed ? 'add' : 'remove']('sticky'); - _pageHeaderContainer.classList[_isFixed ? 'add' : 'remove']('stickyPageHeader'); - - if (!_isFixed && wasFixed) { - _pageHeader.classList.remove('searchBarOpen'); - ['bottom', 'left', 'right', 'top'].forEach(function(propertyName) { - _searchInputContainer.style.removeProperty(propertyName); - }); + if (_isFixed !== wasFixed) { + _pageHeader.classList[_isFixed ? 'add' : 'remove']('sticky'); + _pageHeaderContainer.classList[_isFixed ? 'add' : 'remove']('stickyPageHeader'); + + EventHandler.fire('com.woltlab.wcf.pageHeaderFixed', 'change', { isFixed: _isFixed }); + + if (!_isFixed && wasFixed) { + _pageHeader.classList.remove('searchBarOpen'); + ['bottom', 'left', 'right', 'top'].forEach(function(propertyName) { + _searchInputContainer.style.removeProperty(propertyName); + }); + } } } }; diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss index 56f03b29b4..425519fd2d 100644 --- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss +++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss @@ -50,6 +50,12 @@ -webkit-overflow-scrolling: touch; } } + + @include screen-lg { + &.interactiveDropdownFixed { + position: fixed; + } + } } /* drop down header */ -- 2.20.1