head.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. (() => {
  2. const DEMO_ROOT = "demos";
  3. const ASSETS_PATH = "demos/_assets";
  4. const CSS = [`${ASSETS_PATH}/demos.css`, "build/calcite.css"];
  5. const urlParams = new URLSearchParams(window.location.search);
  6. const DISABLE_HEADER_URL_PARAM = "header-disabled";
  7. const SCRIPTS = [
  8. {
  9. src: "build/calcite.esm.js",
  10. type: "module"
  11. },
  12. {
  13. src: "demos/_assets/demo-dom-swapper.js"
  14. }
  15. ];
  16. const parseTemplate = (text) => {
  17. const parser = new DOMParser();
  18. const doc = parser.parseFromString(text, "text/html");
  19. return doc.head.querySelector("template");
  20. };
  21. const loadHeader = async () => {
  22. const root = window.location.pathname.split(DEMO_ROOT).shift();
  23. const response = await window.fetch(`${root}${ASSETS_PATH}/demo-template.html`);
  24. const text = await response.text();
  25. const template = parseTemplate(text);
  26. const firstChild = document.body.firstChild;
  27. firstChild && document.body.insertBefore(template.content, firstChild);
  28. };
  29. if (window.location.pathname.includes("/demos/") && !urlParams.has(DISABLE_HEADER_URL_PARAM)) {
  30. document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadHeader) : loadHeader();
  31. }
  32. const ROOT = window.location.pathname.split(DEMO_ROOT).shift();
  33. function loadCss(url) {
  34. const link = document.createElement("link");
  35. link.rel = "stylesheet";
  36. link.href = ROOT + url;
  37. document.head.appendChild(link);
  38. }
  39. function loadScript(script) {
  40. const scriptElement = document.createElement("script");
  41. Object.keys(script).forEach((key) => {
  42. scriptElement[key] = key === "src" ? ROOT + script[key] : script[key];
  43. });
  44. document.head.appendChild(scriptElement);
  45. }
  46. CSS.forEach(loadCss);
  47. SCRIPTS.forEach(loadScript);
  48. })();