85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import '@signature.digital/catalog';
|
|
import { html, render } from '@design.estate/dees-element';
|
|
|
|
type TWorkspaceView = 'inbox' | 'compose' | 'sign' | 'audit' | 'developers' | 'templates' | 'team' | 'settings';
|
|
|
|
const workspaceViews: TWorkspaceView[] = ['inbox', 'compose', 'sign', 'audit', 'developers', 'templates', 'team', 'settings'];
|
|
|
|
const isWorkspaceView = (view: string): view is TWorkspaceView => workspaceViews.includes(view as TWorkspaceView);
|
|
|
|
const viewFromLocation = (): TWorkspaceView => {
|
|
const view = globalThis.location.hash.replace(/^#/, '');
|
|
return isWorkspaceView(view) ? view : 'inbox';
|
|
};
|
|
|
|
let currentView = viewFromLocation();
|
|
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 = `#${view}`;
|
|
if (globalThis.location.hash !== nextHash) {
|
|
globalThis.location.hash = view;
|
|
}
|
|
};
|
|
|
|
const handleRouteChange = () => {
|
|
if (routeChangeFrame !== null) {
|
|
globalThis.cancelAnimationFrame(routeChangeFrame);
|
|
}
|
|
routeChangeFrame = globalThis.requestAnimationFrame(() => {
|
|
routeChangeFrame = null;
|
|
currentView = viewFromLocation();
|
|
renderApp();
|
|
});
|
|
};
|
|
|
|
const renderApp = () => {
|
|
if (!appRoot) createAppRoot();
|
|
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}></sdig-workspace>
|
|
`,
|
|
appRoot!
|
|
);
|
|
};
|
|
|
|
const run = async () => {
|
|
createAppRoot();
|
|
document.body.addEventListener('view-change', handleViewChange);
|
|
globalThis.addEventListener('popstate', handleRouteChange);
|
|
globalThis.addEventListener('hashchange', handleRouteChange);
|
|
renderApp();
|
|
};
|
|
|
|
run();
|