From: Alexander Ebert Date: Wed, 28 Oct 2020 19:06:13 +0000 (+0100) Subject: Convert `Ui/Page/Header/Fixed` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~688^2~3 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=c7ebe732faadd1954324a0d5b0eb66968cf30148;p=GitHub%2FWoltLab%2FWCF.git Convert `Ui/Page/Header/Fixed` to TypeScript --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js index dda3c9a687..c38d0d439c 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js @@ -1,103 +1,119 @@ /** * Manages the sticky page header. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Page/Header/Fixed + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Page/Header/Fixed */ -define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/SimpleDropdown', 'Ui/Screen'], function (Core, EventHandler, UiAlignment, UiCloseOverlay, UiSimpleDropdown, UiScreen) { +define(["require", "exports", "tslib", "../../../Event/Handler", "../../Alignment", "../../CloseOverlay", "../../Dropdown/Simple", "../../Screen"], function (require, exports, tslib_1, EventHandler, UiAlignment, CloseOverlay_1, Simple_1, UiScreen) { "use strict"; - var _pageHeader, _pageHeaderContainer, _pageHeaderPanel, _pageHeaderSearch, _searchInput, _topMenu, _userPanelSearchButton; - var _isMobile = false; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.init = void 0; + EventHandler = tslib_1.__importStar(EventHandler); + UiAlignment = tslib_1.__importStar(UiAlignment); + CloseOverlay_1 = tslib_1.__importDefault(CloseOverlay_1); + Simple_1 = tslib_1.__importDefault(Simple_1); + UiScreen = tslib_1.__importStar(UiScreen); + let _isMobile = false; + let _pageHeader; + let _pageHeaderContainer; + let _pageHeaderPanel; + let _pageHeaderSearch; + let _searchInput; + let _topMenu; + let _userPanelSearchButton; /** - * @exports WoltLabSuite/Core/Ui/Page/Header/Fixed + * Provides the collapsible search bar. + * + * @protected */ - return { - /** - * Initializes the sticky page header handler. - */ - init: function () { - _pageHeader = elById('pageHeader'); - _pageHeaderContainer = elById('pageHeaderContainer'); - this._initSearchBar(); - UiScreen.on('screen-md-down', { - match: function () { _isMobile = true; }, - unmatch: function () { _isMobile = false; }, - setup: function () { _isMobile = true; } - }); - EventHandler.add('com.woltlab.wcf.Search', 'close', this._closeSearchBar.bind(this)); - }, - /** - * Provides the collapsible search bar. - * - * @protected - */ - _initSearchBar: function () { - _pageHeaderSearch = elById('pageHeaderSearch'); - _pageHeaderSearch.addEventListener(WCF_CLICK_EVENT, function (event) { event.stopPropagation(); }); - _pageHeaderPanel = elById('pageHeaderPanel'); - _searchInput = elById('pageHeaderSearchInput'); - _topMenu = elById('topMenu'); - _userPanelSearchButton = elById('userPanelSearchButton'); - _userPanelSearchButton.addEventListener(WCF_CLICK_EVENT, (function (event) { - event.preventDefault(); - event.stopPropagation(); - if (_pageHeader.classList.contains('searchBarOpen')) { - this._closeSearchBar(); - } - else { - this._openSearchBar(); - } - }).bind(this)); - UiCloseOverlay.add('WoltLabSuite/Core/Ui/Page/Header/Fixed', (function () { - if (_pageHeader.classList.contains('searchBarForceOpen')) - return; - this._closeSearchBar(); - }).bind(this)); - EventHandler.add('com.woltlab.wcf.MainMenuMobile', 'more', (function (data) { - if (data.identifier === 'com.woltlab.wcf.search') { - data.handler.close(true); - Core.triggerEvent(_userPanelSearchButton, WCF_CLICK_EVENT); - } - }).bind(this)); - }, - /** - * Opens the search bar. - * - * @protected - */ - _openSearchBar: function () { - window.WCF.Dropdown.Interactive.Handler.closeAll(); - _pageHeader.classList.add('searchBarOpen'); - _userPanelSearchButton.parentNode.classList.add('open'); - if (!_isMobile) { - // calculate value for `right` on desktop - UiAlignment.set(_pageHeaderSearch, _topMenu, { - horizontal: 'right' - }); + function initSearchBar() { + _pageHeaderSearch = document.getElementById('pageHeaderSearch'); + _pageHeaderSearch.addEventListener('click', ev => ev.stopPropagation()); + _pageHeaderPanel = document.getElementById('pageHeaderPanel'); + _searchInput = document.getElementById('pageHeaderSearchInput'); + _topMenu = document.getElementById('topMenu'); + _userPanelSearchButton = document.getElementById('userPanelSearchButton'); + _userPanelSearchButton.addEventListener('click', event => { + event.preventDefault(); + event.stopPropagation(); + if (_pageHeader.classList.contains('searchBarOpen')) { + closeSearchBar(); + } + else { + openSearchBar(); + } + }); + CloseOverlay_1.default.add('WoltLabSuite/Core/Ui/Page/Header/Fixed', () => { + if (_pageHeader.classList.contains('searchBarForceOpen')) { + return; } - _pageHeaderSearch.style.setProperty('top', _pageHeaderPanel.clientHeight + 'px', ''); - _searchInput.focus(); - window.setTimeout(function () { - _searchInput.selectionStart = _searchInput.selectionEnd = _searchInput.value.length; - }, 1); - }, - /** - * Closes the search bar. - * - * @protected - */ - _closeSearchBar: function () { - _pageHeader.classList.remove('searchBarOpen'); - _userPanelSearchButton.parentNode.classList.remove('open'); - ['bottom', 'left', 'right', 'top'].forEach(function (propertyName) { - _pageHeaderSearch.style.removeProperty(propertyName); + closeSearchBar(); + }); + EventHandler.add('com.woltlab.wcf.MainMenuMobile', 'more', data => { + if (data.identifier === 'com.woltlab.wcf.search') { + data.handler.close(true); + _userPanelSearchButton.click(); + } + }); + } + /** + * Opens the search bar. + * + * @protected + */ + function openSearchBar() { + window.WCF.Dropdown.Interactive.Handler.closeAll(); + _pageHeader.classList.add('searchBarOpen'); + _userPanelSearchButton.parentElement.classList.add('open'); + if (!_isMobile) { + // calculate value for `right` on desktop + UiAlignment.set(_pageHeaderSearch, _topMenu, { + horizontal: 'right', }); - _searchInput.blur(); - // close the scope selection - var scope = elBySel('.pageHeaderSearchType', _pageHeaderSearch); - UiSimpleDropdown.close(scope.id); } - }; + _pageHeaderSearch.style.setProperty('top', _pageHeaderPanel.clientHeight + 'px', ''); + _searchInput.focus(); + window.setTimeout(() => { + _searchInput.selectionStart = _searchInput.selectionEnd = _searchInput.value.length; + }, 1); + } + /** + * Closes the search bar. + * + * @protected + */ + function closeSearchBar() { + _pageHeader.classList.remove('searchBarOpen'); + _userPanelSearchButton.parentElement.classList.remove('open'); + ['bottom', 'left', 'right', 'top'].forEach(propertyName => { + _pageHeaderSearch.style.removeProperty(propertyName); + }); + _searchInput.blur(); + // close the scope selection + const scope = _pageHeaderSearch.querySelector('.pageHeaderSearchType'); + Simple_1.default.close(scope.id); + } + /** + * Initializes the sticky page header handler. + */ + function init() { + _pageHeader = document.getElementById('pageHeader'); + _pageHeaderContainer = document.getElementById('pageHeaderContainer'); + initSearchBar(); + UiScreen.on('screen-md-down', { + match() { + _isMobile = true; + }, + unmatch() { + _isMobile = false; + }, + setup() { + _isMobile = true; + }, + }); + EventHandler.add('com.woltlab.wcf.Search', 'close', closeSearchBar); + } + exports.init = init; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.js deleted file mode 100644 index 9ad2476afd..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.js +++ /dev/null @@ -1,123 +0,0 @@ -/** - * Manages the sticky page header. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Page/Header/Fixed - */ -define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/SimpleDropdown', 'Ui/Screen'], function(Core, EventHandler, UiAlignment, UiCloseOverlay, UiSimpleDropdown, UiScreen) { - "use strict"; - - var _pageHeader, _pageHeaderContainer, _pageHeaderPanel, _pageHeaderSearch, _searchInput, _topMenu, _userPanelSearchButton; - var _isMobile = false; - - /** - * @exports WoltLabSuite/Core/Ui/Page/Header/Fixed - */ - return { - /** - * Initializes the sticky page header handler. - */ - init: function() { - _pageHeader = elById('pageHeader'); - _pageHeaderContainer = elById('pageHeaderContainer'); - - this._initSearchBar(); - - UiScreen.on('screen-md-down', { - match: function () { _isMobile = true; }, - unmatch: function () { _isMobile = false; }, - setup: function () { _isMobile = true; } - }); - - EventHandler.add('com.woltlab.wcf.Search', 'close', this._closeSearchBar.bind(this)); - }, - - /** - * Provides the collapsible search bar. - * - * @protected - */ - _initSearchBar: function() { - _pageHeaderSearch = elById('pageHeaderSearch'); - _pageHeaderSearch.addEventListener(WCF_CLICK_EVENT, function(event) { event.stopPropagation(); }); - - _pageHeaderPanel = elById('pageHeaderPanel'); - _searchInput = elById('pageHeaderSearchInput'); - _topMenu = elById('topMenu'); - - _userPanelSearchButton = elById('userPanelSearchButton'); - _userPanelSearchButton.addEventListener(WCF_CLICK_EVENT, (function(event) { - event.preventDefault(); - event.stopPropagation(); - - if (_pageHeader.classList.contains('searchBarOpen')) { - this._closeSearchBar(); - } - else { - this._openSearchBar(); - } - }).bind(this)); - - UiCloseOverlay.add('WoltLabSuite/Core/Ui/Page/Header/Fixed', (function() { - if (_pageHeader.classList.contains('searchBarForceOpen')) return; - - this._closeSearchBar(); - }).bind(this)); - - EventHandler.add('com.woltlab.wcf.MainMenuMobile', 'more', (function(data) { - if (data.identifier === 'com.woltlab.wcf.search') { - data.handler.close(true); - - Core.triggerEvent(_userPanelSearchButton, WCF_CLICK_EVENT); - } - }).bind(this)); - }, - - /** - * Opens the search bar. - * - * @protected - */ - _openSearchBar: function() { - window.WCF.Dropdown.Interactive.Handler.closeAll(); - - _pageHeader.classList.add('searchBarOpen'); - _userPanelSearchButton.parentNode.classList.add('open'); - - if (!_isMobile) { - // calculate value for `right` on desktop - UiAlignment.set(_pageHeaderSearch, _topMenu, { - horizontal: 'right' - }); - } - - _pageHeaderSearch.style.setProperty('top', _pageHeaderPanel.clientHeight + 'px', ''); - _searchInput.focus(); - window.setTimeout(function() { - _searchInput.selectionStart = _searchInput.selectionEnd = _searchInput.value.length; - }, 1); - }, - - /** - * Closes the search bar. - * - * @protected - */ - _closeSearchBar: function () { - _pageHeader.classList.remove('searchBarOpen'); - _userPanelSearchButton.parentNode.classList.remove('open'); - - ['bottom', 'left', 'right', 'top'].forEach(function(propertyName) { - _pageHeaderSearch.style.removeProperty(propertyName); - }); - - _searchInput.blur(); - - // close the scope selection - var scope = elBySel('.pageHeaderSearchType', _pageHeaderSearch); - UiSimpleDropdown.close(scope.id); - } - }; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.ts new file mode 100644 index 0000000000..62cb971ec4 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Header/Fixed.ts @@ -0,0 +1,136 @@ +/** + * Manages the sticky page header. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Page/Header/Fixed + */ + +import * as EventHandler from '../../../Event/Handler'; +import * as UiAlignment from '../../Alignment'; +import UiCloseOverlay from '../../CloseOverlay'; +import UiDropdownSimple from '../../Dropdown/Simple'; +import * as UiScreen from '../../Screen'; + +let _isMobile = false; + +let _pageHeader: HTMLElement; +let _pageHeaderContainer: HTMLElement; +let _pageHeaderPanel: HTMLElement; +let _pageHeaderSearch: HTMLElement; +let _searchInput: HTMLInputElement; +let _topMenu: HTMLElement; +let _userPanelSearchButton: HTMLElement; + +/** + * Provides the collapsible search bar. + * + * @protected + */ +function initSearchBar() { + _pageHeaderSearch = document.getElementById('pageHeaderSearch')!; + _pageHeaderSearch.addEventListener('click', ev => ev.stopPropagation()); + + _pageHeaderPanel = document.getElementById('pageHeaderPanel')!; + _searchInput = document.getElementById('pageHeaderSearchInput') as HTMLInputElement; + _topMenu = document.getElementById('topMenu')!; + + _userPanelSearchButton = document.getElementById('userPanelSearchButton')!; + _userPanelSearchButton.addEventListener('click', event => { + event.preventDefault(); + event.stopPropagation(); + + if (_pageHeader.classList.contains('searchBarOpen')) { + closeSearchBar(); + } else { + openSearchBar(); + } + }); + + UiCloseOverlay.add('WoltLabSuite/Core/Ui/Page/Header/Fixed', () => { + if (_pageHeader.classList.contains('searchBarForceOpen')) { + return; + } + + closeSearchBar(); + }); + + EventHandler.add('com.woltlab.wcf.MainMenuMobile', 'more', data => { + if (data.identifier === 'com.woltlab.wcf.search') { + data.handler.close(true); + + _userPanelSearchButton.click(); + } + }); +} + +/** + * Opens the search bar. + * + * @protected + */ +function openSearchBar() { + window.WCF.Dropdown.Interactive.Handler.closeAll(); + + _pageHeader.classList.add('searchBarOpen'); + _userPanelSearchButton.parentElement!.classList.add('open'); + + if (!_isMobile) { + // calculate value for `right` on desktop + UiAlignment.set(_pageHeaderSearch, _topMenu, { + horizontal: 'right', + }); + } + + _pageHeaderSearch.style.setProperty('top', _pageHeaderPanel.clientHeight + 'px', ''); + _searchInput.focus(); + + window.setTimeout(() => { + _searchInput.selectionStart = _searchInput.selectionEnd = _searchInput.value.length; + }, 1); +} + +/** + * Closes the search bar. + * + * @protected + */ +function closeSearchBar() { + _pageHeader.classList.remove('searchBarOpen'); + _userPanelSearchButton.parentElement!.classList.remove('open'); + + ['bottom', 'left', 'right', 'top'].forEach(propertyName => { + _pageHeaderSearch.style.removeProperty(propertyName); + }); + + _searchInput.blur(); + + // close the scope selection + const scope = _pageHeaderSearch.querySelector('.pageHeaderSearchType')!; + UiDropdownSimple.close(scope.id); +} + +/** + * Initializes the sticky page header handler. + */ +export function init() { + _pageHeader = document.getElementById('pageHeader')!; + _pageHeaderContainer = document.getElementById('pageHeaderContainer')!; + + initSearchBar(); + + UiScreen.on('screen-md-down', { + match() { + _isMobile = true; + }, + unmatch() { + _isMobile = false; + }, + setup() { + _isMobile = true; + }, + }); + + EventHandler.add('com.woltlab.wcf.Search', 'close', closeSearchBar); +}