From 8ddb1635d30151dee4da896c74b35859f4695e7e Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 15 Feb 2016 17:13:26 +0100
Subject: [PATCH] Improved sticky page header handling

---
 com.woltlab.wcf/templates/pageHeader.tpl      | 16 +---
 .../templates/pageHeaderSearch.tpl            |  8 +-
 .../js/WoltLab/WCF/Ui/Page/Header/Fixed.js    | 77 +++++++++++++++++++
 .../files/style/layout/pageHeaderSticky.scss  | 11 +++
 4 files changed, 95 insertions(+), 17 deletions(-)
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js

diff --git a/com.woltlab.wcf/templates/pageHeader.tpl b/com.woltlab.wcf/templates/pageHeader.tpl
index a54597f2fa..c1f0892f9d 100644
--- a/com.woltlab.wcf/templates/pageHeader.tpl
+++ b/com.woltlab.wcf/templates/pageHeader.tpl
@@ -1,4 +1,4 @@
-<div class="pageHeaderContainer">
+<div id="pageHeaderContainer" class="pageHeaderContainer">
 	<header id="pageHeader" class="pageHeader">
 		<div>
 			<div class="layoutBoundary">
@@ -13,17 +13,9 @@
 		</div>
 		
 		<script data-relocate="true">
-			var header = elById('pageHeader');
-			var pageHeaderContainer = elBySel('.pageHeaderContainer');
-			header.style.setProperty('min-height', header.clientHeight + 'px');
-			
-			function stickyHeader() {
-				header.classList[(document.body.scrollTop > 50) ? 'add' : 'remove']('sticky');
-				pageHeaderContainer.classList[(document.body.scrollTop > 50) ? 'add' : 'remove']('stickyPageHeader');
-			}
-			
-			stickyHeader();
-			window.addEventListener('scroll', stickyHeader);
+			require(['WoltLab/WCF/Ui/Page/Header/Fixed'], function(UiPageHeaderFixed) {
+				UiPageHeaderFixed.init();
+			});
 		</script>
 	</header>
 	
diff --git a/com.woltlab.wcf/templates/pageHeaderSearch.tpl b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
index d9d212502e..9189baf74a 100644
--- a/com.woltlab.wcf/templates/pageHeaderSearch.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
@@ -5,9 +5,9 @@
 
 {event name='settings'}
 
-<div id="pageHeaderSearch" class="pageHeaderSearch" data-disable-auto-focus="true">
+<div id="pageHeaderSearch" class="pageHeaderSearch">
 	<form method="post" action="{@$__searchFormLink}">
-		<div class="pageHeaderSearchInputContainer dropdown">
+		<div id="pageHeaderSearchInputContainer" class="pageHeaderSearchInputContainer dropdown" data-disable-auto-focus="true" data-dropdown-prevent-toggle="true">
 			<input type="search" name="q" id="pageHeaderSearchInput" class="pageHeaderSearchInput dropdownToggle" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" data-toggle="search" />
 			
 			<ul class="dropdownMenu">
@@ -34,10 +34,8 @@
 
 {if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
 	<script data-relocate="true">
-		//<![CDATA[
 		$(function() {
-			new WCF.Search.Message.SearchArea($('#pageHeaderSearch'));
+			new WCF.Search.Message.SearchArea($('#pageHeaderSearchInputContainer'));
 		});
-		//]]>
 	</script>
 {/if}
\ No newline at end of file
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js
new file mode 100644
index 0000000000..bebf4b538a
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js
@@ -0,0 +1,77 @@
+/**
+ * Manages the sticky page header.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2016 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/Ui/Page/Header/Fixed
+ */
+define(['Ui/CloseOverlay', 'Ui/SimpleDropdown'], function(UiCloseOverlay, UiSimpleDropdown) {
+	"use strict";
+	
+	var _pageHeader, _pageHeaderContainer, _pageHeaderSearchInputContainer, _isFixed = false;
+	
+	/**
+	 * @exports     WoltLab/WCF/Ui/Page/Header/Fixed
+	 */
+	return {
+		/**
+		 * Initializes the sticky page header handler.
+		 */
+		init: function() {
+			_pageHeader = elById('pageHeader');
+			_pageHeaderContainer = elById('pageHeaderContainer');
+			_pageHeaderSearchInputContainer = elById('pageHeaderSearchInputContainer');
+			
+			this._initStickyPageHeader();
+			this._initSearchBar();
+		},
+		
+		/**
+		 * Enforces a min-height for the original header's location to prevent collapsing
+		 * when setting the header to `position: fixed`.
+		 * 
+		 * @protected
+		 */
+		_initStickyPageHeader: function() {
+			_pageHeader.style.setProperty('min-height', _pageHeader.clientHeight + 'px');
+			
+			this._scroll();
+			window.addEventListener('scroll', this._scroll.bind(this));
+		},
+		
+		/**
+		 * Provides the collapsible search bar.
+		 * 
+		 * @protected
+		 */
+		_initSearchBar: function() {
+			var searchInput = elById('pageHeaderSearchInput');
+			
+			UiSimpleDropdown.registerCallback('pageHeaderSearchInputContainer', function() {
+				if (_isFixed && !_pageHeaderSearchInputContainer.classList.contains('open')) {
+					_pageHeaderSearchInputContainer.classList.add('open');
+					searchInput.focus();
+				}
+			});
+			
+			UiCloseOverlay.add('WoltLab/WCF/Ui/Page/Header/Fixed', function() {
+				_pageHeaderSearchInputContainer.classList.remove('open');
+			});
+		},
+		
+		/**
+		 * Updates the page header state after scrolling.
+		 * 
+		 * @protected
+		 */
+		_scroll: function() {
+			_isFixed = (document.body.scrollTop > 50);
+			
+			_pageHeader.classList[_isFixed ? 'add' : 'remove']('sticky');
+			_pageHeaderContainer.classList[_isFixed ? 'add' : 'remove']('stickyPageHeader');
+			
+			_pageHeaderSearchInputContainer.classList.remove('open');
+		}
+	};
+});
diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index f8072ea697..06aeb8ae7c 100644
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -55,4 +55,15 @@
 		flex: 0 auto;
 		order: 4;
 	}
+	
+	.pageHeaderSearchInputContainer:not(.open) {
+		> .pageHeaderSearchInput {
+			padding-right: 20px;
+			width: 20px;
+		}
+		
+		> .pageHeaderSearchInputButton {
+			pointer-events: none;
+		}
+	}
 }
-- 
2.20.1