Migrate from DomChangeListener to `wheneverFirstSeen()` for Date/Picker

see https://www.woltlab.com/community/thread/301605-formbuilder-via-dialogfactory-l%C3%A4dt-dateformfield-falsch/

diff --git a/ts/WoltLabSuite/Core/Date/Picker.ts b/ts/WoltLabSuite/Core/Date/Picker.ts
index a8bb6ffa074759158866c7f6af106598cc8b14d8..f7bad1953cf5c69dbf256d8846dc0f7db0452b8c 100644 (file)
--- 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<HTMLInputElement>(
-        '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 59755dc92b07474413f1098a36da459abae6eb47..845fdb59d46bcdb6711b6e2e9c35ecf57650550c 100644 (file)
--- 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 <http://opensource.org/licenses/lgpl-license.php>
  */
-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.