overcentric
Version:
A lightweight, privacy-focused toolkit for modern SaaS web applications
71 lines (70 loc) • 3.29 kB
JavaScript
var _a, _b;
let dockIframe = null;
let dockOrigin = 'https://app.overcentric.com';
try {
if (typeof window !== 'undefined' && typeof document !== 'undefined' && (document === null || document === void 0 ? void 0 : document.readyState) !== undefined) {
dockOrigin = ((_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.origin) === null || _b === void 0 ? void 0 : _b.includes('localhost')) ? 'http://localhost:4000' : 'https://app.overcentric.com';
}
}
catch (error) {
}
/**
* Initialize the dock with a floating button and iframe.
* @param projectId - The project ID to be used in the iframe URL.
*/
export function initDock(projectId, identity, options) {
// Create the floating button
const button = document.createElement('button');
button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M4.848 2.771A49.144 49.144 0 0 1 12 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97a48.901 48.901 0 0 1-3.476.383.39.39 0 0 0-.297.17l-2.755 4.133a.75.75 0 0 1-1.248 0l-2.755-4.133a.39.39 0 0 0-.297-.17 48.9 48.9 0 0 1-3.476-.384c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97Z" clip-rule="evenodd" />
</svg>
`;
button.style.position = 'fixed';
button.style.bottom = '20px';
button.style.right = '20px';
button.style.zIndex = '1000';
button.style.backgroundColor = options.color;
button.style.color = '#fff';
button.style.border = 'none';
button.style.borderRadius = '12px';
button.style.width = '50px';
button.style.height = '50px';
button.style.cursor = 'pointer';
button.style.transition = 'background-color 0.3s ease';
button.style.outline = 'none';
button.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
button.style.padding = '10px';
button.style.display = 'flex';
button.style.alignItems = 'center';
button.style.justifyContent = 'center';
document.body.appendChild(button);
// Create the iframe for the dock
dockIframe = document.createElement('iframe');
dockIframe.style.position = 'fixed';
dockIframe.style.bottom = '80px';
dockIframe.style.right = '20px';
dockIframe.style.zIndex = '1000';
dockIframe.style.display = 'none';
dockIframe.style.width = '360px';
dockIframe.style.height = '460px';
dockIframe.style.border = '1px solid #ccc';
dockIframe.style.borderRadius = '8px';
dockIframe.style.backgroundColor = '#fff';
dockIframe.src = `${dockOrigin}/dock?project_id=${projectId}`;
document.body.appendChild(dockIframe);
// Toggle iframe visibility on button click
button.addEventListener('click', () => {
dockIframe.style.display = dockIframe.style.display === 'none' ? 'block' : 'none';
});
}
/**
* Update the dock iframe with the identity ID.
* @param identity - The identity to be added to the iframe URL.
*/
export function updateDockIdentity(identity) {
if (dockIframe) {
const currentSrc = new URL(dockIframe.src);
currentSrc.searchParams.set('identityId', identity.uniqueIdentifier);
dockIframe.src = currentSrc.toString();
}
}