70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { defer } from '@pushrocks/smartpromise';
|
|
|
|
const createStyleElement = (headElement: HTMLElement, styleText: string) => {
|
|
const styleElement = document.createElement('style');
|
|
styleElement.type = 'text/css';
|
|
styleElement.appendChild(document.createTextNode(styleText));
|
|
headElement.appendChild(styleElement);
|
|
};
|
|
|
|
/**
|
|
* a basic setup for elements
|
|
* makes sure everything is in check
|
|
*/
|
|
export const elementBasicSetup = async () => {
|
|
if (globalThis.deesCssToolsReady) {
|
|
await globalThis.deesCssToolsReady.promise;
|
|
} else {
|
|
// lets prevent double execution
|
|
globalThis.deesCssToolsReady = defer();
|
|
|
|
// lets make sure the dom is ready
|
|
const documentReady = defer();
|
|
const readyStateChangedFunc = () => {
|
|
if (document.readyState === 'interactive' || document.readyState === 'complete') {
|
|
console.log('elementBasicSetup: element basic setup complete')
|
|
documentReady.resolve();
|
|
} else {
|
|
console.log('elementBasicSetup: document not yet ready');
|
|
}
|
|
};
|
|
document.addEventListener('readystatechange', readyStateChangedFunc);
|
|
console.log('elementBasicSetup: waiting for document to be ready');
|
|
await documentReady.promise;
|
|
console.log('elementBasicSetup: document ready!');
|
|
|
|
// lets get started
|
|
const head = document.querySelector('head');
|
|
const body = document.querySelector('body');
|
|
|
|
// bodyStyles
|
|
const bodyStyles = `
|
|
body {
|
|
margin: 0px;
|
|
font-family: 'Roboto', sans-serif;
|
|
box-sizing: border-box;
|
|
}
|
|
`;
|
|
createStyleElement(head, bodyStyles);
|
|
|
|
// material font
|
|
const materialFontStyles = `
|
|
@font-face {
|
|
font-family: 'Material Icons';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
|
|
}
|
|
`;
|
|
createStyleElement(head, materialFontStyles);
|
|
|
|
// Roboto Font
|
|
const robotoFontCss = `
|
|
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
|
`;
|
|
createStyleElement(head, robotoFontCss);
|
|
|
|
globalThis.deesCssToolsReady.resolve();
|
|
}
|
|
};
|