From dfa8dcfa39d35ce1983fe1137f1e28444eb0a122 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 20 Dec 2021 15:43:23 +0100 Subject: [PATCH] Improved the behavior of the search overlay --- .../templates/pageHeaderSearch.tpl | 2 +- ts/WoltLabSuite/Core/Ui/CloseOverlay.ts | 56 ++++++++++++------- ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts | 16 +++--- ts/WoltLabSuite/Core/Ui/Mobile.ts | 13 ++++- ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.ts | 11 +++- ts/WoltLabSuite/Core/Ui/Search/Page.ts | 4 ++ .../js/WoltLabSuite/Core/Ui/CloseOverlay.js | 47 ++++++++++------ .../WoltLabSuite/Core/Ui/Dropdown/Simple.js | 16 +++--- .../files/js/WoltLabSuite/Core/Ui/Mobile.js | 11 +++- .../WoltLabSuite/Core/Ui/Page/Header/Fixed.js | 10 +++- .../js/WoltLabSuite/Core/Ui/Search/Page.js | 3 + 11 files changed, 128 insertions(+), 61 deletions(-) diff --git a/com.woltlab.wcf/templates/pageHeaderSearch.tpl b/com.woltlab.wcf/templates/pageHeaderSearch.tpl index 0483f63b8d..5b4a44d451 100644 --- a/com.woltlab.wcf/templates/pageHeaderSearch.tpl +++ b/com.woltlab.wcf/templates/pageHeaderSearch.tpl @@ -28,7 +28,7 @@
- {@$__searchTypeLabel} + {@$__searchTypeLabel}
  • {lang}wcf.search.type.everywhere{/lang}
  • diff --git a/ts/WoltLabSuite/Core/Ui/CloseOverlay.ts b/ts/WoltLabSuite/Core/Ui/CloseOverlay.ts index d01867f9f2..980022ed87 100644 --- a/ts/WoltLabSuite/Core/Ui/CloseOverlay.ts +++ b/ts/WoltLabSuite/Core/Ui/CloseOverlay.ts @@ -12,25 +12,41 @@ import CallbackList from "../CallbackList"; const _callbackList = new CallbackList(); -const UiCloseOverlay = { - /** - * @see CallbackList.add - */ - add: _callbackList.add.bind(_callbackList), - - /** - * @see CallbackList.remove - */ - remove: _callbackList.remove.bind(_callbackList), - - /** - * Invokes all registered callbacks. - */ - execute(): void { - _callbackList.forEach(null, (callback) => callback()); - }, -}; +export enum Origin { + Document = "document", + DropDown = "dropdown", +} + +type Callback = (origin?: string | Origin, identifier?: string) => void; + +let hasGlobalListener = false; +export function add(identifier: string, callback: Callback): void { + _callbackList.add(identifier, callback); + + if (!hasGlobalListener) { + document.body.addEventListener("click", () => { + execute(Origin.Document); + }); -document.body.addEventListener("click", () => UiCloseOverlay.execute()); + hasGlobalListener = true; + } +} -export = UiCloseOverlay; +export function remove(identifier: string): void { + _callbackList.remove(identifier); +} + +export function execute(): void; +export function execute(origin: string | Origin): void; +export function execute(origin: string | Origin, identifier: string): void; +export function execute(origin?: string | Origin, identifier?: string): void { + _callbackList.forEach(null, (callback) => callback(origin, identifier)); +} + +// This is required for the backwards compatibility with WSC <= 5.4. +const UiCloseOverlay = { + add, + remove, + execute, +}; +export default UiCloseOverlay; diff --git a/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts b/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts index fa5e40cb66..41e94ad829 100644 --- a/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts +++ b/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts @@ -14,7 +14,7 @@ import DomChangeListener from "../../Dom/Change/Listener"; import * as DomTraverse from "../../Dom/Traverse"; import DomUtil from "../../Dom/Util"; import * as UiAlignment from "../Alignment"; -import UiCloseOverlay from "../CloseOverlay"; +import UiCloseOverlay, { Origin } from "../CloseOverlay"; import { AllowFlip } from "../Alignment"; import { NotificationAction, NotificationCallback } from "./Data"; @@ -95,13 +95,6 @@ function toggle( alternateElement?: HTMLElement, disableAutoFocus?: boolean, ): boolean { - _blockCloseAll = true; - try { - UiCloseOverlay.execute(); - } finally { - _blockCloseAll = false; - } - let isKeyboardClick = false; if (event !== null) { event.preventDefault(); @@ -120,6 +113,13 @@ function toggle( } } + _blockCloseAll = true; + try { + UiCloseOverlay.execute(Origin.DropDown, targetId!); + } finally { + _blockCloseAll = false; + } + let dropdown = _dropdowns.get(targetId!) as HTMLElement; let preventToggle = false; if (dropdown !== undefined) { diff --git a/ts/WoltLabSuite/Core/Ui/Mobile.ts b/ts/WoltLabSuite/Core/Ui/Mobile.ts index 642dc7db03..2f98c216ea 100644 --- a/ts/WoltLabSuite/Core/Ui/Mobile.ts +++ b/ts/WoltLabSuite/Core/Ui/Mobile.ts @@ -11,7 +11,7 @@ import * as Core from "../Core"; import DomChangeListener from "../Dom/Change/Listener"; import * as Environment from "../Environment"; import * as UiAlignment from "./Alignment"; -import UiCloseOverlay from "./CloseOverlay"; +import UiCloseOverlay, { Origin } from "./CloseOverlay"; import * as UiDropdownReusable from "./Dropdown/Reusable"; import { closeSearchBar, openSearchBar } from "./Page/Header/Fixed"; import { PageMenuMain } from "./Page/Menu/Main"; @@ -82,6 +82,8 @@ function initSearchButton(): void { }); searchBar.addEventListener("click", (event) => { + event.stopPropagation(); + if (event.target === searchBar) { event.preventDefault(); @@ -92,7 +94,14 @@ function initSearchButton(): void { } }); - UiCloseOverlay.add("WoltLabSuite/Core/Ui/MobileSearch", () => { + UiCloseOverlay.add("WoltLabSuite/Core/Ui/MobileSearch", (origin, identifier) => { + if (origin === Origin.DropDown) { + const button = document.getElementById("pageHeaderSearchTypeSelect")!; + if (button.dataset.target === identifier) { + return; + } + } + closeSearch(searchBar, scrollTop); closeSearchBar(); diff --git a/ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.ts b/ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.ts index 1295f3396d..ae30b0f8a9 100644 --- a/ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.ts +++ b/ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.ts @@ -9,7 +9,7 @@ import * as EventHandler from "../../../Event/Handler"; import * as UiAlignment from "../../Alignment"; -import UiCloseOverlay from "../../CloseOverlay"; +import UiCloseOverlay, { Origin } from "../../CloseOverlay"; import UiDropdownSimple from "../../Dropdown/Simple"; import * as UiScreen from "../../Screen"; @@ -45,7 +45,14 @@ function initSearchBar(): void { } }); - UiCloseOverlay.add("WoltLabSuite/Core/Ui/Page/Header/Fixed", () => { + UiCloseOverlay.add("WoltLabSuite/Core/Ui/Page/Header/Fixed", (origin, identifier) => { + if (origin === Origin.DropDown) { + const button = document.getElementById("pageHeaderSearchTypeSelect")!; + if (button.dataset.target === identifier) { + return; + } + } + if (_pageHeader.classList.contains("searchBarForceOpen")) { return; } diff --git a/ts/WoltLabSuite/Core/Ui/Search/Page.ts b/ts/WoltLabSuite/Core/Ui/Search/Page.ts index ac90849511..2a71f01cc0 100644 --- a/ts/WoltLabSuite/Core/Ui/Search/Page.ts +++ b/ts/WoltLabSuite/Core/Ui/Search/Page.ts @@ -7,6 +7,10 @@ import UiSearchInput from "./Input"; function click(event: MouseEvent): void { event.preventDefault(); + event.stopPropagation(); + + const searchType = document.querySelector(".pageHeaderSearchType") as HTMLElement; + UiDropdownSimple.close(DomUtil.identify(searchType))!; const pageHeader = document.getElementById("pageHeader") as HTMLElement; pageHeader.classList.add("searchBarForceOpen"); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/CloseOverlay.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/CloseOverlay.js index b52bcbf010..5d134dda6f 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/CloseOverlay.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/CloseOverlay.js @@ -9,24 +9,39 @@ */ define(["require", "exports", "tslib", "../CallbackList"], function (require, exports, tslib_1, CallbackList_1) { "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.execute = exports.remove = exports.add = exports.Origin = void 0; CallbackList_1 = (0, tslib_1.__importDefault)(CallbackList_1); const _callbackList = new CallbackList_1.default(); + var Origin; + (function (Origin) { + Origin["Document"] = "document"; + Origin["DropDown"] = "dropdown"; + })(Origin = exports.Origin || (exports.Origin = {})); + let hasGlobalListener = false; + function add(identifier, callback) { + _callbackList.add(identifier, callback); + if (!hasGlobalListener) { + document.body.addEventListener("click", () => { + execute(Origin.Document); + }); + hasGlobalListener = true; + } + } + exports.add = add; + function remove(identifier) { + _callbackList.remove(identifier); + } + exports.remove = remove; + function execute(origin, identifier) { + _callbackList.forEach(null, (callback) => callback(origin, identifier)); + } + exports.execute = execute; + // This is required for the backwards compatibility with WSC <= 5.4. const UiCloseOverlay = { - /** - * @see CallbackList.add - */ - add: _callbackList.add.bind(_callbackList), - /** - * @see CallbackList.remove - */ - remove: _callbackList.remove.bind(_callbackList), - /** - * Invokes all registered callbacks. - */ - execute() { - _callbackList.forEach(null, (callback) => callback()); - }, + add, + remove, + execute, }; - document.body.addEventListener("click", () => UiCloseOverlay.execute()); - return UiCloseOverlay; + exports.default = UiCloseOverlay; }); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js index e90c2c7d0a..e1167c2d07 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js @@ -15,7 +15,7 @@ define(["require", "exports", "tslib", "../../CallbackList", "../../Core", "../. DomTraverse = (0, tslib_1.__importStar)(DomTraverse); Util_1 = (0, tslib_1.__importDefault)(Util_1); UiAlignment = (0, tslib_1.__importStar)(UiAlignment); - CloseOverlay_1 = (0, tslib_1.__importDefault)(CloseOverlay_1); + CloseOverlay_1 = (0, tslib_1.__importStar)(CloseOverlay_1); let _availableDropdowns; const _callbacks = new CallbackList_1.default(); let _didInit = false; @@ -87,13 +87,6 @@ define(["require", "exports", "tslib", "../../CallbackList", "../../Core", "../. * Toggles the drop-down's state between open and close. */ function toggle(event, targetId, alternateElement, disableAutoFocus) { - _blockCloseAll = true; - try { - CloseOverlay_1.default.execute(); - } - finally { - _blockCloseAll = false; - } let isKeyboardClick = false; if (event !== null) { event.preventDefault(); @@ -110,6 +103,13 @@ define(["require", "exports", "tslib", "../../CallbackList", "../../Core", "../. } } } + _blockCloseAll = true; + try { + CloseOverlay_1.default.execute(CloseOverlay_1.Origin.DropDown, targetId); + } + finally { + _blockCloseAll = false; + } let dropdown = _dropdowns.get(targetId); let preventToggle = false; if (dropdown !== undefined) { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js index 32bb9478f5..87a5b344e3 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js @@ -14,7 +14,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "../ Listener_1 = (0, tslib_1.__importDefault)(Listener_1); Environment = (0, tslib_1.__importStar)(Environment); UiAlignment = (0, tslib_1.__importStar)(UiAlignment); - CloseOverlay_1 = (0, tslib_1.__importDefault)(CloseOverlay_1); + CloseOverlay_1 = (0, tslib_1.__importStar)(CloseOverlay_1); UiDropdownReusable = (0, tslib_1.__importStar)(UiDropdownReusable); UiScreen = (0, tslib_1.__importStar)(UiScreen); let _dropdownMenu = null; @@ -70,6 +70,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "../ } }); searchBar.addEventListener("click", (event) => { + event.stopPropagation(); if (event.target === searchBar) { event.preventDefault(); closeSearch(searchBar, scrollTop); @@ -77,7 +78,13 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "../ searchButton.setAttribute("aria-expanded", "false"); } }); - CloseOverlay_1.default.add("WoltLabSuite/Core/Ui/MobileSearch", () => { + CloseOverlay_1.default.add("WoltLabSuite/Core/Ui/MobileSearch", (origin, identifier) => { + if (origin === CloseOverlay_1.Origin.DropDown) { + const button = document.getElementById("pageHeaderSearchTypeSelect"); + if (button.dataset.target === identifier) { + return; + } + } closeSearch(searchBar, scrollTop); (0, Fixed_1.closeSearchBar)(); searchButton.setAttribute("aria-expanded", "false"); 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 b55cdeff55..2ffd9d2b39 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 @@ -12,7 +12,7 @@ define(["require", "exports", "tslib", "../../../Event/Handler", "../../Alignmen exports.init = exports.closeSearchBar = exports.openSearchBar = void 0; EventHandler = (0, tslib_1.__importStar)(EventHandler); UiAlignment = (0, tslib_1.__importStar)(UiAlignment); - CloseOverlay_1 = (0, tslib_1.__importDefault)(CloseOverlay_1); + CloseOverlay_1 = (0, tslib_1.__importStar)(CloseOverlay_1); Simple_1 = (0, tslib_1.__importDefault)(Simple_1); UiScreen = (0, tslib_1.__importStar)(UiScreen); let _isMobile = false; @@ -42,7 +42,13 @@ define(["require", "exports", "tslib", "../../../Event/Handler", "../../Alignmen openSearchBar(); } }); - CloseOverlay_1.default.add("WoltLabSuite/Core/Ui/Page/Header/Fixed", () => { + CloseOverlay_1.default.add("WoltLabSuite/Core/Ui/Page/Header/Fixed", (origin, identifier) => { + if (origin === CloseOverlay_1.Origin.DropDown) { + const button = document.getElementById("pageHeaderSearchTypeSelect"); + if (button.dataset.target === identifier) { + return; + } + } if (_pageHeader.classList.contains("searchBarForceOpen")) { return; } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js index 77665bb2f7..382a4dbed0 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js @@ -10,6 +10,9 @@ define(["require", "exports", "tslib", "../../Core", "../../Dom/Traverse", "../. Input_1 = (0, tslib_1.__importDefault)(Input_1); function click(event) { event.preventDefault(); + event.stopPropagation(); + const searchType = document.querySelector(".pageHeaderSearchType"); + Simple_1.default.close(Util_1.default.identify(searchType)); const pageHeader = document.getElementById("pageHeader"); pageHeader.classList.add("searchBarForceOpen"); window.setTimeout(() => { -- 2.20.1