From 0847482eb0a4752cffd1430598d89d3089b7f61a Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 15 Mar 2018 12:19:17 -0400 Subject: [PATCH] Added manual selection of colors. --- manifest.json | 2 +- src/content.js | 38 +++++++------------------- src/eventPage.js | 49 +++++++++++++++++----------------- src/options.html | 54 +++++++++++++++---------------------- src/options.js | 69 ++++++++++++++++++++++++------------------------ 5 files changed, 92 insertions(+), 120 deletions(-) diff --git a/manifest.json b/manifest.json index 288819c..0f0798a 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "name": "Auto Highlight", - "version": "1.3.1", + "version": "1.4.0", "description": "*Auto Highlight* automatically highlights the important content on article pages.", "content_scripts": [ { "js": [ "src/ping.js" ], diff --git a/src/content.js b/src/content.js index 5a3dbe7..da78b63 100644 --- a/src/content.js +++ b/src/content.js @@ -17,11 +17,6 @@ chrome.runtime.sendMessage({message: "getOptions"}, function(response) { OPTIONS = response; }); -var COLOR_MAP = null; -chrome.runtime.sendMessage({message: "getSharedGlobals"}, function(response) { - COLOR_MAP = response['COLOR_MAP']; -}); - /*********************************** * Node Highlighting Functionality ***********************************/ @@ -1135,24 +1130,16 @@ var getHighlightState = function(callback) { }; // useful for debugging sentence boundary detection -// cycles in initialized on the first call to getNextColor. -// It's not initialized sooner since COLOR_MAP may not be set yet. -var cycles = []; var cycleCurColor = 0; var getNextColor = function() { - if (cycles.length === 0) { - Object.keys(COLOR_MAP).forEach(function(key) { - color_properties = COLOR_MAP[key]; - var highlightColor = color_properties[1]; - var textColor = color_properties[2]; - var linkColor = color_properties[3]; - var colorSpec = new ColorSpec(highlightColor, textColor, linkColor); - cycles.push(colorSpec); - }); - } - color = cycles[cycleCurColor]; - cycleCurColor = (cycleCurColor+1) % cycles.length; - return color; + var yellow = "#FFFF00"; + var pale_green = "#98FB98"; + var black = "#000000"; + var red = "#FF0000"; + var highlightColor = cycleCurColor === 0 ? yellow : pale_green; + var colorSpec = new ColorSpec(highlightColor, black, red); + cycleCurColor = (cycleCurColor+1) % 2; + return colorSpec; }; // hacky way to trim spaces if we're not highlighting the preceding @@ -1230,13 +1217,8 @@ var highlight = function(highlightState) { removeHighlight(); var scoredCandsToHighlight = cth(highlightState); trimSpaces(scoredCandsToHighlight); - - var color_id = OPTIONS.color; - var color_properties = COLOR_MAP[color_id]; - var highlightColor = color_properties[1]; - var textColor = color_properties[2]; - var linkColor = color_properties[3]; - var colorSpec = new ColorSpec(highlightColor, textColor, linkColor); + var colorSpec = new ColorSpec( + OPTIONS["highlight_color"], OPTIONS["text_color"], OPTIONS["link_color"]); // have to loop backwards since splitting text nodes for (var j = scoredCandsToHighlight.length-1; j >= 0; j--) { var candidate = scoredCandsToHighlight[j].candidate; diff --git a/src/eventPage.js b/src/eventPage.js index a51a7d9..c97fdbb 100644 --- a/src/eventPage.js +++ b/src/eventPage.js @@ -4,9 +4,6 @@ // * Utilities and Options // ***************************** -// TODO: can some of this utility functionality, particularly -// the code/data shared with content.js, be moved to utils.js? - var getVersion = function() { var version = chrome.runtime.getManifest().version; return version; @@ -20,23 +17,18 @@ var getOptions = function() { return opts; }; -// Maps color ID to a list of properties -// (name, background/highlight color, text color, link color) -var COLOR_MAP = { - 'yellow': ['Yellow', 'yellow', 'black', 'red'], - 'blue': ['Blue', 'skyblue', 'black', 'red'], - 'orange': ['Orange', 'sandybrown', 'black', 'red'], - 'green': ['Green', 'palegreen', 'black', 'red'], - 'pink': ['Pink', 'lightpink', 'black', 'red'] -}; - var defaultOptions = function() { var options = Object.create(null); - options['color'] = 'yellow'; + var yellow = "#FFFF00"; + var black = "#000000"; + var red = "#FF0000"; + options['highlight_color'] = yellow; + options['text_color'] = black; + options['link_color'] = red; return options; }; -// Set missing options using defaults +// Validate options (function() { var opts = getOptions(); if (!opts) { @@ -44,12 +36,24 @@ var defaultOptions = function() { } var defaults = defaultOptions(); + + // Set missing options using defaults. + + var default_keys = Object.keys(defaults); + for (var i = 0; i < default_keys.length; i++) { + var default_key = default_keys[i]; + if (!(default_key in opts)) { + opts[default_key] = defaults[default_key]; + } + } - var keys = Object.keys(defaults); - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; - if (!(key in opts)) { - opts[key] = defaults[key]; + // Remove unknown options (these may have been set + // by previous versions of the extension). + var opt_keys = Object.keys(opts); + for (var i = 0; i < opt_keys.length; i++) { + var opt_key = opt_keys[i]; + if (!(opt_key in defaults)) { + delete opts[opt_key]; } } @@ -148,11 +152,6 @@ chrome.runtime.onMessage.addListener(function(request, sender, response) { response(getOptions()); } else if (message === 'ping') { ping.add(tabId); - } else if (message === 'getSharedGlobals') { - sharedGlobals = { - 'COLOR_MAP': COLOR_MAP - }; - response(sharedGlobals); } // NOTE: if you're going to call response asynchronously, // be sure to return true from this function. diff --git a/src/options.html b/src/options.html index 882f7c7..280f49d 100644 --- a/src/options.html +++ b/src/options.html @@ -9,35 +9,12 @@ margin-right: auto; } -body { - margin-top: 20px; +p { + font-size: 16px; } -a.tooltip { - outline: none; - border-bottom: 1px dotted; -} -a.tooltip:hover { text-decoration: none; } -a.tooltip span { - z-index: 10; - display: none; - padding: 14px 20px; - margin-top: -30px; - margin-left: 14px; - width: auto; - max-width: 300px; - line-height: 16px; -} -a.tooltip:hover span { - display: inline; - position: absolute; - color: #111; - border: 1px solid #DCA; - background:#fffAF0; -} -a.tooltip span { - border-radius:4px; - box-shadow: 5px 5px 8px #CCC; +body { + margin-top: 20px; } @@ -48,11 +25,24 @@

Auto Highlight v

Options

- - - -

+ + + + + + + + + + + + + +
+

+Example text. +Example link. +



diff --git a/src/options.js b/src/options.js index 12491ef..aad7f90 100644 --- a/src/options.js +++ b/src/options.js @@ -14,37 +14,34 @@ var statusMessage = function(message, time) { var backgroundPage = chrome.extension.getBackgroundPage(); -var colorDropdown = document.getElementById("color-dropdown"); -(function() { - var color_map = backgroundPage.COLOR_MAP; - var color_ids = Object.keys(color_map); - // sort by name - color_ids.sort(function(a, b) { - _a = color_map[a][0]; // name - _b = color_map[b][0]; // name - return _a.localeCompare(_b); - }); - for (var i = 0; i < color_ids.length; ++i) { - var color_id = color_ids[i]; - var color_properties = color_map[color_id]; - var name = color_properties[0]; - var color = color_properties[1]; - var textcolor = color_properties[2]; - var option_element = document.createElement('option'); - option_element.value = color_id; - option_element.style = 'background: ' + color; - option_element.innerText = name; - colorDropdown.appendChild(option_element); - } -})(); +var highlightColorInput = document.getElementById("highlight-color"); +var textColorInput = document.getElementById("text-color"); +var linkColorInput = document.getElementById("link-color"); -var saveOptions = function() { +var exampleTextElement = document.getElementById("example-text"); +var exampleLinkElement = document.getElementById("example-link"); + +// Propagates and saves options. +var propagateOptions = function() { + highlightColor = highlightColorInput.value; + textColor = textColorInput.value; + linkColor = linkColorInput.value; + + // Update example text + exampleTextElement.style.backgroundColor = highlightColor; + exampleTextElement.style.color = textColor; + exampleLinkElement.style.backgroundColor = highlightColor; + exampleLinkElement.style.color = linkColor; + + // Save options var options = Object.create(null); - options['color'] = colorDropdown.value; + options['highlight_color'] = highlightColor; + options['text_color'] = textColor; + options['link_color'] = linkColor; localStorage["options"] = JSON.stringify(options); - // also let all tabs know of the new options + // Notify tabs of the options chrome.tabs.query({}, function(tabs) { for (var i = 0; i < tabs.length; i++) { var tab = tabs[i]; @@ -55,10 +52,12 @@ var saveOptions = function() { }; var loadOptions = function(opts) { - colorDropdown.value = opts['color']; + highlightColorInput.value = opts['highlight_color']; + textColorInput.value = opts['text_color']; + linkColorInput.value = opts['link_color']; // onchange/oninput won't fire when loading options with javascript, - // so trigger saveOptions manually - saveOptions(); + // so trigger handleChange manually. + propagateOptions(); }; var initOpts = JSON.parse(localStorage["options"]); @@ -75,15 +74,17 @@ document.getElementById('defaults').addEventListener('click', function() { statusMessage("Defaults Loaded", 1200); }); -// save options on any user input -(function() { - colorDropdown.addEventListener('change', saveOptions); -})(); - document.getElementById('revert').addEventListener('click', function() { loadOptions(initOpts); statusMessage("Options Reverted", 1200); }); +// save options on any user input +(function() { + highlightColorInput.addEventListener('change', propagateOptions); + textColorInput.addEventListener('change', propagateOptions); + linkColorInput.addEventListener('change', propagateOptions); +})(); + // version document.getElementById('version').innerText = backgroundPage.getVersion();