Use `HTMLElement.dataset` for access to data attributes

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js
index 526fca34ee839a6ef218e01ba7f9802c39fcd8a2..138ea11c86dd7dcb4e1d36c04bdc58df4d04975c 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js
@@ -265,10 +265,12 @@ define(["require", "exports", "../StringUtil"], function (require, exports, Stri
          * Retrieves all data attributes from target element, optionally allowing for
          * a custom prefix that serves two purposes: First it will restrict the results
          * for items starting with it and second it will remove that prefix.
+         *
+         * @deprecated 5.4 Use `element.dataset` instead.
          */
         getDataAttributes(element, prefix, camelCaseName, idToUpperCase) {
             prefix = prefix || '';
-            if (!/^data-/.test(prefix))
+            if (prefix.indexOf('data-') !== 0)
                 prefix = 'data-' + prefix;
             camelCaseName = (camelCaseName === true);
             idToUpperCase = (idToUpperCase === true);

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
index c1743846de5cb7707c4407a8cc3857f7b75882d4..04848b9c64e9ef2d38e9f3871b8e07541171cb8a 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
@@ -105,7 +105,7 @@ define(["require", "exports", "../Core", "../Dom/Change/Listener", "./Screen", "
             window.addEventListener('resize', () => {
                 _dialogs.forEach(dialog => {
                     if (!Core.stringToBool(dialog.dialog.getAttribute('aria-hidden'))) {
-                        this.rebuild(dialog.dialog.getAttribute('data-id'));
+                        this.rebuild(dialog.dialog.dataset.id || '');
                     }
                 });
             });
@@ -113,16 +113,16 @@ define(["require", "exports", "../Core", "../Dom/Change/Listener", "./Screen", "
         _initStaticDialogs() {
             document.querySelectorAll('.jsStaticDialog').forEach(button => {
                 button.classList.remove('jsStaticDialog');
-                const id = button.getAttribute('data-dialog-id');
+                const id = button.dataset.dialogId || '';
                 if (id) {
                     const container = document.getElementById(id);
                     if (container !== null) {
                         container.classList.remove('jsStaticDialogContent');
-                        container.setAttribute('data-is-static-dialog', 'true');
+                        container.dataset.isStaticDialog = 'true';
                         Util_1.default.hide(container);
                         button.addEventListener('click', event => {
                             event.preventDefault();
-                            this.openStatic(container.id, null, { title: container.getAttribute('data-title') || '' });
+                            this.openStatic(container.id, null, { title: container.dataset.title || '' });
                         });
                     }
                 }
@@ -469,7 +469,7 @@ define(["require", "exports", "../Core", "../Dom/Change/Listener", "./Screen", "
                 if (typeof data.onShow === 'function') {
                     data.onShow(data.content);
                 }
-                if (Core.stringToBool(data.content.getAttribute('data-is-static-dialog'))) {
+                if (Core.stringToBool(data.content.dataset.isStaticDialog || '')) {
                     EventHandler.fire('com.woltlab.wcf.dialog', 'openStatic', {
                         content: data.content,
                         id: id,
@@ -696,21 +696,21 @@ define(["require", "exports", "../Core", "../Dom/Change/Listener", "./Screen", "
             for (let i = 0; i < _container.childElementCount; i++) {
                 const child = _container.children[i];
                 if (!Core.stringToBool(child.getAttribute('aria-hidden'))) {
-                    _activeDialog = child.getAttribute('data-id');
+                    _activeDialog = child.dataset.id || '';
                     break;
                 }
             }
             UiScreen.pageOverlayClose();
             if (_activeDialog === null) {
                 _container.setAttribute('aria-hidden', 'true');
-                _container.setAttribute('data-close-on-click', 'false');
+                _container.dataset.closeOnClick = 'false';
                 if (data.closable) {
                     window.removeEventListener('keyup', _keyupListener);
                 }
             }
             else {
                 data = _dialogs.get(_activeDialog);
-                _container.setAttribute('data-close-on-click', (data.backdropCloseOnClick ? 'true' : 'false'));
+                _container.dataset.closeOnClick = data.backdropCloseOnClick ? 'true' : 'false';
             }
             if (Environment.platform() !== 'desktop') {
                 UiScreen.scrollEnable();

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Dom/Util.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Dom/Util.ts
index 1d021a214acdb83b75814f347079afd371c46b01..b5cd425d7037c59bc66e588c7fde92b23995c11b 100644 (file)
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Dom/Util.ts
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Dom/Util.ts
@@ -292,10 +292,12 @@ const DomUtil = {
    * Retrieves all data attributes from target element, optionally allowing for
    * a custom prefix that serves two purposes: First it will restrict the results
    * for items starting with it and second it will remove that prefix.
+   * 
+   * @deprecated 5.4 Use `element.dataset` instead.
    */
   getDataAttributes(element: Element, prefix?: string, camelCaseName?: boolean, idToUpperCase?: boolean): DataAttributes {
     prefix = prefix || '';
-    if (!/^data-/.test(prefix)) prefix = 'data-' + prefix;
+    if (prefix.indexOf('data-') !== 0) prefix = 'data-' + prefix;
     camelCaseName = (camelCaseName === true);
     idToUpperCase = (idToUpperCase === true);
 

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dialog.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dialog.ts
index 0e197ef1a9fba17e3de460bce4e8a0056e1ba361..20a870d8dc68fa8f64a8c00bc05fcaaa8010ec23 100644 (file)
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dialog.ts
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dialog.ts
@@ -98,28 +98,28 @@ export = {
     window.addEventListener('resize', () => {
       _dialogs.forEach(dialog => {
         if (!Core.stringToBool(dialog.dialog.getAttribute('aria-hidden'))) {
-          this.rebuild(dialog.dialog.getAttribute('data-id')!);
+          this.rebuild(dialog.dialog.dataset.id || '');
         }
       });
     });
   },
 
   _initStaticDialogs(): void {
-    document.querySelectorAll('.jsStaticDialog').forEach(button => {
+    document.querySelectorAll<HTMLElement>('.jsStaticDialog').forEach(button => {
       button.classList.remove('jsStaticDialog');
 
-      const id = button.getAttribute('data-dialog-id');
+      const id = button.dataset.dialogId || '';
       if (id) {
         const container = document.getElementById(id);
         if (container !== null) {
           container.classList.remove('jsStaticDialogContent');
-          container.setAttribute('data-is-static-dialog', 'true');
+          container.dataset.isStaticDialog = 'true';
           DomUtil.hide(container);
 
           button.addEventListener('click', event => {
             event.preventDefault();
 
-            this.openStatic(container.id, null, {title: container.getAttribute('data-title') || ''});
+            this.openStatic(container.id, null, {title: container.dataset.title || ''});
           });
         }
       }
@@ -516,7 +516,7 @@ export = {
         data.onShow(data.content);
       }
 
-      if (Core.stringToBool(data.content.getAttribute('data-is-static-dialog'))) {
+      if (Core.stringToBool(data.content.dataset.isStaticDialog || '')) {
         EventHandler.fire('com.woltlab.wcf.dialog', 'openStatic', {
           content: data.content,
           id: id,
@@ -785,9 +785,9 @@ export = {
     // get next active dialog
     _activeDialog = null;
     for (let i = 0; i < _container.childElementCount; i++) {
-      const child = _container.children[i];
+      const child = _container.children[i] as HTMLElement;
       if (!Core.stringToBool(child.getAttribute('aria-hidden'))) {
-        _activeDialog = child.getAttribute('data-id');
+        _activeDialog = child.dataset.id || '';
         break;
       }
     }
@@ -796,14 +796,14 @@ export = {
 
     if (_activeDialog === null) {
       _container.setAttribute('aria-hidden', 'true');
-      _container.setAttribute('data-close-on-click', 'false');
+      _container.dataset.closeOnClick = 'false';
 
       if (data.closable) {
         window.removeEventListener('keyup', _keyupListener);
       }
     } else {
       data = _dialogs.get(_activeDialog) as DialogData;
-      _container.setAttribute('data-close-on-click', (data.backdropCloseOnClick ? 'true' : 'false'));
+      _container.dataset.closeOnClick = data.backdropCloseOnClick ? 'true' : 'false';
     }
 
     if (Environment.platform() !== 'desktop') {