OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Update sample widgets with new matrix-widget-api interfaces 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
t3chguy/demo/widgets2020^2
Michael Telatynski 2020-10-08 15:24:07 +01:00
parent 2ed497bcf6
commit b66ab3991b
2 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/vector/dummy_widget/index.ts
View File

@ -18,7 +18,7 @@ limitations under the License.
require("./index.scss"); require("./index.scss");
import * as qs from 'querystring'; import * as qs from 'querystring';
import {ButtonKind, KnownWidgetActions, WidgetApi} from 'matrix-react-sdk/src/widgets/WidgetApi'; import {ModalButtonKind, WidgetApi, WidgetApiToWidgetAction} from 'matrix-widget-api';
let widgetApi: WidgetApi; let widgetApi: WidgetApi;
(async function() { (async function() {
@ -35,20 +35,23 @@ let widgetApi: WidgetApi;
}; };
// Set this up as early as possible because Element will be hitting it almost immediately. // Set this up as early as possible because Element will be hitting it almost immediately.
widgetApi = new WidgetApi(qsParam('parentUrl'), qsParam('widgetId'), []); const parentOrigin = new URL(qsParam('parentUrl')).origin;
widgetApi = new WidgetApi(qsParam("widgetId"), parentOrigin);
widgetApi.on(KnownWidgetActions.CloseModalWidget, req => { widgetApi.addEventListener(WidgetApiToWidgetAction.CloseModalWidget, (req: CustomEvent) => {
document.getElementById("answer").innerText = "Response from Modal: " + JSON.stringify(req.data); document.getElementById("answer").innerText = "Response from Modal: " + JSON.stringify(req.detail);
}); });
widgetApi.start();
document.getElementById("demoBtn").onclick = () => { document.getElementById("demoBtn").onclick = () => {
const url = new URL(window.location.href); const url = new URL(window.location.href);
url.pathname = url.pathname.substr(0, url.pathname.lastIndexOf("/")) + "/theme_widget.html"; url.pathname = url.pathname.substr(0, url.pathname.lastIndexOf("/")) + "/theme_widget.html";
url.search = ""; url.search = "";
widgetApi.openModalWidget(url.toString(), "Test Modal Widget", [ widgetApi.openModalWidget(url.toString(), "Test Modal Widget", [
{id: "m.close", kind: ButtonKind.Danger, label: "Danger"}, {id: "m.close", kind: ModalButtonKind.Danger, label: "Danger"},
{id: "org.secondary", kind: ButtonKind.Secondary, label: "Secondary"}, {id: "org.secondary", kind: ModalButtonKind.Secondary, label: "Secondary"},
{id: "org.primary", kind: ButtonKind.Primary, label: "Primary"}, {id: "org.primary", kind: ModalButtonKind.Primary, label: "Primary"},
], {question: "Answer to everything?"}); ], {question: "Answer to everything?"});
}; };
} catch (e) { } catch (e) {

28
src/vector/theme_widget/index.ts
View File

@ -18,7 +18,7 @@ limitations under the License.
require("./index.scss"); require("./index.scss");
import * as qs from 'querystring'; import * as qs from 'querystring';
import { KnownWidgetActions, WidgetApi } from 'matrix-react-sdk/src/widgets/WidgetApi'; import {WidgetApi, WidgetApiToWidgetAction, IWidgetApiRequest} from 'matrix-widget-api';
let widgetApi: WidgetApi; let widgetApi: WidgetApi;
(async function() { (async function() {
@ -35,20 +35,28 @@ let widgetApi: WidgetApi;
}; };
// Set this up as early as possible because Element will be hitting it almost immediately. // Set this up as early as possible because Element will be hitting it almost immediately.
widgetApi = new WidgetApi(qsParam('parentUrl'), qsParam('widgetId'), []); const parentOrigin = new URL(qsParam('parentUrl')).origin;
widgetApi = new WidgetApi(qsParam("widgetId"), parentOrigin);
widgetApi.on(KnownWidgetActions.ButtonClicked, req => { widgetApi.addEventListener(
console.log("@@ clickety", req); `action:${WidgetApiToWidgetAction.ButtonClicked}`,
(ev: CustomEvent<IWidgetApiRequest>) => {
console.log("@@ clickety", ev.detail);
document.getElementById("button").innerText = "BUTTON CLICKED: " + JSON.stringify(req.data); document.getElementById("button").innerText = "BUTTON CLICKED: " + JSON.stringify(req.data);
setTimeout(() => { setTimeout(() => {
widgetApi.closeModalWidget(req.data); widgetApi.closeModalWidget(ev.detail.data);
}, 3000); }, 3000);
}); },
);
widgetApi.on(KnownWidgetActions.GetWidgetConfig, (config) => { widgetApi.addEventListener(
console.log("Got widget config: ", config); `action:${WidgetApiToWidgetAction.WidgetConfig}`,
document.getElementById("question").innerText = "INIT PARAMS: " + JSON.stringify(config.data); (ev: CustomEvent<IWidgetApiRequest>) => {
}); console.log("Got widget config: ", ev.detail.data);
document.getElementById("question").innerText = "INIT PARAMS: " + JSON.stringify(ev.detail.data);
},
);
widgetApi.start();
document.getElementById("closeButton").onclick = () => { document.getElementById("closeButton").onclick = () => {
widgetApi.closeModalWidget({answer: 42}); widgetApi.closeModalWidget({answer: 42});