From 28c7d2f1a2113d3ea609373a345d23d35361d605 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 5 Sep 2020 12:16:27 +0300
Subject: [PATCH] Split up spinner and widget API into files
---
web/index.js | 70 ++---------------------------------------------
web/spinner.js | 31 +++++++++++++++++++++
web/widget-api.js | 47 +++++++++++++++++++++++++++++++
3 files changed, 80 insertions(+), 68 deletions(-)
create mode 100644 web/spinner.js
create mode 100644 web/widget-api.js
diff --git a/web/index.js b/web/index.js
index 4c0dab5..86aac06 100644
--- a/web/index.js
+++ b/web/index.js
@@ -4,6 +4,8 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
import { html, render, Component } from "https://unpkg.com/htm/preact/index.mjs?module"
+import { Spinner } from "./spinner.js"
+import { sendSticker } from "./widget-api.js"
// The base URL for fetching packs. The app will first fetch ${PACK_BASE_URL}/index.json,
// then ${PACK_BASE_URL}/${packFile} for each packFile in the packs object of the index.json file.
@@ -91,31 +93,6 @@ class App extends Component {
}
}
-const Spinner = ({ size = 40, noCenter = false, noMargin = false, green = false }) => {
- let margin = 0
- if (!isNaN(+size)) {
- size = +size
- margin = noMargin ? 0 : `${Math.round(size / 6)}px`
- size = `${size}px`
- }
- const noInnerMargin = !noCenter || !margin
- const comp = html`
- <div style="width: ${size}; height: ${size}; margin: ${noInnerMargin ? 0 : margin} 0;"
- class="sk-chase ${green && "green"}">
- <div class="sk-chase-dot" />
- <div class="sk-chase-dot" />
- <div class="sk-chase-dot" />
- <div class="sk-chase-dot" />
- <div class="sk-chase-dot" />
- <div class="sk-chase-dot" />
- </div>
- `
- if (!noCenter) {
- return html`<div style="margin: ${margin} 0;" class="sk-center-wrapper">${comp}</div>`
- }
- return comp
-}
-
const Pack = ({ title, stickers }) => html`<div class="stickerpack">
<h1>${title}</h1>
<div class="sticker-list">
@@ -129,47 +106,4 @@ const Sticker = ({ content }) => html`<div class="sticker" onClick=${() => sendS
<img data-src=${makeThumbnailURL(content.url)} alt=${content.body} />
</div>`
-function sendSticker(content) {
- window.parent.postMessage({
- api: "fromWidget",
- action: "m.sticker",
- requestId: `sticker-${Date.now()}`,
- widgetId,
- data: {
- name: content.body,
- content,
- },
- }, "*")
-}
-
-let widgetId = null
-
-window.onmessage = event => {
- if (!window.parent || !event.data) {
- return
- }
-
- const request = event.data
- if (!request.requestId || !request.widgetId || !request.action || request.api !== "toWidget") {
- return
- }
-
- if (widgetId) {
- if (widgetId !== request.widgetId) {
- return
- }
- } else {
- widgetId = request.widgetId
- }
-
- window.parent.postMessage({
- ...request,
- response: request.action === "capabilities" ? {
- capabilities: ["m.sticker"],
- } : {
- error: { message: "Action not supported" },
- },
- }, event.origin)
-}
-
render(html`<${App} />`, document.body)
diff --git a/web/spinner.js b/web/spinner.js
new file mode 100644
index 0000000..6462cde
--- /dev/null
+++ b/web/spinner.js
@@ -0,0 +1,31 @@
+// Copyright (c) 2020 Tulir Asokan
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+import { html } from "https://unpkg.com/htm/preact/index.mjs?module"
+
+export const Spinner = ({ size = 40, noCenter = false, noMargin = false, green = false }) => {
+ let margin = 0
+ if (!isNaN(+size)) {
+ size = +size
+ margin = noMargin ? 0 : `${Math.round(size / 6)}px`
+ size = `${size}px`
+ }
+ const noInnerMargin = !noCenter || !margin
+ const comp = html`
+ <div style="width: ${size}; height: ${size}; margin: ${noInnerMargin ? 0 : margin} 0;"
+ class="sk-chase ${green && "green"}">
+ <div class="sk-chase-dot" />
+ <div class="sk-chase-dot" />
+ <div class="sk-chase-dot" />
+ <div class="sk-chase-dot" />
+ <div class="sk-chase-dot" />
+ <div class="sk-chase-dot" />
+ </div>
+ `
+ if (!noCenter) {
+ return html`<div style="margin: ${margin} 0;" class="sk-center-wrapper">${comp}</div>`
+ }
+ return comp
+}
diff --git a/web/widget-api.js b/web/widget-api.js
new file mode 100644
index 0000000..556537f
--- /dev/null
+++ b/web/widget-api.js
@@ -0,0 +1,47 @@
+// Copyright (c) 2020 Tulir Asokan
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+let widgetId = null
+
+window.onmessage = event => {
+ if (!window.parent || !event.data) {
+ return
+ }
+
+ const request = event.data
+ if (!request.requestId || !request.widgetId || !request.action || request.api !== "toWidget") {
+ return
+ }
+
+ if (widgetId) {
+ if (widgetId !== request.widgetId) {
+ return
+ }
+ } else {
+ widgetId = request.widgetId
+ }
+
+ window.parent.postMessage({
+ ...request,
+ response: request.action === "capabilities" ? {
+ capabilities: ["m.sticker"],
+ } : {
+ error: { message: "Action not supported" },
+ },
+ }, event.origin)
+}
+
+export function sendSticker(content) {
+ window.parent.postMessage({
+ api: "fromWidget",
+ action: "m.sticker",
+ requestId: `sticker-${Date.now()}`,
+ widgetId,
+ data: {
+ name: content.body,
+ content,
+ },
+ }, "*")
+}
--
GitLab