diff --git a/src/vector/dummy_widget/index.html b/src/vector/dummy_widget/index.html index 15428f7f6c..6bed883e43 100644 --- a/src/vector/dummy_widget/index.html +++ b/src/vector/dummy_widget/index.html @@ -5,8 +5,7 @@ Dummy Widget - -

This isn't using the neat theme stuff over the widget API

+

diff --git a/src/vector/dummy_widget/index.ts b/src/vector/dummy_widget/index.ts index 064ab18d4c..69ac832f1f 100644 --- a/src/vector/dummy_widget/index.ts +++ b/src/vector/dummy_widget/index.ts @@ -18,7 +18,7 @@ limitations under the License. require("./index.scss"); import * as qs from 'querystring'; -import { Capability, KnownWidgetActions, WidgetApi } from 'matrix-react-sdk/src/widgets/WidgetApi'; +import {ButtonKind, KnownWidgetActions, WidgetApi} from 'matrix-react-sdk/src/widgets/WidgetApi'; let widgetApi: WidgetApi; (async function() { @@ -37,15 +37,19 @@ let widgetApi: WidgetApi; // Set this up as early as possible because Element will be hitting it almost immediately. widgetApi = new WidgetApi(qsParam('parentUrl'), qsParam('widgetId'), []); - widgetApi.on(KnownWidgetActions.ClosedWidgetResponse, req => { - document.getElementById("answer").innerText = "RESPONSE FROM TEMP WIDGET: " + JSON.stringify(req.data); + widgetApi.on(KnownWidgetActions.CloseModalWidget, req => { + document.getElementById("answer").innerText = "Response from Modal: " + JSON.stringify(req.data); }); document.getElementById("demoBtn").onclick = () => { const url = new URL(window.location.href); - url.pathname = "/theme_widget.html"; + url.pathname = url.pathname.substr(0, url.pathname.lastIndexOf("/")) + "/theme_widget.html"; url.search = ""; - widgetApi.openTempWidget(url.toString(), {question: "Answer to everything?"}); + widgetApi.openModalWidget(url.toString(), "Test Modal Widget", [ + {id: "m.close", kind: ButtonKind.Danger, label: "Danger"}, + {id: "org.secondary", kind: ButtonKind.Secondary, label: "Secondary"}, + {id: "org.primary", kind: ButtonKind.Primary, label: "Primary"}, + ], {question: "Answer to everything?"}); }; } catch (e) { console.error("Error setting up Jitsi widget", e); diff --git a/src/vector/theme_widget/index.html b/src/vector/theme_widget/index.html index 4edba67241..a153e0f4ad 100644 --- a/src/vector/theme_widget/index.html +++ b/src/vector/theme_widget/index.html @@ -19,7 +19,7 @@

Metadata

-

+

diff --git a/src/vector/theme_widget/index.ts b/src/vector/theme_widget/index.ts index 99f5a3bc93..b4c7d0f21a 100644 --- a/src/vector/theme_widget/index.ts +++ b/src/vector/theme_widget/index.ts @@ -37,24 +37,21 @@ let widgetApi: WidgetApi; // Set this up as early as possible because Element will be hitting it almost immediately. widgetApi = new WidgetApi(qsParam('parentUrl'), qsParam('widgetId'), []); - widgetApi.on(KnownWidgetActions.UpdateThemeInfo, (themeInfo) => { - console.log("Got theme info: ", themeInfo); - document.getElementById("theme").innerText = "THEME: " + JSON.stringify(themeInfo.data); - - const clientName = themeInfo.data.clientName || "element-web"; - const isDark = themeInfo.data.isDark || false; - const accentColour = themeInfo.data.accentColor || "#03b381"; - - document.body.className = `client-${clientName} ${isDark ? 'is-dark' : ''}`; - document.body.style.setProperty("--accent-color", accentColour); + widgetApi.on(KnownWidgetActions.ButtonClicked, req => { + console.log("@@ clickety", req); + document.getElementById("button").innerText = "BUTTON CLICKED: " + JSON.stringify(req.data); + setTimeout(() => { + widgetApi.closeModalWidget(req.data); + }, 3000); }); - widgetApi.on(KnownWidgetActions.SendWidgetConfig, (config) => { + + widgetApi.on(KnownWidgetActions.GetWidgetConfig, (config) => { console.log("Got widget config: ", config); document.getElementById("question").innerText = "INIT PARAMS: " + JSON.stringify(config.data); }); document.getElementById("closeButton").onclick = () => { - widgetApi.closeWidget({answer: 42}); + widgetApi.closeModalWidget({answer: 42}); }; } catch (e) { console.error("Error setting up Jitsi widget", e);