Cleaned up redundant functions

diff --git a/ts/WoltLabSuite/Core/Ui/Search.ts b/ts/WoltLabSuite/Core/Ui/Search.ts
index 24268626130b694e446484eeb5befe2e16596999..11733a98a480a9a610845ccb7764b9b055d4d3e5 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Search.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search.ts
@@ -15,6 +15,7 @@ import * as UiScreen from "./Screen";
 import * as Environment from "../Environment";
 
 let _isMobile = false;
+let _scrollTop: number | undefined = undefined;
 
 const _isAcp = document.body.classList.contains("wcfAcp");
 const _pageHeader = document.getElementById("pageHeader")!;
@@ -35,16 +36,16 @@ function initSearchBar(): void {
     event.stopPropagation();
 
     if (_pageHeader.classList.contains("searchBarOpen")) {
-      closeSearchBar();
+      closeSearch();
     } else {
-      openSearchBar();
+      openSearch();
     }
   });
 
   UiCloseOverlay.add("WoltLabSuite/Core/Ui/Search", (origin, identifier) => {
     if (origin === Origin.DropDown) {
-      const button = document.getElementById("pageHeaderSearchTypeSelect");
-      if (button && button.dataset.target === identifier) {
+      const button = document.getElementById("pageHeaderSearchTypeSelect")!;
+      if (button.dataset.target === identifier) {
         return;
       }
     }
@@ -53,32 +54,29 @@ function initSearchBar(): void {
       return;
     }
 
-    closeSearchBar();
+    closeSearch();
   });
 }
 
 function initSearchButton(): void {
-  let scrollTop: number | null = null;
   const searchButton = document.getElementById("pageHeaderSearchMobile")!;
   searchButton.addEventListener("click", (event) => {
     event.preventDefault();
     event.stopPropagation();
 
     if (searchButton.getAttribute("aria-expanded") === "true") {
-      closeSearch(_pageHeaderSearch, scrollTop);
-      closeSearchBar();
+      closeSearch();
 
       searchButton.setAttribute("aria-expanded", "false");
     } else {
       if (Environment.platform() === "ios") {
-        scrollTop = document.body.scrollTop;
+        _scrollTop = document.body.scrollTop;
         UiScreen.scrollDisable();
       }
 
-      openSearchBar();
+      openSearch();
 
-      const pageHeader = document.getElementById("pageHeader")!;
-      _pageHeaderSearch.style.setProperty("top", `${pageHeader.offsetHeight}px`, "");
+      _pageHeaderSearch.style.setProperty("top", `${_pageHeader.offsetHeight}px`, "");
       _pageHeaderSearch.classList.add("open");
       _pageHeaderSearchInput.focus();
 
@@ -96,8 +94,7 @@ function initSearchButton(): void {
     if (event.target === _pageHeaderSearch) {
       event.preventDefault();
 
-      closeSearch(_pageHeaderSearch, scrollTop);
-      closeSearchBar();
+      closeSearch();
 
       searchButton.setAttribute("aria-expanded", "false");
     }
@@ -111,31 +108,13 @@ function initSearchButton(): void {
       }
     }
 
-    closeSearch(_pageHeaderSearch, scrollTop);
-    if (!_isAcp) {
-      closeSearchBar();
-    }
+    closeSearch();
 
     searchButton.setAttribute("aria-expanded", "false");
   });
 }
 
-function closeSearch(searchBar: HTMLElement, scrollTop: number | null): void {
-  if (searchBar) {
-    searchBar.classList.remove("open");
-  }
-
-  if (Environment.platform() === "ios") {
-    UiScreen.scrollEnable();
-
-    if (scrollTop !== null) {
-      document.body.scrollTop = scrollTop;
-      scrollTop = null;
-    }
-  }
-}
-
-function openSearchBar(): void {
+function openSearch(): void {
   UiCloseOverlay.execute();
 
   _pageHeader.classList.add("searchBarOpen");
@@ -152,18 +131,31 @@ function openSearchBar(): void {
   _pageHeaderSearchInput.focus();
 
   window.setTimeout(() => {
-    _pageHeaderSearchInput.selectionStart = _pageHeaderSearchInput.selectionEnd = _pageHeaderSearchInput.value.length;
+    // Places the caret at the end of the search input.
+    const length = _pageHeaderSearchInput.value.length;
+    _pageHeaderSearchInput.selectionStart = length;
+    _pageHeaderSearchInput.selectionEnd = length;
   }, 1);
 }
 
-function closeSearchBar(): void {
+function closeSearch(): void {
   _pageHeader.classList.remove("searchBarOpen");
+  _pageHeaderSearch.classList.remove("open");
   _userPanelSearchButton?.parentElement!.classList.remove("open");
 
   ["bottom", "left", "right", "top"].forEach((propertyName) => {
     _pageHeaderSearch.style.removeProperty(propertyName);
   });
 
+  if (Environment.platform() === "ios") {
+    UiScreen.scrollEnable();
+
+    if (_scrollTop !== undefined) {
+      document.body.scrollTop = _scrollTop;
+      _scrollTop = undefined;
+    }
+  }
+
   _pageHeaderSearchInput.blur();
 
   // close the scope selection
@@ -189,11 +181,12 @@ export function init(): void {
     },
     unmatch() {
       _isMobile = false;
+      _scrollTop = undefined;
     },
     setup() {
       _isMobile = true;
     },
   });
 
-  EventHandler.add("com.woltlab.wcf.Search", "close", closeSearchBar);
+  EventHandler.add("com.woltlab.wcf.Search", "close", closeSearch);
 }

diff --git a/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl b/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
index e45c51a1cceb890bc001fc6562a55e2489b44567..2ceea051f5b3ad3b8abd91433985e282555d766c 100644 (file)
--- a/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
@@ -5,7 +5,7 @@
 <div id="pageHeaderSearch" class="pageHeaderSearch" data-disable-auto-focus="true">
        <div class="pageHeaderSearchInputContainer">
                <div id="pageHeaderSearchType" class="pageHeaderSearchType dropdown">
-                       <a href="#" class="button dropdownToggle"><span class="pageHeaderSearchTypeLabel">{lang}wcf.search.type.everywhere{/lang}</span></a>
+                       <a href="#" class="button dropdownToggle" id="pageHeaderSearchTypeSelect"><span class="pageHeaderSearchTypeLabel">{lang}wcf.search.type.everywhere{/lang}</span></a>
                        <ul class="dropdownMenu">
                                <li><a href="#" data-provider-name="everywhere">{lang}wcf.search.type.everywhere{/lang}</a></li>
                                <li class="dropdownDivider"></li>
@@ -23,18 +23,3 @@
                </button>
        </div>
 </div>
-<script data-relocate="true">
-       (function() {
-               /*
-               elById('pageHeaderMobileSearch').addEventListener('click', function() {
-                       this.classList.toggle('active');
-                       
-                       if (elById('pageHeaderSearch').classList.toggle('open')) {
-                               window.setTimeout(function() {
-                                       elById('pageHeaderSearchInput').focus();
-                               }, 100);
-                       }
-               });
-               */
-       })();
-</script>

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
index 96e4a7ef961b5fcabe9e4b2954049d0c9e83e2e7..49fb9347adc56c4b88442b60e86c93f5379729db 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
@@ -17,6 +17,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
     UiScreen = (0, tslib_1.__importStar)(UiScreen);
     Environment = (0, tslib_1.__importStar)(Environment);
     let _isMobile = false;
+    let _scrollTop = undefined;
     const _isAcp = document.body.classList.contains("wcfAcp");
     const _pageHeader = document.getElementById("pageHeader");
     const _pageHeaderPanel = document.getElementById("pageHeaderPanel");
@@ -33,44 +34,41 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
             event.preventDefault();
             event.stopPropagation();
             if (_pageHeader.classList.contains("searchBarOpen")) {
-                closeSearchBar();
+                closeSearch();
             }
             else {
-                openSearchBar();
+                openSearch();
             }
         });
         CloseOverlay_1.default.add("WoltLabSuite/Core/Ui/Search", (origin, identifier) => {
             if (origin === CloseOverlay_1.Origin.DropDown) {
                 const button = document.getElementById("pageHeaderSearchTypeSelect");
-                if (button && button.dataset.target === identifier) {
+                if (button.dataset.target === identifier) {
                     return;
                 }
             }
             if (_pageHeader.classList.contains("searchBarForceOpen")) {
                 return;
             }
-            closeSearchBar();
+            closeSearch();
         });
     }
     function initSearchButton() {
-        let scrollTop = null;
         const searchButton = document.getElementById("pageHeaderSearchMobile");
         searchButton.addEventListener("click", (event) => {
             event.preventDefault();
             event.stopPropagation();
             if (searchButton.getAttribute("aria-expanded") === "true") {
-                closeSearch(_pageHeaderSearch, scrollTop);
-                closeSearchBar();
+                closeSearch();
                 searchButton.setAttribute("aria-expanded", "false");
             }
             else {
                 if (Environment.platform() === "ios") {
-                    scrollTop = document.body.scrollTop;
+                    _scrollTop = document.body.scrollTop;
                     UiScreen.scrollDisable();
                 }
-                openSearchBar();
-                const pageHeader = document.getElementById("pageHeader");
-                _pageHeaderSearch.style.setProperty("top", `${pageHeader.offsetHeight}px`, "");
+                openSearch();
+                _pageHeaderSearch.style.setProperty("top", `${_pageHeader.offsetHeight}px`, "");
                 _pageHeaderSearch.classList.add("open");
                 _pageHeaderSearchInput.focus();
                 if (Environment.platform() === "ios") {
@@ -83,8 +81,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
             event.stopPropagation();
             if (event.target === _pageHeaderSearch) {
                 event.preventDefault();
-                closeSearch(_pageHeaderSearch, scrollTop);
-                closeSearchBar();
+                closeSearch();
                 searchButton.setAttribute("aria-expanded", "false");
             }
         });
@@ -95,26 +92,11 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
                     return;
                 }
             }
-            closeSearch(_pageHeaderSearch, scrollTop);
-            if (!_isAcp) {
-                closeSearchBar();
-            }
+            closeSearch();
             searchButton.setAttribute("aria-expanded", "false");
         });
     }
-    function closeSearch(searchBar, scrollTop) {
-        if (searchBar) {
-            searchBar.classList.remove("open");
-        }
-        if (Environment.platform() === "ios") {
-            UiScreen.scrollEnable();
-            if (scrollTop !== null) {
-                document.body.scrollTop = scrollTop;
-                scrollTop = null;
-            }
-        }
-    }
-    function openSearchBar() {
+    function openSearch() {
         CloseOverlay_1.default.execute();
         _pageHeader.classList.add("searchBarOpen");
         _userPanelSearchButton === null || _userPanelSearchButton === void 0 ? void 0 : _userPanelSearchButton.parentElement.classList.add("open");
@@ -127,15 +109,26 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
         _pageHeaderSearch.style.setProperty("top", `${_pageHeaderPanel.clientHeight}px`, "");
         _pageHeaderSearchInput.focus();
         window.setTimeout(() => {
-            _pageHeaderSearchInput.selectionStart = _pageHeaderSearchInput.selectionEnd = _pageHeaderSearchInput.value.length;
+            // Places the caret at the end of the search input.
+            const length = _pageHeaderSearchInput.value.length;
+            _pageHeaderSearchInput.selectionStart = length;
+            _pageHeaderSearchInput.selectionEnd = length;
         }, 1);
     }
-    function closeSearchBar() {
+    function closeSearch() {
         _pageHeader.classList.remove("searchBarOpen");
+        _pageHeaderSearch.classList.remove("open");
         _userPanelSearchButton === null || _userPanelSearchButton === void 0 ? void 0 : _userPanelSearchButton.parentElement.classList.remove("open");
         ["bottom", "left", "right", "top"].forEach((propertyName) => {
             _pageHeaderSearch.style.removeProperty(propertyName);
         });
+        if (Environment.platform() === "ios") {
+            UiScreen.scrollEnable();
+            if (_scrollTop !== undefined) {
+                document.body.scrollTop = _scrollTop;
+                _scrollTop = undefined;
+            }
+        }
         _pageHeaderSearchInput.blur();
         // close the scope selection
         const scope = _pageHeaderSearch.querySelector(".pageHeaderSearchType");
@@ -157,12 +150,13 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
             },
             unmatch() {
                 _isMobile = false;
+                _scrollTop = undefined;
             },
             setup() {
                 _isMobile = true;
             },
         });
-        EventHandler.add("com.woltlab.wcf.Search", "close", closeSearchBar);
+        EventHandler.add("com.woltlab.wcf.Search", "close", closeSearch);
     }
     exports.init = init;
 });