From 5d2b49b9b261f55b69463d4d52bd3a1fec9ade2f Mon Sep 17 00:00:00 2001 From: =?utf8?q?Tim=20D=C3=BCsterhus?= Date: Thu, 14 Sep 2023 15:02:43 +0200 Subject: [PATCH] Migrate from DomChangeListener to `wheneverFirstSeen()` for Date/Picker see https://www.woltlab.com/community/thread/301605-formbuilder-via-dialogfactory-l%C3%A4dt-dateformfield-falsch/ --- ts/WoltLabSuite/Core/Date/Picker.ts | 43 ++++++++----------- .../files/js/WoltLabSuite/Core/Date/Picker.js | 30 +++++-------- 2 files changed, 27 insertions(+), 46 deletions(-) diff --git a/ts/WoltLabSuite/Core/Date/Picker.ts b/ts/WoltLabSuite/Core/Date/Picker.ts index a8bb6ffa07..f7bad1953c 100644 --- a/ts/WoltLabSuite/Core/Date/Picker.ts +++ b/ts/WoltLabSuite/Core/Date/Picker.ts @@ -8,7 +8,6 @@ import * as Core from "../Core"; import * as DateUtil from "./Util"; -import DomChangeListener from "../Dom/Change/Listener"; import * as EventHandler from "../Event/Handler"; import * as Language from "../Language"; import * as UiAlignment from "../Ui/Alignment"; @@ -16,6 +15,7 @@ import UiCloseOverlay from "../Ui/CloseOverlay"; import DomUtil from "../Dom/Util"; import { getPageOverlayContainer } from "../Helper/PageOverlay"; import { createFocusTrap, FocusTrap } from "focus-trap"; +import { wheneverFirstSeen } from "../Helper/Selector"; let _didInit = false; let _firstDayOfWeek = 0; @@ -236,21 +236,6 @@ function initDateRange(element: HTMLInputElement, now: Date, isMinDate: boolean) element.dataset[name] = value; } -/** - * Sets up callbacks and event listeners. - */ -function setup() { - if (_didInit) { - return; - } - _didInit = true; - - _firstDayOfWeek = parseInt(Language.get("wcf.date.firstDayOfTheWeek"), 10); - - DomChangeListener.add("WoltLabSuite/Core/Date/Picker", () => DatePicker.init()); - UiCloseOverlay.add("WoltLabSuite/Core/Date/Picker", () => close()); -} - function getDateValue(attributeName: string): Date { let date = _input!.dataset[attributeName] || ""; if (/^datePicker-(.+)$/.exec(date)) { @@ -668,14 +653,17 @@ const DatePicker = { * Initializes all date and datetime input fields. */ init(): void { - setup(); - - const now = new Date(); - document - .querySelectorAll( - 'input[type="date"]:not(.inputDatePicker), input[type="datetime"]:not(.inputDatePicker)', - ) - .forEach((element) => { + if (_didInit) { + return; + } + _didInit = true; + + _firstDayOfWeek = parseInt(Language.get("wcf.date.firstDayOfTheWeek"), 10); + + wheneverFirstSeen( + `input[type="date"]:not(.inputDatePicker), input[type="datetime"]:not(.inputDatePicker)`, + (element: HTMLInputElement) => { + const now = new Date(); element.classList.add("inputDatePicker"); element.readOnly = true; @@ -837,7 +825,7 @@ const DatePicker = { clearButton.title = Language.get("wcf.date.datePicker.clear"); clearButton.addEventListener("click", () => { if (!element.disabled) { - this.clear(element); + DatePicker.clear(element); } }); @@ -896,7 +884,10 @@ const DatePicker = { onClose: null, }); - }); + }, + ); + + UiCloseOverlay.add("WoltLabSuite/Core/Date/Picker", () => close()); }, /** diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js index 59755dc92b..845fdb59d4 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js @@ -5,11 +5,10 @@ * @copyright 2001-2019 WoltLab GmbH * @license GNU Lesser General Public License */ -define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Listener", "../Event/Handler", "../Language", "../Ui/Alignment", "../Ui/CloseOverlay", "../Dom/Util", "../Helper/PageOverlay", "focus-trap"], function (require, exports, tslib_1, Core, DateUtil, Listener_1, EventHandler, Language, UiAlignment, CloseOverlay_1, Util_1, PageOverlay_1, focus_trap_1) { +define(["require", "exports", "tslib", "../Core", "./Util", "../Event/Handler", "../Language", "../Ui/Alignment", "../Ui/CloseOverlay", "../Dom/Util", "../Helper/PageOverlay", "focus-trap", "../Helper/Selector"], function (require, exports, tslib_1, Core, DateUtil, EventHandler, Language, UiAlignment, CloseOverlay_1, Util_1, PageOverlay_1, focus_trap_1, Selector_1) { "use strict"; Core = tslib_1.__importStar(Core); DateUtil = tslib_1.__importStar(DateUtil); - Listener_1 = tslib_1.__importDefault(Listener_1); EventHandler = tslib_1.__importStar(EventHandler); Language = tslib_1.__importStar(Language); UiAlignment = tslib_1.__importStar(UiAlignment); @@ -199,18 +198,6 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste } element.dataset[name] = value; } - /** - * Sets up callbacks and event listeners. - */ - function setup() { - if (_didInit) { - return; - } - _didInit = true; - _firstDayOfWeek = parseInt(Language.get("wcf.date.firstDayOfTheWeek"), 10); - Listener_1.default.add("WoltLabSuite/Core/Date/Picker", () => DatePicker.init()); - CloseOverlay_1.default.add("WoltLabSuite/Core/Date/Picker", () => close()); - } function getDateValue(attributeName) { let date = _input.dataset[attributeName] || ""; if (/^datePicker-(.+)$/.exec(date)) { @@ -551,11 +538,13 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste * Initializes all date and datetime input fields. */ init() { - setup(); - const now = new Date(); - document - .querySelectorAll('input[type="date"]:not(.inputDatePicker), input[type="datetime"]:not(.inputDatePicker)') - .forEach((element) => { + if (_didInit) { + return; + } + _didInit = true; + _firstDayOfWeek = parseInt(Language.get("wcf.date.firstDayOfTheWeek"), 10); + (0, Selector_1.wheneverFirstSeen)(`input[type="date"]:not(.inputDatePicker), input[type="datetime"]:not(.inputDatePicker)`, (element) => { + const now = new Date(); element.classList.add("inputDatePicker"); element.readOnly = true; // Use `getAttribute()`, because `.type` is normalized to "text" for unknown values. @@ -700,7 +689,7 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste clearButton.title = Language.get("wcf.date.datePicker.clear"); clearButton.addEventListener("click", () => { if (!element.disabled) { - this.clear(element); + DatePicker.clear(element); } }); if (isEmpty) { @@ -751,6 +740,7 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste onClose: null, }); }); + CloseOverlay_1.default.add("WoltLabSuite/Core/Date/Picker", () => close()); }, /** * Shows the previous month. -- 2.20.1