Implement changes suggested in corollari#1

jorisrietveld · May 25, 2019 · 60b8696 · 60b8696
1 parent 2f35ac1
commit 60b8696
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 28 deletions.
diff --git a/extension/bg.js b/extension/bg.js
diff --git a/extension/icons/wasp128.png b/extension/icons/wasp128.png
diff --git a/extension/icons/wasp16.png b/extension/icons/wasp16.png
diff --git a/extension/icons/wasp24.png b/extension/icons/wasp24.png
diff --git a/extension/icons/wasp32.png b/extension/icons/wasp32.png
diff --git a/extension/icons/wasp48.png b/extension/icons/wasp48.png
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -19,6 +19,6 @@
 		"48": "icons/wasp48.png",
 		"128": "icons/wasp128.png"
 	},
-	"permissions": ["activeTab"]
-
+	"permissions": ["activeTab", "storage"],
+	"options_page": "options/index.html"
 }
diff --git a/extension/options/index.html b/extension/options/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>WaspLineReader Options</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+.vertical-center {
+  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
+  min-height: 100vh; /* These two lines are counted as one :-)       */
+
+  display: flex;
+  align-items: center;
+}
+</style>
+</head>
+<body>
+
+<div>
+<h4>Options</h4>
+<div>
+	<label for="gradientLength">Gradient length</label><br>
+	<input type="range" name="gradientLength" min="0" max="100" id="lengthSlider">
+	<input type="number" min="0" max="100" id="percentSlider" value="50">%
+	<p>All the settings are saved automatically when modified.<br>You can use this paragraph to test how modifying<br>the options affects the extension's behaviour.<br>Just change one of the options to see how it works.
+	</p> 
+</div>
+<br>
+<hr>
+<br>
+<strong>Issues and feature requests</strong>: Create a github issue at <a href="https://github.com/corollari/waspline-reader/issues">github.com/corollari/waspline-reader</a> or send an email to the developer (<a href="mailto:[email protected]">[email protected]</a>)
+</div>
+</div>
+
+<script src="./options.js" type="module"></script>
+<script src="../contentScript.js"></script>
+</body>
+</html>
diff --git a/extension/options/options.js b/extension/options/options.js
@@ -0,0 +1,12 @@
+let slider = document.querySelector("#lengthSlider");
+let numBox = document.querySelector("#percentSlider");
+slider.addEventListener("input", ()=>updateValue(slider.value));
+numBox.addEventListener("input", ()=>updateValue(numBox.value));
+chrome.storage.local.get(["GRADIENT_LENGTH_PERCENTAGE"], (result)=>updateValue((result["GRADIENT_LENGTH_PERCENTAGE"]||0.5)*100));
+
+function updateValue(value){
+	numBox.value=value;
+	slider.value=value;
+	chrome.storage.local.set({"GRADIENT_LENGTH_PERCENTAGE": value/100});
+	applyGradient(value/100);
+}
diff --git a/main.js b/main.js
@@ -1,32 +1,37 @@
-const GRADIENT_LENGTH_PERCENTAGE = 0.5;
-
-var ps = document.getElementsByTagName('p');
-for(let i=0; i<ps.length; i++){
-	var p = ps[i];
-	var lines = lineWrapDetector.getLines(p);
-	for(let j=0; j<lines.length; j++){
-		let line = lines[j];
-		let red = 0, blue = 0, green = 0;
-		for(let k=0; k<line.length; k++){
-			switch(j%4){
-				case 0: //Blue ending
-					blue = k>(line.length-1)*GRADIENT_LENGTH_PERCENTAGE ? getGradient(k, line.length) : 0;
-					break;
-				case 1: //Blue beginning
-					blue = k<(line.length-1)*GRADIENT_LENGTH_PERCENTAGE ? getGradient(k, line.length) : 0;
-					break;
-				case 2: //Red ending
-					red = k>(line.length-1)*GRADIENT_LENGTH_PERCENTAGE ? getGradient(k, line.length) : 0;
-					break;
-				case 3: //Red beginning
-					red = k<(line.length-1)*GRADIENT_LENGTH_PERCENTAGE ? getGradient(k, line.length) : 0;
-					break;
+function applyGradient(GRADIENT_LENGTH_PERCENTAGE){
+	var ps = document.getElementsByTagName('p');
+	for(let i=0; i<ps.length; i++){
+		var p = ps[i];
+		var lines = lineWrapDetector.getLines(p);
+		for(let j=0; j<lines.length; j++){
+			let line = lines[j];
+			let red = 0, blue = 0, green = 0;
+			for(let k=0; k<line.length; k++){
+				switch(j%4){
+					case 0: //Blue ending
+						blue = k>(line.length-1)*(1-GRADIENT_LENGTH_PERCENTAGE) ? getGradient(k, line.length) : 0;
+						break;
+					case 1: //Blue beginning
+						blue = k<(line.length-1)*GRADIENT_LENGTH_PERCENTAGE ? getGradient(k, line.length, true) : 0;
+						break;
+					case 2: //Red ending
+						red = k>(line.length-1)*(1-GRADIENT_LENGTH_PERCENTAGE) ? getGradient(k, line.length) : 0;
+						break;
+					case 3: //Red beginning
+						red = k<(line.length-1)*GRADIENT_LENGTH_PERCENTAGE ? getGradient(k, line.length, true) : 0;
+						break;
+				}
+				line[k].style.color="rgb("+red+","+green+","+blue+")";
 			}
-			line[k].style.color="rgb("+red+","+green+","+blue+")";
 		}
 	}
+	function getGradient(k, len, beginning){
+		return Math.round(Math.abs(255*((beginning?1:0)-(k-(len-1)*(1-GRADIENT_LENGTH_PERCENTAGE))/((len-1)*GRADIENT_LENGTH_PERCENTAGE))));
+	}
 }
 
-function getGradient(k, len){
-	return Math.round(Math.abs(255*(((k/(len-1))-GRADIENT_LENGTH_PERCENTAGE)/GRADIENT_LENGTH_PERCENTAGE)));
+try{
+	chrome.storage.local.get(["GRADIENT_LENGTH_PERCENTAGE"], (result)=>applyGradient(result["GRADIENT_LENGTH_PERCENTAGE"]||0.5));
+} catch(e){
+	applyGradient(0.5);
 }