@third774/google-font
Version:
A web component for loading fonts from Google Fonts
1 lines • 4.14 kB
Source Map (JSON)
{"version":3,"sources":["../src/google-font.ts"],"sourcesContent":["export class GoogleFont extends HTMLElement {\n // attributes to observe\n static get observedAttributes() {\n return [\"family\", \"weight\", \"style\", \"display\"];\n }\n\n // attribute change callback\n attributeChangedCallback(name, oldValue, newValue) {\n if (oldValue !== newValue) {\n this.insertLinkTag();\n }\n }\n\n render() {\n const template = document.createElement(\"template\");\n template.innerHTML = `\n <style>\n :host {\n font-family: ${this.getAttribute(\"family\") ?? \"Inter\"};\n }\n </style>\n <slot></slot>\n `;\n\n this.shadowRoot!.innerHTML = \"\";\n // append template content to shadow DOM\n this.shadowRoot!.appendChild(template.content.cloneNode(true));\n }\n\n constructor() {\n super();\n // attach shadow root\n this.attachShadow({ mode: \"open\" });\n this.render();\n }\n\n get href() {\n const family = (this.getAttribute(\"family\") ?? \"Inter\").replace(/ /g, \"+\");\n const weight = this.getAttribute(\"weight\") ?? \"400\";\n const weights = weight\n .split(\",\")\n .filter(Boolean)\n .map((w) => w.trim());\n // might be null, normal, italic, oblique\n // we should assume normal if null\n const style = this.getAttribute(\"style\") ?? \"normal\";\n const display = this.getAttribute(\"display\") ?? \"fallback\";\n const styles = style\n .split(\",\")\n .filter(Boolean)\n .map((s) => s.trim());\n\n const afterAtSymbol = weights\n .map((w) =>\n styles.map((style) => {\n if (styles.length === 1 && style === \"normal\") {\n return w;\n }\n if (style === \"normal\") {\n return `0,${w}`;\n }\n if (style === \"italic\") {\n return `1,${w}`;\n }\n if (style === \"oblique\") {\n return `1,${w}`;\n }\n return `0,${w}`;\n })\n )\n .join(\";\");\n\n const beforeAtSymbol = `${family}:${[\n styles.includes(\"italic\") && \"ital\",\n \"wght\",\n ]\n .filter(Boolean)\n .join(\",\")}`;\n\n // Asap:ital,wght@0,400;0,700;1,400;1,700\n\n return `https://fonts.googleapis.com/css2?family=${beforeAtSymbol}@${afterAtSymbol}&display=${display}`;\n }\n\n insertLinkTag() {\n const link = document.createElement(\"link\");\n link.setAttribute(\"rel\", \"stylesheet\");\n link.setAttribute(\"href\", this.href);\n document.head.appendChild(link);\n }\n}\n"],"mappings":";AAAO,IAAM,aAAN,cAAyB,YAAY;AAAA;AAAA,EAE1C,WAAW,qBAAqB;AAC9B,WAAO,CAAC,UAAU,UAAU,SAAS,SAAS;AAAA,EAChD;AAAA;AAAA,EAGA,yBAAyB,MAAM,UAAU,UAAU;AACjD,QAAI,aAAa,UAAU;AACzB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,SAAS,cAAc,UAAU;AAClD,aAAS,YAAY;AAAA;AAAA;AAAA,yBAGA,KAAK,aAAa,QAAQ,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAM3D,SAAK,WAAY,YAAY;AAE7B,SAAK,WAAY,YAAY,SAAS,QAAQ,UAAU,IAAI,CAAC;AAAA,EAC/D;AAAA,EAEA,cAAc;AACZ,UAAM;AAEN,SAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAClC,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,IAAI,OAAO;AACT,UAAM,UAAU,KAAK,aAAa,QAAQ,KAAK,SAAS,QAAQ,MAAM,GAAG;AACzE,UAAM,SAAS,KAAK,aAAa,QAAQ,KAAK;AAC9C,UAAM,UAAU,OACb,MAAM,GAAG,EACT,OAAO,OAAO,EACd,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAGtB,UAAM,QAAQ,KAAK,aAAa,OAAO,KAAK;AAC5C,UAAM,UAAU,KAAK,aAAa,SAAS,KAAK;AAChD,UAAM,SAAS,MACZ,MAAM,GAAG,EACT,OAAO,OAAO,EACd,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAEtB,UAAM,gBAAgB,QACnB;AAAA,MAAI,CAAC,MACJ,OAAO,IAAI,CAACA,WAAU;AACpB,YAAI,OAAO,WAAW,KAAKA,WAAU,UAAU;AAC7C,iBAAO;AAAA,QACT;AACA,YAAIA,WAAU,UAAU;AACtB,iBAAO,KAAK,CAAC;AAAA,QACf;AACA,YAAIA,WAAU,UAAU;AACtB,iBAAO,KAAK,CAAC;AAAA,QACf;AACA,YAAIA,WAAU,WAAW;AACvB,iBAAO,KAAK,CAAC;AAAA,QACf;AACA,eAAO,KAAK,CAAC;AAAA,MACf,CAAC;AAAA,IACH,EACC,KAAK,GAAG;AAEX,UAAM,iBAAiB,GAAG,MAAM,IAAI;AAAA,MAClC,OAAO,SAAS,QAAQ,KAAK;AAAA,MAC7B;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,CAAC;AAIZ,WAAO,4CAA4C,cAAc,IAAI,aAAa,YAAY,OAAO;AAAA,EACvG;AAAA,EAEA,gBAAgB;AACd,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,aAAa,OAAO,YAAY;AACrC,SAAK,aAAa,QAAQ,KAAK,IAAI;AACnC,aAAS,KAAK,YAAY,IAAI;AAAA,EAChC;AACF;","names":["style"]}