Merge pull request #53 from asieduernest12/master

added feature to control the density of saccades which is also persisted
ansh · May 25, 2022 · 4399e21 · 4399e21
2 parents fdb1d44 + 2fd2980
commit 4399e21
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 33 deletions.
diff --git a/src/background.js b/src/background.js
@@ -2,14 +2,16 @@
 
 const color = '#3aa757';
 
-chrome.runtime.onInstalled.addListener(() => {
-  chrome.storage.sync.set({ color });
+const DEFAULT_SACCADE_INTERVAL = 0;
+
+chrome.runtime.onInstalled.addListener(async () => {
+  chrome.storage.sync.set({ color, saccades: DEFAULT_SACCADE_INTERVAL });
   console.log('Default background color set to %cgreen', `color: ${color}`);
 });
 
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   if (changeInfo.status === 'complete' && tab.active) {
-    chrome.storage.sync.get('toggleOnDefault', ({ toggleOnDefault }) => {
+    chrome.storage.sync.get(['toggleOnDefault', 'saccadesInterval'], ({ toggleOnDefault, saccadesInterval }) => {
       if (!toggleOnDefault) {
         return;
       }
@@ -18,6 +20,19 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
         target: { tabId, allFrames: true },
         files: ['src/convert.js'],
       });
+
+      // set default saccades on install
+      chrome.scripting.executeScript(
+        {
+          target: { tabId, allFrames: true },
+          function: (_saccadesInterval) => { document.body.setAttribute('saccades-interval', _saccadesInterval); return _saccadesInterval; }, // set saccades on body element and return it to be saved in storage.sync
+          args: [saccadesInterval ?? DEFAULT_SACCADE_INTERVAL],
+        },
+        ([activeFrame]) => {
+        // save the current/Default_saccade_INTERVALs in storage.sync
+          chrome.storage.sync.set({ saccades: activeFrame.result });
+        },
+      );
     });
   }
 });

diff --git a/src/convert.js b/src/convert.js
@@ -24,9 +24,23 @@ function main() {
     return;
   }
 
-  // setting global styles
+  /*
+   *setting global styles with options for saccades interval between 0 and 4 words to the
+   *next saccade
+  */
+
   const style = document.createElement('style');
-  style.textContent = '.br-bold br-bold { font-weight: bold !important; display: inline; line-height: var(--br-line-height,initial); }';
+  style.textContent = `
+    .br-bold :is(
+      [saccades-interval="0"] br-bold, 
+      [saccades-interval="1"] br-bold:nth-of-type(2n+1),
+      [saccades-interval="2"] br-bold:nth-of-type(3n+1),
+      [saccades-interval="3"] br-bold:nth-of-type(4n+1),
+      [saccades-interval="4"] br-bold:nth-of-type(5n+1)
+      ) { 
+      font-weight: bold !important; display: inline; line-height: var(--br-line-height,initial); 
+    }
+    `;
   document.head.appendChild(style);
 
   const tags = ['p', 'font', 'span', 'li'];

diff --git a/src/popup.html b/src/popup.html
@@ -1,26 +1,32 @@
 <!DOCTYPE html>
 <html>
+	<head>
+		<link rel="stylesheet" href="style.css" />
+	</head>
 
-<head>
-  <link rel="stylesheet" href="style.css">
-</head>
+	<body>
+		<button id="toggleBtn" class="w-100">Toggle Reading Mode</button>
 
-<button id="toggleBtn" class="w-100">Toggle Reading Mode</button>
-
-<div id="lineHeightEdit" class="w-100">
-  <label style="display:block" id="lineHeightLabel">Line Height</label>
-  <div id="buttonGroup" class="w-100 flex justify-between">
-    <button id="lineHeightdecrease">Smaller</button>
-    <button id="lineHeightIncrease">Bigger</button>
-    <button id="lineHeightReset">&circlearrowleft;</button>
-  </div>
-  </div>
-
-<div id="checkboxContainer">
-  <input type="checkbox" id="toggleReadingMode" name="toggle">
-  <label for="toggleReadingMode">Toggle on default</label>
-</div>
-<script src="popup.js"></script>
-</body>
+		<div id="saccadesEdit" class="w-100">
+			<label style="display: block" id="lineHeightLabel">Saccades interval: <span id="saccadesLabelValue"></span></label>
+			<div class="slidecontainer">
+				<input type="range" min="0" max="4" value="" class="slider" id="saccadesSlider" />
+			</div>
+		</div>
+
+		<div id="lineHeightEdit" class="w-100">
+			<label style="display: block" id="lineHeightLabel">Line Height</label>
+			<div id="buttonGroup" class="w-100 flex justify-between">
+				<button id="lineHeightdecrease">Smaller</button>
+				<button id="lineHeightIncrease">Bigger</button>
+				<button id="lineHeightReset">&circlearrowleft;</button>
+			</div>
+		</div>
 
+		<div id="checkboxContainer">
+			<input type="checkbox" id="toggleReadingMode" name="toggle" />
+			<label for="toggleReadingMode">Toggle on default</label>
+		</div>
+		<script src="popup.js"></script>
+	</body>
 </html>
diff --git a/src/popup.js b/src/popup.js
@@ -2,16 +2,24 @@
 const documentButtons = document.getElementsByTagName('button');
 const toggleBtn = document.getElementById('toggleBtn');
 const toggleOnDefaultCheckbox = document.getElementById('toggleReadingMode');
+const saccadesIntervalSlider = document.getElementById('saccadesSlider');
 
-chrome.storage.sync.get('color', ({ color }) => {
+chrome.storage.sync.get(['saccadesInterval', 'color'], ({ color, saccadesInterval }) => {
   // set all button colors in the popup
   for (let index = 0; index < documentButtons.length; index++) {
     const btn = documentButtons.item(index);
     btn.style.backgroundColor = color;
-    if (/lineHeight/.test(btn.getAttribute('id'))) {
+
+    const btnId = btn.getAttribute('id');
+    if (/lineHeight/.test(btnId)) {
       btn.addEventListener('click', updateLineHeightClickHandler);
     }
   }
+
+  updateSaccadesLabelValue(saccadesInterval);
+  saccadesIntervalSlider.value = saccadesInterval;
+
+  saccadesIntervalSlider.addEventListener('change', updateSaccadesChangeHandler);
 });
 
 chrome.storage.sync.get('toggleOnDefault', ({ toggleOnDefault }) => {
@@ -42,9 +50,29 @@ async function updateLineHeightClickHandler(event) {
   });
 }
 
+function updateSaccadesChangeHandler(event) {
+  const saccadesInterval = Number(event.target.value);
+
+  updateSaccadesLabelValue(saccadesInterval);
+
+  updateSaccadesIntermediateHandler(saccadesInterval);
+}
+
+async function updateSaccadesIntermediateHandler(_saccadesInterval) {
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  chrome.scripting.executeScript(
+    {
+      target: { tabId: tab.id, allFrames: true },
+      function: (saccadesInterval) => { document.body.setAttribute('saccades-interval', saccadesInterval); return saccadesInterval; },
+      args: [_saccadesInterval],
+    },
+    ([activeFrame]) => {
+      chrome.storage.sync.set({ saccadesInterval: activeFrame.result });
+    },
+  );
+}
+
 function updateLineHeightActiveTab({ action, LINE_HEIGHT_KEY, STEP }) {
-  // const line_height_key = "--br-line-height";
-  // const STEP = 0.5; //increase or descrease line height by this much per click
   let currentHeight = document.body.style.getPropertyValue(LINE_HEIGHT_KEY);
 
   switch (action) {
@@ -71,3 +99,10 @@ function updateLineHeightActiveTab({ action, LINE_HEIGHT_KEY, STEP }) {
     document.body.style.removeProperty(LINE_HEIGHT_KEY);
   }
 }
+
+/**
+ * @description Show the word interval between saccades
+ */
+function updateSaccadesLabelValue(saccadesInterval) {
+  document.getElementById('saccadesLabelValue').textContent = saccadesInterval;
+}
diff --git a/src/style.css b/src/style.css
@@ -6,6 +6,7 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 14px;
 }
 
 button {
@@ -20,10 +21,6 @@ button:active {
   transform: scale(1.05);
 }
 
-#lineHeightEdit {
-  margin: 12px 0 12px;
-  padding: 4px;
-}
 
 #lineHeightLabel {
   padding-bottom: 4px;