Skip to content

Commit

Permalink
Added manual selection of colors.
Browse files Browse the repository at this point in the history
  • Loading branch information
@dstein64
dstein64 committed Mar 15, 2018
1 parent 19ae619 commit 0847482
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 120 deletions.
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
@@ -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" ],
Expand Down
38 changes: 10 additions & 28 deletions src/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
***********************************/
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down
49 changes: 24 additions & 25 deletions src/eventPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -20,36 +17,43 @@ 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) {
opts = Object.create(null);
}

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];
}
}

Expand Down Expand Up @@ -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.
Expand Down
54 changes: 22 additions & 32 deletions src/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

</style>
Expand All @@ -48,11 +25,24 @@
<div id="container">
<h3><em>Auto Highlight</em> v<span id="version"></span></h3>
<h2>Options</h2>
<label>Highlight Color</label>
<select id="color-dropdown">
</select>
<input type="color">
<br><br>
<table>
<tr>
<td><input type="color" id="highlight-color"></td>
<td><label for="highlight-color">Highlight Color</label></td>
</tr>
<tr>
<td><input type="color" id="text-color"></td>
<td><label for="text-color">Text Color</label></td>
</tr>
<tr>
<td><input type="color" id="link-color"></td>
<td><label for="link-color">Link Color</label></td>
</tr>
</table>
<p id="examples">
Example <span id="example-text">text</span>.
Example <a href="#" id="example-link">link</a>.
</p>
<button id="defaults">Defaults</button>
<button id="revert">Revert</button>
<br><br>
Expand Down
69 changes: 35 additions & 34 deletions src/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -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"]);
Expand All @@ -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();

0 comments on commit 0847482

Please sign in to comment.