Add custom number formats

Fix Issues #201 #364 #407
Using plugin options (Issue #387)

Extensions/combined/popup.html

@@ -77,6 +77,22 @@
         <span class="slider" />
         <span class="switchLabel">Disable vote submission</span>
       </label>
+      <br />
+      <label class="switch">
+        <input type="checkbox" id="number_round_down" />
+        <span class="slider" />
+        <span class="switchLabel">Show rounded down numbers</span>
+      </label>
+      <br />
+      <div class="custom-select">
+        <label for="number_format">Number format:</label>
+        <select name="number_format" id="number_format">
+          <option value="compactShort" id="number_format_compactShort"></option>
+          <option value="compactLong" id="number_format_compactLong"></option>
+          <option value="standard" id="number_format_standard"></option>
+        </select>
+      </div>
+
       <!-- <br />
       <label class="switch">
         <input type="checkbox" id="color_ratio" />

Extensions/combined/popup.js

@@ -2,6 +2,8 @@
 const config = {
   advanced: false,
   disableVoteSubmission: false,
+  numberDisplayFormat: 'compactShort',
+  numberDisplayRoundDown: true,
   
   showAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>',
   hideAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm4.3 14.3c-.39.39-1.02.39-1.41 0L12 13.41 9.11 16.3c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L10.59 12 7.7 9.11c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L12 10.59l2.89-2.89c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"/></svg>',
@@ -36,6 +38,15 @@ document
     chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
   });
 
+document.getElementById("number_round_down").addEventListener("click", (ev) => {
+  chrome.storage.sync.set({ numberDisplayRoundDown: ev.target.checked });
+  updateNumberDisplayFormatContent(ev.target.checked);
+});
+
+document.getElementById("number_format").addEventListener("change", (ev) => {
+  chrome.storage.sync.set({ numberDisplayFormat: ev.target.value });
+});
+
 /*   Advanced Toggle   */
 const advancedToggle = document.getElementById("advancedToggle");
 advancedToggle.addEventListener("click", () => {
@@ -60,6 +71,8 @@ initConfig();
 function initConfig() {
   initializeDisableVoteSubmission();
   initializeVersionNumber();
+  initializeNumberDisplayFormat();
+  initializeNumberDisplayRoundDown();
 }
 
 function initializeVersionNumber() {
@@ -86,6 +99,34 @@ function initializeDisableVoteSubmission() {
   });
 }
 
+function initializeNumberDisplayRoundDown() {
+  chrome.storage.sync.get(["numberDisplayRoundDown"], (res) => {
+    handleNumberDisplayRoundDownChangeEvent(res.numberDisplayRoundDown);
+  });
+}
+
+function initializeNumberDisplayFormat() {
+  chrome.storage.sync.get(["numberDisplayFormat"], (res) => {
+    handleNumberDisplayFormatChangeEvent(res.numberDisplayFormat);
+  });
+  updateNumberDisplayFormatContent();
+}
+
+function updateNumberDisplayFormatContent(roundDown) {
+  let testValue;
+  if (roundDown) {
+    testValue = 123000;
+  } else {
+    testValue = 123456;
+  }
+  document.getElementById('number_format_compactShort').innerHTML =
+    getNumberFormatter('compactShort').format(testValue);
+  document.getElementById('number_format_compactLong').innerHTML =
+    getNumberFormatter('compactLong').format(testValue);
+  document.getElementById('number_format_standard').innerHTML =
+    getNumberFormatter('standard').format(testValue);
+}
+
 chrome.storage.onChanged.addListener(storageChangeHandler);
 
 function storageChangeHandler(changes, area) {
@@ -94,6 +135,14 @@ function storageChangeHandler(changes, area) {
       changes.disableVoteSubmission.newValue
     );
   }
+  if (changes.numberDisplayRoundDown !== undefined) {
+    handleNumberDisplayRoundDownChangeEvent(
+      changes.numberDisplayRoundDown.newValue
+    );
+  }
+  if (changes.numberDisplayFormat !== undefined) {
+    handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -101,6 +150,46 @@ function handleDisableVoteSubmissionChangeEvent(value) {
   document.getElementById("disable_vote_submission").checked = value;
 }
 
+function handleNumberDisplayRoundDownChangeEvent(value) {
+  config.numberDisplayRoundDown = value;
+  document.getElementById("number_round_down").checked = value;
+}
+
+function handleNumberDisplayFormatChangeEvent(value) {
+  config.numberDisplayFormat = value;
+  document
+    .getElementById("number_format")
+    .querySelector('option[value="' + value + '"]').selected = true;
+}
+
+function getNumberFormatter(optionSelect) {
+  let formatterNotation;
+  let formatterCompactDisplay;
+  
+  switch (optionSelect) {
+    case 'compactLong':
+      formatterNotation = 'compact';
+      formatterCompactDisplay = 'long';
+      break;
+    case 'standard': 
+      formatterNotation = 'standard';
+      formatterCompactDisplay = 'short';
+      break;
+    case 'compactShort':
+    default:
+      formatterNotation = 'compact';
+      formatterCompactDisplay = 'short';
+  }
+  const formatter = Intl.NumberFormat(
+    document.documentElement.lang || userLocales || navigator.language,
+    {
+      notation: formatterNotation,
+      compactDisplay: formatterCompactDisplay,
+    }
+  );
+  return formatter;
+}
+
 (async function getStatus() {
   let status = document.getElementById("status");
   let serverStatus = document.getElementById("server-status");

Extensions/combined/ryd.background.js

@@ -5,10 +5,12 @@ let api;
 
 /** stores extension's global config */
 let extConfig = {
-  disableVoteSubmission: false
+  disableVoteSubmission: false,
   // coloredThumbs: false,
   // coloredBar: false,
-}
+  numberDisplayFormat: 'compactShort', // compactShort, compactLong, standard
+  numberDisplayRoundDown: true, // locale 'de' shows exact numbers by default
+};
 
 if (isChrome()) api = chrome;
 else if (isFirefox()) api = browser;
@@ -235,6 +237,14 @@ function storageChangeHandler(changes, area) {
   if (changes.disableVoteSubmission !== undefined) {
     handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue);
   }
+  if (changes.numberDisplayRoundDown !== undefined) {
+    handleNumberDisplayRoundDownChangeEvent(
+      changes.numberDisplayRoundDown.newValue
+      );
+  }
+  if (changes.numberDisplayFormat !== undefined) {
+    handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -246,6 +256,14 @@ function handleDisableVoteSubmissionChangeEvent(value) {
   }
 }
 
+function handleNumberDisplayFormatChangeEvent(value) {
+  extConfig.numberDisplayFormat = value;
+}
+
+function handleNumberDisplayRoundDownChangeEvent(value) {
+  extConfig.numberDisplayRoundDown = value;
+}
+
 function changeIcon(iconName) {
   if (api.action !== undefined) api.action.setIcon({path: "/icons/" + iconName});
   else if (api.browserAction !== undefined) api.browserAction.setIcon({path: "/icons/" + iconName});
@@ -256,6 +274,8 @@ api.storage.onChanged.addListener(storageChangeHandler);
 
 function initExtConfig() {
   initializeDisableVoteSubmission();
+  initializeNumberDisplayFormat();
+  initializeNumberDisplayRoundDown();
 }
 
 function initializeDisableVoteSubmission() {
@@ -270,6 +290,26 @@ function initializeDisableVoteSubmission() {
   });
 }
 
+function initializeNumberDisplayRoundDown() {
+  api.storage.sync.get(['numberDisplayRoundDown'], (res) => {
+    if (res.numberDisplayRoundDown === undefined) {
+      api.storage.sync.set({numberDisplayRoundDown: true});
+    } else {
+      extConfig.numberDisplayRoundDown = res.numberDisplayRoundDown;
+    }
+  });
+}
+
+function initializeNumberDisplayFormat() {
+  api.storage.sync.get(['numberDisplayFormat'], (res) => {
+    if (res.numberDisplayFormat === undefined) {
+      api.storage.sync.set({ numberDisplayFormat: 'compactShort' });
+    } else {
+      extConfig.numberDisplayFormat = res.numberDisplayFormat;
+    }
+  });
+}
+
 function isChrome() {
   return typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined";
 }

Extensions/combined/src/events.js

@@ -110,12 +110,28 @@ function storageChangeHandler(changes, area) {
       changes.disableVoteSubmission.newValue
     );
   }
+  if (changes.numberDisplayRoundDown !== undefined) {
+    handleNumberDisplayRoundDownChangeEvent(
+      changes.numberDisplayRoundDown.newValue
+    );
+  }
+  if (changes.numberDisplayFormat !== undefined) {
+    handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
   extConfig.disableVoteSubmission = value;
 }
 
+function handleNumberDisplayFormatChangeEvent(value) {
+  extConfig.numberDisplayFormat = value;
+}
+
+function handleNumberDisplayRoundDownChangeEvent(value) {
+  extConfig.numberDisplayRoundDown = value;
+}
+
 export {
   sendVote,
   sendVideoIds,

Extensions/combined/src/state.js

@@ -13,6 +13,8 @@ const DISLIKES_DISABLED_TEXT = "DISLIKES DISABLED";
 
 let extConfig = {
   disableVoteSubmission: false,
+  numberDisplayFormat: 'compactShort',
+  numberDisplayRoundDown: true,
 };
 
 let storedData = {
@@ -142,6 +144,8 @@ function setInitialState() {
 
 function initExtConfig() {
   initializeDisableVoteSubmission();
+  initializeNumberDisplayFormat();
+  initializeNumberDisplayRoundDown();
 }
 
 function initializeDisableVoteSubmission() {
@@ -154,6 +158,27 @@ function initializeDisableVoteSubmission() {
   });
 }
 
+function initializeNumberDisplayRoundDown() {
+  getBrowser().storage.sync.get(["numberDisplayRoundDown"], (res) => {
+    if (res.numberDisplayRoundDown === undefined) {
+      getBrowser().storage.sync.set({ numberDisplayRoundDown: true });
+    } else {
+      extConfig.numberDisplayRoundDown = res.numberDisplayRoundDown;
+    }
+  });
+}
+
+function initializeNumberDisplayFormat() {
+  getBrowser().storage.sync.get(['numberDisplayFormat'], (res) => {
+    if (res.numberDisplayFormat === undefined) {
+      getBrowser().storage.sync.set({ numberDisplayFormat: 'compactShort' });
+    }
+    else {
+      extConfig.numberDisplayFormat = res.numberDisplayFormat;
+    }
+  });
+}
+
 export {
   isMobile,
   isVideoDisliked,

Extensions/combined/src/utils.js

@@ -1,3 +1,7 @@
+import {
+  extConfig,
+} from "./state";
+
 function roundDown(num) {
   if (num < 1000) return num;
   const int = Math.floor(Math.log10(num) - 2);
@@ -15,14 +19,43 @@ function numberFormat(numberState) {
         ?.getAttribute("href")
     )?.searchParams?.get("locale");
   } catch {}
+  
+  let numberDisplay;
+  if (extConfig.numberDisplayRoundDown === false) {
+    numberDisplay = numberState;
+  } else {
+    numberDisplay = roundDown(numberState);
+  }
+  return getNumberFormatter(extConfig.numberDisplayFormat).format(numberDisplay);
+}
+
+function getNumberFormatter(optionSelect) {
+  let formatterNotation;
+  let formatterCompactDisplay;
+  
+  switch(optionSelect) {
+    case 'compactLong':
+      formatterNotation = 'compact';
+      formatterCompactDisplay = 'long';
+      break;
+    case 'standard': 
+      formatterNotation = 'standard';
+      formatterCompactDisplay = 'short';
+      break;
+    case 'compactShort':
+    default:
+      formatterNotation = 'compact';
+      formatterCompactDisplay = 'short';
+  }
+  
   const formatter = Intl.NumberFormat(
     document.documentElement.lang || userLocales || navigator.language,
     {
-      notation: "compact",
+      notation: formatterNotation,
+      compactDisplay: formatterCompactDisplay,
     }
   );
-
-  return formatter.format(roundDown(numberState));
+  return formatter;
 }
 
 function getBrowser() {