Browse Source

Added more comments to JS files; slight refactoring

master
Said Achmiz 6 years ago
parent
commit
cb247d23ed
2 changed files with 82 additions and 10 deletions
  1. 48
    10
      options.js
  2. 34
    0
      popup.js

+ 48
- 10
options.js View File

/* EVENTS */ /* EVENTS */
/**********/ /**********/


/* Triggered when a click is received by the mode selector switch, or by
either of the two labels (“Blacklist” and “Whitelist”).
*/
function modeSelectorInputReceived() { function modeSelectorInputReceived() {
toggleModeSelectorState(); toggleModeSelectorState();
window.currentMode = (window.currentMode == "whitelist") ? "blacklist" : "whitelist";

// Activate the “Reset” and “Save” buttons, since changes have been made.
setButtonsActive(true); setButtonsActive(true);
} }


/* HELPERS */ /* HELPERS */
/***********/ /***********/


/* Toggles all UI state associated with mode selection. Called on input to
the mode selector (see modeSelectorInputReceived()), OR when changes are
reset (see resetChanges()).
*/
function toggleModeSelectorState(newMode) { function toggleModeSelectorState(newMode) {
/* Update state of the checkbox itself, and the container div. */
let container = document.querySelector(".mode-select-container"); let container = document.querySelector(".mode-select-container");
let checkbox = document.querySelector("input#whitelist-mode"); let checkbox = document.querySelector("input#whitelist-mode");
newMode = newMode || (container.classList.contains("whitelist") ? "blacklist" : "whitelist"); newMode = newMode || (container.classList.contains("whitelist") ? "blacklist" : "whitelist");

container.classList.toggle("whitelist", (newMode == "whitelist")); container.classList.toggle("whitelist", (newMode == "whitelist"));
checkbox.checked = (newMode == "whitelist"); checkbox.checked = (newMode == "whitelist");

/* Enable both spans (the “Blacklist” and “Whitelist” labels, then disable
just the label associated with the now-enabled mode. */
container.querySelectorAll("span").forEach(span => { container.querySelectorAll("span").forEach(span => {
span.classList.toggle("disabled", false); span.classList.toggle("disabled", false);
}); });
document.querySelector(`.${newMode}-mode-label`).classList.toggle("disabled", true); document.querySelector(`.${newMode}-mode-label`).classList.toggle("disabled", true);


/* In whitelist mode, the matching patterns textarea must be disabled,
since the matching patterns list is treated as containing only the
single pattern “.*”. An overlay is shown, to indicate this. */
document.querySelector("div#matchingPatterns").classList.toggle("disabled", (newMode == "whitelist")); document.querySelector("div#matchingPatterns").classList.toggle("disabled", (newMode == "whitelist"));
document.querySelector("div#matchingPatterns textarea").disabled = (newMode == "whitelist"); document.querySelector("div#matchingPatterns textarea").disabled = (newMode == "whitelist");
} }


/* Saves the entered state in storage.
De-activate the “Reset” and “Save” buttons.
*/
function saveChanges() { function saveChanges() {
let matchingPatterns = document.querySelector("#matchingPatterns textarea").value; let matchingPatterns = document.querySelector("#matchingPatterns textarea").value;
let exclusionPatterns = document.querySelector("#exclusionPatterns textarea").value; let exclusionPatterns = document.querySelector("#exclusionPatterns textarea").value;
}, () => { setButtonsActive(false); }); }, () => { setButtonsActive(false); });
} }


function resetChanges() {
/* Retrieves the saved state from storage and reset the UI to reflect it,
discarding the user’s changes.
*/
function resetChanges(callback) {
chrome.storage.sync.get([ "matchingPatterns", "exclusionPatterns", "mode" ], (result) => { chrome.storage.sync.get([ "matchingPatterns", "exclusionPatterns", "mode" ], (result) => {
document.querySelector("#matchingPatterns textarea").value = result.matchingPatterns || "";
document.querySelector("#exclusionPatterns textarea").value = result.exclusionPatterns || "";
window.currentMode = result.mode || "blacklist";
AKS.matchingPatterns = result.matchingPatterns || "";
AKS.exclusionPatterns = result.exclusionPatterns || ""
AKS.mode = result.mode || "blacklist";

document.querySelector("#matchingPatterns textarea").value = AKS.matchingPatterns;
document.querySelector("#exclusionPatterns textarea").value = AKS.exclusionPatterns;


toggleModeSelectorState(window.currentMode);
toggleModeSelectorState(AKS.mode);

// De-activate the “Reset” and “Save” buttons.
setButtonsActive(false); setButtonsActive(false);


// Expand all textareas. // Expand all textareas.
document.querySelectorAll("textarea").forEach(textarea => { document.querySelectorAll("textarea").forEach(textarea => {
expandTextarea(textarea); expandTextarea(textarea);
}); });

// Trigger provided callback, if any.
if (callback) callback();
}); });
} }


/* Activates or de-activates the “Reset” and “Save” buttons. Called when
changes are made (to activate) or when changes are saved or reset (to
de-activate).
*/
function setButtonsActive(active) { function setButtonsActive(active) {
document.querySelectorAll("button").forEach(button => { document.querySelectorAll("button").forEach(button => {
button.disabled = !active; button.disabled = !active;
}); });
} }


/* Expands a textarea to show all its contents (up to a maximum height which is
set via CSS).
*/
function expandTextarea(textarea) { function expandTextarea(textarea) {
let totalBorderHeight = 2; let totalBorderHeight = 2;
if (textarea.clientHeight == textarea.scrollHeight + totalBorderHeight) return; if (textarea.clientHeight == textarea.scrollHeight + totalBorderHeight) return;
/******************/ /******************/


function initialize() { function initialize() {
resetChanges();
chrome.storage.sync.get("mode", (result) => {
let divToFocus = (result.mode == "whitelist") ? "#exclusionPatterns" : "#matchingPatterns";
window.AKS = { };

/* Retrieve saved settings from storage, and set all UI elements to their
proper state. Then, focus the first active textarea. */
resetChanges(() => {
let divToFocus = (AKS.mode == "whitelist") ? "#exclusionPatterns" : "#matchingPatterns";
document.querySelector(`${divToFocus} textarea`).focus(); document.querySelector(`${divToFocus} textarea`).focus();
}); });



+ 34
- 0
popup.js View File

recalculatePatternEffects(); recalculatePatternEffects();
} }


/* Given a patterns list (whether matching or exclusion), enables all patterns
that match the current page URL, if any. If none are found, adds a new
pattern for the current tab.
*/
function addPatternForCurrentTab(patterns) { function addPatternForCurrentTab(patterns) {
/* First, we see if there are already any existing but commented-out /* First, we see if there are already any existing but commented-out
patterns that match the active tab. If so, we enable them all. */ patterns that match the active tab. If so, we enable them all. */
patterns.push(""); patterns.push("");
} }


/* Given a patterns list (whether matching or exclusion), disables all patterns
that match the current page URL.
*/
function disablePatternsForCurrentTab(patterns) { function disablePatternsForCurrentTab(patterns) {
for (var i = 0; i < patterns.length; i++) { for (var i = 0; i < patterns.length; i++) {
if (patterns[i] && AKS.activeTabLocation.match(new RegExp(patterns[i]))) if (patterns[i] && AKS.activeTabLocation.match(new RegExp(patterns[i])))
} }
} }


/* Creates a regexp that matches the current page URL. This regexp will match
all pages on the same domain.
*/
function regExpForCurrentTab() { function regExpForCurrentTab() {
let a = document.createElement("A"); let a = document.createElement("A");
a.href = AKS.activeTabLocation; a.href = AKS.activeTabLocation;
return ".*" + a.host.replace(/\./g, "\\.") + ".*"; return ".*" + a.host.replace(/\./g, "\\.") + ".*";
} }


/* Recalculates the values of AKS.pageMatched and AKS.pageExcluded, based on
the contents of the matching and exclusion patterns lists.
*/
function recalculatePatternEffects() { function recalculatePatternEffects() {
AKS.pageMatched = false; AKS.pageMatched = false;
AKS.pageExcluded = false; AKS.pageExcluded = false;
} }
} }


/* Updates the values of properties of the AKS object on the basis of the
provided result object. Called after a query to storage (to retrieve the
result object).

Updated properties are: the current mode, the matching and exclusion
patterns lists, and the ‘pageMatched’ and ‘pageExcluded’ properties (which
are computed from the patterns lists).
*/
function updateState(result) { function updateState(result) {
AKS.mode = result.mode || "blacklist"; AKS.mode = result.mode || "blacklist";
AKS.matchingPatterns = (AKS.mode == "whitelist") ? AKS.matchingPatterns = (AKS.mode == "whitelist") ?
recalculatePatternEffects(); recalculatePatternEffects();
} }


/* Updates the state of all UI elements to reflect the current values of the
AKS object (see updateState()).
*/
function updateUIState() { function updateUIState() {
// The big button.
let mainButton = document.querySelector("button.main-button"); let mainButton = document.querySelector("button.main-button");
// The block containing the mode indicator and the “Killing stickies?” label.
let info = document.querySelector(".info"); let info = document.querySelector(".info");
// The “Killing stickies?” label.
let statusLabel = document.querySelector(".info .status-display"); let statusLabel = document.querySelector(".info .status-display");

var active, whitelist; var active, whitelist;

/* The extension (and thus the main button) is shown as ‘active’ if:
(a) Blacklist mode is active, the current page is matched, and NOT
excluded; or,
(b) Whitelist mode is active, and the current page is NOT excluded.
*/
if (AKS.mode == "blacklist") { if (AKS.mode == "blacklist") {
if (AKS.pageMatched && !AKS.pageExcluded) { if (AKS.pageMatched && !AKS.pageExcluded) {
active = true; active = true;

Loading…
Cancel
Save