class GlobalNav extends HTMLElement {
#shadowRoot = null;
constructor() {
super();
this.#shadowRoot = this.attachShadow({ mode:'closed' });
this.#shadowRoot.innerHTML = this.template
}
get template() {
return `
`;
}
get #scripts() {
return this.#shadowRoot.querySelectorAll('script');
}
#scopedEval = (script) =>
Function(script).bind(this.#shadowRoot)();
#processScripts() {
this.#scripts.forEach(
s => this.#scopedEval(s.innerHTML)
);
}
#insertStyles() {
const fontsStyle = document.createElement('style');
fontsStyle.appendChild(document.createTextNode(`/*
@font-face {
font-family: "GT-Eesti-Nav";
src: url("https://nav.nordicsemi.com/fonts/GT-Eesti-Display-Thin.ttf");
font-weight: 100;
}
@font-face {
font-family: "GT-Eesti-Nav";
src: url("https://nav.nordicsemi.com/fonts/GT-Eesti-Display-ULight.ttf");
font-weight: 200;
} */
/* Fonts according to design */
@font-face {
font-family: "GT-Eesti-Nav";
src: url("https://nav.nordicsemi.com/fonts/GT-Eesti-Display-Light.ttf");
font-weight: 300;
}
@font-face {
font-family: "GT-Eesti-Nav";
src: url("https://nav.nordicsemi.com/fonts/GT-Eesti-Display-Regular.ttf");
font-weight: 400;
}
/* Lighter fonts used in footer */
@font-face {
font-family: "GT-Eesti-Nav-Light";
src: url("https://nav.nordicsemi.com/fonts/GT-Eesti-Display-Thin.ttf");
font-weight: 300;
}
@font-face {
font-family: "GT-Eesti-Nav-Light";
src: url("https://nav.nordicsemi.com/fonts/GT-Eesti-Display-Light.ttf");
font-weight: 400;
}
/* @font-face {
font-family: "GT-Eesti-Nav";
src: url("https://nav.nordicsemi.com/fonts/GT-Eesti-Display-Medium.ttf");
font-weight: 500;
}
@font-face {
font-family: "GT-Eesti-Nav";
src: url("https://nav.nordicsemi.com/fonts/GT-Eesti-Display-Medium.ttf");
font-weight: 600;
}
@font-face {
font-family: "GT-Eesti-Nav";
src: url("https://nav.nordicsemi.com/fonts/GT-Eesti-Display-Bold.ttf");
font-weight: 700;
}
@font-face {
font-family: "GT-Eesti-Nav";
src: url("https://nav.nordicsemi.com/fonts/GT-Eesti-Display-UBold.ttf");
font-weight: 900;
} */`));
document.head.appendChild(fontsStyle);
}
connectedCallback() {
var replaceOrigin = this.getAttribute('replace-origin')
if (replaceOrigin) {
this.#shadowRoot.querySelector('nav').setAttribute('replace-origin', replaceOrigin);
}
this.#processScripts();
this.#insertStyles();
if (this.classList.length > 0) {
this.#shadowRoot.querySelector('nav').classList.add(...this.classList);
}
}
}
window.customElements.define('global-nav', GlobalNav);