implement custom font family text input (#141)

Co-authored-by: April Sylph <[email protected]>

src/browser_action/popup.css

@@ -54,7 +54,7 @@ main > div + div {
   border-top: 1px dotted rgb(var(--passive-grey));
 }
 
-h4 {
+h4, h5 {
   margin: 0;
 }
 
@@ -66,6 +66,10 @@ label {
   min-width: max-content;
 }
 
+label ~ label {
+  margin-top: 1ch;
+}
+
 button {
   padding: 0;
   border: none;
@@ -116,3 +120,7 @@ a {
 :visited {
   color: rgb(var(--accent));
 }
+
+select:not([data-value="custom"]) ~ :is([for="font-family-custom"], [id="font-family-custom"]) {
+  display: none;
+}

src/browser_action/popup.html

@@ -32,7 +32,10 @@ <h4>Change Palette</h4>
             <option value="cursive">Cursive</option>
             <option value="fantasy">Fantasy</option>
           </optgroup>
+          <option value="custom">Custom</option>
         </select>
+        <label for="font-family-custom"><h5>Custom <code>font-family</code> String</h4></label>
+        <input id="font-family-custom" type="text" value="">
       </div>
       <div>
         <label for="font-size"><h4>Change Base Font Size</h4></label>

src/browser_action/render_font_family.js

@@ -1,16 +1,28 @@
+const fontFamilySelect = document.getElementById('font-family');
+const customFontFamilyInput = document.getElementById('font-family-custom');
+
 const writeFontFamily = async function ({ target: { value } }) {
+  fontFamilySelect.dataset.value = value;
   browser.storage.local.set({ fontFamily: value });
 };
 
+const writeCustomFontFamily = async function ({ target: { value } }) {
+  browser.storage.local.set({ customFontFamily: value });
+};
+
 const renderFontFamily = async function () {
   const { fontFamily = '' } = await browser.storage.local.get('fontFamily');
-  const fontFamilySelect = document.getElementById('font-family');
+  const { customFontFamily = '' } = await browser.storage.local.get('customFontFamily');
 
   fontFamilySelect.addEventListener('input', writeFontFamily);
+  customFontFamilyInput.addEventListener('input', writeCustomFontFamily);
 
   [...fontFamilySelect.options].forEach(option => {
     option.selected = option.value === fontFamily;
   });
+  fontFamilySelect.dataset.value = fontFamily;
+
+  customFontFamilyInput.value = customFontFamily;
 };
 
 renderFontFamily();

src/main.js

@@ -40,7 +40,12 @@ const applyCurrentPalette = async function () {
 
 const applyFontFamily = async function () {
   const { fontFamily = '' } = await browser.storage.local.get('fontFamily');
-  document.documentElement.style.setProperty('--font-family', fontFamily);
+  const { customFontFamily = '' } = await browser.storage.local.get('customFontFamily');
+
+  document.documentElement.style.setProperty(
+    '--font-family',
+    fontFamily === 'custom' ? customFontFamily : fontFamily
+  );
 };
 
 const applyFontSize = async function () {
@@ -53,13 +58,13 @@ const onStorageChanged = async function (changes, areaName) {
     return;
   }
 
-  const { currentPalette, fontFamily, fontSize } = changes;
+  const { currentPalette, fontFamily, customFontFamily, fontSize } = changes;
 
   if (currentPalette || Object.keys(changes).some(key => key.startsWith('palette:'))) {
     applyCurrentPalette();
   }
 
-  if (fontFamily) applyFontFamily();
+  if (fontFamily || customFontFamily) applyFontFamily();
   if (fontSize) applyFontSize();
 };