Convert `Ui/Search/Page` to TypeScript
authorAlexander Ebert <ebert@woltlab.com>
Mon, 26 Oct 2020 15:38:50 +0000 (16:38 +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/Search/Page.js
wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Search/Input.ts
wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Search/Page.js [deleted file]
wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Search/Page.ts [new file with mode: 0644]

index 8e85156d43500fdef8919fe9e21b3ff87f90cc36..e9bc6462bcd9df5335152578f68eafc7861bf223 100644 (file)
-define(['Core', 'Dom/Traverse', 'Dom/Util', 'Ui/Screen', 'Ui/SimpleDropdown', './Input'], function (Core, DomTraverse, DomUtil, UiScreen, UiSimpleDropdown, UiSearchInput) {
+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", "../../Core", "../../Dom/Traverse", "../../Dom/Util", "../Dropdown/Simple", "../Screen", "./Input"], function (require, exports, Core, DomTraverse, Util_1, Simple_1, UiScreen, Input_1) {
     "use strict";
-    return {
-        init: function (objectType) {
-            var searchInput = elById('pageHeaderSearchInput');
-            new UiSearchInput(searchInput, {
-                ajax: {
-                    className: 'wcf\\data\\search\\keyword\\SearchKeywordAction'
-                },
-                autoFocus: false,
-                callbackDropdownInit: function (dropdownMenu) {
-                    dropdownMenu.classList.add('dropdownMenuPageSearch');
-                    if (UiScreen.is('screen-lg')) {
-                        elData(dropdownMenu, 'dropdown-alignment-horizontal', 'right');
-                        var minWidth = searchInput.clientWidth;
-                        dropdownMenu.style.setProperty('min-width', minWidth + 'px', '');
-                        // calculate offset to ignore the width caused by the submit button
-                        var parent = searchInput.parentNode;
-                        var offsetRight = (DomUtil.offset(parent).left + parent.clientWidth) - (DomUtil.offset(searchInput).left + minWidth);
-                        var offsetTop = DomUtil.styleAsInt(window.getComputedStyle(parent), 'padding-bottom');
-                        dropdownMenu.style.setProperty('transform', 'translateX(-' + Math.ceil(offsetRight) + 'px) translateY(-' + offsetTop + 'px)', '');
-                    }
-                },
-                callbackSelect: function () {
-                    setTimeout(function () {
-                        DomTraverse.parentByTag(searchInput, 'FORM').submit();
-                    }, 1);
-                    return true;
-                }
-            });
-            var dropdownMenu = UiSimpleDropdown.getDropdownMenu(DomUtil.identify(elBySel('.pageHeaderSearchType')));
-            var callback = this._click.bind(this);
-            elBySelAll('a[data-object-type]', dropdownMenu, function (link) {
-                link.addEventListener(WCF_CLICK_EVENT, callback);
-            });
-            // trigger click on init
-            var link = elBySel('a[data-object-type="' + objectType + '"]', dropdownMenu);
-            Core.triggerEvent(link, WCF_CLICK_EVENT);
-        },
-        _click: function (event) {
-            event.preventDefault();
-            var pageHeader = elById('pageHeader');
-            pageHeader.classList.add('searchBarForceOpen');
-            window.setTimeout(function () {
-                pageHeader.classList.remove('searchBarForceOpen');
-            }, 10);
-            var objectType = elData(event.currentTarget, 'object-type');
-            var container = elById('pageHeaderSearchParameters');
-            container.innerHTML = '';
-            var extendedLink = elData(event.currentTarget, 'extended-link');
-            if (extendedLink) {
-                elBySel('.pageHeaderSearchExtendedLink').href = extendedLink;
-            }
-            var parameters = elData(event.currentTarget, 'parameters');
-            if (parameters) {
-                parameters = JSON.parse(parameters);
-            }
-            else {
-                parameters = {};
-            }
-            if (objectType)
-                parameters['types[]'] = objectType;
-            for (var key in parameters) {
-                if (parameters.hasOwnProperty(key)) {
-                    var input = elCreate('input');
-                    input.type = 'hidden';
-                    input.name = key;
-                    input.value = parameters[key];
-                    container.appendChild(input);
-                }
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.init = void 0;
+    Core = __importStar(Core);
+    DomTraverse = __importStar(DomTraverse);
+    Util_1 = __importDefault(Util_1);
+    Simple_1 = __importDefault(Simple_1);
+    UiScreen = __importStar(UiScreen);
+    Input_1 = __importDefault(Input_1);
+    function click(event) {
+        event.preventDefault();
+        const pageHeader = document.getElementById('pageHeader');
+        pageHeader.classList.add('searchBarForceOpen');
+        window.setTimeout(() => {
+            pageHeader.classList.remove('searchBarForceOpen');
+        }, 10);
+        const target = event.currentTarget;
+        const objectType = target.dataset.objectType;
+        const container = document.getElementById('pageHeaderSearchParameters');
+        container.innerHTML = '';
+        const extendedLink = target.dataset.extendedLink;
+        if (extendedLink) {
+            const link = document.querySelector('.pageHeaderSearchExtendedLink');
+            link.href = extendedLink;
+        }
+        const parameters = new Map();
+        try {
+            const data = JSON.parse(target.dataset.parameters || '');
+            if (Core.isPlainObject(data)) {
+                Object.keys(data).forEach(key => {
+                    parameters.set(key, data[key]);
+                });
             }
-            // update label
-            var button = elBySel('.pageHeaderSearchType > .button > .pageHeaderSearchTypeLabel', elById('pageHeaderSearchInputContainer'));
-            button.textContent = event.currentTarget.textContent;
         }
-    };
+        catch (e) {
+        }
+        if (objectType) {
+            parameters.set('types[]', objectType);
+        }
+        parameters.forEach((value, key) => {
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = key;
+            input.value = value;
+            container.appendChild(input);
+        });
+        // update label
+        const inputContainer = document.getElementById('pageHeaderSearchInputContainer');
+        const button = inputContainer.querySelector('.pageHeaderSearchType > .button > .pageHeaderSearchTypeLabel');
+        button.textContent = target.textContent;
+    }
+    function init(objectType) {
+        const searchInput = document.getElementById('pageHeaderSearchInput');
+        new Input_1.default(searchInput, {
+            ajax: {
+                className: 'wcf\\data\\search\\keyword\\SearchKeywordAction',
+            },
+            autoFocus: false,
+            callbackDropdownInit(dropdownMenu) {
+                dropdownMenu.classList.add('dropdownMenuPageSearch');
+                if (UiScreen.is('screen-lg')) {
+                    dropdownMenu.dataset.dropdownAlignmentHorizontal = 'right';
+                    const minWidth = searchInput.clientWidth;
+                    dropdownMenu.style.setProperty('min-width', minWidth + 'px', '');
+                    // calculate offset to ignore the width caused by the submit button
+                    const parent = searchInput.parentElement;
+                    const offsetRight = (Util_1.default.offset(parent).left + parent.clientWidth) - (Util_1.default.offset(searchInput).left + minWidth);
+                    const offsetTop = Util_1.default.styleAsInt(window.getComputedStyle(parent), 'padding-bottom');
+                    dropdownMenu.style.setProperty('transform', 'translateX(-' + Math.ceil(offsetRight) + 'px) translateY(-' + offsetTop + 'px)', '');
+                }
+            },
+            callbackSelect() {
+                setTimeout(() => {
+                    const form = DomTraverse.parentByTag(searchInput, 'FORM');
+                    form.submit();
+                }, 1);
+                return true;
+            },
+        });
+        const searchType = document.querySelector('.pageHeaderSearchType');
+        const dropdownMenu = Simple_1.default.getDropdownMenu(Util_1.default.identify(searchType));
+        dropdownMenu.querySelectorAll('a[data-object-type]').forEach(link => {
+            link.addEventListener('click', click);
+        });
+        // trigger click on init
+        const link = dropdownMenu.querySelector('a[data-object-type="' + objectType + '"]');
+        link.click();
+    }
+    exports.init = init;
 });
index fec4381023dbe5a655c8cb3711dcc9cb47b0d205..c6833afbfd36bbe5ccac2652a536607173fa2891 100644 (file)
@@ -62,7 +62,7 @@ class UiSearchInput {
       preventSubmit: false,
     }, options) as SearchInputOptions;
 
-    this.ajaxPayload = options.ajax;
+    this.ajaxPayload = options.ajax as DatabaseObjectActionPayload;
     this.autoFocus = options.autoFocus!;
     this.callbackDropdownInit = options.callbackDropdownInit;
     this.callbackSelect = options.callbackSelect;
@@ -369,7 +369,7 @@ type CallbackDropdownInit = (list: HTMLUListElement) => void
 type CallbackSelect = (item: HTMLElement) => boolean
 
 interface SearchInputOptions {
-  ajax: DatabaseObjectActionPayload;
+  ajax: Partial<DatabaseObjectActionPayload>;
   autoFocus?: boolean;
   callbackDropdownInit?: CallbackDropdownInit;
   callbackSelect?: CallbackSelect;
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Search/Page.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Search/Page.js
deleted file mode 100644 (file)
index 3822bec..0000000
+++ /dev/null
@@ -1,93 +0,0 @@
-define(['Core', 'Dom/Traverse', 'Dom/Util', 'Ui/Screen', 'Ui/SimpleDropdown', './Input'], function(Core, DomTraverse, DomUtil, UiScreen, UiSimpleDropdown, UiSearchInput) {
-       "use strict";
-       
-       return {
-               init: function (objectType) {
-                       var searchInput = elById('pageHeaderSearchInput');
-                       
-                       new UiSearchInput(searchInput, {
-                               ajax: {
-                                       className: 'wcf\\data\\search\\keyword\\SearchKeywordAction'
-                               },
-                               autoFocus: false,
-                               callbackDropdownInit: function(dropdownMenu) {
-                                       dropdownMenu.classList.add('dropdownMenuPageSearch');
-                                       
-                                       if (UiScreen.is('screen-lg')) {
-                                               elData(dropdownMenu, 'dropdown-alignment-horizontal', 'right');
-                                               
-                                               var minWidth = searchInput.clientWidth;
-                                               dropdownMenu.style.setProperty('min-width', minWidth + 'px', '');
-                                               
-                                               // calculate offset to ignore the width caused by the submit button
-                                               var parent = searchInput.parentNode;
-                                               var offsetRight = (DomUtil.offset(parent).left + parent.clientWidth) - (DomUtil.offset(searchInput).left + minWidth);
-                                               var offsetTop = DomUtil.styleAsInt(window.getComputedStyle(parent), 'padding-bottom');
-                                               dropdownMenu.style.setProperty('transform', 'translateX(-' + Math.ceil(offsetRight) + 'px) translateY(-' + offsetTop + 'px)', '');
-                                       }
-                               },
-                               callbackSelect: function() {
-                                       setTimeout(function() {
-                                               DomTraverse.parentByTag(searchInput, 'FORM').submit();
-                                       }, 1);
-                                       
-                                       return true;
-                               }
-                       });
-                       
-                       var dropdownMenu = UiSimpleDropdown.getDropdownMenu(DomUtil.identify(elBySel('.pageHeaderSearchType')));
-                       var callback = this._click.bind(this);
-                       elBySelAll('a[data-object-type]', dropdownMenu, function(link) {
-                               link.addEventListener(WCF_CLICK_EVENT, callback);
-                       });
-                       
-                       // trigger click on init
-                       var link = elBySel('a[data-object-type="' + objectType + '"]', dropdownMenu);
-                       Core.triggerEvent(link, WCF_CLICK_EVENT);
-               },
-               
-               _click: function(event) {
-                       event.preventDefault();
-                       
-                       var pageHeader = elById('pageHeader');
-                       pageHeader.classList.add('searchBarForceOpen');
-                       window.setTimeout(function() {
-                               pageHeader.classList.remove('searchBarForceOpen');
-                       }, 10);
-                       
-                       var objectType = elData(event.currentTarget, 'object-type');
-                       
-                       var container = elById('pageHeaderSearchParameters');
-                       container.innerHTML = '';
-                       
-                       var extendedLink = elData(event.currentTarget, 'extended-link');
-                       if (extendedLink) {
-                               elBySel('.pageHeaderSearchExtendedLink').href = extendedLink;
-                       }
-                       
-                       var parameters = elData(event.currentTarget, 'parameters');
-                       if (parameters) {
-                               parameters = JSON.parse(parameters);
-                       }
-                       else {
-                               parameters = {};
-                       }
-                       
-                       if (objectType) parameters['types[]'] = objectType;
-                       
-                       for (var key in parameters) {
-                               if (parameters.hasOwnProperty(key)) {
-                                       var input = elCreate('input');
-                                       input.type = 'hidden';
-                                       input.name = key;
-                                       input.value = parameters[key];
-                                       container.appendChild(input);
-                               }
-                       }
-                       
-                       // update label
-                       var button = elBySel('.pageHeaderSearchType > .button > .pageHeaderSearchTypeLabel', elById('pageHeaderSearchInputContainer'));
-                       button.textContent = event.currentTarget.textContent;
-               }
-       };
-});
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Search/Page.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Search/Page.ts
new file mode 100644 (file)
index 0000000..41a9597
--- /dev/null
@@ -0,0 +1,103 @@
+import * as Core from '../../Core';
+import * as DomTraverse from '../../Dom/Traverse';
+import DomUtil from '../../Dom/Util';
+import UiDropdownSimple from '../Dropdown/Simple';
+import * as UiScreen from '../Screen';
+import UiSearchInput from './Input';
+
+function click(event: MouseEvent): void {
+  event.preventDefault();
+
+  const pageHeader = document.getElementById('pageHeader') as HTMLElement;
+  pageHeader.classList.add('searchBarForceOpen');
+  window.setTimeout(() => {
+    pageHeader.classList.remove('searchBarForceOpen');
+  }, 10);
+
+  const target = event.currentTarget as HTMLElement;
+  const objectType = target.dataset.objectType;
+
+  const container = document.getElementById('pageHeaderSearchParameters') as HTMLElement;
+  container.innerHTML = '';
+
+  const extendedLink = target.dataset.extendedLink;
+  if (extendedLink) {
+    const link = document.querySelector('.pageHeaderSearchExtendedLink') as HTMLAnchorElement;
+    link.href = extendedLink;
+  }
+
+  const parameters = new Map<string, string>();
+  try {
+    const data = JSON.parse(target.dataset.parameters || '');
+    if (Core.isPlainObject(data)) {
+      Object.keys(data).forEach(key => {
+        parameters.set(key, data[key]);
+      });
+    }
+  } catch (e) {
+  }
+
+  if (objectType) {
+    parameters.set('types[]', objectType);
+  }
+
+  parameters.forEach((value, key) => {
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = key;
+    input.value = value;
+    container.appendChild(input);
+  });
+
+  // update label
+  const inputContainer = document.getElementById('pageHeaderSearchInputContainer') as HTMLElement;
+  const button = inputContainer.querySelector('.pageHeaderSearchType > .button > .pageHeaderSearchTypeLabel') as HTMLElement;
+  button.textContent = target.textContent;
+}
+
+export function init(objectType: string): void {
+  const searchInput = document.getElementById('pageHeaderSearchInput') as HTMLInputElement;
+
+  new UiSearchInput(searchInput, {
+    ajax: {
+      className: 'wcf\\data\\search\\keyword\\SearchKeywordAction',
+    },
+    autoFocus: false,
+    callbackDropdownInit(dropdownMenu) {
+      dropdownMenu.classList.add('dropdownMenuPageSearch');
+
+      if (UiScreen.is('screen-lg')) {
+        dropdownMenu.dataset.dropdownAlignmentHorizontal = 'right';
+
+        const minWidth = searchInput.clientWidth;
+        dropdownMenu.style.setProperty('min-width', minWidth + 'px', '');
+
+        // calculate offset to ignore the width caused by the submit button
+        const parent = searchInput.parentElement!;
+        const offsetRight = (DomUtil.offset(parent).left + parent.clientWidth) - (DomUtil.offset(searchInput).left + minWidth);
+        const offsetTop = DomUtil.styleAsInt(window.getComputedStyle(parent), 'padding-bottom');
+        dropdownMenu.style.setProperty('transform', 'translateX(-' + Math.ceil(offsetRight) + 'px) translateY(-' + offsetTop + 'px)', '');
+      }
+    },
+    callbackSelect() {
+      setTimeout(() => {
+        const form = DomTraverse.parentByTag(searchInput, 'FORM') as HTMLFormElement;
+        form.submit();
+      }, 1);
+
+      return true;
+    },
+  });
+
+  const searchType = document.querySelector('.pageHeaderSearchType') as HTMLElement;
+  const dropdownMenu = UiDropdownSimple.getDropdownMenu(DomUtil.identify(searchType))!;
+  dropdownMenu.querySelectorAll('a[data-object-type]').forEach(link => {
+    link.addEventListener('click', click);
+  });
+
+  // trigger click on init
+  const link = dropdownMenu.querySelector('a[data-object-type="' + objectType + '"]') as HTMLAnchorElement;
+  link.click();
+}
+
+