115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
import React, { createRef } from "react"
|
|
import ReactDOM from "react-dom"
|
|
import { Transition, animated, config } from "react-spring/renderprops"
|
|
import Bubble from "./components/Bubble"
|
|
import Popup from "components/Popup"
|
|
import { createServiceFinder } from "utils/urlMatcher"
|
|
import remoteServices from "./remoteServices"
|
|
import { ContentMessenger } from "utils/messaging"
|
|
import "../css/content.scss"
|
|
import { getSettings } from "./utils/browser"
|
|
|
|
const popupRef = createRef()
|
|
|
|
let findService
|
|
getSettings().then((settings) => {
|
|
findService = createServiceFinder(remoteServices, settings.hostOverrides)(document)
|
|
})
|
|
|
|
chrome.runtime.onConnect.addListener(function (port) {
|
|
const messenger = new ContentMessenger(port)
|
|
|
|
function clickHandler(event) {
|
|
if (event.target.closest(".moco-bx-bubble")) {
|
|
event.stopPropagation()
|
|
messenger.postMessage({ type: "togglePopup" })
|
|
}
|
|
}
|
|
port.onDisconnect.addListener(() => {
|
|
messenger.stop()
|
|
window.removeEventListener("click", clickHandler, true)
|
|
})
|
|
|
|
function updateBubble({ service, bookedSeconds, settingTimeTrackingHHMM, timedActivity } = {}) {
|
|
if (!document.getElementById("moco-bx-root")) {
|
|
const domRoot = document.createElement("div")
|
|
domRoot.setAttribute("id", "moco-bx-root")
|
|
document.body.appendChild(domRoot)
|
|
window.addEventListener("click", clickHandler, true)
|
|
}
|
|
|
|
ReactDOM.render(
|
|
<Transition
|
|
native
|
|
items={service}
|
|
from={{ opacity: "0" }}
|
|
enter={{ opacity: "1" }}
|
|
leave={{ opacity: "0" }}
|
|
config={config.stiff}
|
|
>
|
|
{(service) =>
|
|
service &&
|
|
// eslint-disable-next-line react/display-name
|
|
((props) => (
|
|
<animated.div className="moco-bx-bubble" style={{ ...props, ...service.position }}>
|
|
<Bubble
|
|
key={service.url}
|
|
bookedSeconds={bookedSeconds}
|
|
settingTimeTrackingHHMM={settingTimeTrackingHHMM}
|
|
timedActivity={timedActivity}
|
|
/>
|
|
</animated.div>
|
|
))
|
|
}
|
|
</Transition>,
|
|
document.getElementById("moco-bx-root"),
|
|
)
|
|
}
|
|
|
|
function openPopup(payload) {
|
|
if (!document.getElementById("moco-bx-popup-root")) {
|
|
const domRoot = document.createElement("div")
|
|
domRoot.setAttribute("id", "moco-bx-popup-root")
|
|
document.body.appendChild(domRoot)
|
|
}
|
|
|
|
ReactDOM.render(
|
|
<Popup ref={popupRef} {...payload} onRequestClose={closePopup} />,
|
|
document.getElementById("moco-bx-popup-root"),
|
|
)
|
|
}
|
|
|
|
function closePopup() {
|
|
const domRoot = document.getElementById("moco-bx-popup-root")
|
|
|
|
if (domRoot) {
|
|
ReactDOM.unmountComponentAtNode(domRoot)
|
|
domRoot.remove()
|
|
}
|
|
}
|
|
|
|
messenger.on("requestService", () => {
|
|
const service = findService(window.location.href)
|
|
messenger.postMessage({
|
|
type: "newService",
|
|
payload: { isOpen: !!popupRef.current, service },
|
|
})
|
|
})
|
|
|
|
messenger.on("showBubble", ({ payload }) => {
|
|
updateBubble(payload)
|
|
})
|
|
|
|
messenger.on("hideBubble", () => {
|
|
updateBubble()
|
|
})
|
|
|
|
messenger.on("openPopup", ({ payload }) => {
|
|
openPopup(payload)
|
|
})
|
|
|
|
messenger.on("closePopup", () => {
|
|
closePopup()
|
|
})
|
|
})
|