wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js

   1 /**
   2  * Manages the sticky page header.
   3  *
   4  * @author      Alexander Ebert
   5  * @copyright   2001-2016 WoltLab GmbH
   6  * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
   7  * @module      WoltLabSuite/Core/Ui/Page/Header/Fixed
   8  */
   9 define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen', 'Ui/Scroll', 'Ui/SimpleDropdown'], function(Core, EventHandler, UiAlignment, UiCloseOverlay, UiScreen, UiScroll, UiSimpleDropdown) {
  10         "use strict";
  11
  12         var _callbackScroll = null;
  13         var _pageHeader, _pageHeaderContainer, _searchInput, _searchInputContainer;
  14         var _isMobile = false;
  15
  16         /**
  17          * @exports     WoltLabSuite/Core/Ui/Page/Header/Fixed
  18          */
  19         return {
  20                 /**
  21                  * Initializes the sticky page header handler.
  22                  */
  23                 init: function() {
  24                         _pageHeader = elById('pageHeader');
  25                         _pageHeaderContainer = elById('pageHeaderContainer');
  26
  27                         this._initSearchBar();
  28
  29                         UiScreen.on('screen-md-down', {
  30                                 match: function () { _isMobile = true; },
  31                                 unmatch: function () { _isMobile = false; },
  32                                 setup: function () { _isMobile = true; }
  33                         });
  34                 },
  35
  36                 /**
  37                  * Provides the collapsible search bar.
  38                  *
  39                  * @protected
  40                  */
  41                 _initSearchBar: function() {
  42                         var searchContainer = elById('pageHeaderSearch');
  43                         searchContainer.addEventListener(WCF_CLICK_EVENT, function(event) {
  44                                 event.stopPropagation();
  45                         });
  46
  47                         _searchInput = elById('pageHeaderSearchInput');
  48
  49                         var userPanelSearchButton = elById('userPanelSearchButton');
  50                         var pageHeaderFacade = elById('pageHeaderFacade');
  51
  52                         _searchInputContainer = elById('pageHeaderSearchInputContainer');
  53
  54                         var menu = elById('topMenu');
  55                         userPanelSearchButton.addEventListener(WCF_CLICK_EVENT, (function(event) {
  56                                 event.preventDefault();
  57                                 event.stopPropagation();
  58
  59                                 var facadeHeight = pageHeaderFacade.clientHeight;
  60                                 var scrollTop = window.pageYOffset;
  61                                 var skipScrollHandler = false;
  62                                 var isVisible = !_isMobile && (facadeHeight > scrollTop);
  63
  64                                 if (!isVisible && !_pageHeader.classList.contains('searchBarOpen')) {
  65                                         UiAlignment.set(_searchInputContainer, menu, {
  66                                                 horizontal: 'right'
  67                                         });
  68
  69                                         _pageHeader.classList.add('searchBarOpen');
  70                                         _searchInput.focus();
  71                                 }
  72                                 else if (!_isMobile) {
  73                                         if (scrollTop) {
  74                                                 // setting focus could lead to the search bar to be
  75                                                 // hidden behind the fixed panel
  76                                                 UiScroll.element(elById('top'), function () {
  77                                                         _searchInput.focus();
  78                                                 });
  79                                         }
  80                                         else {
  81                                                 _searchInput.focus();
  82                                         }
  83
  84                                         skipScrollHandler = true;
  85                                 }
  86
  87                                 WCF.Dropdown.Interactive.Handler.closeAll();
  88
  89                                 if (!skipScrollHandler && !_isMobile && _callbackScroll === null) {
  90                                         _callbackScroll = (function () {
  91                                                 if (pageHeaderFacade.clientHeight > window.pageYOffset) {
  92                                                         this._closeSearchBar();
  93                                                 }
  94                                         }).bind(this);
  95                                         window.addEventListener('scroll', _callbackScroll);
  96                                 }
  97                         }).bind(this));
  98
  99                         UiCloseOverlay.add('WoltLabSuite/Core/Ui/Page/Header/Fixed', (function() {
 100                                 if (_pageHeader.classList.contains('searchBarForceOpen')) return;
 101
 102                                 this._closeSearchBar();
 103                         }).bind(this));
 104
 105                         EventHandler.add('com.woltlab.wcf.MainMenuMobile', 'more', (function(data) {
 106                                 if (data.identifier === 'com.woltlab.wcf.search') {
 107                                         data.handler.close(true);
 108
 109                                         Core.triggerEvent(elById('pageHeaderSearchInput'), WCF_CLICK_EVENT);
 110                                 }
 111                         }).bind(this));
 112                 },
 113
 114                 _closeSearchBar: function () {
 115                         _pageHeader.classList.remove('searchBarOpen');
 116
 117                         ['bottom', 'left', 'right', 'top'].forEach(function(propertyName) {
 118                                 _searchInputContainer.style.removeProperty(propertyName);
 119                         });
 120
 121                         _searchInput.blur();
 122
 123                         if (_callbackScroll !== null) {
 124                                 window.removeEventListener('scroll', _callbackScroll);
 125                                 _callbackScroll = null;
 126                         }
 127                 }
 128         };
 129 });