mirror of
https://github.com/maunium/stickerpicker
synced 2024-12-21 06:30:43 +00:00
Split up spinner and widget API into files
This commit is contained in:
Tulir Asokan
parent
27fd49f6e5
commit
28c7d2f1a2
3 changed files with 80 additions and 68 deletions
70
web/index.js
70
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)
|
||||
|
|
|
|||
31
web/spinner.js
Normal file
31
web/spinner.js
Normal file
|
|
@ -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
|
||||
}
|
||||
47
web/widget-api.js
Normal file
47
web/widget-api.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
}, "*")
|
||||
}
|
||||
Loading…
Reference in a new issue