dees-domtools/ts/csstools.elementbasicsetup.ts

import { defer } from '@pushrocks/smartpromise';

/**
 * 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();
    document.onreadystatechange = () => {
      if (document.readyState === 'interactive' || document.readyState === 'complete') {
        console.log('elementBasicSetup: element basic setup complete')
        documentReady.resolve();
      } else {
        console.log('elementBasicSetup: document not yet ready');
      }
    };
    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');

    // material font
    const materialFontCss = `
      @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');
      }
    `;
    const styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.appendChild(document.createTextNode(materialFontCss));
    head.appendChild(styleElement);


    globalThis.deesCssToolsReady.resolve();
  }
};