Update index.html

And96 · web-flow · commit 8c7c7761b758 · 2021-01-06T18:54:28.000+01:00
- Add color selection (WIP)
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
 	<title>Hello, world!</title>
 </head>
 
@@ -35,6 +36,19 @@ <h1>Lithium Ebook Highlighted Text Extractor</h1>
 				<div class="mb-3">
 					<button type="button" class="btn btn-outline-primary btn-block" onclick="process()">Process</button>
 					<button type="button" class="btn btn-outline-success btn-block" onclick="copy()">Copy to clipboard</button>
+					
+			
+					
+					<div class="btn-group">
+						<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+							Option: <span class="selection">Option 1</span><span class="caret"></span>
+						</button>
+						<ul class="dropdown-menu" id="color-dropdown">
+							<li><a class="dropdown-item" href="#">All colors</a></li>
+						</ul>
+					</div>
+						
+					
 				</div>
 			</div>
 		</div>
@@ -71,8 +85,6 @@ <h1>Lithium Ebook Highlighted Text Extractor</h1>
 			[String.raw `&#236;`, `i`],
 			[String.raw `&#8220;`, ``],
 			[String.raw `&#8221;`, ``],
-			[String.raw `&#236;`, ``],
-			[String.raw `&#236;`, ``],
 			[String.raw `  `, ` `],
 			[String.raw `  `, ` `],
 		];
@@ -86,6 +98,11 @@ <h1>Lithium Ebook Highlighted Text Extractor</h1>
 		selectField("output");
 	}
 	
+	$(".dropdown-menu ul li a").click(function(){
+		$(this).parents(".btn-group").find('.selection').text($(this).text());
+		$(this).parents(".btn-group").find('.selection').val($(this).text());
+	});
+	
 	document.getElementById('input-file').addEventListener('change', getFile)
 
 	function getFile(event) {
@@ -94,7 +111,10 @@ <h1>Lithium Ebook Highlighted Text Extractor</h1>
 			document.getElementById("input").value = " "
 			document.getElementById("output").value = " "
 			placeFileContent(document.getElementById('input'), input.files[0]);
-			selectField("input");
+			setTimeout(function(){ 
+				selectField("input");
+				setColorFromInput();
+			}, 500);
 		}
 	}
 
@@ -110,7 +130,7 @@ <h1>Lithium Ebook Highlighted Text Extractor</h1>
 			reader.onload = event => resolve(event.target.result)
 			reader.onerror = error => reject(error)
 			reader.readAsText(file)
-		})
+		})	
 	}
 	
 	function copy() {
@@ -125,6 +145,54 @@ <h1>Lithium Ebook Highlighted Text Extractor</h1>
 		field.setSelectionRange(0, 99999); /* For mobile devices */
 	}
 	
+	function addColorDropdownItem(changeColor, colorItem) {
+		var list = document.getElementById("color-dropdown");      
+        var li = document.createElement("li");
+        var link = document.createElement("a");    
+		link.className = "dropdown-item"
+		if (changeColor) {
+			link.setAttribute("style", "color: " + colorItem + " ");
+		}
+        var text = document.createTextNode(colorItem);
+		//alert(colorItem)
+        link.appendChild(text);
+        link.href = "#";
+        li.appendChild(link);
+        list.appendChild(li);
+	}
+	
+	function setColorFromInput() {
+		var colors = [];
+		let input = document.getElementById("input").value
+		input = input.replace(new RegExp(String.raw `^(?!<div class='color' style='background-color).+`, "mg"), ``);
+		input = input.replaceAll(String.raw `<div class='color' style='background-color: `,``)
+		input = input.replaceAll(String.raw `'></div>`,``)
+		input = input.replace(new RegExp(String.raw `^(?:[\t ]*(?:\r?\n|\r))+`, "mg"), ``);
+		var char = '\n';
+		var i = j = 0;
+		while ((j = input.indexOf(char, i)) !== -1) {
+			colors.push(input.substring(i, j).trim());
+			i = j + 1;
+		}
+		let colorsUniq = remove_duplicates(colors)
+		addColorDropdownItem(false,"All colors")
+		for (var i = 0; i < colorsUniq.length; i++){       
+			addColorDropdownItem(true,colorsUniq[i])
+		}
+	}
+	
+	function remove_duplicates(arr) {
+		var obj = {};
+		var ret_arr = [];
+		for (var i = 0; i < arr.length; i++) {
+			obj[arr[i]] = true;
+		}
+		for (var key in obj) {
+			ret_arr.push(key);
+		}
+		return ret_arr;
+	}
+	
 	</script>
 </body>
 
