x x x
x

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HTML
<div ov-include-js-files="{{PLATFORM_JS_ASSET_PATH}}/VueDashboard/assets/index-7f78a88cf143c903.js" ov-type="vue"> </div>
<div ov-include-js-files="{{PLATFORM_JS_ASSET_PATH}}/VueDashboard/assets/index-7f78a88cf143c903.css" ov-type="css"> </div>
<!-- <script type="module" crossorigin src="https://gsvlabs-confluence-files.s3.us-west-2.amazonaws.com/staging-files/js/LBNL/VueDashboard/assets/index.9264fc2d.js"></script> -->
<div id="app"> </div>
 <script>
    const replaceGlobalVars = str => {
        const varsToReplace = {
            "{{PLATFORM_JS_ASSET_PATH}}": PLATFORM_JS_ASSET_PATH,
            /*"{{VUE_APP_INDEX_JS}}": VUE_APP_INDEX_JS,
            "{{VUE_APP_INDEX_CSS}}": VUE_APP_INDEX_CSS*/
        }

        const reg = new RegExp(Object.keys(varsToReplace).join("|", "g"));

        return str.replace(reg, matched => varsToReplace[matched]);
    }
	async function includeJsAndCssFiles() {
        const attr = "ov-include-js-files"
        const bucket = ASSET_URL
        const elements = $(`div[${attr}]`);

        for(let i = 0; i < elements.length; i++){
            const el = elements[i];

            const file = replaceGlobalVars(el.getAttribute(attr));
            const type = el.getAttribute("ov-type");

            let newEl = null;

            // handle css
            if (type === "css") {
                newEl = document.createElement("link");

                newEl.rel = "stylesheet";
                newEl.type = "text/css";
                newEl.href = `${bucket}${file}`
            } else {
                // handle js
                newEl = document.createElement('script');

                newEl.type = 'text/javascript';

                if(type === "vue"){
                    newEl.type = 'module';
                    newEl.crossorgin = true;
                }

                newEl.src = `${bucket}${file}`;
                newEl.async = false;
            }

            el.appendChild(newEl);
            el.removeAttribute(attr)
        }

        return;
    }

    includeFiles().then(() => {
        includeJsAndCssFiles().then();
    });

     if(document.querySelectorAll("#main-content > p:first-child > br").length){
      document.querySelector("#main-content > p:first-child").remove()
    } 

</script>

...