fonts rework - add methods dialog

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>
@@ -1995,7 +1994,7 @@
 
           <div data-tip="Burg mean annual temperature and real-world city for comparison">
             <div class="label">Temperature:</div>
-            <span id="burgTemperature"></span>, like in 
+            <span id="burgTemperature"></span>, like in
             <span id="burgTemperatureLikeIn"></span>
           </div>
 
@@ -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>
@@ -3442,7 +3457,7 @@
       <div id="options3dBottom" style="margin-top: .2em">
         <button id="options3dUpdate" data-tip="Update the scene" class="icon-cw"></button>
         <button data-tip="Configure world and map size and climate settings" onclick="editWorld()" class="icon-globe"></button>
-		<button id="options3dSave" data-tip="Save screenshot of the 3d scene" class="icon-button-screenshot"></button>
+        <button id="options3dSave" data-tip="Save screenshot of the 3d scene" class="icon-button-screenshot"></button>
         <button id="options3dOBJSave" data-tip="Save OBJ file of the 3d scene" class="icon-download"></button>
       </div>
     </div>

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();
+}

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") {
+  addFontNameInput.value = "";
-    styleInputFont.style.display = "inline-block";
+  addFontURLInput.value = "";
-    styleInputFont.focus();
+
-    styleSelectFont.style.display = "none";
+  $("#addFontDialog").dialog({
-  } else {
+    title: "Add custom font",
-    styleInputFont.style.display = "none";
+    width: "26em",
-    styleSelectFont.style.display = "inline-block";
+    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 () {
+addFontMethod.addEventListener("change", function () {
-  const family = this.value;
+  addFontURLInput.style.display = this.value === "fontURL" ? "inline" : "none";
-  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);
-    });
 });
 
 styleFontSize.addEventListener("change", function () {