Convert `Ui/Article/Search` to TypeScript
authorAlexander Ebert <ebert@woltlab.com>
Tue, 27 Oct 2020 12:03:48 +0000 (13:03 +0100)
committerTim Düsterhus <duesterhus@woltlab.com>
Wed, 28 Oct 2020 11:57:21 +0000 (12:57 +0100)
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Article/Search.js
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js
wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Article/Search.js [deleted file]
wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Article/Search.ts [new file with mode: 0644]
wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Search.ts

index 888e756574395915264a71e4c22c1f5f5072d87e..cece9fd7d46f08b7f271b5af908d83c614434068 100644 (file)
-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 UiArticleSearch {
+        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();
+            const inputContainer = this.searchInput.parentElement;
+            const value = this.searchInput.value.trim();
             if (value.length < 3) {
-                elInnerError(inputContainer, Language.get('wcf.article.search.error.tooShort'));
+                Util_1.default.innerError(inputContainer, Language.get('wcf.article.search.error.tooShort'));
                 return;
             }
             else {
-                elInnerError(inputContainer, false);
+                Util_1.default.innerError(inputContainer, false);
             }
             Ajax.api(this, {
                 parameters: {
-                    searchString: value
-                }
+                    searchString: value,
+                },
             });
-        },
-        _click: function (event) {
+        }
+        click(event) {
             event.preventDefault();
-            _callbackSelect(elData(event.currentTarget, 'article-id'));
-            UiDialog.close(this);
-        },
-        _ajaxSuccess: function (data) {
-            var html = '', article;
-            //noinspection JSUnresolvedVariable
-            for (var i = 0, length = data.returnValues.length; i < length; i++) {
-                //noinspection JSUnresolvedVariable
-                article = data.returnValues[i];
-                html += '<li>'
-                    + '<div class="containerHeadline pointer" data-article-id="' + article.articleID + '">'
-                    + '<h3>' + StringUtil.escapeHTML(article.name) + '</h3>'
-                    + '<small>' + StringUtil.escapeHTML(article.displayLink) + '</small>'
-                    + '</div>'
-                    + '</li>';
-            }
-            _resultList.innerHTML = html;
-            window[html ? 'elShow' : 'elHide'](_resultContainer);
+            const target = event.currentTarget;
+            this.callbackSelect(+target.dataset.articleId);
+            Dialog_1.default.close(this);
+        }
+        _ajaxSuccess(data) {
+            let html = data.returnValues
+                .map(article => {
+                return `<li>
+          <div class="containerHeadline pointer" data-article-id="${article.articleID}">
+            <h3>${StringUtil.escapeHTML(article.name)}</h3>
+            <small>${StringUtil.escapeHTML(article.displayLink)}</small>
+          </div>
+        </li>`;
+            })
+                .join('');
+            this.resultList.innerHTML = html;
+            Util_1.default[html ? 'show' : 'hide'](this.resultList);
             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.article.search.error.noResults'));
+                const parent = this.searchInput.parentElement;
+                Util_1.default.innerError(parent, Language.get('wcf.article.search.error.noResults'));
             }
-        },
-        _ajaxSetup: function () {
+        }
+        _ajaxSetup() {
             return {
                 data: {
                     actionName: 'search',
-                    className: 'wcf\\data\\article\\ArticleAction'
-                }
+                    className: 'wcf\\data\\article\\ArticleAction',
+                },
             };
-        },
-        _dialogSetup: function () {
+        }
+        _dialogSetup() {
             return {
                 id: 'wcfUiArticleSearch',
                 options: {
-                    onSetup: (function () {
-                        var callbackSearch = this._search.bind(this);
-                        _searchInput = elById('wcfUiArticleSearchInput');
-                        _searchInput.addEventListener('keydown', function (event) {
-                            if (EventKey.Enter(event)) {
-                                callbackSearch(event);
+                    onSetup: () => {
+                        this.searchInput = document.getElementById('wcfUiArticleSearchInput');
+                        this.searchInput.addEventListener('keydown', event => {
+                            if (event.key === 'Enter') {
+                                this.search(event);
                             }
                         });
-                        _searchInput.nextElementSibling.addEventListener(WCF_CLICK_EVENT, callbackSearch);
-                        _resultContainer = elById('wcfUiArticleSearchResultContainer');
-                        _resultList = elById('wcfUiArticleSearchResultList');
-                    }).bind(this),
-                    onShow: function () {
-                        _searchInput.focus();
+                        const button = this.searchInput.nextElementSibling;
+                        button.addEventListener('click', this.search.bind(this));
+                        this.resultContainer = document.getElementById('wcfUiArticleSearchResultContainer');
+                        this.resultList = document.getElementById('wcfUiArticleSearchResultList');
+                    },
+                    onShow: () => {
+                        this.searchInput.focus();
                     },
-                    title: Language.get('wcf.article.search')
+                    title: Language.get('wcf.article.search'),
                 },
-                source: '<div class="section">'
-                    + '<dl>'
-                    + '<dt><label for="wcfUiArticleSearchInput">' + Language.get('wcf.article.search.name') + '</label></dt>'
-                    + '<dd>'
-                    + '<div class="inputAddon">'
-                    + '<input type="text" id="wcfUiArticleSearchInput" class="long">'
-                    + '<a href="#" class="inputSuffix"><span class="icon icon16 fa-search"></span></a>'
-                    + '</div>'
-                    + '</dd>'
-                    + '</dl>'
-                    + '</div>'
-                    + '<section id="wcfUiArticleSearchResultContainer" class="section" style="display: none;">'
-                    + '<header class="sectionHeader">'
-                    + '<h2 class="sectionTitle">' + Language.get('wcf.article.search.results') + '</h2>'
-                    + '</header>'
-                    + '<ol id="wcfUiArticleSearchResultList" class="containerList"></ol>'
-                    + '</section>'
+                source: `<div class="section">
+          <dl>
+            <dt>
+              <label for="wcfUiArticleSearchInput">${Language.get('wcf.article.search.name')}</label>
+            </dt>
+            <dd>
+              <div class="inputAddon">
+                <input type="text" id="wcfUiArticleSearchInput" class="long">
+                <a href="#" class="inputSuffix"><span class="icon icon16 fa-search"></span></a>
+              </div>
+            </dd>
+          </dl>
+        </div>
+        <section id="wcfUiArticleSearchResultContainer" class="section" style="display: none;">
+          <header class="sectionHeader">
+            <h2 class="sectionTitle">${Language.get('wcf.article.search.results')}</h2>
+          </header>
+          <ol id="wcfUiArticleSearchResultList" class="containerList"></ol>
+        </section>`,
             };
         }
-    };
+    }
+    let uiArticleSearch = undefined;
+    function getUiArticleSearch() {
+        if (!uiArticleSearch) {
+            uiArticleSearch = new UiArticleSearch();
+        }
+        return uiArticleSearch;
+    }
+    function open(callbackSelect) {
+        getUiArticleSearch().open(callbackSelect);
+    }
+    exports.open = open;
 });
index f5b633867a53541d44dc4f627cd24c350751c5c2..bde3e8f319c9814936b8a9799613f37a7b45ea3a 100644 (file)
@@ -40,18 +40,24 @@ define(["require", "exports", "../../Ajax", "../../Dom/Util", "../../Language",
             this.callbackSelect = callbackSelect;
             Dialog_1.default.open(this);
         }
-        _search(event) {
+        search(event) {
             event.preventDefault();
             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);
+            if (value.length < 3) {
+                Util_1.default.innerError(inputContainer, Language.get('wcf.page.search.error.tooShort'));
+                return;
+            }
+            else {
+                Util_1.default.innerError(inputContainer, false);
+            }
             Ajax.api(this, {
                 parameters: {
                     searchString: value,
                 },
             });
         }
-        _click(event) {
+        click(event) {
             event.preventDefault();
             const page = event.currentTarget;
             const pageTitle = page.querySelector('h3');
@@ -75,7 +81,7 @@ define(["require", "exports", "../../Ajax", "../../Dom/Util", "../../Language",
             Util_1.default[html ? 'show' : 'hide'](this.resultContainer);
             if (html) {
                 this.resultList.querySelectorAll('.containerHeadline').forEach(item => {
-                    item.addEventListener('click', this._click.bind(this));
+                    item.addEventListener('click', this.click.bind(this));
                 });
             }
             else {
@@ -98,10 +104,10 @@ define(["require", "exports", "../../Ajax", "../../Dom/Util", "../../Language",
                         this.searchInput = document.getElementById('wcfUiPageSearchInput');
                         this.searchInput.addEventListener('keydown', event => {
                             if (event.key === 'Enter') {
-                                this._search(event);
+                                this.search(event);
                             }
                         });
-                        this.searchInput.nextElementSibling.addEventListener('click', this._search.bind(this));
+                        this.searchInput.nextElementSibling.addEventListener('click', this.search.bind(this));
                         this.resultContainer = document.getElementById('wcfUiPageSearchResultContainer');
                         this.resultList = document.getElementById('wcfUiPageSearchResultList');
                     },
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Article/Search.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Article/Search.js
deleted file mode 100644 (file)
index 4fdd5fa..0000000
+++ /dev/null
@@ -1,137 +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.article.search.error.tooShort'));
-                               return;
-                       }
-                       else {
-                               elInnerError(inputContainer, false);
-                       }
-                       
-                       Ajax.api(this, {
-                               parameters: {
-                                       searchString: value
-                               }
-                       });
-               },
-               
-               _click: function (event) {
-                       event.preventDefault();
-                       
-                       _callbackSelect(elData(event.currentTarget, 'article-id'));
-                       
-                       UiDialog.close(this);
-               },
-               
-               _ajaxSuccess: function(data) {
-                       var html = '', article;
-                       //noinspection JSUnresolvedVariable
-                       for (var i = 0, length = data.returnValues.length; i < length; i++) {
-                               //noinspection JSUnresolvedVariable
-                               article = data.returnValues[i];
-                               
-                               html += '<li>'
-                                               + '<div class="containerHeadline pointer" data-article-id="' + article.articleID + '">'
-                                                       + '<h3>' + StringUtil.escapeHTML(article.name) + '</h3>'
-                                                       + '<small>' + StringUtil.escapeHTML(article.displayLink) + '</small>'
-                                               + '</div>'
-                                       + '</li>';
-                       }
-                       
-                       _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.article.search.error.noResults'));
-                       }
-               },
-               
-               _ajaxSetup: function () {
-                       return {
-                               data: {
-                                       actionName: 'search',
-                                       className: 'wcf\\data\\article\\ArticleAction'
-                               }
-                       };
-               },
-               
-               _dialogSetup: function() {
-                       return {
-                               id: 'wcfUiArticleSearch',
-                               options: {
-                                       onSetup: (function() {
-                                               var callbackSearch = this._search.bind(this);
-                                               
-                                               _searchInput = elById('wcfUiArticleSearchInput');
-                                               _searchInput.addEventListener('keydown', function(event) {
-                                                       if (EventKey.Enter(event)) {
-                                                               callbackSearch(event);
-                                                       }
-                                               });
-                                               
-                                               _searchInput.nextElementSibling.addEventListener(WCF_CLICK_EVENT, callbackSearch);
-                                               
-                                               _resultContainer = elById('wcfUiArticleSearchResultContainer');
-                                               _resultList = elById('wcfUiArticleSearchResultList');
-                                       }).bind(this),
-                                       onShow: function() {
-                                               _searchInput.focus();
-                                       },
-                                       title: Language.get('wcf.article.search')
-                               },
-                               source: '<div class="section">'
-                                       + '<dl>'
-                                               + '<dt><label for="wcfUiArticleSearchInput">' + Language.get('wcf.article.search.name') + '</label></dt>'
-                                               + '<dd>'
-                                                       + '<div class="inputAddon">'
-                                                               + '<input type="text" id="wcfUiArticleSearchInput" class="long">'
-                                                               + '<a href="#" class="inputSuffix"><span class="icon icon16 fa-search"></span></a>'
-                                                       + '</div>'
-                                               + '</dd>'
-                                       + '</dl>'
-                               + '</div>'
-                               + '<section id="wcfUiArticleSearchResultContainer" class="section" style="display: none;">'
-                                       + '<header class="sectionHeader">'
-                                               + '<h2 class="sectionTitle">' + Language.get('wcf.article.search.results') + '</h2>'
-                                       + '</header>'
-                                       + '<ol id="wcfUiArticleSearchResultList" class="containerList"></ol>'
-                               + '</section>'
-                       };
-               }
-       };
-});
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Article/Search.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Article/Search.ts
new file mode 100644 (file)
index 0000000..861e6ca
--- /dev/null
@@ -0,0 +1,155 @@
+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 = (articleId: number) => void;
+
+interface SearchResult {
+  articleID: number;
+  displayLink: string;
+  name: string;
+}
+
+interface AjaxResponse extends DatabaseObjectActionResponse {
+  returnValues: SearchResult[];
+}
+
+class UiArticleSearch implements AjaxCallbackObject, DialogCallbackObject {
+  private callbackSelect?: CallbackSelect = undefined;
+  private resultContainer?: HTMLElement = undefined;
+  private resultList?: HTMLOListElement = undefined;
+  private searchInput?: HTMLInputElement = undefined;
+
+  open(callbackSelect: CallbackSelect) {
+    this.callbackSelect = callbackSelect;
+
+    UiDialog.open(this);
+  }
+
+  private search(event: KeyboardEvent): void {
+    event.preventDefault();
+
+    const inputContainer = this.searchInput!.parentElement!;
+
+    const value = this.searchInput!.value.trim();
+    if (value.length < 3) {
+      DomUtil.innerError(inputContainer, Language.get('wcf.article.search.error.tooShort'));
+      return;
+    } else {
+      DomUtil.innerError(inputContainer, false);
+    }
+
+    Ajax.api(this, {
+      parameters: {
+        searchString: value,
+      },
+    });
+  }
+
+  private click(event: MouseEvent): void {
+    event.preventDefault();
+
+    const target = event.currentTarget as HTMLElement;
+    this.callbackSelect!(+target.dataset.articleId!);
+
+    UiDialog.close(this);
+  }
+
+  _ajaxSuccess(data: AjaxResponse): void {
+    let html = data.returnValues
+      .map(article => {
+        return `<li>
+          <div class="containerHeadline pointer" data-article-id="${article.articleID}">
+            <h3>${StringUtil.escapeHTML(article.name)}</h3>
+            <small>${StringUtil.escapeHTML(article.displayLink)}</small>
+          </div>
+        </li>`;
+      })
+      .join('');
+
+    this.resultList!.innerHTML = html;
+
+    DomUtil[html ? 'show' : 'hide'](this.resultList!);
+
+    if (html) {
+      this.resultList!.querySelectorAll('.containerHeadline').forEach(item => {
+        item.addEventListener('click', this.click.bind(this));
+      });
+    } else {
+      const parent = this.searchInput!.parentElement!;
+      DomUtil.innerError(parent, Language.get('wcf.article.search.error.noResults'));
+    }
+  }
+
+  _ajaxSetup() {
+    return {
+      data: {
+        actionName: 'search',
+        className: 'wcf\\data\\article\\ArticleAction',
+      },
+    };
+  }
+
+  _dialogSetup() {
+    return {
+      id: 'wcfUiArticleSearch',
+      options: {
+        onSetup: () => {
+          this.searchInput = document.getElementById('wcfUiArticleSearchInput') as HTMLInputElement;
+          this.searchInput.addEventListener('keydown', event => {
+            if (event.key === 'Enter') {
+              this.search(event);
+            }
+          });
+
+          const button = this.searchInput.nextElementSibling!;
+          button.addEventListener('click', this.search.bind(this));
+
+          this.resultContainer = document.getElementById('wcfUiArticleSearchResultContainer')!;
+          this.resultList = document.getElementById('wcfUiArticleSearchResultList') as HTMLOListElement;
+        },
+        onShow: () => {
+          this.searchInput!.focus();
+        },
+        title: Language.get('wcf.article.search'),
+      },
+      source: `<div class="section">
+          <dl>
+            <dt>
+              <label for="wcfUiArticleSearchInput">${Language.get('wcf.article.search.name')}</label>
+            </dt>
+            <dd>
+              <div class="inputAddon">
+                <input type="text" id="wcfUiArticleSearchInput" class="long">
+                <a href="#" class="inputSuffix"><span class="icon icon16 fa-search"></span></a>
+              </div>
+            </dd>
+          </dl>
+        </div>
+        <section id="wcfUiArticleSearchResultContainer" class="section" style="display: none;">
+          <header class="sectionHeader">
+            <h2 class="sectionTitle">${Language.get('wcf.article.search.results')}</h2>
+          </header>
+          <ol id="wcfUiArticleSearchResultList" class="containerList"></ol>
+        </section>`,
+    };
+  }
+}
+
+let uiArticleSearch: UiArticleSearch | undefined = undefined;
+
+function getUiArticleSearch() {
+  if (!uiArticleSearch) {
+    uiArticleSearch = new UiArticleSearch();
+  }
+
+  return uiArticleSearch;
+}
+
+export function open(callbackSelect) {
+  getUiArticleSearch().open(callbackSelect);
+}
index ec9401e9d368489853488cb3f9570379e221587c..c56a85a2c409f874653facf5b83eb31b0d688c54 100644 (file)
@@ -30,13 +30,18 @@ class UiPageSearch implements AjaxCallbackObject, DialogCallbackObject {
     UiDialog.open(this);
   }
 
-  _search(event: KeyboardEvent): void {
+  private 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);
+    if (value.length < 3) {
+      DomUtil.innerError(inputContainer, Language.get('wcf.page.search.error.tooShort'));
+      return;
+    } else {
+      DomUtil.innerError(inputContainer, false);
+    }
 
     Ajax.api(this, {
       parameters: {
@@ -45,7 +50,7 @@ class UiPageSearch implements AjaxCallbackObject, DialogCallbackObject {
     });
   }
 
-  _click(event: MouseEvent): void {
+  private click(event: MouseEvent): void {
     event.preventDefault();
 
     const page = event.currentTarget as HTMLElement;
@@ -77,7 +82,7 @@ class UiPageSearch implements AjaxCallbackObject, DialogCallbackObject {
 
     if (html) {
       this.resultList!.querySelectorAll('.containerHeadline').forEach(item => {
-        item.addEventListener('click', this._click.bind(this));
+        item.addEventListener('click', this.click.bind(this));
       });
     } else {
       DomUtil.innerError(this.searchInput!.parentElement!, Language.get('wcf.page.search.error.noResults'));
@@ -101,11 +106,11 @@ class UiPageSearch implements AjaxCallbackObject, DialogCallbackObject {
           this.searchInput = document.getElementById('wcfUiPageSearchInput') as HTMLInputElement;
           this.searchInput.addEventListener('keydown', event => {
             if (event.key === 'Enter') {
-              this._search(event);
+              this.search(event);
             }
           });
 
-          this.searchInput.nextElementSibling!.addEventListener('click', this._search.bind(this));
+          this.searchInput.nextElementSibling!.addEventListener('click', this.search.bind(this));
 
           this.resultContainer = document.getElementById('wcfUiPageSearchResultContainer') as HTMLElement;
           this.resultList = document.getElementById('wcfUiPageSearchResultList') as HTMLOListElement;