mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-23 12:31:24 +01:00
fonts rework - add methods dialog
This commit is contained in:
Azgaar
parent
2492cad3e0
commit
e4f278204e
3 changed files with 106 additions and 54 deletions
17
index.html
17
index.html
|
|
@ -666,7 +666,6 @@
|
|||
<td>Font</td>
|
||||
<td>
|
||||
<select id="styleSelectFont"></select>
|
||||
<input id="styleInputFont" data-tip="Type Google font name and press Enter" type="text">
|
||||
<button id="styleFontAdd" data-tip="Add a font" class="icon-plus styleButton"></button>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -3346,6 +3345,22 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="addFontDialog" style="display: none" class="dialog">
|
||||
<span>There are 3 ways to add a custom font:</span>
|
||||
<p><strong>Font URL</strong>. Provide font name and link to the font file. Preferable format is <code>woff2</code></p>
|
||||
<p><strong>Google font</strong>. Open <a href="https://fonts.google.com/" target="_blank">Google Fonts</a>, find a font you like and enter its name to the field below</p>
|
||||
<p><strong>Local font</strong>. If you have a font <a href="https://www.wikihow.com/Install-Fonts-on-Your-PC" target="_blank">installed on your computer</a>, just provide the font name. Make sure the browser is reloaded after the installation. Please note it won't work on machines not having the font installed</p>
|
||||
<div style="margin-top: .3em" data-tip="Select font adding method">
|
||||
<select id="addFontMethod">
|
||||
<option value="fontURL" selected>Font URL</option>
|
||||
<option value="googleFont">Google font</option>
|
||||
<option value="localFont">Local font</option>
|
||||
</select>
|
||||
<input id="addFontNameInput" placeholder="font family" style="width:15em">
|
||||
<input id="addFontURLInput" placeholder="font file URL" style="width:22.6em; margin-top:.1em">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cellInfo" style="display: none" class="dialog stable">
|
||||
<p><b>Cell:</b> <span id="infoCell"></span> <b>X:</b> <span id="infoX"></span> <b>Y:</b> <span id="infoY"></span></p>
|
||||
<p><b>Latitude:</b> <span id="infoLat"></span></p>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue