116 lines
4.1 KiB
TypeScript
116 lines
4.1 KiB
TypeScript
import '@signature.digital/catalog';
|
|
import { html, render } from '@design.estate/dees-element';
|
|
import { appDocuments, appRecipients, documentIdOrDefault, fieldsForDocument, hashForRoute, isWorkspaceView, routeFromLocation, setAppRecipients, setFieldsForDocument, type IAppDocumentRow, type IAppFieldPlacement, type IAppRecipient, type TWorkspaceView } from './state.js';
|
|
|
|
let currentRoute = routeFromLocation();
|
|
let currentView = currentRoute.view;
|
|
let activeDocumentId = currentRoute.documentId ? documentIdOrDefault(currentRoute.documentId) : '';
|
|
let appRoot: HTMLElement | null = null;
|
|
let routeChangeFrame: number | null = null;
|
|
|
|
const createAppRoot = () => {
|
|
document.getElementById('signature-digital-app')?.remove();
|
|
appRoot = document.createElement('div');
|
|
appRoot.id = 'signature-digital-app';
|
|
document.body.append(appRoot);
|
|
};
|
|
|
|
const handleViewChange = (event: Event) => {
|
|
const view = (event as CustomEvent<{ view?: TWorkspaceView }>).detail?.view;
|
|
if (!view || !isWorkspaceView(view)) return;
|
|
currentView = view;
|
|
const nextHash = hashForRoute(view, activeDocumentId);
|
|
if (globalThis.location.hash !== nextHash) {
|
|
globalThis.location.hash = nextHash.slice(1);
|
|
}
|
|
};
|
|
|
|
const handleDocumentOpen = (event: Event) => {
|
|
const document = (event as CustomEvent<{ document?: IAppDocumentRow }>).detail?.document;
|
|
if (!document) return;
|
|
activeDocumentId = document.id;
|
|
};
|
|
|
|
const handleFieldsChange = (event: Event) => {
|
|
if (!activeDocumentId) return;
|
|
const fields = (event as CustomEvent<{ fields?: IAppFieldPlacement[] }>).detail?.fields;
|
|
if (!fields) return;
|
|
setFieldsForDocument(activeDocumentId, fields);
|
|
};
|
|
|
|
const handleRecipientsChange = (event: Event) => {
|
|
const recipients = (event as CustomEvent<{ recipients?: IAppRecipient[] }>).detail?.recipients;
|
|
if (!recipients) return;
|
|
setAppRecipients(recipients);
|
|
};
|
|
|
|
const handleWorkspaceViewRequest = (event: Event) => {
|
|
const view = (event as CustomEvent<{ view?: TWorkspaceView }>).detail?.view;
|
|
if (!view || !isWorkspaceView(view)) return;
|
|
currentView = view;
|
|
const nextHash = hashForRoute(view, activeDocumentId);
|
|
if (globalThis.location.hash !== nextHash) {
|
|
globalThis.location.hash = nextHash.slice(1);
|
|
} else {
|
|
renderApp();
|
|
}
|
|
};
|
|
|
|
const handleRouteChange = () => {
|
|
if (routeChangeFrame !== null) {
|
|
globalThis.cancelAnimationFrame(routeChangeFrame);
|
|
}
|
|
routeChangeFrame = globalThis.requestAnimationFrame(() => {
|
|
routeChangeFrame = null;
|
|
currentRoute = routeFromLocation();
|
|
currentView = currentRoute.view;
|
|
activeDocumentId = currentRoute.documentId ? documentIdOrDefault(currentRoute.documentId) : '';
|
|
renderApp();
|
|
});
|
|
};
|
|
|
|
const renderApp = () => {
|
|
if (!appRoot) createAppRoot();
|
|
const documentId = activeDocumentId || appDocuments[0].id;
|
|
render(
|
|
html`
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: #09090b;
|
|
color: #fafafa;
|
|
font-family: Geist, Inter, Roboto, sans-serif;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
sdig-workspace {
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
<sdig-workspace accent="#3b82f6" density="comfortable" theme="dark" initialView=${currentView} .initialView=${currentView} view=${currentView} .view=${currentView} activeDocumentId=${documentId} .activeDocumentId=${documentId} .documents=${appDocuments} .recipients=${appRecipients} .fields=${fieldsForDocument(documentId)}></sdig-workspace>
|
|
`,
|
|
appRoot!
|
|
);
|
|
};
|
|
|
|
const run = async () => {
|
|
createAppRoot();
|
|
document.body.addEventListener('view-change', handleViewChange);
|
|
document.body.addEventListener('document-open', handleDocumentOpen);
|
|
document.body.addEventListener('fields-change', handleFieldsChange);
|
|
document.body.addEventListener('recipients-change', handleRecipientsChange);
|
|
document.body.addEventListener('routing-change', handleRecipientsChange);
|
|
document.body.addEventListener('workspace-view-request', handleWorkspaceViewRequest);
|
|
globalThis.addEventListener('popstate', handleRouteChange);
|
|
globalThis.addEventListener('hashchange', handleRouteChange);
|
|
renderApp();
|
|
};
|
|
|
|
run();
|