From d3e25778c151a552336e83192ff38d315613b09c Mon Sep 17 00:00:00 2001 From: Matthias Schmidt Date: Tue, 5 Jan 2021 18:43:24 +0100 Subject: [PATCH] Convert `Media/Manager/Search` to TypeScript --- .../WoltLabSuite/Core/Media/Manager/Search.js | 163 +++++++-------- .../WoltLabSuite/Core/Media/Manager/Search.js | 188 ------------------ .../WoltLabSuite/Core/Media/Manager/Search.ts | 183 +++++++++++++++++ 3 files changed, 252 insertions(+), 282 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js index c1cc58d0e3..66c323b3b2 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js @@ -1,94 +1,70 @@ /** * Provides the media search for the media manager. * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Media/Manager/Search + * @author Matthias Schmidt + * @copyright 2001-2021 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Media/Manager/Search */ -define(['Ajax', 'Core', 'Dom/Traverse', 'Dom/Util', 'EventKey', 'Language', 'Ui/SimpleDropdown'], function (Ajax, Core, DomTraverse, DomUtil, EventKey, Language, UiSimpleDropdown) { +define(["require", "exports", "tslib", "../../Dom/Traverse", "../../Language", "../../Ajax", "../../Core"], function (require, exports, tslib_1, DomTraverse, Language, Ajax, Core) { "use strict"; - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function () { }; - Fake.prototype = { - _ajaxSetup: function () { }, - _ajaxSuccess: function () { }, - _cancelSearch: function () { }, - _keyPress: function () { }, - _search: function () { }, - hideSearch: function () { }, - resetSearch: function () { }, - showSearch: function () { } - }; - return Fake; - } - /** - * @constructor - */ - function MediaManagerSearch(mediaManager) { - this._mediaManager = mediaManager; - this._searchMode = false; - this._searchContainer = elByClass('mediaManagerSearch', mediaManager.getDialog())[0]; - this._input = elByClass('mediaManagerSearchField', mediaManager.getDialog())[0]; - this._input.addEventListener('keypress', this._keyPress.bind(this)); - this._cancelButton = elByClass('mediaManagerSearchCancelButton', mediaManager.getDialog())[0]; - this._cancelButton.addEventListener('click', this._cancelSearch.bind(this)); - } - MediaManagerSearch.prototype = { - /** - * Returns the data for Ajax to setup the Ajax/Request object. - * - * @return {object} setup data for Ajax/Request object - */ - _ajaxSetup: function () { + DomTraverse = tslib_1.__importStar(DomTraverse); + Language = tslib_1.__importStar(Language); + Ajax = tslib_1.__importStar(Ajax); + Core = tslib_1.__importStar(Core); + class MediaManagerSearch { + constructor(mediaManager) { + this._searchMode = false; + this._mediaManager = mediaManager; + const dialog = mediaManager.getDialog(); + this._searchContainer = dialog.querySelector(".mediaManagerSearch"); + this._input = dialog.querySelector(".mediaManagerSearchField"); + this._input.addEventListener("keypress", (ev) => this._keyPress(ev)); + this._cancelButton = dialog.querySelector(".mediaManagerSearchCancelButton"); + this._cancelButton.addEventListener("click", () => this._cancelSearch()); + } + _ajaxSetup() { return { data: { - actionName: 'getSearchResultList', - className: 'wcf\\data\\media\\MediaAction', - interfaceName: 'wcf\\data\\ISearchAction' - } + actionName: "getSearchResultList", + className: "wcf\\data\\media\\MediaAction", + interfaceName: "wcf\\data\\ISearchAction", + }, }; - }, - /** - * Handles successful AJAX requests. - * - * @param {object} data response data - */ - _ajaxSuccess: function (data) { - this._mediaManager.setMedia(data.returnValues.media || {}, data.returnValues.template || '', { + } + _ajaxSuccess(data) { + this._mediaManager.setMedia(data.returnValues.media || {}, data.returnValues.template || "", { pageCount: data.returnValues.pageCount || 0, - pageNo: data.returnValues.pageNo || 0 + pageNo: data.returnValues.pageNo || 0, }); - elByClass('dialogContent', this._mediaManager.getDialog())[0].scrollTop = 0; - }, + this._mediaManager.getDialog().querySelector(".dialogContent").scrollTop = 0; + } /** * Cancels the search after clicking on the cancel search button. */ - _cancelSearch: function () { + _cancelSearch() { if (this._searchMode) { this._searchMode = false; this.resetSearch(); this._mediaManager.resetMedia(); } - }, + } /** * Hides the search string threshold error. */ - _hideStringThresholdError: function () { - var innerInfo = DomTraverse.childByClass(this._input.parentNode.parentNode, 'innerInfo'); + _hideStringThresholdError() { + const innerInfo = DomTraverse.childByClass(this._input.parentNode.parentNode, "innerInfo"); if (innerInfo) { - elHide(innerInfo); + innerInfo.style.display = "none"; } - }, + } /** * Handles the `[ENTER]` key to submit the form. - * - * @param {Event} event event object */ - _keyPress: function (event) { - if (EventKey.Enter(event)) { + _keyPress(event) { + if (event.key === "Enter") { event.preventDefault(); - if (this._input.value.length >= this._mediaManager.getOption('minSearchLength')) { + if (this._input.value.length >= this._mediaManager.getOption("minSearchLength")) { this._hideStringThresholdError(); this.search(); } @@ -96,55 +72,53 @@ define(['Ajax', 'Core', 'Dom/Traverse', 'Dom/Util', 'EventKey', 'Language', 'Ui/ this._showStringThresholdError(); } } - }, + } /** * Shows the search string threshold error. */ - _showStringThresholdError: function () { - var innerInfo = DomTraverse.childByClass(this._input.parentNode.parentNode, 'innerInfo'); + _showStringThresholdError() { + let innerInfo = DomTraverse.childByClass(this._input.parentNode.parentNode, "innerInfo"); if (innerInfo) { - elShow(innerInfo); + innerInfo.style.display = "block"; } else { - innerInfo = elCreate('p'); - innerInfo.className = 'innerInfo'; - innerInfo.textContent = Language.get('wcf.media.search.info.searchStringThreshold', { - minSearchLength: this._mediaManager.getOption('minSearchLength') + innerInfo = document.createElement("p"); + innerInfo.className = "innerInfo"; + innerInfo.textContent = Language.get("wcf.media.search.info.searchStringThreshold", { + minSearchLength: this._mediaManager.getOption("minSearchLength"), }); - DomUtil.insertAfter(innerInfo, this._input.parentNode); + this._input.parentNode.insertAdjacentElement("afterend", innerInfo); } - }, + } /** * Hides the media search. */ - hideSearch: function () { - elHide(this._searchContainer); - }, + hideSearch() { + this._searchContainer.style.display = "none"; + } /** * Resets the media search. */ - resetSearch: function () { - this._input.value = ''; - }, + resetSearch() { + this._input.value = ""; + } /** * Shows the media search. */ - showSearch: function () { - elShow(this._searchContainer); - }, + showSearch() { + this._searchContainer.style.display = "block"; + } /** * Sends an AJAX request to fetch search results. - * - * @param {integer} pageNo */ - search: function (pageNo) { + search(pageNo) { if (typeof pageNo !== "number") { pageNo = 1; } - var searchString = this._input.value; - if (searchString && this._input.value.length < this._mediaManager.getOption('minSearchLength')) { + let searchString = this._input.value; + if (searchString && this._input.value.length < this._mediaManager.getOption("minSearchLength")) { this._showStringThresholdError(); - searchString = ''; + searchString = ""; } else { this._hideStringThresholdError(); @@ -153,13 +127,14 @@ define(['Ajax', 'Core', 'Dom/Traverse', 'Dom/Util', 'EventKey', 'Language', 'Ui/ Ajax.api(this, { parameters: { categoryID: this._mediaManager.getCategoryId(), - imagesOnly: this._mediaManager.getOption('imagesOnly'), + imagesOnly: this._mediaManager.getOption("imagesOnly"), mode: this._mediaManager.getMode(), pageNo: pageNo, - searchString: searchString - } + searchString: searchString, + }, }); - }, - }; + } + } + Core.enableLegacyInheritance(MediaManagerSearch); return MediaManagerSearch; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.js deleted file mode 100644 index 6d9fe4b3e4..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.js +++ /dev/null @@ -1,188 +0,0 @@ -/** - * Provides the media search for the media manager. - * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Media/Manager/Search - */ -define(['Ajax', 'Core', 'Dom/Traverse', 'Dom/Util', 'EventKey', 'Language', 'Ui/SimpleDropdown'], function(Ajax, Core, DomTraverse, DomUtil, EventKey, Language, UiSimpleDropdown) { - "use strict"; - - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function() {}; - Fake.prototype = { - _ajaxSetup: function() {}, - _ajaxSuccess: function() {}, - _cancelSearch: function() {}, - _keyPress: function() {}, - _search: function() {}, - hideSearch: function() {}, - resetSearch: function() {}, - showSearch: function() {} - }; - return Fake; - } - - /** - * @constructor - */ - function MediaManagerSearch(mediaManager) { - this._mediaManager = mediaManager; - this._searchMode = false; - - this._searchContainer = elByClass('mediaManagerSearch', mediaManager.getDialog())[0]; - this._input = elByClass('mediaManagerSearchField', mediaManager.getDialog())[0]; - this._input.addEventListener('keypress', this._keyPress.bind(this)); - - this._cancelButton = elByClass('mediaManagerSearchCancelButton', mediaManager.getDialog())[0]; - this._cancelButton.addEventListener('click', this._cancelSearch.bind(this)); - } - MediaManagerSearch.prototype = { - /** - * Returns the data for Ajax to setup the Ajax/Request object. - * - * @return {object} setup data for Ajax/Request object - */ - _ajaxSetup: function() { - return { - data: { - actionName: 'getSearchResultList', - className: 'wcf\\data\\media\\MediaAction', - interfaceName: 'wcf\\data\\ISearchAction' - } - }; - }, - - /** - * Handles successful AJAX requests. - * - * @param {object} data response data - */ - _ajaxSuccess: function(data) { - this._mediaManager.setMedia(data.returnValues.media || { }, data.returnValues.template || '', { - pageCount: data.returnValues.pageCount || 0, - pageNo: data.returnValues.pageNo || 0 - }); - - elByClass('dialogContent', this._mediaManager.getDialog())[0].scrollTop = 0; - }, - - /** - * Cancels the search after clicking on the cancel search button. - */ - _cancelSearch: function() { - if (this._searchMode) { - this._searchMode = false; - - this.resetSearch(); - this._mediaManager.resetMedia(); - } - }, - - /** - * Hides the search string threshold error. - */ - _hideStringThresholdError: function() { - var innerInfo = DomTraverse.childByClass(this._input.parentNode.parentNode, 'innerInfo'); - if (innerInfo) { - elHide(innerInfo); - } - }, - - /** - * Handles the `[ENTER]` key to submit the form. - * - * @param {Event} event event object - */ - _keyPress: function(event) { - if (EventKey.Enter(event)) { - event.preventDefault(); - - if (this._input.value.length >= this._mediaManager.getOption('minSearchLength')) { - this._hideStringThresholdError(); - - this.search(); - } - else { - this._showStringThresholdError(); - } - } - }, - - /** - * Shows the search string threshold error. - */ - _showStringThresholdError: function() { - var innerInfo = DomTraverse.childByClass(this._input.parentNode.parentNode, 'innerInfo'); - if (innerInfo) { - elShow(innerInfo); - } - else { - innerInfo = elCreate('p'); - innerInfo.className = 'innerInfo'; - innerInfo.textContent = Language.get('wcf.media.search.info.searchStringThreshold', { - minSearchLength: this._mediaManager.getOption('minSearchLength') - }); - - DomUtil.insertAfter(innerInfo, this._input.parentNode); - } - }, - - /** - * Hides the media search. - */ - hideSearch: function() { - elHide(this._searchContainer); - }, - - /** - * Resets the media search. - */ - resetSearch: function() { - this._input.value = ''; - }, - - /** - * Shows the media search. - */ - showSearch: function() { - elShow(this._searchContainer); - }, - - /** - * Sends an AJAX request to fetch search results. - * - * @param {integer} pageNo - */ - search: function(pageNo) { - if (typeof pageNo !== "number") { - pageNo = 1; - } - - var searchString = this._input.value; - if (searchString && this._input.value.length < this._mediaManager.getOption('minSearchLength')) { - this._showStringThresholdError(); - - searchString = ''; - } - else { - this._hideStringThresholdError(); - } - - this._searchMode = true; - - Ajax.api(this, { - parameters: { - categoryID: this._mediaManager.getCategoryId(), - imagesOnly: this._mediaManager.getOption('imagesOnly'), - mode: this._mediaManager.getMode(), - pageNo: pageNo, - searchString: searchString - } - }); - }, - }; - - return MediaManagerSearch; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.ts new file mode 100644 index 0000000000..2c97269f5b --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.ts @@ -0,0 +1,183 @@ +/** + * Provides the media search for the media manager. + * + * @author Matthias Schmidt + * @copyright 2001-2021 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Media/Manager/Search + */ + +import MediaManager from "./Base"; +import { AjaxCallbackObject, AjaxCallbackSetup } from "../../Ajax/Data"; +import { Media } from "../Data"; +import * as DomTraverse from "../../Dom/Traverse"; +import * as Language from "../../Language"; +import * as Ajax from "../../Ajax"; +import * as Core from "../../Core"; + +type AjaxResponseData = { + returnValues: { + media?: Media; + pageCount?: number; + pageNo?: number; + template?: string; + }; +}; + +class MediaManagerSearch implements AjaxCallbackObject { + protected readonly _cancelButton: HTMLSpanElement; + protected readonly _input: HTMLInputElement; + protected readonly _mediaManager: MediaManager; + protected readonly _searchContainer: HTMLDivElement; + protected _searchMode = false; + + constructor(mediaManager: MediaManager) { + this._mediaManager = mediaManager; + + const dialog = mediaManager.getDialog(); + + this._searchContainer = dialog.querySelector(".mediaManagerSearch") as HTMLDivElement; + this._input = dialog.querySelector(".mediaManagerSearchField") as HTMLInputElement; + this._input.addEventListener("keypress", (ev) => this._keyPress(ev)); + + this._cancelButton = dialog.querySelector(".mediaManagerSearchCancelButton") as HTMLSpanElement; + this._cancelButton.addEventListener("click", () => this._cancelSearch()); + } + + public _ajaxSetup(): ReturnType { + return { + data: { + actionName: "getSearchResultList", + className: "wcf\\data\\media\\MediaAction", + interfaceName: "wcf\\data\\ISearchAction", + }, + }; + } + + public _ajaxSuccess(data: AjaxResponseData): void { + this._mediaManager.setMedia(data.returnValues.media || ({} as Media), data.returnValues.template || "", { + pageCount: data.returnValues.pageCount || 0, + pageNo: data.returnValues.pageNo || 0, + }); + + this._mediaManager.getDialog().querySelector(".dialogContent")!.scrollTop = 0; + } + + /** + * Cancels the search after clicking on the cancel search button. + */ + protected _cancelSearch(): void { + if (this._searchMode) { + this._searchMode = false; + + this.resetSearch(); + this._mediaManager.resetMedia(); + } + } + + /** + * Hides the search string threshold error. + */ + protected _hideStringThresholdError(): void { + const innerInfo = DomTraverse.childByClass( + this._input.parentNode!.parentNode as HTMLElement, + "innerInfo", + ) as HTMLElement; + if (innerInfo) { + innerInfo.style.display = "none"; + } + } + + /** + * Handles the `[ENTER]` key to submit the form. + */ + protected _keyPress(event: KeyboardEvent): void { + if (event.key === "Enter") { + event.preventDefault(); + + if (this._input.value.length >= this._mediaManager.getOption("minSearchLength")) { + this._hideStringThresholdError(); + + this.search(); + } else { + this._showStringThresholdError(); + } + } + } + + /** + * Shows the search string threshold error. + */ + protected _showStringThresholdError(): void { + let innerInfo = DomTraverse.childByClass( + this._input.parentNode!.parentNode as HTMLElement, + "innerInfo", + ) as HTMLParagraphElement; + if (innerInfo) { + innerInfo.style.display = "block"; + } else { + innerInfo = document.createElement("p"); + innerInfo.className = "innerInfo"; + innerInfo.textContent = Language.get("wcf.media.search.info.searchStringThreshold", { + minSearchLength: this._mediaManager.getOption("minSearchLength"), + }); + + (this._input.parentNode! as HTMLElement).insertAdjacentElement("afterend", innerInfo); + } + } + + /** + * Hides the media search. + */ + public hideSearch(): void { + this._searchContainer.style.display = "none"; + } + + /** + * Resets the media search. + */ + public resetSearch(): void { + this._input.value = ""; + } + + /** + * Shows the media search. + */ + public showSearch(): void { + this._searchContainer.style.display = "block"; + } + + /** + * Sends an AJAX request to fetch search results. + */ + public search(pageNo?: number): void { + if (typeof pageNo !== "number") { + pageNo = 1; + } + + let searchString = this._input.value; + if (searchString && this._input.value.length < this._mediaManager.getOption("minSearchLength")) { + this._showStringThresholdError(); + + searchString = ""; + } else { + this._hideStringThresholdError(); + } + + this._searchMode = true; + + Ajax.api(this, { + parameters: { + categoryID: this._mediaManager.getCategoryId(), + imagesOnly: this._mediaManager.getOption("imagesOnly"), + mode: this._mediaManager.getMode(), + pageNo: pageNo, + searchString: searchString, + }, + }); + } +} + +Core.enableLegacyInheritance(MediaManagerSearch); + +export = MediaManagerSearch; -- 2.20.1