forma-embedded-view-sdk
Version:
The Forma Embedded View SDK is a JavaScript library for creating custom extensions in Autodesk Forma (previously Spacemaker).
155 lines (153 loc) • 13.2 kB
JavaScript
function getTemplate() {
const template = document.createElement("template");
template.innerHTML = `
<style>
:host {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
display: flex;
background-color: white;
z-index: 2;
--high-extraextralarge-regular: normal 400 normal 24px/30px "Artifakt Element", sans-serif;
--high-medium-regular: normal 400 normal 12px/16px "Artifakt Element", sans-serif;
--high-small-regular: normal 400 normal 11px/18px "Artifakt Element", sans-serif;
--high-small-bold: normal 700 normal 11px/14px "Artifakt Element", sans-serif;
}
.login-overlay {
max-width: 300px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: auto;
}
.header {
font: var(--high-extraextralarge-regular);
font-size: 28px;
line-height: 36px;
margin: 0 0 40px;
padding: 0;
}
.login-overlay svg {
margin-bottom: 16px;
}
.login-overlay p {
font: var(--high-medium-regular);
width: 100%;
padding: 0;
}
.info-text {
margin: 0 0 24px;
}
.login-overlay weave-button {
width: 164px;
margin-bottom: 12px;
}
.login-overlay-info {
font: var(--high-small-regular);
margin: 0;
}
#name-placeholder {
font: var(--high-small-bold);
}
</style>
<div class="login-overlay">
<h3 class="header">Permissions Required</h3>
<svg
width="144"
height="150"
viewBox="0 0 144 150"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M69.989 29.9105C69.7832 29.7772 69.5185 29.7765 69.312 29.9088L41.9891 47.4147C41.8097 47.5296 41.7013 47.7279 41.7013 47.941V73.7963L14.8152 91.0223C14.6358 91.1372 14.5273 91.3356 14.5273 91.5486V117.758C14.5273 117.971 14.6358 118.169 14.8151 118.284L42.1381 135.792C42.3446 135.924 42.6093 135.923 42.8151 135.79L69.502 118.501L96.4859 135.792C96.6924 135.924 96.9571 135.923 97.1629 135.79L124.188 118.282C124.366 118.167 124.473 117.97 124.473 117.758V91.5468C124.473 91.3349 124.366 91.1374 124.188 91.0222L97.2991 73.6063V47.9392C97.2991 47.7273 97.1917 47.5298 97.0139 47.4146L69.989 29.9105ZM70.8335 91.6354L96.8315 74.7928L122.682 91.5363L96.8213 107.631L70.8335 91.6354ZM42.3169 74.8864L68.3173 91.5468L42.4735 107.631L16.3275 91.538L42.3169 74.8864ZM96.0491 73.7963V49.0643L70.2742 65.1053V90.3104L96.0491 73.7963ZM69.0242 90.4939V65.1073L42.9513 49.0595V73.6063L69.0242 90.4939ZM69.6474 64.0231L95.5081 47.9286L69.6474 31.1785L43.5014 47.9303L69.6474 64.0231ZM70.1252 117.416V92.6672L96.1981 108.715V134.123L70.1252 117.416ZM43.1003 108.713L68.8752 92.6719V117.418L43.1003 134.116V108.713ZM15.7773 92.6672V117.416L41.8503 134.123V108.715L15.7773 92.6672ZM97.4481 108.713V134.116L123.223 117.418V92.6719L97.4481 108.713Z"
fill="#808080"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M114.914 5.15586C115.202 4.90317 115.573 4.76515 115.956 4.76811C116.173 4.76978 119.523 4.76978 119.74 4.76811C120.123 4.76515 120.494 4.90317 120.783 5.15586C121.071 5.40854 121.256 5.75828 121.304 6.13863L121.304 6.13997L121.742 9.70996C123.477 10.1245 125.134 10.8137 126.651 11.7514L129.501 9.52748L129.502 9.5267C129.803 9.29294 130.179 9.17696 130.559 9.20059C130.939 9.22422 131.297 9.38583 131.567 9.655C131.722 9.80972 134.105 12.1942 134.26 12.3492C134.529 12.6188 134.69 12.9773 134.714 13.3574C134.737 13.7375 134.621 14.1132 134.388 14.414L134.388 14.4141L132.173 17.266C133.111 18.7835 133.799 20.4416 134.212 22.1769L137.786 22.6233L137.786 22.6233C138.167 22.6709 138.516 22.8566 138.769 23.145C139.021 23.4334 139.159 23.8045 139.156 24.1878C139.155 24.345 139.173 26.2011 139.183 27.2591C139.187 27.6368 139.19 27.9128 139.19 27.9734C139.193 28.3567 139.055 28.7278 138.803 29.0162C138.551 29.304 138.202 29.4895 137.823 29.5376C137.822 29.5377 137.821 29.5378 137.82 29.5379L134.271 30.0093C133.857 31.7461 133.168 33.4055 132.229 34.924L134.422 37.7471L134.422 37.7472C134.655 38.048 134.771 38.4237 134.748 38.8038C134.724 39.1839 134.563 39.5424 134.294 39.812C134.139 39.967 131.756 42.3515 131.601 42.5062C131.331 42.7754 130.973 42.937 130.593 42.9606C130.213 42.9843 129.837 42.8683 129.536 42.6345L129.536 42.6345L126.686 40.4183C125.169 41.3564 123.511 42.0458 121.776 42.4604L121.333 46.0346L121.332 46.0352C121.285 46.4155 121.1 46.7653 120.811 47.018C120.523 47.2706 120.152 47.4087 119.769 47.4057C119.552 47.404 116.194 47.404 115.978 47.4057C115.594 47.4087 115.223 47.2706 114.935 47.018C114.647 46.7653 114.461 46.4155 114.414 46.0352L114.414 46.0351L113.968 42.4605C112.232 42.0459 110.574 41.3564 109.057 40.4181L106.201 42.6345C105.9 42.8683 105.525 42.9843 105.145 42.9606C104.764 42.937 104.406 42.7754 104.136 42.5062C103.982 42.3515 101.598 39.967 101.444 39.812C101.175 39.5424 101.013 39.1839 100.99 38.8038C100.966 38.4237 101.082 38.048 101.316 37.7472L101.318 37.7445L103.533 34.9219C102.595 33.4049 101.908 31.7475 101.495 30.013L97.9209 29.5666L97.9208 29.5666C97.5404 29.5191 97.1907 29.3334 96.9382 29.045C96.6857 28.7565 96.5479 28.3854 96.5508 28.0022C96.5525 27.7856 96.5525 24.4259 96.5508 24.2094C96.5479 23.8261 96.6857 23.455 96.9382 23.1665C97.1907 22.8781 97.5404 22.6924 97.9208 22.6449L97.9209 22.6449L101.495 22.1985C101.908 20.4632 102.596 18.8052 103.534 17.2877L101.31 14.4269L101.31 14.4266C101.077 14.1258 100.961 13.7501 100.984 13.37C101.008 12.9899 101.169 12.6314 101.438 12.3618C101.593 12.2068 103.976 9.82229 104.131 9.66757C104.401 9.3984 104.759 9.23679 105.139 9.21316C105.519 9.18953 105.895 9.30551 106.196 9.53927L106.196 9.53954L109.043 11.7553C110.558 10.818 112.213 10.1288 113.946 9.71364L114.392 6.13866L114.392 6.13863C114.44 5.75828 114.625 5.40854 114.914 5.15586ZM115.946 6.10141C115.89 6.10097 115.835 6.12127 115.792 6.15855C115.75 6.19583 115.722 6.24751 115.715 6.30381C115.715 6.30382 115.715 6.30383 115.715 6.30384L115.211 10.3439C115.176 10.6265 114.965 10.8554 114.686 10.9138C112.791 11.3109 110.988 12.0618 109.372 13.1272C109.133 13.2844 108.821 13.2721 108.595 13.0966L105.377 10.592C105.377 10.5919 105.377 10.5919 105.377 10.5919C105.333 10.5575 105.278 10.5405 105.222 10.5439C105.166 10.5474 105.113 10.5712 105.073 10.6109C104.919 10.7651 102.536 13.1491 102.382 13.3035C102.343 13.3433 102.319 13.3963 102.315 13.4526C102.312 13.5088 102.329 13.5642 102.363 13.6086C102.363 13.6087 102.363 13.6088 102.363 13.6089L104.876 16.8407C105.051 17.0661 105.063 17.3782 104.906 17.6166C103.84 19.2347 103.091 21.0401 102.696 22.9377C102.638 23.2168 102.409 23.428 102.126 23.4634L98.0862 23.9679C98.0862 23.9679 98.0862 23.9679 98.0861 23.9679C98.0302 23.975 97.9787 24.0023 97.9414 24.0448C97.9041 24.0874 97.8837 24.1423 97.8841 24.1991C97.8859 24.4225 97.8858 27.789 97.8841 28.0124C97.8837 28.0692 97.9041 28.1241 97.9414 28.1667C97.9787 28.2093 98.0302 28.2366 98.0862 28.2436L102.126 28.7481C102.409 28.7835 102.638 28.9947 102.696 29.2738C103.091 31.1714 103.84 32.9768 104.906 34.5949C105.064 34.8343 105.051 35.1477 104.874 35.3733L102.369 38.5649C102.369 38.5652 102.368 38.5654 102.368 38.5657C102.334 38.61 102.317 38.6653 102.321 38.7212C102.324 38.7775 102.348 38.8305 102.388 38.8703C102.542 39.0247 104.924 41.4087 105.079 41.5629C105.118 41.6026 105.171 41.6264 105.227 41.6299C105.283 41.6334 105.339 41.6163 105.383 41.5818L105.383 41.5815L108.61 39.0767C108.836 38.9017 109.148 38.8896 109.386 39.0466C111.005 40.1127 112.81 40.8636 114.707 41.2599C114.986 41.3181 115.197 41.5472 115.233 41.8299L115.737 45.87C115.744 45.9263 115.771 45.978 115.814 46.0153C115.856 46.0525 115.911 46.0728 115.968 46.0724C116.191 46.0707 119.555 46.0707 119.779 46.0724C119.835 46.0728 119.89 46.0525 119.932 46.0153C119.975 45.978 120.002 45.9263 120.009 45.87C120.009 45.87 120.009 45.87 120.009 45.87L120.51 41.8304C120.546 41.5475 120.757 41.3182 121.036 41.2599C122.933 40.8636 124.739 40.1127 126.357 39.0466C126.596 38.8895 126.908 38.9017 127.133 39.077L130.355 41.5818C130.355 41.5819 130.355 41.5819 130.355 41.5819C130.399 41.6163 130.454 41.6334 130.51 41.6299C130.566 41.6264 130.619 41.6026 130.659 41.5629C130.813 41.4087 133.196 39.0247 133.35 38.8703C133.389 38.8305 133.413 38.7775 133.417 38.7212C133.42 38.6649 133.403 38.6093 133.369 38.5649L130.888 35.3706C130.713 35.1452 130.7 34.8333 130.857 34.5949C131.924 32.9766 132.674 31.1711 133.069 29.2738C133.127 28.9966 133.353 28.7861 133.634 28.7488L137.65 28.2155L137.655 28.2149C137.711 28.2079 137.762 28.1805 137.8 28.1379C137.837 28.0953 137.857 28.0405 137.857 27.9837C137.856 27.9315 137.854 27.6835 137.851 27.3369C137.84 26.2911 137.821 24.3478 137.823 24.1775C137.823 24.1208 137.803 24.0659 137.766 24.0233C137.728 23.9807 137.677 23.9534 137.621 23.9464L133.581 23.4418C133.298 23.4065 133.069 23.1952 133.011 22.9161C132.616 21.0186 131.867 19.2132 130.801 17.5951C130.644 17.3567 130.656 17.0448 130.831 16.8193L133.335 13.5963C133.335 13.5963 133.335 13.5963 133.335 13.5962C133.369 13.5518 133.386 13.4963 133.383 13.44C133.379 13.3838 133.355 13.3308 133.316 13.291C133.162 13.1365 130.779 10.7525 130.625 10.5983C130.585 10.5586 130.532 10.5348 130.476 10.5314C130.42 10.5279 130.365 10.5448 130.321 10.5791C130.321 10.5792 130.321 10.5793 130.32 10.5794L127.1 13.0925C126.875 13.2684 126.562 13.281 126.323 13.1237C124.705 12.0575 122.899 11.3066 121.002 10.9103C120.722 10.852 120.511 10.6223 120.476 10.339L119.981 6.30384C119.981 6.30363 119.981 6.30342 119.981 6.30321C119.973 6.24715 119.946 6.1957 119.904 6.15855C119.861 6.12127 119.806 6.10097 119.75 6.10141C119.527 6.10313 116.169 6.10313 115.946 6.10141ZM117.87 18.0579C113.435 18.0579 109.841 21.6526 109.841 26.0869C109.841 30.5212 113.435 34.1159 117.87 34.1159C122.304 34.1159 125.899 30.5212 125.899 26.0869C125.899 21.6526 122.304 18.0579 117.87 18.0579ZM108.507 26.0869C108.507 20.9162 112.699 16.7246 117.87 16.7246C123.04 16.7246 127.232 20.9162 127.232 26.0869C127.232 31.2576 123.04 35.4492 117.87 35.4492C112.699 35.4492 108.507 31.2576 108.507 26.0869Z"
fill="#808080"
/>
</svg>
<p class="info-text">
<span id="name-placeholder">This extension</span> needs permissions to access certain data. You have to
review and accept permissions before you can use this app.
</p>
<weave-button
variant="solid"
density="medium"
id="login-button"
>
Review permissions
</weave-button>
<p class="login-overlay-info">This will open a separate window.</p>
</div>
`;
return template;
}
// Avoiding the use of dynamic import for now since we have
// some users being on older Angular versions etc. that are
// having trouble getting the SDK to work for them.
// See https://spacemakercore.slack.com/archives/C06H3MYQXLM/p1707733857716509
async function loadModule(src) {
await new Promise((resolve, reject) => {
const scripts = Array.from(document.querySelectorAll("script"));
if (scripts.some((script) => script.src.endsWith(src))) {
resolve(undefined);
return;
}
const script = document.createElement("script");
script.type = "module";
script.src = src;
script.onload = () => {
resolve(undefined);
};
script.onerror = (message) => {
// eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
reject(message);
};
document.head.append(script);
});
}
export class FormaLoginOverlay extends HTMLElement {
#shadow;
constructor() {
super();
this.#shadow = this.attachShadow({ mode: "open" });
}
connectedCallback() {
if (!customElements.get("weave-button")) {
void loadModule("https://app.autodeskforma.com/design-system/v2/weave/components/button/weave-button.js");
}
this.#shadow.appendChild(getTemplate().content.cloneNode(true));
const namePlaceholder = this.#shadow.getElementById("name-placeholder");
const name = this.getAttribute("extension-name");
if (namePlaceholder && name) {
namePlaceholder.textContent = this.getAttribute("extension-name");
}
const loginButton = this.#shadow.getElementById("login-button");
if (!loginButton)
return;
loginButton.addEventListener("click", () => {
this.dispatchEvent(new Event("loginclick", {
bubbles: true,
composed: true,
}));
});
}
}
/**
* Define the login overlay component if it is not already defined.
*/
export function defineLoginOverlayComponent() {
if (!customElements.get("forma-login-overlay")) {
customElements.define("forma-login-overlay", FormaLoginOverlay);
}
}