cherry pick from previously broken and abandoned branch

colorize buttons and ratio bar

Resolves #218
Using user options (#387)

edit color schemes

logistics for the added options

handles storage, change, initialize

Extensions/combined/popup.html

@@ -77,19 +77,21 @@
         <span class="slider" />
         <span class="switchLabel">Disable vote submission</span>
       </label>
-      <!-- <br />
       <label class="switch">
-        <input type="checkbox" id="color_ratio" />
+        <input type="checkbox" id="colored_bar" />
         <span class="slider" />
-        <span class="switchLabel">Colored Ratio Bar</span>
+        <span class="switchLabel">Colorize ratio bar</span>
       </label>
       <br />
       <label class="switch">
         <input type="checkbox" id="color_thumbs" />
         <span class="slider" />
-        <span class="switchLabel">Colored Thumbs</span>
+        <span class="switchLabel">Colorize thumbs</span>
       </label>
       <br />
+      <!-- TODO: color theme menu select -->
+      
+      <!-- <br />
       <label class="switch">
         <input type="checkbox" id="star_ratio" />
         <span class="slider" />

Extensions/combined/popup.js

@@ -2,6 +2,9 @@
 const config = {
   advanced: false,
   disableVoteSubmission: false,
+  coloredThumbs: false,
+  coloredBar: false,
+  colorTheme: "classic",
   
   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>',
@@ -35,6 +38,21 @@ document
   .addEventListener("click", (ev) => {
     chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
   });
+document
+  .getElementById("colored_thumbs")
+  .addEventListener("click", (ev) => {
+    chrome.storage.sync.set({ coloredThumbs: ev.target.checked });
+  });
+document
+  .getElementById("colored_bar")
+  .addEventListener("click", (ev) => {
+    chrome.storage.sync.set({ coloredBar: ev.target.checked });
+  });
+document
+  .getElementById("color_theme")
+  .addEventListener("click", (ev) => {
+    chrome.storage.sync.set({ colorTheme: ev.target.checked });
+  });
 
 /*   Advanced Toggle   */
 const advancedToggle = document.getElementById("advancedToggle");
@@ -60,6 +78,9 @@ initConfig();
 function initConfig() {
   initializeDisableVoteSubmission();
   initializeVersionNumber();
+  initializeColoredThumbs();
+  initializeColoredBar();
+  initializeColorTheme();
 }
 
 function initializeVersionNumber() {
@@ -86,6 +107,24 @@ function initializeDisableVoteSubmission() {
   });
 }
 
+function initializeColoredThumbs() {
+  chrome.storage.sync.get(["coloredThumbs"], (res) => {
+    handleColoredThumbsChangeEvent(res.coloredThumbs);
+  });
+}
+
+function initializeColoredBar() {
+  chrome.storage.sync.get(["coloredBar"], (res) => {
+    handleColoredBarChangeEvent(res.coloredBar);
+  });
+}
+
+function initializeColorTheme() {
+  chrome.storage.sync.get(["colorTheme"], (res) => {
+    handleColorThemeChangeEvent(res.colorTheme);
+  });
+}
+
 chrome.storage.onChanged.addListener(storageChangeHandler);
 
 function storageChangeHandler(changes, area) {
@@ -94,6 +133,21 @@ function storageChangeHandler(changes, area) {
       changes.disableVoteSubmission.newValue
     );
   }
+  if (changes.coloredThumbs !== undefined) {
+    handleColoredThumbsChangeEvent(
+      changes.coloredThumbs.newValue
+    );
+  }
+  if (changes.coloredBar !== undefined) {
+    handleColoredBarChangeEvent(
+      changes.coloredBar.newValue
+    );
+  }
+  if (changes.colorTheme !== undefined) {
+    handleColorThemeChangeEvent(
+      changes.colorTheme.newValue
+    );
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -101,6 +155,21 @@ function handleDisableVoteSubmissionChangeEvent(value) {
   document.getElementById("disable_vote_submission").checked = value;
 }
 
+function handleColoredThumbsChangeEvent(value) {
+  config.coloredThumbs = value;
+  document.getElementById("colored_thumbs").checked = value;
+}
+
+function handleColoredBarChangeEvent(value) {
+  config.coloredBar = value;
+  document.getElementById("colored_bar").checked = value;
+}
+
+function handleColorThemeChangeEvent(value) {
+  config.colorTheme = value;
+  // TODO: check selected menu item
+}
+
 (async function getStatus() {
   let status = document.getElementById("status");
   let serverStatus = document.getElementById("server-status");

Extensions/combined/ryd.background.js

@@ -5,9 +5,10 @@ let api;
 
 /** stores extension's global config */
 let extConfig = {
-  disableVoteSubmission: false
-  // coloredThumbs: false,
-  // coloredBar: false,
+  disableVoteSubmission: false,
+  coloredThumbs: false,
+  coloredBar: false,
+  colorTheme: "classic", // classic, accessible, neon
 }
 
 if (isChrome()) api = chrome;
@@ -235,6 +236,15 @@ function storageChangeHandler(changes, area) {
   if (changes.disableVoteSubmission !== undefined) {
     handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue);
   }
+  if (changes.coloredThumbs !== undefined) {
+    handleColoredThumbsChangeEvent(changes.coloredThumbs.newValue);
+  }
+  if (changes.coloredBar !== undefined) {
+    handleColoredBarChangeEvent(changes.coloredBar.newValue);
+  }
+  if (changes.colorTheme !== undefined) {
+    handleColorThemeChangeEvent(changes.colorTheme.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -252,10 +262,25 @@ function changeIcon(iconName) {
   else console.log('changing icon is not supported');
 }
 
+function handleColoredThumbsChangeEvent(value) {
+  extConfig.coloredThumbs = value;
+}
+
+function handleColoredBarChangeEvent(value) {
+  extConfig.coloredBar = value;
+}
+
+function handleColorThemeChangeEvent(value) {
+  extConfig.colorTheme = value;
+}
+
 api.storage.onChanged.addListener(storageChangeHandler);
 
 function initExtConfig() {
   initializeDisableVoteSubmission();
+  initializeColoredThumbs();
+  initializeColoredBar();
+  initializeColorTheme();
 }
 
 function initializeDisableVoteSubmission() {
@@ -270,6 +295,39 @@ function initializeDisableVoteSubmission() {
   });
 }
 
+function initializeColoredThumbs() {
+  api.storage.sync.get(['coloredThumbs'], (res) => {
+    if (res.coloredThumbs === undefined) {
+      api.storage.sync.set({coloredThumbs: false});
+    }
+    else {
+      extConfig.coloredThumbs = res.coloredThumbs;
+    }
+  });
+}
+
+function initializeColoredBar() {
+  api.storage.sync.get(['coloredBar'], (res) => {
+    if (res.coloredBar === undefined) {
+      api.storage.sync.set({coloredBar: false});
+    }
+    else {
+      extConfig.coloredBar = res.coloredBar;
+    }
+  });
+}
+
+function initializeColorTheme() {
+  api.storage.sync.get(['colorTheme'], (res) => {
+    if (res.colorTheme === undefined) {
+      api.storage.sync.set({colorTheme: false});
+    }
+    else {
+      extConfig.colorTheme = res.colorTheme;
+    }
+  });
+}
+
 function isChrome() {
   return typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined";
 }

Extensions/combined/src/bar.js

@@ -1,5 +1,5 @@
 import { getButtons } from "./buttons";
-import { likesDisabledState } from "./state";
+import { likesDisabledState, extConfig } from "./state";
 import { cLog } from "./utils";
 
 function createRateBar(likes, dislikes) {
@@ -46,6 +46,11 @@ function createRateBar(likes, dislikes) {
         "#ryd-dislike-tooltip > #tooltip"
       ).innerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`;
     }
+  
+  if (extConfig.coloredBar) {
+    // TODO: colorize bar
+  }
+  
   } else {
     cLog("removing bar");
     let ratebar = document.getElementById("ryd-bar-container");

Extensions/combined/src/events.js

@@ -110,12 +110,39 @@ function storageChangeHandler(changes, area) {
       changes.disableVoteSubmission.newValue
     );
   }
+  if (changes.coloredThumbs !== undefined) {
+    handleColoredThumbsChangeEvent(
+      changes.coloredThumbs.newValue
+    );
+  }
+  if (changes.coloredBar !== undefined) {
+    handleColoredBarChangeEvent(
+      changes.coloredBar.newValue
+    );
+  }
+  if (changes.colorTheme !== undefined) {
+    handleColorThemeChangeEvent(
+      changes.colorTheme.newValue
+    );
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
   extConfig.disableVoteSubmission = value;
 }
 
+function handleColoredThumbsChangeEvent(value) {
+  extConfig.coloredThumbs = value;
+}
+
+function handleColoredBarChangeEvent(value) {
+  extConfig.coloredBar = value;
+}
+
+function handleColorThemeChangeEvent(value) {
+  extConfig.colorTheme = value;
+}
+
 export {
   sendVote,
   sendVideoIds,

Extensions/combined/src/state.js

@@ -13,6 +13,9 @@ const DISLIKES_DISABLED_TEXT = "DISLIKES DISABLED";
 
 let extConfig = {
   disableVoteSubmission: false,
+  coloredThumbs: false,
+  coloredBar: false,
+  colorTheme: "classic",
 };
 
 let storedData = {
@@ -98,6 +101,9 @@ function processResponse(response, storedData) {
   storedData.dislikes = parseInt(response.dislikes);
   storedData.likes = getLikeCountFromButton() || parseInt(response.likes);
   createRateBar(storedData.likes, storedData.dislikes);
+  if (extConfig.coloredThumbs === true) {
+    // TODO: colorize thumbs
+  }
 }
 
 async function setState(storedData) {
@@ -142,6 +148,9 @@ function setInitialState() {
 
 function initExtConfig() {
   initializeDisableVoteSubmission();
+  initializeColoredThumbs();
+  initializeColoredBar();
+  initializeColorTheme();
 }
 
 function initializeDisableVoteSubmission() {

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);
@@ -67,4 +71,32 @@ function cLog(message, writer) {
   }
 }
 
+function getColorFromTheme(voteIsLike) {
+  let colorString;
+  switch(extConfig.colorTheme) {
+    case 'accessible':
+      if (voteIsLike === true) {
+        colorString = 'dodgerblue';
+      } else {
+        colorString = 'gold';
+      }
+      break;
+    case 'neon':
+      if (voteIsLike === true) {
+        colorString = 'aqua';
+      } else {
+        colorString = 'magenta';
+      }
+      break;
+    case 'classic':
+    default:
+      if (voteIsLike === true) {
+        colorString = 'lime';
+      } else {
+        colorString = 'red';
+      }
+  }
+  return colorString;
+}
+
 export { numberFormat, getBrowser, getVideoId, isVideoLoaded, cLog }