Workaround for the search bar in the admin panel
authorAlexander Ebert <ebert@woltlab.com>
Fri, 31 Dec 2021 14:14:52 +0000 (15:14 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Fri, 31 Dec 2021 14:14:52 +0000 (15:14 +0100)
ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.ts
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js

index ae30b0f8a9cd9b7f45158461e2260d674e8459d5..0212185fc8f818a54275546dc4a1218a0f919bc2 100644 (file)
@@ -15,24 +15,19 @@ import * as UiScreen from "../../Screen";
 
 let _isMobile = false;
 
-let _pageHeader: HTMLElement;
-let _pageHeaderPanel: HTMLElement;
-let _pageHeaderSearch: HTMLElement;
-let _searchInput: HTMLInputElement;
-let _topMenu: HTMLElement;
-let _userPanelSearchButton: HTMLElement;
+const _pageHeader = document.getElementById("pageHeader")!;
+const _pageHeaderPanel = document.getElementById("pageHeaderPanel")!;
+const _pageHeaderSearch = document.getElementById("pageHeaderSearch")!;
+const _searchInput = document.getElementById("pageHeaderSearchInput") as HTMLInputElement;
+const _topMenu = document.getElementById("topMenu")!;
+let _userPanelSearchButton: HTMLElement | null = null;
 
 /**
  * Provides the collapsible search bar.
  */
 function initSearchBar(): void {
-  _pageHeaderSearch = document.getElementById("pageHeaderSearch")!;
   _pageHeaderSearch.addEventListener("click", (ev) => ev.stopPropagation());
 
-  _pageHeaderPanel = document.getElementById("pageHeaderPanel")!;
-  _searchInput = document.getElementById("pageHeaderSearchInput") as HTMLInputElement;
-  _topMenu = document.getElementById("topMenu")!;
-
   _userPanelSearchButton = document.getElementById("userPanelSearchButton")!;
   _userPanelSearchButton.addEventListener("click", (event) => {
     event.preventDefault();
@@ -59,14 +54,6 @@ function initSearchBar(): void {
 
     closeSearchBar();
   });
-
-  EventHandler.add("com.woltlab.wcf.MainMenuMobile", "more", (data) => {
-    if (data.identifier === "com.woltlab.wcf.search") {
-      data.handler.close(true);
-
-      _userPanelSearchButton.click();
-    }
-  });
 }
 
 /**
@@ -76,7 +63,7 @@ export function openSearchBar(): void {
   UiCloseOverlay.execute();
 
   _pageHeader.classList.add("searchBarOpen");
-  _userPanelSearchButton.parentElement!.classList.add("open");
+  _userPanelSearchButton?.parentElement!.classList.add("open");
 
   if (!_isMobile) {
     // calculate value for `right` on desktop
@@ -98,7 +85,7 @@ export function openSearchBar(): void {
  */
 export function closeSearchBar(): void {
   _pageHeader.classList.remove("searchBarOpen");
-  _userPanelSearchButton.parentElement!.classList.remove("open");
+  _userPanelSearchButton?.parentElement!.classList.remove("open");
 
   ["bottom", "left", "right", "top"].forEach((propertyName) => {
     _pageHeaderSearch.style.removeProperty(propertyName);
@@ -115,8 +102,6 @@ export function closeSearchBar(): void {
  * Initializes the sticky page header handler.
  */
 export function init(): void {
-  _pageHeader = document.getElementById("pageHeader")!;
-
   initSearchBar();
 
   UiScreen.on("screen-md-down", {
index 2ffd9d2b3924f482465dbdc1dd98fbdedd5b9be2..c865afdc3ca88e98d58f319d555113dbfb38356e 100644 (file)
@@ -16,21 +16,17 @@ define(["require", "exports", "tslib", "../../../Event/Handler", "../../Alignmen
     Simple_1 = (0, tslib_1.__importDefault)(Simple_1);
     UiScreen = (0, tslib_1.__importStar)(UiScreen);
     let _isMobile = false;
-    let _pageHeader;
-    let _pageHeaderPanel;
-    let _pageHeaderSearch;
-    let _searchInput;
-    let _topMenu;
-    let _userPanelSearchButton;
+    const _pageHeader = document.getElementById("pageHeader");
+    const _pageHeaderPanel = document.getElementById("pageHeaderPanel");
+    const _pageHeaderSearch = document.getElementById("pageHeaderSearch");
+    const _searchInput = document.getElementById("pageHeaderSearchInput");
+    const _topMenu = document.getElementById("topMenu");
+    let _userPanelSearchButton = null;
     /**
      * Provides the collapsible search bar.
      */
     function initSearchBar() {
-        _pageHeaderSearch = document.getElementById("pageHeaderSearch");
         _pageHeaderSearch.addEventListener("click", (ev) => ev.stopPropagation());
-        _pageHeaderPanel = document.getElementById("pageHeaderPanel");
-        _searchInput = document.getElementById("pageHeaderSearchInput");
-        _topMenu = document.getElementById("topMenu");
         _userPanelSearchButton = document.getElementById("userPanelSearchButton");
         _userPanelSearchButton.addEventListener("click", (event) => {
             event.preventDefault();
@@ -54,12 +50,6 @@ define(["require", "exports", "tslib", "../../../Event/Handler", "../../Alignmen
             }
             closeSearchBar();
         });
-        EventHandler.add("com.woltlab.wcf.MainMenuMobile", "more", (data) => {
-            if (data.identifier === "com.woltlab.wcf.search") {
-                data.handler.close(true);
-                _userPanelSearchButton.click();
-            }
-        });
     }
     /**
      * Opens the search bar.
@@ -67,7 +57,7 @@ define(["require", "exports", "tslib", "../../../Event/Handler", "../../Alignmen
     function openSearchBar() {
         CloseOverlay_1.default.execute();
         _pageHeader.classList.add("searchBarOpen");
-        _userPanelSearchButton.parentElement.classList.add("open");
+        _userPanelSearchButton === null || _userPanelSearchButton === void 0 ? void 0 : _userPanelSearchButton.parentElement.classList.add("open");
         if (!_isMobile) {
             // calculate value for `right` on desktop
             UiAlignment.set(_pageHeaderSearch, _topMenu, {
@@ -86,7 +76,7 @@ define(["require", "exports", "tslib", "../../../Event/Handler", "../../Alignmen
      */
     function closeSearchBar() {
         _pageHeader.classList.remove("searchBarOpen");
-        _userPanelSearchButton.parentElement.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);
         });
@@ -100,7 +90,6 @@ define(["require", "exports", "tslib", "../../../Event/Handler", "../../Alignmen
      * Initializes the sticky page header handler.
      */
     function init() {
-        _pageHeader = document.getElementById("pageHeader");
         initSearchBar();
         UiScreen.on("screen-md-down", {
             match() {