feat(fonts): allow user to apply and reset their customization choices …

…#22 - Add the logic for "Apply Fonts" and "Reset Fonts" functionality, allowing users to preview and reset their font customization choices. Changes summary: - Implemented the ability for users to apply and reset font customizations, providing a dynamic preview of their font choices and the option to revert to default settings if desired.
itsmartashub · May 28, 2024 · 34f225b · 34f225b
1 parent ad5eb26
commit 34f225b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 5 deletions.
diff --git a/build/dev/chromium-mv3/content.12730647.js b/build/dev/chromium-mv3/content.12730647.js
diff --git a/src/js/app/customFonts.js b/src/js/app/customFonts.js
@@ -42,21 +42,26 @@ export let fontHtmlCode = `
 		</div>
 
 		<div class="gap-2 mt-4 grid">
+			<button id="resetFont" class="btn block relative btn-secondary text-center">Reset to Default</button>
 			<button id="applyFont" class="btn block relative btn-primary text-center">Apply Fonts</button>
 		</div>
 	</section>
 `
 
 function setCSSVariables({ fontFamily, fontSize = '16px' }) {
-	console.log(fontFamily, fontSize)
 	document.documentElement.style.setProperty('--f-family', fontFamily)
 	document.documentElement.style.setProperty('--f-size', fontSize)
 }
-
+function setInputFields({ fontFamily, fontSize = '16' }) {
+	document.getElementById('fontFamily').value = fontFamily
+	document.getElementById('fontSize').value = fontSize
+}
 export function applyFont() {
 	const fontFamily = document.getElementById('fontFamily').value
 	const fontSize = document.getElementById('fontSize').value + 'px'
 
+	// Create the <link> in <head> which will fetch the selected font from Google Fonts
+
 	// Apply CSS variables
 	setCSSVariables({ fontFamily, fontSize })
 
@@ -66,3 +71,16 @@ export function applyFont() {
 		fontSize: fontSize,
 	})
 }
+export function resetFont() {
+	// Reset CSS variables to default values
+	setCSSVariables({ fontFamily: fontFamilyDefault, fontSize: '16px' })
+
+	// Reset input fields to default values
+	// document.getElementById('fontFamily').value =
+	setInputFields({ fontFamily: 'Default', fontSize: '16' })
+
+	// Remove custom font link from the head
+
+	// Remove custom font settings from chrome.storage
+	chrome.storage.sync.remove(['fontFamily', 'fontSize'])
+}
diff --git a/src/js/app/floatingBtn.js b/src/js/app/floatingBtn.js
@@ -6,7 +6,7 @@ import { icon_sun, icon_moon, icon_moon_full, icon_settings, icon_paint } from '
 // import gpthToggleImg from '../../img/gpth-toggle-circled.webp'
 import { hexToHSL } from '../utils/hexToHSL'
 
-import { fontHtmlCode } from './customFonts'
+import { fontHtmlCode, applyFont, resetFont } from './customFonts'
 // console.log(fontHtmlCode)
 
 // let isOptionsShown = false
@@ -185,6 +185,8 @@ function renderSettings() {
 	$resetAllBtn.disabled = true
 
 	$settings.querySelector('#resetAllSettings').addEventListener('click', resetAllSettings)
+	document.getElementById('applyFont').addEventListener('click', applyFont)
+	document.getElementById('resetFont').addEventListener('click', resetFont)
 }
 
 function openSettings() {