From 971b528bee2f508927d8904f7317b24d8e3f341d Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 26 Oct 2020 23:38:40 +0100 Subject: [PATCH] Convert `Ui/Page/Search` to TypeScript --- .../js/WoltLabSuite/Core/Ui/Page/Search.js | 214 ++++++++++-------- .../ts/WoltLabSuite/Core/Ui/Page/Search.js | 140 ------------ .../ts/WoltLabSuite/Core/Ui/Page/Search.ts | 153 +++++++++++++ 3 files changed, 273 insertions(+), 234 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Search.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Search.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js index 58e663dc97..f5b633867a 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js @@ -1,118 +1,144 @@ -define(['Ajax', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Dialog'], function (Ajax, EventKey, Language, StringUtil, DomUtil, UiDialog) { +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +define(["require", "exports", "../../Ajax", "../../Dom/Util", "../../Language", "../../StringUtil", "../Dialog"], function (require, exports, Ajax, Util_1, Language, StringUtil, Dialog_1) { "use strict"; - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function () { }; - Fake.prototype = { - open: function () { }, - _search: function () { }, - _click: function () { }, - _ajaxSuccess: function () { }, - _ajaxSetup: function () { }, - _dialogSetup: function () { } - }; - return Fake; - } - var _callbackSelect, _resultContainer, _resultList, _searchInput = null; - return { - open: function (callbackSelect) { - _callbackSelect = callbackSelect; - UiDialog.open(this); - }, - _search: function (event) { + Object.defineProperty(exports, "__esModule", { value: true }); + exports.open = void 0; + Ajax = __importStar(Ajax); + Util_1 = __importDefault(Util_1); + Language = __importStar(Language); + StringUtil = __importStar(StringUtil); + Dialog_1 = __importDefault(Dialog_1); + class UiPageSearch { + constructor() { + this.callbackSelect = undefined; + this.resultContainer = undefined; + this.resultList = undefined; + this.searchInput = undefined; + } + open(callbackSelect) { + this.callbackSelect = callbackSelect; + Dialog_1.default.open(this); + } + _search(event) { event.preventDefault(); - var inputContainer = _searchInput.parentNode; - var value = _searchInput.value.trim(); - if (value.length < 3) { - elInnerError(inputContainer, Language.get('wcf.page.search.error.tooShort')); - return; - } - else { - elInnerError(inputContainer, false); - } + const inputContainer = this.searchInput.parentNode; + const value = this.searchInput.value.trim(); + Util_1.default.innerError(inputContainer, value.length < 3 ? Language.get('wcf.page.search.error.tooShort') : false); Ajax.api(this, { parameters: { - searchString: value - } + searchString: value, + }, }); - }, - _click: function (event) { + } + _click(event) { event.preventDefault(); - var page = event.currentTarget; - var pageTitle = elBySel('h3', page).textContent.replace(/['"]/g, ''); - _callbackSelect(elData(page, 'page-id') + '#' + pageTitle); - UiDialog.close(this); - }, - _ajaxSuccess: function (data) { - var html = '', page; - //noinspection JSUnresolvedVariable - for (var i = 0, length = data.returnValues.length; i < length; i++) { - //noinspection JSUnresolvedVariable - page = data.returnValues[i]; - html += '
  • ' - + '
    ' - + '

    ' + StringUtil.escapeHTML(page.name) + '

    ' - + '' + StringUtil.escapeHTML(page.displayLink) + '' - + '
    ' - + '
    • '; - } - _resultList.innerHTML = html; - window[html ? 'elShow' : 'elHide'](_resultContainer); + const page = event.currentTarget; + const pageTitle = page.querySelector('h3'); + this.callbackSelect(page.dataset.pageId + '#' + pageTitle.textContent.replace(/['"]/g, '')); + Dialog_1.default.close(this); + } + _ajaxSuccess(data) { + const html = data.returnValues + .map(page => { + const name = StringUtil.escapeHTML(page.name); + const displayLink = StringUtil.escapeHTML(page.displayLink); + return `
  • +
    +

    ${name}

    + ${displayLink} +
    +
    • `; + }) + .join(''); + this.resultList.innerHTML = html; + Util_1.default[html ? 'show' : 'hide'](this.resultContainer); if (html) { - elBySelAll('.containerHeadline', _resultList, (function (item) { - item.addEventListener(WCF_CLICK_EVENT, this._click.bind(this)); - }).bind(this)); + this.resultList.querySelectorAll('.containerHeadline').forEach(item => { + item.addEventListener('click', this._click.bind(this)); + }); } else { - elInnerError(_searchInput.parentNode, Language.get('wcf.page.search.error.noResults')); + Util_1.default.innerError(this.searchInput.parentElement, Language.get('wcf.page.search.error.noResults')); } - }, - _ajaxSetup: function () { + } + _ajaxSetup() { return { data: { actionName: 'search', - className: 'wcf\\data\\page\\PageAction' - } + className: 'wcf\\data\\page\\PageAction', + }, }; - }, - _dialogSetup: function () { + } + _dialogSetup() { return { id: 'wcfUiPageSearch', options: { - onSetup: (function () { - var callbackSearch = this._search.bind(this); - _searchInput = elById('wcfUiPageSearchInput'); - _searchInput.addEventListener('keydown', function (event) { - if (EventKey.Enter(event)) { - callbackSearch(event); + onSetup: () => { + this.searchInput = document.getElementById('wcfUiPageSearchInput'); + this.searchInput.addEventListener('keydown', event => { + if (event.key === 'Enter') { + this._search(event); } }); - _searchInput.nextElementSibling.addEventListener(WCF_CLICK_EVENT, callbackSearch); - _resultContainer = elById('wcfUiPageSearchResultContainer'); - _resultList = elById('wcfUiPageSearchResultList'); - }).bind(this), - onShow: function () { - _searchInput.focus(); + this.searchInput.nextElementSibling.addEventListener('click', this._search.bind(this)); + this.resultContainer = document.getElementById('wcfUiPageSearchResultContainer'); + this.resultList = document.getElementById('wcfUiPageSearchResultList'); + }, + onShow: () => { + this.searchInput.focus(); }, - title: Language.get('wcf.page.search') + title: Language.get('wcf.page.search'), }, - source: '
    ' - + '
    ' - + '
    ' - + '
    ' - + '
    ' - + '' - + '' - + '
    ' - + '
    ' - + '
    ' - + '
    ' - + '' + source: `
    +
    +
    +
    +
    + + +
    +
    +
    +
    + `, }; } - }; + } + let uiPageSearch = undefined; + function getUiPageSearch() { + if (uiPageSearch === undefined) { + uiPageSearch = new UiPageSearch(); + } + return uiPageSearch; + } + function open(callbackSelect) { + getUiPageSearch().open(callbackSelect); + } + exports.open = open; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Search.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Search.js deleted file mode 100644 index e996240df9..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Search.js +++ /dev/null @@ -1,140 +0,0 @@ -define(['Ajax', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Dialog'], function(Ajax, EventKey, Language, StringUtil, DomUtil, UiDialog) { - "use strict"; - - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function() {}; - Fake.prototype = { - open: function() {}, - _search: function() {}, - _click: function() {}, - _ajaxSuccess: function() {}, - _ajaxSetup: function() {}, - _dialogSetup: function() {} - }; - return Fake; - } - - var _callbackSelect, _resultContainer, _resultList, _searchInput = null; - - return { - open: function(callbackSelect) { - _callbackSelect = callbackSelect; - - UiDialog.open(this); - }, - - _search: function (event) { - event.preventDefault(); - - var inputContainer = _searchInput.parentNode; - - var value = _searchInput.value.trim(); - if (value.length < 3) { - elInnerError(inputContainer, Language.get('wcf.page.search.error.tooShort')); - return; - } - else { - elInnerError(inputContainer, false); - } - - Ajax.api(this, { - parameters: { - searchString: value - } - }); - }, - - _click: function (event) { - event.preventDefault(); - - var page = event.currentTarget; - var pageTitle = elBySel('h3', page).textContent.replace(/['"]/g, ''); - - _callbackSelect(elData(page, 'page-id') + '#' + pageTitle); - - UiDialog.close(this); - }, - - _ajaxSuccess: function(data) { - var html = '', page; - //noinspection JSUnresolvedVariable - for (var i = 0, length = data.returnValues.length; i < length; i++) { - //noinspection JSUnresolvedVariable - page = data.returnValues[i]; - - html += '
  • ' - + '
    ' - + '

    ' + StringUtil.escapeHTML(page.name) + '

    ' - + '' + StringUtil.escapeHTML(page.displayLink) + '' - + '
    ' - + '
    • '; - } - - _resultList.innerHTML = html; - - window[html ? 'elShow' : 'elHide'](_resultContainer); - - if (html) { - elBySelAll('.containerHeadline', _resultList, (function(item) { - item.addEventListener(WCF_CLICK_EVENT, this._click.bind(this)); - }).bind(this)); - } - else { - elInnerError(_searchInput.parentNode, Language.get('wcf.page.search.error.noResults')); - } - }, - - _ajaxSetup: function () { - return { - data: { - actionName: 'search', - className: 'wcf\\data\\page\\PageAction' - } - }; - }, - - _dialogSetup: function() { - return { - id: 'wcfUiPageSearch', - options: { - onSetup: (function() { - var callbackSearch = this._search.bind(this); - - _searchInput = elById('wcfUiPageSearchInput'); - _searchInput.addEventListener('keydown', function(event) { - if (EventKey.Enter(event)) { - callbackSearch(event); - } - }); - - _searchInput.nextElementSibling.addEventListener(WCF_CLICK_EVENT, callbackSearch); - - _resultContainer = elById('wcfUiPageSearchResultContainer'); - _resultList = elById('wcfUiPageSearchResultList'); - }).bind(this), - onShow: function() { - _searchInput.focus(); - }, - title: Language.get('wcf.page.search') - }, - source: '
    ' - + '
    ' - + '
    ' - + '
    ' - + '
    ' - + '' - + '' - + '
    ' - + '
    ' - + '
    ' - + '
    ' - + '' - }; - } - }; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Search.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Search.ts new file mode 100644 index 0000000000..ec9401e9d3 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Search.ts @@ -0,0 +1,153 @@ +import * as Ajax from '../../Ajax'; +import { AjaxCallbackObject, DatabaseObjectActionResponse } from '../../Ajax/Data'; +import { DialogCallbackObject } from '../Dialog/Data'; +import DomUtil from '../../Dom/Util'; +import * as Language from '../../Language'; +import * as StringUtil from '../../StringUtil'; +import UiDialog from '../Dialog'; + +type CallbackSelect = (value: string) => void + +interface SearchResult { + displayLink: string; + name: string; + pageID: number; +} + +interface AjaxResponse extends DatabaseObjectActionResponse { + returnValues: SearchResult[]; +} + +class UiPageSearch implements AjaxCallbackObject, DialogCallbackObject { + private callbackSelect?: CallbackSelect = undefined; + private resultContainer?: HTMLElement = undefined; + private resultList?: HTMLOListElement = undefined; + private searchInput?: HTMLInputElement = undefined; + + open(callbackSelect: CallbackSelect): void { + this.callbackSelect = callbackSelect; + + UiDialog.open(this); + } + + _search(event: KeyboardEvent): void { + event.preventDefault(); + + const inputContainer = this.searchInput!.parentNode as HTMLElement; + + const value = this.searchInput!.value.trim(); + DomUtil.innerError(inputContainer, value.length < 3 ? Language.get('wcf.page.search.error.tooShort') : false); + + Ajax.api(this, { + parameters: { + searchString: value, + }, + }); + } + + _click(event: MouseEvent): void { + event.preventDefault(); + + const page = event.currentTarget as HTMLElement; + const pageTitle = page.querySelector('h3')!; + + this.callbackSelect!(page.dataset.pageId! + '#' + pageTitle.textContent!.replace(/['"]/g, '')); + + UiDialog.close(this); + } + + _ajaxSuccess(data: AjaxResponse): void { + const html = data.returnValues + .map(page => { + const name = StringUtil.escapeHTML(page.name); + const displayLink = StringUtil.escapeHTML(page.displayLink); + + return `
  • +
    +

    ${name}

    + ${displayLink} +
    +
    • `; + }) + .join(''); + + this.resultList!.innerHTML = html; + + DomUtil[html ? 'show' : 'hide'](this.resultContainer!); + + if (html) { + this.resultList!.querySelectorAll('.containerHeadline').forEach(item => { + item.addEventListener('click', this._click.bind(this)); + }); + } else { + DomUtil.innerError(this.searchInput!.parentElement!, Language.get('wcf.page.search.error.noResults')); + } + } + + _ajaxSetup() { + return { + data: { + actionName: 'search', + className: 'wcf\\data\\page\\PageAction', + }, + }; + } + + _dialogSetup() { + return { + id: 'wcfUiPageSearch', + options: { + onSetup: () => { + this.searchInput = document.getElementById('wcfUiPageSearchInput') as HTMLInputElement; + this.searchInput.addEventListener('keydown', event => { + if (event.key === 'Enter') { + this._search(event); + } + }); + + this.searchInput.nextElementSibling!.addEventListener('click', this._search.bind(this)); + + this.resultContainer = document.getElementById('wcfUiPageSearchResultContainer') as HTMLElement; + this.resultList = document.getElementById('wcfUiPageSearchResultList') as HTMLOListElement; + }, + onShow: () => { + this.searchInput!.focus(); + }, + title: Language.get('wcf.page.search'), + }, + source: `
    +
    +
    +
    +
    + + +
    +
    +
    +
    + `, + }; + } +} + +let uiPageSearch: UiPageSearch | undefined = undefined; + +function getUiPageSearch(): UiPageSearch { + if (uiPageSearch === undefined) { + uiPageSearch = new UiPageSearch(); + } + + return uiPageSearch; +} + +export function open(callbackSelect) { + getUiPageSearch().open(callbackSelect); +} + + -- 2.20.1