Merge pull request #17 from gustavomtborges/add-change-font-size

feat: support changing font size
AmraniCh · Feb 8, 2024 · d3c9740 · d3c9740
2 parents e723da7 + 3bec34d
commit d3c9740
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 37 deletions.
diff --git a/src/background.js b/src/background.js
@@ -20,15 +20,15 @@ var /**
         Atma: 'https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&display=swap',
     },
     selectors = {
-        code: '.blob-code-inner, .react-code-text',
+        code: '.blob-code-inner, .react-code-text, .react-blob-print-hide',
         intentGuides: '[data-rgh-whitespace="space"]',
     };
 
 // add a listener to tabs.onUpdated event
 chrome.tabs.onUpdated.addListener(function (tabId, info) {
     // if the tab is completely loaded
     if (info.status === 'complete') {
-        chrome.storage.sync.get(['gt_font_family', 'gt_font_weight', 'gt_font_link', 'gt_indent_guides'], function (data) {
+        chrome.storage.sync.get(['gt_font_family', 'gt_font_weight', 'gt_font_size', 'gt_font_link', 'gt_indent_guides'], function (data) {
             if (Object.keys(data).length > 0) {
                 chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
                     chrome.tabs.sendMessage(tabs[0].id, {
@@ -42,6 +42,7 @@ chrome.tabs.onUpdated.addListener(function (tabId, info) {
 
                 applyFontFamily(data.gt_font_family);
                 applyFontWeight(data.gt_font_weight);
+                applyFontSize(data.gt_font_size);
                 data.gt_indent_guides ? showIndentGuides() : hideIndentGuides();
             }
         });
@@ -111,6 +112,14 @@ function applyFontWeight(weight) {
     applyStyles(selectors.code, { 'font-weight': weight });
 }
 
+/**
+ * Applies the provided font-size to the html github code container
+ * @param {String} font-size (in px, em, rem, etc)
+ */
+function applyFontSize(size) {
+    applyStyles(selectors.code, { 'font-size': size });
+}
+
 function hideIndentGuides() {
     applyStyles(selectors.intentGuides, { visibility: 'hidden' });
 }

diff --git a/src/popup.html b/src/popup.html
@@ -1,35 +1,36 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+    <head>
+        <title>Popup</title>
+        <link rel="stylesheet" type="text/css" href="./popup.css" />
+    </head>
 
-<head>
-    <title>Popup</title>
-    <link rel="stylesheet" type="text/css" href="./popup.css" />
-</head>
+    <body>
+        <form>
+            <h1 class="title">
+                <img class="logo" src="images/logo-wide.png" />
+            </h1>
 
-<body>
-    <form>
-        <h1 class="title">
-            <img class="logo" src="images/logo-wide.png" />
-        </h1>
+            <div class="input-field">
+                <input id="font_family" class="control" list="font_family_list" />
+                <datalist id="font_family_list"> </datalist>
+            </div>
 
-        <div class="input-field">
-            <input id="font_family" class="control" list="font_family_list">
-            <datalist id="font_family_list">
-            </datalist>
-        </div>
+            <div class="input-field">
+                <input id="fonts_weight" class="control" list="fonts_weight_list" />
+                <datalist id="fonts_weight_list"> </datalist>
+            </div>
 
-        <div class="input-field">
-            <input id="fonts_weight" class="control" list="fonts_weight_list">
-            <datalist id="fonts_weight_list">
-            </datalist>
-        </div>
+            <div class="input-field">
+                <input id="fonts_size" class="control" placeholder="16px, 1em, 1.2rem" />
+            </div>
 
-        <div class="checkbox-field">
-            <input type="checkbox" id="indentGuides" class="control" />
-            <label for="indentGuides" class="label">Hide indentation guides</label>
-        </div>
-    </form>
+            <div class="checkbox-field">
+                <input type="checkbox" id="indentGuides" class="control" />
+                <label for="indentGuides" class="label">Hide indentation guides</label>
+            </div>
+        </form>
 
-    <script src="./popup.js"></script>
-</body>
-</html>
+        <script src="./popup.js"></script>
+    </body>
+</html>
diff --git a/src/popup.js b/src/popup.js
@@ -7,6 +7,7 @@ const /**
     selectors = background.selectors,
     applyFontFamily = background.applyFontFamily,
     applyFontWeight = background.applyFontWeight,
+    applyFontSize = background.applyFontSize,
     showIndentGuides = background.showIndentGuides,
     hideIndentGuides = background.hideIndentGuides,
     fonts = background.fonts,
@@ -17,6 +18,7 @@ const /**
     fontsDatalistInput = document.querySelector('#font_family'),
     weightsDatalist = document.querySelector('#fonts_weight_list'),
     weightsDatalistInput = document.querySelector('#fonts_weight'),
+    fontSizeInput = document.querySelector('#fonts_size'),
     IndentGuidesCheckbox = document.querySelector('#indentGuides');
 
 // popup document content loaded
@@ -39,7 +41,7 @@ function initEvents() {
 
         chrome.storage.sync.set({
             gt_font_family: fontSelected,
-            gt_font_link: fonts[fontSelected]
+            gt_font_link: fonts[fontSelected],
         });
 
         if (!isLocalFont) {
@@ -54,6 +56,12 @@ function initEvents() {
         chrome.storage.sync.set({ gt_font_weight: selectedWeight });
     });
 
+    addEvent(fontSizeInput, 'input', function () {
+        var typedSize = fontSizeInput.value;
+        applyFontSize(typedSize);
+        chrome.storage.sync.set({ gt_font_size: typedSize });
+    });
+
     addEvent(IndentGuidesCheckbox, 'change', function (event) {
         var checked = event.target.checked;
         checked ? hideIndentGuides() : showIndentGuides();
@@ -79,13 +87,14 @@ function fillFontsDrodown() {
  * Get font settings from storage and initialize the select dropdowns
  */
 function updateUIFromStorage() {
-    chrome.storage.sync.get(['gt_font_family', 'gt_font_weight', 'gt_indent_guide'], function (data) {
+    chrome.storage.sync.get(['gt_font_family', 'gt_font_weight', 'gt_font_size', 'gt_indent_guide'], function (data) {
         if (Object.keys(data).length > 0) {
             const isLocalFont = Object.keys(fonts).indexOf(data.gt_font_family) === -1;
 
             // make the restored font family & weight selected
             fontsDatalistInput.value = data.gt_font_family;
             weightsDatalistInput.value = data.gt_font_weight;
+            fontSizeInput.value = data.gt_font_size;
 
             // update indentation guides checkbox
             IndentGuidesCheckbox.checked = !data.gt_indent_guide;
@@ -164,8 +173,10 @@ function createOption(textContent, value, append) {
 }
 
 function sortObject(obj) {
-    return Object.keys(obj).sort().reduce((accumulator, current) => {
-        accumulator[current] = obj[current];
-        return accumulator;
-    }, {});
-}
+    return Object.keys(obj)
+        .sort()
+        .reduce((accumulator, current) => {
+            accumulator[current] = obj[current];
+            return accumulator;
+        }, {});
+}