files

prompts/gpts/knowledge/Create or Refactor your Web Component/element.js

@@ -0,0 +1,46 @@
+customElements.define("fit-text", class extends HTMLElement {
+    constructor() {
+        super()
+            .attachShadow({ mode: "open" })
+            .innerHTML = `<slot style=display:inline-block>` +
+            `<style>:host{display:inline-block;width:100%;white-space:nowrap`
+    }
+    connectedCallback(// define variables and functions as parameters to save LET declarations
+        slot = this.shadowRoot.querySelector("slot"),
+        // FUNCTION fit text to fit the <fit-text> element
+        fit = _ =>
+            setTimeout(
+                _ => this.style.fontSize = parseInt(getComputedStyle(slot).fontSize) * (this.clientWidth / slot.scrollWidth) + "px"
+            ),
+        // FUNCTION add listener; return removeEventListener function
+        event = (root, name, x = root.addEventListener(name, fit)) => x => root.removeEventListener(name, fit),
+        observers = [] //array of MutationObservers
+    ) {
+        fit() // fit the text on first load
+
+        // watch for any (any!) DOM changes, unless the "static" attribute is set
+        if (!this.hasAttribute("static")) {
+            // Listeners outside 'this' need to be removed on disconnect! Keep a reference
+            this.r = event(window, "resize") // fit when the window resizes
+            this.l = event(document.fonts, "loadingdone") // fit when fonts load
+
+            slot.addEventListener("slotchange", (e) => {
+                // watch new Child elements with shadowRoots, attach MutationObserver
+                [...slot.assignedElements()]
+                    .filter(x => x.shadowRoot && !x.observer)
+                    .map(x => {
+                        observers.push(x.observer = new MutationObserver(fit))
+                        x.observer.observe(x.shadowRoot, { childList: true, subtree: true, characterData: true })
+                    })
+            })
+            // MutationObserver for all <fit-text> lightDOM changes
+            observers.push(this.observer = new MutationObserver(fit))
+            this.observer.observe(this, { childList: true, subtree: true, characterData: true })
+        }
+    }
+    disconnectedCallback() {
+        this.r() // remove "resize" listener
+        this.l() // remove font "loadingdone" listener
+        observers.map(x => x.disconnect()) // remove all MutationObservers
+    }
+});

prompts/gpts/knowledge/Create or Refactor your Web Component/element.source.js

@@ -0,0 +1,63 @@
+customElements.define(
+  "file-size",
+  class extends HTMLElement {
+    connectedCallback(
+      // BYTE SAVINGS: DECLARE variables/functions as parameters to prevent 4 bytes let statement
+      // source file to get content-length of:
+      source = this.getAttribute("src") ||
+        "https://file-size.github.io/element.js",
+      // global state to load gzthermal IMG once
+      img = false,
+      // display bigger than maxbytes in red color
+      maxbytes = this.getAttribute("max") || 49152, // 48 kByte, because my first TRS-80 had 48 kB RAM
+      // load GZThermal IMG function:
+      gzthermal = () => {
+        if (!img) {
+          this.querySelector("i").innerHTML = "Loading GZIP Thermal analysis";
+          img = this.querySelector("img");
+          img.onerror = (e) =>
+            (this.querySelector("i").innerHTML = "Too many bytes for analysis");
+          img.onload = (e) => {
+            this.querySelector("i").innerHTML = "";
+            img.style.width = (this.getAttribute("width") || "700") + "px";
+            this.querySelector("details").setAttribute("open", "open");
+            img.onclick = (e) => {
+              if (e.altKey) open(source, "_blank").focus(); // open new tab with source code
+              else this.querySelector("details").removeAttribute("open");
+            };
+          };
+          img.src = "https://gzthermal.vercel.app/?url=" + source;
+        }
+      }
+    ) {
+      this.setAttribute("title", source);
+      fetch(source, {
+        mode: "cors",
+      })
+        .then((response) => {
+          this.length = Number(response.headers.get("content-length"));
+
+          this.innerHTML =
+            `<details style="cursor:pointer;font:16px arial">` +
+            `<summary>` +
+            `<b style="color:dark${
+              this.length < maxbytes ? "green" : "red"
+            };display:inline-block;width:4em;text-align:right">${
+              this.length
+            }</b> &nbsp;Bytes ${source} <i/>` +
+            `</summary><img/>` +
+            `</details>`;
+
+          // toggle display GZThermal IMG
+          this.querySelector("details").ontoggle = (e) => {
+            this.querySelector("details").open && gzthermal();
+          };
+
+          if (this.hasAttribute("gz")) gzthermal(); // load GZThermal IMG by default
+        })
+        .catch((e) => {
+          this.innerHTML = `<b style="font:16px arial;color:red">&lt;file-size> ${e} : ${source}</b>`;
+        });
+    }
+  }
+);