From e4f278204e6f2121c3690177fd9864cca496c854 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Wed, 8 Sep 2021 09:48:55 +0300 Subject: [PATCH] fonts rework - add methods dialog --- index.html | 21 +++++++++-- modules/fonts.js | 49 ++++++++++++++++++++++++ modules/ui/style.js | 90 ++++++++++++++++++++------------------------- 3 files changed, 106 insertions(+), 54 deletions(-) diff --git a/index.html b/index.html index e72655d0..856e228c 100644 --- a/index.html +++ b/index.html @@ -666,7 +666,6 @@ Font - @@ -1995,7 +1994,7 @@
Temperature:
- , like in + , like in
@@ -3346,6 +3345,22 @@ + + diff --git a/modules/fonts.js b/modules/fonts.js index 82713ce6..d52fac61 100644 --- a/modules/fonts.js +++ b/modules/fonts.js @@ -218,3 +218,52 @@ async function loadFontsAsDataURI(fonts) { 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); + tip(`Google font ${family} is loading...`, true, "warn", 4000); + + 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)); + fonts.push(...fontRanges); + tip(`Google font ${family} is added to the list`, true, "success", 4000); + addFontOption(family); + document.getElementById("styleSelectFont").value = family; + changeFont(); + }) + .catch(err => { + tip(`Failed to load Google font ${family}`, true, "error", 4000); + console.error(err); + }); +} + +function addLocalFont(family) { + fonts.push({family}); + + 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); + document.getElementById("styleSelectFont").value = family; + changeFont(); +} + +function addWebFont(family, url) { + const src = `url('${url}')`; + fonts.push({family, src}); + + 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); + document.getElementById("styleSelectFont").value = family; + changeFont(); +} diff --git a/modules/ui/style.js b/modules/ui/style.js index 2420f531..84723bdb 100644 --- a/modules/ui/style.js +++ b/modules/ui/style.js @@ -167,7 +167,8 @@ function selectStyleElement() { styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0; styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px"; - updateFontSelect(el.attr("font-family")); + styleFont.style.display = "block"; + styleSelectFont.value = el.attr("font-family"); styleFontSize.value = el.attr("data-size"); } @@ -176,7 +177,8 @@ function selectStyleElement() { styleSize.style.display = "block"; styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#111111"; - updateFontSelect(el.attr("font-family")); + styleFont.style.display = "block"; + styleSelectFont.value = el.attr("font-family"); styleFontSize.value = el.attr("data-size"); } @@ -218,7 +220,8 @@ function selectStyleElement() { styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111"; styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5; - updateFontSelect(el.attr("font-family")); + styleFont.style.display = "block"; + styleSelectFont.value = el.attr("font-family"); styleFontSize.value = el.attr("data-size"); } @@ -277,13 +280,6 @@ function selectStyleElement() { const auto = (styleCoastlineAuto.checked = coastline.select("#sea_island").attr("auto-filter")); if (auto) styleFilter.style.display = "none"; } - - function updateFontSelect(family) { - styleInputFont.style.display = "none"; - styleInputFont.value = ""; - styleFont.style.display = "block"; - styleSelectFont.value = family; - } } // Handle style inputs change @@ -537,49 +533,41 @@ styleShadowInput.addEventListener("input", function () { }); styleFontAdd.addEventListener("click", function () { - if (styleInputFont.style.display === "none") { - styleInputFont.style.display = "inline-block"; - styleInputFont.focus(); - styleSelectFont.style.display = "none"; - } else { - styleInputFont.style.display = "none"; - styleSelectFont.style.display = "inline-block"; - } + addFontNameInput.value = ""; + addFontURLInput.value = ""; + + $("#addFontDialog").dialog({ + title: "Add custom font", + width: "26em", + position: {my: "center", at: "center", of: "svg"}, + buttons: { + Add: function () { + const family = addFontNameInput.value; + if (!family) return tip("Please provide a font name", false, "error"); + + const existingFont = fonts.find(font => font.family === family); + if (existingFont) return tip("The font is already added", false, "error"); + + const method = addFontMethod.value; + const url = addFontURLInput.value; + + if (method === "fontURL") addWebFont(family, url); + else if (method === "googleFont") addGoogleFont(family); + else if (method === "localFont") addLocalFont(family); + + addFontNameInput.value = ""; + addFontURLInput.value = ""; + $(this).dialog("close"); + }, + Cancel: function () { + $(this).dialog("close"); + } + } + }); }); -styleInputFont.addEventListener("change", async function () { - const family = this.value; - if (!family) return tip("Please provide a Google font name", false, "error"); - const existingFont = fonts.find(font => font.family === family); - if (existingFont) return tip("The font already exists in the list", false, "error"); - - document.getElementById("styleFontAdd").click(); - document.getElementById("styleInputFont").value = ""; - - const fontRanges = await fetchGoogleFont(family); - 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, 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)); - fonts.push(...fontRanges); - tip(`Google font ${family} is added`, true, "success", 4000); - addFontOption(family); - document.getElementById("styleSelectFont").value = family; - changeFont(); - }) - .catch(err => { - tip(`Failed to load Google font ${family}`, true, "error", 4000); - console.error(err); - }); +addFontMethod.addEventListener("change", function () { + addFontURLInput.style.display = this.value === "fontURL" ? "inline" : "none"; }); styleFontSize.addEventListener("change", function () {