diff --git a/src/modules/fonts.ts b/public/modules/fonts.js similarity index 72% rename from src/modules/fonts.ts rename to public/modules/fonts.js index f7746c32..c3af3624 100644 --- a/src/modules/fonts.ts +++ b/public/modules/fonts.js @@ -1,350 +1,272 @@ -import { byId } from "../utils"; +"use strict"; -declare global { - var getUsedFonts: (svg: SVGSVGElement) => FontDefinition[]; - var loadFontsAsDataURI: ( - fonts: FontDefinition[], - ) => Promise; - var addGoogleFont: (family: string) => Promise; - var addLocalFont: (family: string) => void; - var addWebFont: (family: string, src: string) => void; - var fonts: FontDefinition[]; -} - -type FontDefinition = { - family: string; - src?: string; - unicodeRange?: string; - variant?: string; -}; - -window.fonts = [ - { family: "Arial" }, - { family: "Brush Script MT" }, - { family: "Century Gothic" }, - { family: "Comic Sans MS" }, - { family: "Copperplate" }, - { family: "Courier New" }, - { family: "Garamond" }, - { family: "Georgia" }, - { family: "Herculanum" }, - { family: "Impact" }, - { family: "Papyrus" }, - { family: "Party LET" }, - { family: "Times New Roman" }, - { family: "Verdana" }, +const fonts = [ + {family: "Arial"}, + {family: "Brush Script MT"}, + {family: "Century Gothic"}, + {family: "Comic Sans MS"}, + {family: "Copperplate"}, + {family: "Courier New"}, + {family: "Garamond"}, + {family: "Georgia"}, + {family: "Herculanum"}, + {family: "Impact"}, + {family: "Papyrus"}, + {family: "Party LET"}, + {family: "Times New Roman"}, + {family: "Verdana"}, { family: "Almendra SC", src: "url(https://fonts.gstatic.com/s/almendrasc/v13/Iure6Yx284eebowr7hbyTaZOrLQ.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Amarante", src: "url(https://fonts.gstatic.com/s/amarante/v22/xMQXuF1KTa6EvGx9bp-wAXs.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Amatic SC", src: "url(https://fonts.gstatic.com/s/amaticsc/v11/TUZ3zwprpvBS1izr_vOMscGKfrUC.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Arima Madurai", src: "url(https://fonts.gstatic.com/s/arimamadurai/v14/t5tmIRoeKYORG0WNMgnC3seB3T7Prw.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Architects Daughter", src: "url(https://fonts.gstatic.com/s/architectsdaughter/v8/RXTgOOQ9AAtaVOHxx0IUBM3t7GjCYufj5TXV5VnA2p8.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Bitter", src: "url(https://fonts.gstatic.com/s/bitter/v12/zfs6I-5mjWQ3nxqccMoL2A.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Caesar Dressing", src: "url(https://fonts.gstatic.com/s/caesardressing/v6/yYLx0hLa3vawqtwdswbotmK4vrRHdrz7.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Cinzel", src: "url(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Dancing Script", src: "url(https://fonts.gstatic.com/s/dancingscript/v9/KGBfwabt0ZRLA5W1ywjowUHdOuSHeh0r6jGTOGdAKHA.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Eagle Lake", src: "url(https://fonts.gstatic.com/s/eaglelake/v24/ptRMTiqbbuNJDOiKj9wG1On4KCFtpe4.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Faster One", src: "url(https://fonts.gstatic.com/s/fasterone/v17/H4ciBXCHmdfClFb-vWhf-LyYhw.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Forum", src: "url(https://fonts.gstatic.com/s/forum/v16/6aey4Ky-Vb8Ew8IROpI.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Fredericka the Great", src: "url(https://fonts.gstatic.com/s/frederickathegreat/v6/9Bt33CxNwt7aOctW2xjbCstzwVKsIBVV--Sjxbc.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Gloria Hallelujah", src: "url(https://fonts.gstatic.com/s/gloriahallelujah/v9/CA1k7SlXcY5kvI81M_R28cNDay8z-hHR7F16xrcXsJw.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Great Vibes", src: "url(https://fonts.gstatic.com/s/greatvibes/v5/6q1c0ofG6NKsEhAc2eh-3Y4P5ICox8Kq3LLUNMylGO4.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Henny Penny", src: "url(https://fonts.gstatic.com/s/hennypenny/v17/wXKvE3UZookzsxz_kjGSfPQtvXI.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "IM Fell English", src: "url(https://fonts.gstatic.com/s/imfellenglish/v7/xwIisCqGFi8pff-oa9uSVAkYLEKE0CJQa8tfZYc_plY.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Kelly Slab", src: "url(https://fonts.gstatic.com/s/kellyslab/v15/-W_7XJX0Rz3cxUnJC5t6fkQLfg.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Kranky", src: "url(https://fonts.gstatic.com/s/kranky/v24/hESw6XVgJzlPsFn8oR2F.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Lobster Two", src: "url(https://fonts.gstatic.com/s/lobstertwo/v18/BngMUXZGTXPUvIoyV6yN5-fN5qU.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Lugrasimo", src: "url(https://fonts.gstatic.com/s/lugrasimo/v4/qkBXXvoF_s_eT9c7Y7au455KsgbLMA.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Kaushan Script", src: "url(https://fonts.gstatic.com/s/kaushanscript/v6/qx1LSqts-NtiKcLw4N03IEd0sm1ffa_JvZxsF_BEwQk.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Macondo", src: "url(https://fonts.gstatic.com/s/macondo/v21/RrQQboN9-iB1IXmOe2LE0Q.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "MedievalSharp", src: "url(https://fonts.gstatic.com/s/medievalsharp/v9/EvOJzAlL3oU5AQl2mP5KdgptMqhwMg.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Metal Mania", src: "url(https://fonts.gstatic.com/s/metalmania/v22/RWmMoKWb4e8kqMfBUdPFJdXFiaQ.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Metamorphous", src: "url(https://fonts.gstatic.com/s/metamorphous/v7/Wnz8HA03aAXcC39ZEX5y133EOyqs.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Montez", src: "url(https://fonts.gstatic.com/s/montez/v8/aq8el3-0osHIcFK6bXAPkw.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Nova Script", src: "url(https://fonts.gstatic.com/s/novascript/v10/7Au7p_IpkSWSTWaFWkumvlQKGFw.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Orbitron", src: "url(https://fonts.gstatic.com/s/orbitron/v9/HmnHiRzvcnQr8CjBje6GQvesZW2xOQ-xsNqO47m55DA.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Oregano", src: "url(https://fonts.gstatic.com/s/oregano/v13/If2IXTPxciS3H4S2oZDVPg.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Pirata One", src: "url(https://fonts.gstatic.com/s/pirataone/v22/I_urMpiDvgLdLh0fAtofhi-Org.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Sail", src: "url(https://fonts.gstatic.com/s/sail/v16/DPEjYwiBxwYJJBPJAQ.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Satisfy", src: "url(https://fonts.gstatic.com/s/satisfy/v8/2OzALGYfHwQjkPYWELy-cw.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Shadows Into Light", src: "url(https://fonts.gstatic.com/s/shadowsintolight/v7/clhLqOv7MXn459PTh0gXYFK2TSYBz0eNcHnp4YqE4Ts.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" }, { family: "Tapestry", src: "url(https://fonts.gstatic.com/s/macondo/v21/RrQQboN9-iB1IXmOe2LE0Q.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Uncial Antiqua", src: "url(https://fonts.gstatic.com/s/uncialantiqua/v5/N0bM2S5WOex4OUbESzoESK-i-MfWQZQ.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Underdog", src: "url(https://fonts.gstatic.com/s/underdog/v6/CHygV-jCElj7diMroWSlWV8.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "UnifrakturMaguntia", src: "url(https://fonts.gstatic.com/s/unifrakturmaguntia/v16/WWXPlieVYwiGNomYU-ciRLRvEmK7oaVemGZM.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD", + "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }, { family: "Yellowtail", src: "url(https://fonts.gstatic.com/s/yellowtail/v8/GcIHC9QEwVkrA19LJU1qlPk_vArhqVIZ0nv9q090hN8.woff2)", unicodeRange: - "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215", - }, + "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215" + } ]; declareDefaultFonts(); // execute once on load -function declareFont(font: FontDefinition) { - const { family, src, ...rest } = font; +function declareFont(font) { + const {family, src, ...rest} = font; addFontOption(family); if (!src) return; - const fontFace = new FontFace(family, src, { ...rest, display: "block" }); + const fontFace = new FontFace(family, src, {...rest, display: "block"}); document.fonts.add(fontFace); } function declareDefaultFonts() { - fonts.forEach((font) => { - declareFont(font); - }); + fonts.forEach(font => declareFont(font)); } -function addFontOption(family: string) { - const options = document.getElementById("styleSelectFont")!; - const option = document.createElement("option"); - option.value = family; - option.innerText = family; - option.style.fontFamily = family; - options.append(option); -} - -async function fetchGoogleFont(family: string) { - const url = `https://fonts.googleapis.com/css2?family=${family.replace(/ /g, "+")}`; - try { - const resp = await fetch(url); - const text = await resp.text(); - - const fontFaceRules = text.match(/font-face\s*{[^}]+}/g); - const fonts = fontFaceRules!.map((fontFace) => { - const srcURL = fontFace.match(/url\(['"]?(.+?)['"]?\)/)?.[1]; - const src = `url(${srcURL})`; - const unicodeRange = fontFace.match(/unicode-range: (.*?);/)?.[1]; - const variant = fontFace.match(/font-style: (.*?);/)?.[1]; - - const font: FontDefinition = { family, src }; - if (unicodeRange) font.unicodeRange = unicodeRange; - if (variant && variant !== "normal") font.variant = variant; - return font; - }); - - return fonts; - } catch (err) { - ERROR && console.error(err); - return null; - } -} - -function readBlobAsDataURL(blob: Blob) { - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.onloadend = () => resolve(reader.result as string); - reader.onerror = reject; - reader.readAsDataURL(blob); - }); -} - -window.loadFontsAsDataURI = async (fonts: FontDefinition[]) => { - const promises = fonts.map(async (font) => { - const url = font.src?.match(/url\(['"]?(.+?)['"]?\)/)?.[1]; - if (!url) return font; - const resp = await fetch(url); - const blob = await resp.blob(); - const dataURL = await readBlobAsDataURL(blob); - - return { ...font, src: `url('${dataURL}')` }; - }); - - return await Promise.all(promises); -}; - -window.getUsedFonts = (svg: SVGSVGElement) => { +function getUsedFonts(svg) { const usedFontFamilies = new Set(); const labelGroups = svg.querySelectorAll("#labels g"); @@ -360,66 +282,112 @@ window.getUsedFonts = (svg: SVGSVGElement) => { const legendFont = legend?.getAttribute("font-family"); if (legendFont) usedFontFamilies.add(legendFont); - const usedFonts = fonts.filter((font) => usedFontFamilies.has(font.family)); + const usedFonts = fonts.filter(font => usedFontFamilies.has(font.family)); return usedFonts; -}; +} -window.addGoogleFont = async (family: string) => { +function addFontOption(family) { + const options = document.getElementById("styleSelectFont"); + const option = document.createElement("option"); + option.value = family; + option.innerText = family; + option.style.fontFamily = family; + options.add(option); +} + +async function fetchGoogleFont(family) { + const url = `https://fonts.googleapis.com/css2?family=${family.replace(/ /g, "+")}`; + try { + const resp = await fetch(url); + const text = await resp.text(); + + const fontFaceRules = text.match(/font-face\s*{[^}]+}/g); + const fonts = fontFaceRules.map(fontFace => { + const srcURL = fontFace.match(/url\(['"]?(.+?)['"]?\)/)[1]; + const src = `url(${srcURL})`; + const unicodeRange = fontFace.match(/unicode-range: (.*?);/)?.[1]; + const variant = fontFace.match(/font-style: (.*?);/)?.[1]; + + const font = {family, src}; + if (unicodeRange) font.unicodeRange = unicodeRange; + if (variant && variant !== "normal") font.variant = variant; + return font; + }); + + return fonts; + } catch (err) { + ERROR && console.error(err); + return null; + } +} + +function readBlobAsDataURL(blob) { + return new Promise(function (resolve, reject) { + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result); + reader.onerror = reject; + reader.readAsDataURL(blob); + }); +} + +async function loadFontsAsDataURI(fonts) { + const promises = fonts.map(async font => { + const url = font.src.match(/url\(['"]?(.+?)['"]?\)/)[1]; + const resp = await fetch(url); + const blob = await resp.blob(); + const dataURL = await readBlobAsDataURL(blob); + + return {...font, src: `url('${dataURL}')`}; + }); + + return await Promise.all(promises); +} + +async function addGoogleFont(family) { const fontRanges = await fetchGoogleFont(family); - if (!fontRanges) - return tip("Cannot fetch Google font for this value", true, "error", 4000); + if (!fontRanges) return tip("Cannot fetch Google font for this value", true, "error", 4000); tip(`Google font ${family} is loading...`, true, "warn", 4000); - const promises = fontRanges.map((range) => { - const { src, unicodeRange } = range; - const fontFace = new FontFace(family, src!, { - unicodeRange, - display: "block", - }); + const promises = fontRanges.map(range => { + const {src, unicodeRange, variant} = range; + const fontFace = new FontFace(family, src, {unicodeRange, variant, display: "block"}); return fontFace.load(); }); Promise.all(promises) - .then((fontFaces) => { - fontFaces.forEach((fontFace) => { - document.fonts.add(fontFace); - }); + .then(fontFaces => { + fontFaces.forEach(fontFace => document.fonts.add(fontFace)); fonts.push(...fontRanges); tip(`Google font ${family} is added to the list`, true, "success", 4000); addFontOption(family); - const select = byId("styleSelectFont"); - if (select) select.value = family; + document.getElementById("styleSelectFont").value = family; changeFont(); }) - .catch((err) => { + .catch(err => { tip(`Failed to load Google font ${family}`, true, "error", 4000); ERROR && console.error(err); }); -}; +} -window.addLocalFont = (family: string) => { - fonts.push({ family }); +function addLocalFont(family) { + fonts.push({family}); - const fontFace = new FontFace(family, `local(${family})`, { - display: "block", - }); + const fontFace = new FontFace(family, `local(${family})`, {display: "block"}); document.fonts.add(fontFace); tip(`Local font ${family} is added to the fonts list`, true, "success", 4000); addFontOption(family); - const select = byId("styleSelectFont"); - if (select) select.value = family; + document.getElementById("styleSelectFont").value = family; changeFont(); -}; +} -window.addWebFont = (family: string, url: string) => { +function addWebFont(family, url) { const src = `url('${url}')`; - fonts.push({ family, src }); + fonts.push({family, src}); - const fontFace = new FontFace(family, src, { display: "block" }); + const fontFace = new FontFace(family, src, {display: "block"}); document.fonts.add(fontFace); tip(`Font ${family} is added to the list`, true, "success", 4000); addFontOption(family); - const select = byId("styleSelectFont"); - if (select) select.value = family; + document.getElementById("styleSelectFont").value = family; changeFont(); -}; +} diff --git a/src/index.html b/src/index.html index 1d25eb77..77b3f13e 100644 --- a/src/index.html +++ b/src/index.html @@ -8501,6 +8501,7 @@ + diff --git a/src/modules/index.ts b/src/modules/index.ts index 91ba3df7..6835f6c2 100644 --- a/src/modules/index.ts +++ b/src/modules/index.ts @@ -15,4 +15,3 @@ import "./religions-generator"; import "./provinces-generator"; import "./emblem"; import "./ice"; -import "./fonts"; diff --git a/src/types/global.ts b/src/types/global.ts index cf78bfbf..cd443401 100644 --- a/src/types/global.ts +++ b/src/types/global.ts @@ -46,7 +46,6 @@ declare global { var defs: Selection; var coastline: Selection; var lakes: Selection; - var provs: Selection; var getColorScheme: (scheme: string | null) => (t: number) => string; var getColor: (height: number, scheme: (t: number) => string) => string; var svgWidth: number; @@ -79,12 +78,10 @@ declare global { var tip: ( message: string, autoHide?: boolean, - type?: "info" | "warn" | "error" | "success", - timeout?: number, + type?: "info" | "warning" | "error", ) => void; var locked: (settingId: string) => boolean; var unlock: (settingId: string) => void; var $: (selector: any) => any; var scale: number; - var changeFont: () => void; } diff --git a/src/utils/shorthands.ts b/src/utils/shorthands.ts index f5a0b25a..79d0866b 100644 --- a/src/utils/shorthands.ts +++ b/src/utils/shorthands.ts @@ -1,5 +1,4 @@ -export const byId = (id: string): T | undefined => - document.getElementById(id) as T; +export const byId = document.getElementById.bind(document); declare global { interface Window {