-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
46c75c9
commit 03020a0
Showing
5 changed files
with
332 additions
and
207 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,114 +1,130 @@ | ||
| import { | ||
| notation, | ||
| defaultHighlightSheet, | ||
| defaultRestSheet, | ||
| } from "../utils.js"; | ||
|
|
||
| let applyButton = document.getElementById("applyButton"); | ||
| let autoButton = document.getElementById("autoButton"); | ||
| let restoreButton = document.getElementById("restore-button"); | ||
| let highlightSheetInput = document.getElementById("highlight-input"); | ||
| let restSheetInput = document.getElementById("rest-input"); | ||
|
|
||
| var buttonEnabledClass = "btn btn-light btn-sm"; | ||
| var buttonDisabledClass = "btn btn-danger btn-sm"; | ||
| let output1 = document.getElementById("v1"); | ||
| let output2 = document.getElementById("v2"); | ||
|
|
||
| restSheetInput.value = defaultRestSheet; | ||
| output1.innerHTML = highlightSheetInput.value; | ||
| output2.innerHTML = restSheetInput.value + "%"; | ||
| import { notation, defaultHighlightSheet, defaultRestSheet } from "../utils.js"; | ||
|
|
||
| const applyButton = document.getElementById("applyButton"); | ||
| const autoButton = document.getElementById("autoButton"); | ||
| const restoreButton = document.getElementById("restore-button"); | ||
| const highlightSheetInput = document.getElementById("highlight-input"); | ||
| const restSheetInput = document.getElementById("rest-input"); | ||
|
|
||
| const buttonEnabledClass = "btn btn-light btn-sm"; | ||
| const buttonDisabledClass = "btn btn-danger btn-sm"; | ||
| const output1 = document.getElementById("v1"); | ||
| const output2 = document.getElementById("v2"); | ||
|
|
||
| // Initialize input values and output displays | ||
| function initValues() { | ||
| highlightSheetInput.value = defaultHighlightSheet; | ||
| restSheetInput.value = defaultRestSheet; | ||
| output1.innerHTML = defaultHighlightSheet; | ||
| output2.innerHTML = `${defaultRestSheet}%`; | ||
| } | ||
|
|
||
| initValues(); | ||
|
|
||
| // Update class helper function | ||
| function setClass(element, cls) { | ||
| element.className = cls; | ||
| } | ||
|
|
||
| // Update the text and class of the auto apply button | ||
| function updateAutoApplyText(isAuto) { | ||
| if (isAuto) { | ||
| autoButton.innerHTML = "Disable Auto Apply"; | ||
| setClass(autoButton, buttonDisabledClass); | ||
| } else { | ||
| autoButton.innerHTML = "Enable Auto Apply"; | ||
| setClass(autoButton, buttonEnabledClass); | ||
| } | ||
| autoButton.innerHTML = isAuto ? "Disable Auto Apply" : "Enable Auto Apply"; | ||
| setClass(autoButton, isAuto ? buttonDisabledClass : buttonEnabledClass); | ||
| } | ||
|
|
||
| chrome.storage.sync.get( | ||
| ["highlightSheet", "restSheet", "autoApply", "isOn", "algorithm"], | ||
| (data) => { | ||
| highlightSheetInput.value = data.highlightSheet.split(":")[1].trim(); | ||
| restSheetInput.value = data.restSheet.split(":")[1].trim(); | ||
| output1.innerHTML = fontWeightValue; | ||
| output2.innerHTML = opacityValue + "%"; | ||
| updateAutoApplyText(data.autoApply); | ||
| } | ||
| ); | ||
|
|
||
| chrome.storage.sync.get("highlightSheet", function(data) { | ||
| let fontWeightValue = parseInt(data.highlightSheet.match(/\d+/)[0]); | ||
| document.getElementById("highlight-input").value = fontWeightValue; | ||
| output1.innerHTML = fontWeightValue; | ||
| }); | ||
| // Helper to extract style values from a stored string | ||
| function extractStyleValue(styleString, regex) { | ||
| const match = styleString.match(regex); | ||
| return match ? parseInt(match[1], 10) : null; | ||
| } | ||
|
|
||
| chrome.storage.sync.get("restSheet", function(data) { | ||
| let opacityValue = parseInt(data.restSheet.match(/opacity:\s*(\d+(?:\.\d+)?)/i)[1] * 100); | ||
| document.getElementById("rest-input").value = opacityValue; | ||
| output2.innerHTML = opacityValue + "%"; | ||
| }); | ||
| // Load the stored values and update the display | ||
| async function loadStoredValues() { | ||
| const { highlightSheet, restSheet, autoApply } = await chrome.storage.sync.get(["highlightSheet", "restSheet", "autoApply"]); | ||
| const fontWeightValue = extractStyleValue(highlightSheet, /font-weight:\s*(\d+);/); | ||
| const opacityValue = extractStyleValue(restSheet, /opacity:\s*(\d+(?:\.\d+)?);/) * 100; | ||
|
|
||
| highlightSheetInput.value = fontWeightValue || defaultHighlightSheet; | ||
| restSheetInput.value = opacityValue || defaultRestSheet; | ||
| output1.innerHTML = fontWeightValue || defaultHighlightSheet; | ||
| output2.innerHTML = `${opacityValue || defaultRestSheet}%`; | ||
| updateAutoApplyText(autoApply); | ||
| } | ||
|
|
||
| highlightSheetInput.addEventListener("input", async (text) => { | ||
| onHighlightInputChange(); | ||
| }); | ||
| loadStoredValues(); | ||
|
|
||
| restSheetInput.addEventListener("input", async (text) => { | ||
| onRestInputChange(); | ||
| // Update storage with new style value | ||
| async function setStyleValue(styleKey, inputElement, outputElement, transformFunction = value => value) { | ||
| const value = inputElement.value; | ||
| const styleValue = transformFunction(value); | ||
| await chrome.storage.sync.set({ [styleKey]: styleValue }); | ||
| outputElement.textContent = value; | ||
| } | ||
|
|
||
| // Event listeners for input changes | ||
| highlightSheetInput.addEventListener("input", () => { | ||
| setStyleValue('highlightSheet', highlightSheetInput, output1, fontWeightValue => `font-weight: ${fontWeightValue};`); | ||
| }); | ||
|
|
||
| restSheetInput.addEventListener("input", () => { | ||
| setStyleValue('restSheet', restSheetInput, output2, opacityValue => `opacity: ${opacityValue / 100};`); | ||
| }); | ||
|
|
||
| // Restore button functionality | ||
| restoreButton.addEventListener("click", async () => { | ||
| chrome.storage.sync.set({ | ||
| await chrome.storage.sync.set({ | ||
| highlightSheet: `font-weight: ${defaultHighlightSheet};`, | ||
| restSheet: `opacity: ${defaultRestSheet / 100};`, | ||
| }); | ||
| highlightSheetInput.value = defaultHighlightSheet; | ||
| restSheetInput.value = defaultRestSheet; | ||
| output1.innerHTML = highlightSheetInput.value; | ||
| output2.innerHTML = restSheetInput.value + "%"; | ||
| initValues(); | ||
| }); | ||
|
|
||
| // Apply the custom styles by invoking the notation function | ||
| applyButton.addEventListener("click", async () => { | ||
| let [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); | ||
| const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); | ||
|
|
||
| chrome.scripting.executeScript({ | ||
| await chrome.scripting.executeScript({ | ||
| target: { tabId: tab.id }, | ||
| function: notation, | ||
| }); | ||
| chrome.storage.sync.get(["isOn"], (data) => { | ||
| chrome.storage.sync.set({ isOn: !data.isOn }); | ||
| func: notation, | ||
| }); | ||
|
|
||
| const { isOn } = await chrome.storage.sync.get("isOn"); | ||
| await chrome.storage.sync.set({ isOn: !isOn }); | ||
| }); | ||
|
|
||
| // Toggle the auto-apply functionality and update button text and class | ||
| autoButton.addEventListener("click", async () => { | ||
| chrome.storage.sync.get(["autoApply"], (data) => { | ||
| updateAutoApplyText(!data.autoApply); | ||
| chrome.storage.sync.set({ autoApply: !data.autoApply }); | ||
| }); | ||
| const { autoApply } = await chrome.storage.sync.get("autoApply"); | ||
| const newAutoApplyValue = !autoApply; | ||
| await chrome.storage.sync.set({ autoApply: newAutoApplyValue }); | ||
| updateAutoApplyText(newAutoApplyValue); | ||
| }); | ||
|
|
||
| chrome.storage.sync.get("autoApply", (data) => { | ||
| updateAutoApplyText(data.autoApply); | ||
| }); | ||
| // Initialize the auto-apply button text and class on load | ||
| async function initAutoApply() { | ||
| const { autoApply } = await chrome.storage.sync.get("autoApply"); | ||
| updateAutoApplyText(autoApply); | ||
| } | ||
|
|
||
| initAutoApply(); | ||
|
|
||
| // Update the highlight style value when the input changes | ||
| function onHighlightInputChange() { | ||
| let fontWeightValue = highlightSheetInput.value; | ||
| let highlightSheetValue = `font-weight: ${fontWeightValue};`; | ||
| chrome.storage.sync.set({ highlightSheet: highlightSheetValue }); | ||
| output1.innerHTML = fontWeightValue; | ||
| setStyleValue( | ||
| 'highlightSheet', | ||
| highlightSheetInput, | ||
| output1, | ||
| fontWeightValue => `font-weight: ${fontWeightValue};` | ||
| ); | ||
| } | ||
|
|
||
| // Update the rest style value when the input changes | ||
| function onRestInputChange() { | ||
| let opacityValue = restSheetInput.value; | ||
| let restSheetValue = `opacity: ${opacityValue / 100};`; | ||
| chrome.storage.sync.set({ restSheet: restSheetValue}); | ||
| output2.innerHTML = opacityValue + "%"; | ||
| setStyleValue( | ||
| 'restSheet', | ||
| restSheetInput, | ||
| output2, | ||
| opacityValue => `opacity: ${opacityValue / 100};`, | ||
| value => `${value}%` | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.