From d87001682bf9eb5874f1a7b430f3ad5e0ef469fc Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 2 Jan 2021 14:03:45 +0100 Subject: [PATCH] Convert `Controller/Condition/Page/Dependence` --- .../Controller/Condition/Page/Dependence.js | 166 ++++++++---------- .../Controller/Condition/Page/Dependence.js | 126 ------------- .../Controller/Condition/Page/Dependence.ts | 97 ++++++++++ 3 files changed, 170 insertions(+), 219 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Condition/Page/Dependence.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Condition/Page/Dependence.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Condition/Page/Dependence.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Condition/Page/Dependence.js index 8fa1956ad9..0ce4cc3ecc 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Condition/Page/Dependence.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Condition/Page/Dependence.js @@ -1,105 +1,85 @@ /** * Shows and hides an element that depends on certain selected pages when setting up conditions. * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Controller/Condition/Page/Dependence + * @author Matthias Schmidt + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Controller/Condition/Page/Dependence */ -define(['Dom/ChangeListener', 'Dom/Traverse', 'EventHandler', 'ObjectMap'], function (DomChangeListener, DomTraverse, EventHandler, ObjectMap) { +define(["require", "exports", "tslib", "../../../Dom/Util", "../../../Event/Handler"], function (require, exports, tslib_1, Util_1, EventHandler) { "use strict"; - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function () { }; - Fake.prototype = { - register: function () { }, - _checkVisibility: function () { }, - _hideDependentElement: function () { }, - _showDependentElement: function () { } - }; - return Fake; - } - var _pages = elBySelAll('input[name="pageIDs[]"]'); - var _dependentElements = []; - var _pageIds = new ObjectMap(); - var _hiddenElements = new ObjectMap(); - var _didInit = false; - return { - register: function (dependentElement, pageIds) { - _dependentElements.push(dependentElement); - _pageIds.set(dependentElement, pageIds); - _hiddenElements.set(dependentElement, []); - if (!_didInit) { - for (var i = 0, length = _pages.length; i < length; i++) { - _pages[i].addEventListener('change', this._checkVisibility.bind(this)); - } - _didInit = true; - } - // remove the dependent element before submit if it is hidden - DomTraverse.parentByTag(dependentElement, 'FORM').addEventListener('submit', function () { - if (dependentElement.style.getPropertyValue('display') === 'none') { - dependentElement.remove(); + Object.defineProperty(exports, "__esModule", { value: true }); + exports.register = void 0; + Util_1 = tslib_1.__importDefault(Util_1); + EventHandler = tslib_1.__importStar(EventHandler); + const _pages = Array.from(document.querySelectorAll('input[name="pageIDs[]"]')); + const _dependentElements = []; + const _pageIds = new WeakMap(); + const _hiddenElements = new WeakMap(); + let _didInit = false; + /** + * Checks if only relevant pages are selected. If that is the case, the dependent + * element is shown, otherwise it is hidden. + */ + function checkVisibility() { + _dependentElements.forEach((dependentElement) => { + const pageIds = _pageIds.get(dependentElement); + const checkedPageIds = []; + _pages.forEach((page) => { + if (page.checked) { + checkedPageIds.push(~~page.value); } }); - this._checkVisibility(); - }, - /** - * Checks if only relevant pages are selected. If that is the case, the dependent - * element is shown, otherwise it is hidden. - * - * @private - */ - _checkVisibility: function () { - var dependentElement, page, pageIds, checkedPageIds, irrelevantPageIds; - depenentElementLoop: for (var i = 0, length = _dependentElements.length; i < length; i++) { - dependentElement = _dependentElements[i]; - pageIds = _pageIds.get(dependentElement); - checkedPageIds = []; - for (var j = 0, length2 = _pages.length; j < length2; j++) { - page = _pages[j]; - if (page.checked) { - checkedPageIds.push(~~page.value); - } - } - irrelevantPageIds = checkedPageIds.filter(function (pageId) { - return pageIds.indexOf(pageId) === -1; - }); - if (!checkedPageIds.length || irrelevantPageIds.length) { - this._hideDependentElement(dependentElement); - } - else { - this._showDependentElement(dependentElement); - } + const irrelevantPageIds = checkedPageIds.filter((pageId) => pageIds.includes(pageId)); + if (!checkedPageIds.length || irrelevantPageIds.length) { + hideDependentElement(dependentElement); } - EventHandler.fire('com.woltlab.wcf.pageConditionDependence', 'checkVisivility'); - }, - /** - * Hides all elements that depend on the given element. - * - * @param {HTMLElement} dependentElement - */ - _hideDependentElement: function (dependentElement) { - elHide(dependentElement); - var hiddenElements = _hiddenElements.get(dependentElement); - for (var i = 0, length = hiddenElements.length; i < length; i++) { - elHide(hiddenElements[i]); + else { + showDependentElement(dependentElement); } - _hiddenElements.set(dependentElement, []); - }, - /** - * Shows all elements that depend on the given element. - * - * @param {HTMLElement} dependentElement - */ - _showDependentElement: function (dependentElement) { - elShow(dependentElement); - // make sure that all parent elements are also visible - var parentNode = dependentElement; - while ((parentNode = parentNode.parentNode) && parentNode instanceof Element) { - if (parentNode.style.getPropertyValue('display') === 'none') { - _hiddenElements.get(dependentElement).push(parentNode); - } - elShow(parentNode); + }); + EventHandler.fire("com.woltlab.wcf.pageConditionDependence", "checkVisivility"); + } + /** + * Hides all elements that depend on the given element. + */ + function hideDependentElement(dependentElement) { + Util_1.default.hide(dependentElement); + const hiddenElements = _hiddenElements.get(dependentElement); + hiddenElements.forEach((hiddenElement) => Util_1.default.hide(hiddenElement)); + _hiddenElements.set(dependentElement, []); + } + /** + * Shows all elements that depend on the given element. + */ + function showDependentElement(dependentElement) { + Util_1.default.show(dependentElement); + // make sure that all parent elements are also visible + let parentElement = dependentElement; + while ((parentElement = parentElement.parentElement) && parentElement) { + if (Util_1.default.isHidden(parentElement)) { + _hiddenElements.get(dependentElement).push(parentElement); } + Util_1.default.show(parentElement); } - }; + } + function register(dependentElement, pageIds) { + _dependentElements.push(dependentElement); + _pageIds.set(dependentElement, pageIds); + _hiddenElements.set(dependentElement, []); + if (!_didInit) { + _pages.forEach((page) => { + page.addEventListener("change", () => checkVisibility()); + }); + _didInit = true; + } + // remove the dependent element before submit if it is hidden + dependentElement.closest("form").addEventListener("submit", () => { + if (Util_1.default.isHidden(dependentElement)) { + dependentElement.remove(); + } + }); + checkVisibility(); + } + exports.register = register; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Condition/Page/Dependence.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Condition/Page/Dependence.js deleted file mode 100644 index cf16e49543..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Condition/Page/Dependence.js +++ /dev/null @@ -1,126 +0,0 @@ -/** - * Shows and hides an element that depends on certain selected pages when setting up conditions. - * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Controller/Condition/Page/Dependence - */ -define(['Dom/ChangeListener', 'Dom/Traverse', 'EventHandler', 'ObjectMap'], function(DomChangeListener, DomTraverse, EventHandler, ObjectMap) { - "use strict"; - - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function() {}; - Fake.prototype = { - register: function() {}, - _checkVisibility: function() {}, - _hideDependentElement: function() {}, - _showDependentElement: function() {} - }; - return Fake; - } - - var _pages = elBySelAll('input[name="pageIDs[]"]'); - var _dependentElements = []; - var _pageIds = new ObjectMap(); - var _hiddenElements = new ObjectMap(); - - var _didInit = false; - - return { - register: function(dependentElement, pageIds) { - _dependentElements.push(dependentElement); - _pageIds.set(dependentElement, pageIds); - _hiddenElements.set(dependentElement, []); - - if (!_didInit) { - for (var i = 0, length = _pages.length; i < length; i++) { - _pages[i].addEventListener('change', this._checkVisibility.bind(this)); - } - - _didInit = true; - } - - // remove the dependent element before submit if it is hidden - DomTraverse.parentByTag(dependentElement, 'FORM').addEventListener('submit', function() { - if (dependentElement.style.getPropertyValue('display') === 'none') { - dependentElement.remove(); - } - }); - - this._checkVisibility(); - }, - - /** - * Checks if only relevant pages are selected. If that is the case, the dependent - * element is shown, otherwise it is hidden. - * - * @private - */ - _checkVisibility: function() { - var dependentElement, page, pageIds, checkedPageIds, irrelevantPageIds; - - depenentElementLoop: for (var i = 0, length = _dependentElements.length; i < length; i++) { - dependentElement = _dependentElements[i]; - pageIds = _pageIds.get(dependentElement); - - checkedPageIds = []; - for (var j = 0, length2 = _pages.length; j < length2; j++) { - page = _pages[j]; - - if (page.checked) { - checkedPageIds.push(~~page.value); - } - } - - irrelevantPageIds = checkedPageIds.filter(function(pageId) { - return pageIds.indexOf(pageId) === -1; - }); - - if (!checkedPageIds.length || irrelevantPageIds.length) { - this._hideDependentElement(dependentElement); - } - else { - this._showDependentElement(dependentElement); - } - } - - EventHandler.fire('com.woltlab.wcf.pageConditionDependence', 'checkVisivility'); - }, - - /** - * Hides all elements that depend on the given element. - * - * @param {HTMLElement} dependentElement - */ - _hideDependentElement: function(dependentElement) { - elHide(dependentElement); - - var hiddenElements = _hiddenElements.get(dependentElement); - for (var i = 0, length = hiddenElements.length; i < length; i++) { - elHide(hiddenElements[i]); - } - - _hiddenElements.set(dependentElement, []); - }, - - /** - * Shows all elements that depend on the given element. - * - * @param {HTMLElement} dependentElement - */ - _showDependentElement: function(dependentElement) { - elShow(dependentElement); - - // make sure that all parent elements are also visible - var parentNode = dependentElement; - while ((parentNode = parentNode.parentNode) && parentNode instanceof Element) { - if (parentNode.style.getPropertyValue('display') === 'none') { - _hiddenElements.get(dependentElement).push(parentNode); - } - - elShow(parentNode); - } - } - }; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Condition/Page/Dependence.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Condition/Page/Dependence.ts new file mode 100644 index 0000000000..24fdde38ee --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Condition/Page/Dependence.ts @@ -0,0 +1,97 @@ +/** + * Shows and hides an element that depends on certain selected pages when setting up conditions. + * + * @author Matthias Schmidt + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Controller/Condition/Page/Dependence + */ + +import DomUtil from "../../../Dom/Util"; +import * as EventHandler from "../../../Event/Handler"; + +const _pages: HTMLInputElement[] = Array.from(document.querySelectorAll('input[name="pageIDs[]"]')); +const _dependentElements: HTMLElement[] = []; +const _pageIds = new WeakMap(); +const _hiddenElements = new WeakMap(); + +let _didInit = false; + +/** + * Checks if only relevant pages are selected. If that is the case, the dependent + * element is shown, otherwise it is hidden. + */ +function checkVisibility(): void { + _dependentElements.forEach((dependentElement) => { + const pageIds = _pageIds.get(dependentElement)!; + + const checkedPageIds: number[] = []; + _pages.forEach((page) => { + if (page.checked) { + checkedPageIds.push(~~page.value); + } + }); + + const irrelevantPageIds = checkedPageIds.filter((pageId) => pageIds.includes(pageId)); + + if (!checkedPageIds.length || irrelevantPageIds.length) { + hideDependentElement(dependentElement); + } else { + showDependentElement(dependentElement); + } + }); + + EventHandler.fire("com.woltlab.wcf.pageConditionDependence", "checkVisivility"); +} + +/** + * Hides all elements that depend on the given element. + */ +function hideDependentElement(dependentElement: HTMLElement): void { + DomUtil.hide(dependentElement); + + const hiddenElements = _hiddenElements.get(dependentElement)!; + hiddenElements.forEach((hiddenElement) => DomUtil.hide(hiddenElement)); + + _hiddenElements.set(dependentElement, []); +} + +/** + * Shows all elements that depend on the given element. + */ +function showDependentElement(dependentElement: HTMLElement): void { + DomUtil.show(dependentElement); + + // make sure that all parent elements are also visible + let parentElement = dependentElement; + while ((parentElement = parentElement.parentElement!) && parentElement) { + if (DomUtil.isHidden(parentElement)) { + _hiddenElements.get(dependentElement)!.push(parentElement); + } + + DomUtil.show(parentElement); + } +} + +export function register(dependentElement: HTMLElement, pageIds: number[]): void { + _dependentElements.push(dependentElement); + _pageIds.set(dependentElement, pageIds); + _hiddenElements.set(dependentElement, []); + + if (!_didInit) { + _pages.forEach((page) => { + page.addEventListener("change", () => checkVisibility()); + }); + + _didInit = true; + } + + // remove the dependent element before submit if it is hidden + dependentElement.closest("form")!.addEventListener("submit", () => { + if (DomUtil.isHidden(dependentElement)) { + dependentElement.remove(); + } + }); + + checkVisibility(); +} -- 2.20.1