diff --git a/src/background.js b/src/background.js index 65405f9..fcafa37 100644 --- a/src/background.js +++ b/src/background.js @@ -20,7 +20,7 @@ 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"]', }; @@ -28,7 +28,7 @@ var /** 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 index 96c65ca..7ce7ce4 100644 --- a/src/popup.html +++ b/src/popup.html @@ -1,35 +1,36 @@ - + + + Popup + + - - Popup - - + +
+

+ +

- - -

- -

+
+ + +
-
- - - -
+
+ + +
-
- - - -
+
+ +
-
- - -
-
+
+ + +
+ - - - \ No newline at end of file + + + diff --git a/src/popup.js b/src/popup.js index ff26225..7c3e070 100644 --- 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; - }, {}); -} \ No newline at end of file + return Object.keys(obj) + .sort() + .reduce((accumulator, current) => { + accumulator[current] = obj[current]; + return accumulator; + }, {}); +}