Merge pull request #39 from penge/mode-font-listener

Update mode and font across open tabs without page refresh

notes.js

@@ -98,11 +98,31 @@ chrome.storage.local.get(["index", "font", "size", "mode"], local => {
 });
 
 chrome.storage.onChanged.addListener((changes, areaName) => {
-  const notes = areaName === "sync" && changes["notes"] && changes["notes"].newValue;
-  if (!notes) { return; }
-  const needUpdate = notes.some((note, index) => currentNotes[index] !== note);
-  if (!needUpdate) { return; }
-  setPage(notes, currentIndex, false, true);
+  if (areaName === "local") {
+    if (changes["mode"]) {
+      const mode = changes["mode"].newValue;
+      document.body.id = mode;
+    }
+
+    if (changes["font"]) {
+      const font = changes["font"].newValue;
+      setFont(font.fontFamily);
+    }
+
+    return;
+  }
+
+  if (areaName === "sync") {
+    if (changes["notes"]) {
+      const notes = changes["notes"].newValue;
+      const needUpdate = notes.some((note, index) => currentNotes[index] !== note);
+      if (needUpdate) {
+        setPage(notes, currentIndex, false, true);
+      }
+    }
+
+    return;
+  }
 });
 
 

options.css

@@ -67,7 +67,7 @@ h3#generics {
     display: block;
   }
 
-  .divider {
+  .slash {
     display: none;
   }
 }

options.html

@@ -115,10 +115,6 @@ <h2>Mode</h2>
     </div>
   </div>
 
-  <p class="comment">
-    * To see the changes, you may need to refresh My Notes page.
-  </p>
-
 
   <h2>Keyboard Shortcuts</h2>
   <div>
@@ -133,7 +129,7 @@ <h3>Windows or Linux</h3>
         <td>Open page 2</td>
       </tr>
       <tr>
-        <td class="shortcut">Ctrl + Shift + F</td>
+        <td class="shortcut">Ctrl + Shift + 3</td>
         <td>Open page 3</td>
       </tr>
       <tr>
@@ -163,7 +159,7 @@ <h3>Mac</h3>
   </div>
 
   <p class="comment">
-    * You can also change the page by clicking the page number in the corner.
+    * You can also change the page by clicking the page number.
   </p>
 
 

options.js

@@ -6,25 +6,25 @@
 
 /* Font elements */
 
-var generics = [
+const generics = [
   document.getElementById("serif"),
   document.getElementById("sans-serif"),
   document.getElementById("monospace")
 ];
 
-var fonts = [
+const fonts = [
   document.getElementById("serif-fonts"),
   document.getElementById("sans-serif-fonts"),
   document.getElementById("monospace-fonts")
 ];
 
-var fontCheckboxes = document.getElementsByName("font");
-var currentFontName = document.getElementById("current-font-name");
+const fontCheckboxes = document.getElementsByName("font");
+const currentFontName = document.getElementById("current-font-name");
 
 
 /* Mode elements */
 
-var modeCheckboxes = document.getElementsByName("mode");
+const modeCheckboxes = document.getElementsByName("mode");
 
 
 /* Helpers */
@@ -39,12 +39,12 @@ function checkCheckboxById(id) {
 
 function displayGeneric(id) {
   generics.forEach(generic => {
-    var decoration = generic.id === id ? "underline" : "";
+    const decoration = generic.id === id ? "underline" : "";
     generic.style.textDecoration = decoration;
   });
 
   fonts.forEach(font => {
-    var display = (font.id === id + '-fonts') ? "block" : "none";
+    const display = (font.id === id + '-fonts') ? "block" : "none";
     font.style.display = display;
   });
 }
@@ -85,8 +85,8 @@ modeCheckboxes.forEach(checkbox => {
 
 chrome.storage.local.get(["font", "mode"], result => {
   // 1 FONT
-  var currentFont = result.font; // see background.js
-  var currentGeneric = currentFont.genericFamily;
+  const currentFont = result.font; // see background.js
+  const currentGeneric = currentFont.genericFamily;
 
   // Display the name of the current font
   setCurrentFontNameText(currentFont.name);