breezewiki/static/jsonp.js

import {h, htm, render, signal, computed, effect} from "./preact.js"
const html = htm.bind(h)

// *** Loading indicator

render(html`Loading, please wait...`, document.getElementById("loading"))

// *** Progress bar

const progress = signal(null)

const progressBar = document.getElementById("progress-bar")
while (progressBar.childNodes[0] !== undefined) progressBar.childNodes[0].remove() // clear out loading indicators

render(html`<progress value="${progress}" max="1"></progress>`, progressBar)

// *** Incoming data processing

// Handle case where data is immediately available
cont()

// Handle case where data may become available in the future
window.proxy = new Proxy(jsonpData, {
	get(obj, prop) {
		return value => {
			obj[prop] = value
			cont()
		}
	}
})

// *** Data upload and download

async function cont() {
	if (jsonpData.wikipage?.error) return error(jsonpData.wikipage)
	if (jsonpData.siteinfo?.error) return error(jsonpData.siteinfo)
	if (!(jsonpData.wikipage && jsonpData.siteinfo)) return

	const xhr = new XMLHttpRequest();

	const uploadFraction = 0.7

	// Upload progress
	xhr.upload.addEventListener("progress", event => {
		if (event.lengthComputable) {
			progress.value = (event.loaded / event.total) * uploadFraction
		}
	})

	// Download progress
	xhr.addEventListener("progress", event => {
		if (event.lengthComputable) {
			progress.value = (event.loaded / event.total) * (1 - uploadFraction) + uploadFraction
		}
	})

	xhr.addEventListener("load", () => {
		console.log(xhr)
		const imported = document.importNode(xhr.responseXML.getElementById("content"), true)
		document.getElementById("content").replaceWith(imported)
		document.title = xhr.responseXML.title
		for (const e of xhr.responseXML.head.children) {
			if (["LINK"].includes(e.tagName)) {
				const imported = document.importNode(e, true)
				document.head.appendChild(imported)
			}
		}
		const redirectTo = document.querySelector("#content .redirectMsg a")
		if (redirectTo) {
			redirectTo.click()
		}
	})

	xhr.open("POST", "/api/render/wiki")
	xhr.responseType = "document"
	xhr.send(JSON.stringify({
		data: jsonpData.wikipage,
		siteinfo: jsonpData.siteinfo,
		wikiname: BWData.wikiname,
		path: BWData.path
	}));
}

function error(data) {
	const eContent = document.getElementById("content")
	while (eContent.childNodes[0] !== undefined) eContent.childNodes[0].remove() // clear out loading indicators
	document.title = `Error | BreezeWiki`
	render(html`
${data.error.code === "missingtitle"
? html`<p><strong>This page doesn't exist on Fandom.</strong></p>`
: html`
<p>BreezeWiki wasn't able to load this page.</p>
<p><strong>${data.error.code}: ${data.error.info}</strong></p>
`
}
<p><small><a href="/${BWData.wikiname}/wiki/Main_Page">Return to the homepage?</a></small></p>
`, eContent)
}