From ad15747c216c9ecc28f268ad3250f7e19b4f8226 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 19 Oct 2020 20:39:44 +0100
Subject: [PATCH] Iterate Modal Widgets

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/vector/dummy_widget/index.ts | 17 +++++++++++++----
 src/vector/theme_widget/index.ts | 19 ++++++++++++++-----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/vector/dummy_widget/index.ts b/src/vector/dummy_widget/index.ts
index 3f9025bd67..67716388bb 100644
--- a/src/vector/dummy_widget/index.ts
+++ b/src/vector/dummy_widget/index.ts
@@ -18,7 +18,12 @@ limitations under the License.
 require("./index.scss");
 
 import * as qs from 'querystring';
-import {ModalButtonKind, WidgetApi, WidgetApiToWidgetAction} from 'matrix-widget-api';
+import {
+    ModalButtonKind,
+    WidgetApi,
+    WidgetApiToWidgetAction,
+    IModalWidgetCloseNotificationRequest,
+} from 'matrix-widget-api';
 
 let widgetApi: WidgetApi;
 (async function() {
@@ -38,9 +43,13 @@ let widgetApi: WidgetApi;
         const parentOrigin = new URL(qsParam('parentUrl')).origin;
         widgetApi = new WidgetApi(qsParam("widgetId"), parentOrigin);
 
-        widgetApi.addEventListener(WidgetApiToWidgetAction.CloseModalWidget, (req: CustomEvent) => {
-            document.getElementById("answer").innerText = "Response from Modal: " + JSON.stringify(req.detail);
-        });
+        widgetApi.on(`action:${WidgetApiToWidgetAction.CloseModalWidget}`,
+            (ev: CustomEvent<IModalWidgetCloseNotificationRequest>) => {
+                ev.preventDefault();
+                document.getElementById("answer").innerText = "Response from Modal: " + JSON.stringify(ev.detail);
+                widgetApi.transport.reply(ev.detail, {}); // ack
+            },
+        );
 
         widgetApi.start();
 
diff --git a/src/vector/theme_widget/index.ts b/src/vector/theme_widget/index.ts
index bad100e68a..fffaa33138 100644
--- a/src/vector/theme_widget/index.ts
+++ b/src/vector/theme_widget/index.ts
@@ -18,7 +18,12 @@ limitations under the License.
 require("./index.scss");
 
 import * as qs from 'querystring';
-import {WidgetApi, WidgetApiToWidgetAction, IWidgetApiRequest} from 'matrix-widget-api';
+import {
+    WidgetApi,
+    WidgetApiToWidgetAction,
+    IModalWidgetButtonClickedRequest,
+    IModalWidgetOpenRequest,
+} from 'matrix-widget-api';
 
 let widgetApi: WidgetApi;
 (async function() {
@@ -38,22 +43,26 @@ let widgetApi: WidgetApi;
         const parentOrigin = new URL(qsParam('parentUrl')).origin;
         widgetApi = new WidgetApi(qsParam("widgetId"), parentOrigin);
 
-        widgetApi.addEventListener(
+        widgetApi.on(
             `action:${WidgetApiToWidgetAction.ButtonClicked}`,
-            (ev: CustomEvent<IWidgetApiRequest>) => {
+            (ev: CustomEvent<IModalWidgetButtonClickedRequest>) => {
+                ev.preventDefault();
                 console.log("@@ clickety", ev.detail);
                 document.getElementById("button").innerText = "BUTTON CLICKED: " + JSON.stringify(ev.detail.data);
                 setTimeout(() => {
                     widgetApi.closeModalWidget(ev.detail.data);
                 }, 3000);
+                widgetApi.transport.reply(ev.detail, {}); // ack
             },
         );
 
-        widgetApi.addEventListener(
+        widgetApi.on(
             `action:${WidgetApiToWidgetAction.WidgetConfig}`,
-            (ev: CustomEvent<IWidgetApiRequest>) => {
+            (ev: CustomEvent<IModalWidgetOpenRequest>) => {
+                ev.preventDefault();
                 console.log("Got widget config: ", ev.detail.data);
                 document.getElementById("question").innerText = "INIT PARAMS: " + JSON.stringify(ev.detail.data);
+                widgetApi.transport.reply(ev.detail, {}); // ack
             },
         );
         widgetApi.start();