Hello world
"); + card.open(); + }); + } } export default window._debug = new Debug(); \ No newline at end of file diff --git a/public/assets/js/modules/Modals.mjs b/public/assets/js/modules/Modals.mjs index a09bcb9..0292c3a 100644 --- a/public/assets/js/modules/Modals.mjs +++ b/public/assets/js/modules/Modals.mjs @@ -17,25 +17,25 @@ class Modal extends Interaction { super(interactions,element); this.element = this.applyTemplate(element); - this.importStyleSheet(); document.body.appendChild(this.element); } - // Import the companion CSS rules - importStyleSheet() { - let sheet = "assets/css/modal.css"; - const element = document.createElement("link"); - - // Exit if the stylesheet has already been imported - if(document.head.querySelector("link[data-async-modalcss]")) { - return false; + // Fetch page html from "assets/pages" + async getPage(page) { + const url = `assets/pages/${page}.html`; + const response = await fetch(url); + if(!response.ok) { + throw new Error(`Modal: Failed to fetch page "${page}"`); } + return response.text(); + } - // Import the stylesheet with a link tag - element.setAttribute("rel","stylesheet"); - element.setAttribute("href",sheet); - element.setAttribute("data-async-modalcss",""); - document.head.appendChild(element); + insertHTML(element) { + this.inner.insertAdjacentHTML("afterbegin",element); + } + + insertElement(element) { + this.inner.insertAdjacentElement("afterbegin",element); } // Apply a modal template to the provided element @@ -83,10 +83,6 @@ export class Card extends Modal { this.init(); } - setContent(content) { - this.element.insertAdjacentHTML("beforeend",content); - } - init(slim) { this.element.classList.add("card"); this.element.classList.add("center"); @@ -100,7 +96,22 @@ export class Card extends Modal { this.inner.appendChild(closeButtonElement); } + // Open page from "assets/pages" openPage(page) { + // Show a spinner while fetching + const spinner = document.createElement("div"); + spinner.classList = "logo spinner"; + this.insertElement(spinner); this.open(); + + // Fetch the requested page + this.getPage(page).then(html => { + this.insertHTML(html); + }).catch(error => { + const element = document.createElement("p"); + element.classList.add("error"); + element.innerText = "🤯\nSomething went wrong"; + this.insertElement(element); + }).finally(() => destroy(spinner)); } } \ No newline at end of file diff --git a/public/assets/js/modules/Preload.mjs b/public/assets/js/modules/Preload.mjs new file mode 100644 index 0000000..5418b21 --- /dev/null +++ b/public/assets/js/modules/Preload.mjs @@ -0,0 +1,42 @@ +// Copyright © Victor Westerlund - No libraries! 😲 + +// Load assets for later use on this page. +// This implements a hybrid of the link types "preload" and "prefetch" +export default class Preload { + constructor(assets) { + this.scripts = []; + this.stylesheets = []; + + // Get the type of asset from the file extension + assets.forEach(asset => { + const components = asset.split("."); + const extension = components[components.length - 1]; + switch(extension) { + case "mjs": + this.scripts.push(asset); + break; + case "css": + this.stylesheets.push(asset); + break; + } + }); + + // Append tags when DOM is ready + window.addEventListener("DOMContentLoaded",() => this.import()); + } + + import() { + this.scripts.forEach(script => { + const element = document.createElement("script"); + element.setAttribute("type","module"); + element.src = "assets/js/" + script; + document.body.appendChild(element); + }); + this.stylesheets.forEach(sheet => { + const element = document.createElement("link"); + element.setAttribute("rel","stylesheet"); + element.href = "assets/css/" + sheet; + document.head.appendChild(element); + }); + } +} \ No newline at end of file diff --git a/public/assets/js/script.js b/public/assets/js/script.js index ca0f090..b0f6106 100644 --- a/public/assets/js/script.js +++ b/public/assets/js/script.js @@ -1,7 +1,15 @@ // Copyright © Victor Westerlund - No libraries! 😲 +import { default as Preload } from "./modules/Preload.mjs"; import { default as Interaction } from "./modules/UI.mjs"; import { default as Debug } from "./modules/Debugging.mjs"; +// Load these assets when the DOM is ready (not needed right away) +const preload = new Preload([ + "modules/Modals.mjs", + "modules/Components.mjs", + "modal.css" +]); + // All default interactions const interactions = { toggleMenu: () => { diff --git a/public/assets/pages/contact_card.html b/public/assets/pages/contact_card.html index e69de29..43260e0 100644 --- a/public/assets/pages/contact_card.html +++ b/public/assets/pages/contact_card.html @@ -0,0 +1,27 @@ + +Signal
++