Convert `Ui/Message/TwitterEmbed` to TypeScript

diff --git a/tsconfig.json b/tsconfig.json
index 43ea08f90cd6af640abba55d75f7d9f52a1771ad..c2002d3837ae85c38dd6f69732d49e4e59efebd0 100644 (file)
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "include": [
     "global.d.ts",
+    "twitter-widget.d.ts",
     "wcfsetup/install/files/ts/**/*"
   ],
   "compilerOptions": {

diff --git a/twitter-widget.d.ts b/twitter-widget.d.ts
new file mode 100644 (file)
index 0000000..03c7cf2
--- /dev/null
+++ b/twitter-widget.d.ts
@@ -0,0 +1,11 @@
+declare namespace twttr {
+  export type CallbackReady = () => void;
+
+  export function ready(callback: CallbackReady): void;
+
+  interface Widgets {
+    createTweet(tweetId: string, container: HTMLElement, options: ArbitraryObject): Promise<HTMLElement>;
+  }
+
+  export const widgets: Widgets;
+}

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/TwitterEmbed.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/TwitterEmbed.js
index ee161e2dc59fd12596ef4cfb62ca33c392585a8b..8233091d6fd59ae4f98f2f74896741be3d5f476d 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/TwitterEmbed.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/TwitterEmbed.js
@@ -1,58 +1,56 @@
 /**
  * Wrapper around Twitter's createTweet API.
  *
- * @author     Tim Duesterhus
- * @copyright  2001-2020 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Ui/Message/TwitterEmbed
+ * @author  Tim Duesterhus
+ * @copyright  2001-2020 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Ui/Message/TwitterEmbed
  */
-define(['https://platform.twitter.com/widgets.js'], function (Widgets) {
+define(["require", "exports", "https://platform.twitter.com/widgets.js"], function (require, exports) {
     "use strict";
-    var twitterReady = new Promise(function (resolve, reject) {
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.embedAll = exports.embedTweet = void 0;
+    const twitterReady = new Promise((resolve) => {
         twttr.ready(resolve);
     });
     /**
-     * @exports        WoltLabSuite/Core/Ui/Message/TwitterEmbed
+     * Embed the tweet identified by the given tweetId into the given container.
+     *
+     * @param {HTMLElement} container
+     * @param {string} tweetId
+     * @param {boolean} removeChildren Whether to remove existing children of the given container after embedding the tweet.
+     * @return {HTMLElement} The Tweet element created by Twitter.
      */
-    return {
-        /**
-         * Embed the tweet identified by the given tweetId into the given container.
-         *
-         * @param {HTMLElement} container
-         * @param {string} tweetId
-         * @param {boolean} removeChildren Whether to remove existing children of the given container after embedding the tweet.
-         * @return {HTMLElement} The Tweet element created by Twitter.
-         */
-        embedTweet: function (container, tweetId, removeChildren) {
-            if (removeChildren === undefined)
-                removeChildren = false;
-            return twitterReady.then(function () {
-                return twttr.widgets.createTweet(tweetId, container, {
-                    dnt: true,
-                    lang: document.documentElement.lang,
-                });
-            }).then(function (tweet) {
-                if (tweet && removeChildren) {
-                    while (container.lastChild) {
-                        container.removeChild(container.lastChild);
-                    }
-                    container.appendChild(tweet);
-                }
-                return tweet;
-            });
-        },
-        /**
-         * Embeds tweets into all elements with a data-wsc-twitter-tweet attribute, removing
-         * existing children.
-         */
-        embedAll: function () {
-            elBySelAll("[data-wsc-twitter-tweet]", undefined, function (container) {
-                var tweetId = elData(container, "wsc-twitter-tweet");
-                if (tweetId) {
-                    this.embedTweet(container, tweetId, true);
-                    elData(container, "wsc-twitter-tweet", "");
-                }
-            }.bind(this));
+    async function embedTweet(container, tweetId, removeChildren) {
+        if (removeChildren === undefined) {
+            removeChildren = false;
         }
-    };
+        await twitterReady;
+        const tweet = await twttr.widgets.createTweet(tweetId, container, {
+            dnt: true,
+            lang: document.documentElement.lang,
+        });
+        if (tweet && removeChildren) {
+            while (container.lastChild) {
+                container.removeChild(container.lastChild);
+            }
+            container.appendChild(tweet);
+        }
+        return tweet;
+    }
+    exports.embedTweet = embedTweet;
+    /**
+     * Embeds tweets into all elements with a data-wsc-twitter-tweet attribute, removing
+     * existing children.
+     */
+    function embedAll() {
+        document.querySelectorAll("[data-wsc-twitter-tweet]").forEach((container) => {
+            const tweetId = container.dataset.wscTwitterTweet;
+            if (tweetId) {
+                delete container.dataset.wscTwitterTweet;
+                void embedTweet(container, tweetId, true);
+            }
+        });
+    }
+    exports.embedAll = embedAll;
 });

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/TwitterEmbed.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/TwitterEmbed.js
deleted file mode 100644 (file)
index 3c45916..0000000
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/TwitterEmbed.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Wrapper around Twitter's createTweet API.
- *
- * @author     Tim Duesterhus
- * @copyright  2001-2020 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Ui/Message/TwitterEmbed
- */
-define(['https://platform.twitter.com/widgets.js'], function(Widgets) {
-       "use strict";
-       
-       var twitterReady = new Promise(function(resolve, reject) {
-               twttr.ready(resolve);
-       });
-       
-       /**
-        * @exports     WoltLabSuite/Core/Ui/Message/TwitterEmbed
-        */
-       return {
-               /**
-                * Embed the tweet identified by the given tweetId into the given container.
-                * 
-                * @param {HTMLElement} container
-                * @param {string} tweetId
-                * @param {boolean} removeChildren Whether to remove existing children of the given container after embedding the tweet.
-                * @return {HTMLElement} The Tweet element created by Twitter.
-                */
-               embedTweet: function(container, tweetId, removeChildren) {
-                       if (removeChildren === undefined) removeChildren = false;
-                       
-                       return twitterReady.then(function() {
-                               return twttr.widgets.createTweet(tweetId, container, {
-                                       dnt: true,
-                                       lang: document.documentElement.lang,
-                               });
-                       }).then(function(tweet) {
-                               if (tweet && removeChildren) {
-                                       while (container.lastChild) {
-                                               container.removeChild(container.lastChild);
-                                       }
-                                       container.appendChild(tweet);
-                               }
-                               
-                               return tweet;
-                       });
-               },
-               
-               /**
-                * Embeds tweets into all elements with a data-wsc-twitter-tweet attribute, removing
-                * existing children.
-                */
-               embedAll: function() {
-                       elBySelAll("[data-wsc-twitter-tweet]", undefined, function(container) {
-                               var tweetId = elData(container, "wsc-twitter-tweet");
-                               if (tweetId) {
-                                       this.embedTweet(container, tweetId, true);
-                                       elData(container, "wsc-twitter-tweet", "");
-                               }
-                       }.bind(this))
-               }
-       };
-});

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/TwitterEmbed.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/TwitterEmbed.ts
new file mode 100644 (file)
index 0000000..baa42a3
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/TwitterEmbed.ts
@@ -0,0 +1,63 @@
+/**
+ * Wrapper around Twitter's createTweet API.
+ *
+ * @author  Tim Duesterhus
+ * @copyright  2001-2020 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Ui/Message/TwitterEmbed
+ */
+
+import "https://platform.twitter.com/widgets.js";
+
+const twitterReady = new Promise((resolve) => {
+  twttr.ready(resolve);
+});
+
+/**
+ * Embed the tweet identified by the given tweetId into the given container.
+ *
+ * @param {HTMLElement} container
+ * @param {string} tweetId
+ * @param {boolean} removeChildren Whether to remove existing children of the given container after embedding the tweet.
+ * @return {HTMLElement} The Tweet element created by Twitter.
+ */
+export async function embedTweet(
+  container: HTMLElement,
+  tweetId: string,
+  removeChildren?: boolean,
+): Promise<HTMLElement> {
+  if (removeChildren === undefined) {
+    removeChildren = false;
+  }
+
+  await twitterReady;
+
+  const tweet = await twttr.widgets.createTweet(tweetId, container, {
+    dnt: true,
+    lang: document.documentElement.lang,
+  });
+
+  if (tweet && removeChildren) {
+    while (container.lastChild) {
+      container.removeChild(container.lastChild);
+    }
+    container.appendChild(tweet);
+  }
+
+  return tweet;
+}
+
+/**
+ * Embeds tweets into all elements with a data-wsc-twitter-tweet attribute, removing
+ * existing children.
+ */
+export function embedAll(): void {
+  document.querySelectorAll("[data-wsc-twitter-tweet]").forEach((container: HTMLElement) => {
+    const tweetId = container.dataset.wscTwitterTweet;
+    if (tweetId) {
+      delete container.dataset.wscTwitterTweet;
+
+      void embedTweet(container, tweetId, true);
+    }
+  });
+}