From 45044391e7958c5056901720cf08d3c81c3be1fe Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 30 Nov 2020 00:34:02 +0100 Subject: [PATCH] Convert `Acp/Ui/Package/Search` to TypeScript --- .../Core/Acp/Ui/Package/Search.js | 139 ++++++++-------- .../Core/Acp/Ui/Package/Search.js | 133 --------------- .../Core/Acp/Ui/Package/Search.ts | 153 ++++++++++++++++++ 3 files changed, 224 insertions(+), 201 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Package/Search.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Package/Search.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Package/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Package/Search.js index 5d4e1df238..cfc90c9dde 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Package/Search.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Package/Search.js @@ -6,103 +6,106 @@ * @license GNU Lesser General Public License * @module WoltLabSuite/Core/Acp/Ui/Package/Search */ -define(['Ajax', 'WoltLabSuite/Core/Acp/Ui/Package/PrepareInstallation'], function (Ajax, AcpUiPackagePrepareInstallation) { - 'use strict'; - function AcpUiPackageSearch() { this.init(); } - AcpUiPackageSearch.prototype = { - init: function () { - this._input = elById('packageSearchInput'); - this._installation = new AcpUiPackagePrepareInstallation(); - this._isBusy = false; - this._isFirstRequest = true; - this._lastValue = ''; - this._options = { +define(["require", "exports", "tslib", "./PrepareInstallation", "../../../Ajax", "../../../Core"], function (require, exports, tslib_1, PrepareInstallation_1, Ajax, Core) { + "use strict"; + PrepareInstallation_1 = tslib_1.__importDefault(PrepareInstallation_1); + Ajax = tslib_1.__importStar(Ajax); + Core = tslib_1.__importStar(Core); + class AcpUiPackageSearch { + constructor() { + this.isBusy = false; + this.isFirstRequest = true; + this.lastValue = ""; + this.request = undefined; + this.timerDelay = undefined; + this.input = document.getElementById("packageSearchInput"); + this.installation = new PrepareInstallation_1.default(); + this.options = { delay: 300, - minLength: 3 + minLength: 3, }; - this._request = null; - this._resultList = elById('packageSearchResultList'); - this._resultListContainer = elById('packageSearchResultContainer'); - this._resultCounter = elById('packageSearchResultCounter'); - this._timerDelay = null; - this._input.addEventListener('keyup', this._keyup.bind(this)); - }, - _keyup: function () { - var value = this._input.value.trim(); - if (this._lastValue === value) { + this.resultList = document.getElementById("packageSearchResultList"); + this.resultListContainer = document.getElementById("packageSearchResultContainer"); + this.resultCounter = document.getElementById("packageSearchResultCounter"); + this.input.addEventListener("keyup", () => this.keyup()); + } + keyup() { + const value = this.input.value.trim(); + if (this.lastValue === value) { return; } - this._lastValue = value; - if (value.length < this._options.minLength) { - this._setStatus('idle'); + this.lastValue = value; + if (value.length < this.options.minLength) { + this.setStatus("idle"); return; } - if (this._isFirstRequest) { - if (!this._isBusy) { - this._isBusy = true; - this._setStatus('refreshDatabase'); + if (this.isFirstRequest) { + if (!this.isBusy) { + this.isBusy = true; + this.setStatus("refreshDatabase"); Ajax.api(this, { - actionName: 'refreshDatabase' + actionName: "refreshDatabase", }); } return; } - if (this._timerDelay !== null) { - window.clearTimeout(this._timerDelay); + if (this.timerDelay !== null) { + window.clearTimeout(this.timerDelay); } - this._timerDelay = window.setTimeout((function () { - this._setStatus('loading'); - this._search(value); - }).bind(this), this._options.delay); - }, - _search: function (value) { - if (this._request) { - this._request.abortPrevious(); + this.timerDelay = window.setTimeout(() => { + this.setStatus("loading"); + this.search(value); + }, this.options.delay); + } + search(value) { + if (this.request) { + this.request.abortPrevious(); } - this._request = Ajax.api(this, { + this.request = Ajax.api(this, { parameters: { - searchString: value - } + searchString: value, + }, }); - }, - _setStatus: function (status) { - elData(this._resultListContainer, 'status', status); - }, - _ajaxSuccess: function (data) { + } + setStatus(status) { + this.resultListContainer.dataset.status = status; + } + _ajaxSuccess(data) { switch (data.actionName) { - case 'refreshDatabase': - this._isFirstRequest = false; - this._lastValue = ''; - this._keyup(); + case "refreshDatabase": + this.isFirstRequest = false; + this.lastValue = ""; + this.keyup(); break; - case 'search': + case "search": if (data.returnValues.count > 0) { - this._resultList.innerHTML = data.returnValues.template; - this._resultCounter.textContent = data.returnValues.count; - this._setStatus('showResults'); - elBySelAll('.jsInstallPackage', this._resultList, (function (button) { - button.addEventListener('click', (function (event) { + this.resultList.innerHTML = data.returnValues.template; + this.resultCounter.textContent = data.returnValues.count.toString(); + this.setStatus("showResults"); + this.resultList.querySelectorAll(".jsInstallPackage").forEach((button) => { + button.addEventListener("click", (event) => { event.preventDefault(); button.blur(); - this._installation.start(elData(button, 'package'), elData(button, 'package-version')); - }).bind(this)); - }).bind(this)); + this.installation.start(button.dataset.package, button.dataset.packageVersion); + }); + }); } else { - this._setStatus('noResults'); + this.setStatus("noResults"); } break; } - }, - _ajaxSetup: function () { + } + _ajaxSetup() { return { data: { - actionName: 'search', - className: 'wcf\\data\\package\\update\\PackageUpdateAction' + actionName: "search", + className: "wcf\\data\\package\\update\\PackageUpdateAction", }, - silent: true + silent: true, }; } - }; + } + Core.enableLegacyInheritance(AcpUiPackageSearch); return AcpUiPackageSearch; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Package/Search.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Package/Search.js deleted file mode 100644 index a907c48798..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Package/Search.js +++ /dev/null @@ -1,133 +0,0 @@ -/** - * Search interface for the package server lists. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Package/Search - */ -define(['Ajax', 'WoltLabSuite/Core/Acp/Ui/Package/PrepareInstallation'], function(Ajax, AcpUiPackagePrepareInstallation) { - 'use strict'; - - function AcpUiPackageSearch() { this.init(); } - AcpUiPackageSearch.prototype = { - init: function () { - this._input = elById('packageSearchInput'); - this._installation = new AcpUiPackagePrepareInstallation(); - this._isBusy = false; - this._isFirstRequest = true; - this._lastValue = ''; - this._options = { - delay: 300, - minLength: 3 - }; - this._request = null; - this._resultList = elById('packageSearchResultList'); - this._resultListContainer = elById('packageSearchResultContainer'); - this._resultCounter = elById('packageSearchResultCounter'); - this._timerDelay = null; - - this._input.addEventListener('keyup', this._keyup.bind(this)); - }, - - _keyup: function () { - var value = this._input.value.trim(); - if (this._lastValue === value) { - return; - } - - this._lastValue = value; - - if (value.length < this._options.minLength) { - this._setStatus('idle'); - return; - } - - if (this._isFirstRequest) { - if (!this._isBusy) { - this._isBusy = true; - - this._setStatus('refreshDatabase'); - - Ajax.api(this, { - actionName: 'refreshDatabase' - }); - } - - return; - } - - if (this._timerDelay !== null) { - window.clearTimeout(this._timerDelay); - } - - this._timerDelay = window.setTimeout((function() { - this._setStatus('loading'); - this._search(value); - }).bind(this), this._options.delay); - }, - - _search: function(value) { - if (this._request) { - this._request.abortPrevious(); - } - - this._request = Ajax.api(this, { - parameters: { - searchString: value - } - }); - }, - - _setStatus: function (status) { - elData(this._resultListContainer, 'status', status); - }, - - _ajaxSuccess: function(data) { - switch (data.actionName) { - case 'refreshDatabase': - this._isFirstRequest = false; - - this._lastValue = ''; - this._keyup(); - break; - - case 'search': - if (data.returnValues.count > 0) { - this._resultList.innerHTML = data.returnValues.template; - this._resultCounter.textContent = data.returnValues.count; - - this._setStatus('showResults'); - - elBySelAll('.jsInstallPackage', this._resultList, (function(button) { - button.addEventListener('click', (function (event) { - event.preventDefault(); - button.blur(); - - this._installation.start( - elData(button, 'package'), - elData(button, 'package-version') - ); - }).bind(this)); - }).bind(this)); - } - else { - this._setStatus('noResults'); - } - break; - } - }, - - _ajaxSetup: function() { - return { - data: { - actionName: 'search', - className: 'wcf\\data\\package\\update\\PackageUpdateAction' - }, - silent: true - }; - } - }; - - return AcpUiPackageSearch; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Package/Search.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Package/Search.ts new file mode 100644 index 0000000000..cf286063bb --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Package/Search.ts @@ -0,0 +1,153 @@ +/** + * Search interface for the package server lists. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Package/Search + */ + +import AcpUiPackagePrepareInstallation from "./PrepareInstallation"; +import * as Ajax from "../../../Ajax"; +import AjaxRequest from "../../../Ajax/Request"; +import { AjaxCallbackObject, AjaxCallbackSetup } from "../../../Ajax/Data"; +import * as Core from "../../../Core"; + +interface AjaxResponse { + actionName: string; + returnValues: { + count: number; + template: string; + }; +} + +interface SearchOptions { + delay: number; + minLength: number; +} + +class AcpUiPackageSearch implements AjaxCallbackObject { + private readonly input: HTMLInputElement; + private readonly installation: AcpUiPackagePrepareInstallation; + private isBusy = false; + private isFirstRequest = true; + private lastValue = ""; + private options: SearchOptions; + private request?: AjaxRequest = undefined; + private readonly resultList: HTMLElement; + private readonly resultListContainer: HTMLElement; + private readonly resultCounter: HTMLElement; + private timerDelay?: number = undefined; + + constructor() { + this.input = document.getElementById("packageSearchInput") as HTMLInputElement; + this.installation = new AcpUiPackagePrepareInstallation(); + this.options = { + delay: 300, + minLength: 3, + }; + this.resultList = document.getElementById("packageSearchResultList")!; + this.resultListContainer = document.getElementById("packageSearchResultContainer")!; + this.resultCounter = document.getElementById("packageSearchResultCounter")!; + + this.input.addEventListener("keyup", () => this.keyup()); + } + + private keyup(): void { + const value = this.input.value.trim(); + if (this.lastValue === value) { + return; + } + + this.lastValue = value; + + if (value.length < this.options.minLength) { + this.setStatus("idle"); + return; + } + + if (this.isFirstRequest) { + if (!this.isBusy) { + this.isBusy = true; + + this.setStatus("refreshDatabase"); + + Ajax.api(this, { + actionName: "refreshDatabase", + }); + } + + return; + } + + if (this.timerDelay !== null) { + window.clearTimeout(this.timerDelay); + } + + this.timerDelay = window.setTimeout(() => { + this.setStatus("loading"); + this.search(value); + }, this.options.delay); + } + + private search(value: string): void { + if (this.request) { + this.request.abortPrevious(); + } + + this.request = Ajax.api(this, { + parameters: { + searchString: value, + }, + }); + } + + private setStatus(status: string): void { + this.resultListContainer.dataset.status = status; + } + + _ajaxSuccess(data: AjaxResponse): void { + switch (data.actionName) { + case "refreshDatabase": + this.isFirstRequest = false; + + this.lastValue = ""; + this.keyup(); + break; + + case "search": + if (data.returnValues.count > 0) { + this.resultList.innerHTML = data.returnValues.template; + this.resultCounter.textContent = data.returnValues.count.toString(); + + this.setStatus("showResults"); + + this.resultList.querySelectorAll(".jsInstallPackage").forEach((button: HTMLAnchorElement) => { + button.addEventListener("click", (event) => { + event.preventDefault(); + button.blur(); + + this.installation.start(button.dataset.package!, button.dataset.packageVersion!); + }); + }); + } else { + this.setStatus("noResults"); + } + break; + } + } + + _ajaxSetup(): ReturnType { + return { + data: { + actionName: "search", + className: "wcf\\data\\package\\update\\PackageUpdateAction", + }, + silent: true, + }; + } +} + +Core.enableLegacyInheritance(AcpUiPackageSearch); + +export = AcpUiPackageSearch; -- 2.20.1