More Changes

Find: Case Sensitive Toggle

index.html

@@ -103,7 +103,11 @@ <h3>Miscellaeous Actions</h3>
 				</div>
 			</form>
 		</div>
-		<form id="search"><input type="text" name="text"><button name="find">Find</button></form>
+		<form id="search">
+			<input type="text" name="text">
+			<input type="checkbox" name="case-sensitive" id="search-case-sensitive"><label for="search-case-sensitive">Match Case</label>
+			<button name="find">Find</button>
+		</form>
 		<footer>
 			<div id="info"><p id="path">Path</p><p id="message" data-status="">Message</p></div>
 		</footer>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "edit-virtual-hosts",
-	"version": "0.4.0",
+	"version": "0.4.1",
 	"description": "Edit Virtual Hosts",
 	"main": "main.js",
 	"repository": "https://github.com/manngo/edit-virtual-hosts",

scripts/edit-virtual-hosts.js

@@ -33,7 +33,7 @@
 //	Environment
 
 	var	form, controls, forms, buttons, footer, footerPath, footerMessage, files, tabs, server, test, searchForm, about, doShowAbout, popup=undefined,
-		searchData={string: '', fromIndex: 0};
+		searchData={string: '', fromIndex: 0, caseSensitive: false };
 	var platform=process.platform;
 	var os=require('os');
 	var hosts={
@@ -226,7 +226,7 @@
 		message(2);
 
 	if(DEVELOPMENT) {
-		buttons[5].click();
+		buttons[1].click();
 		controls.elements['server'].value='xampp';
 		controls.elements['server'].dispatchEvent(new Event('change'));
 		window.webContents.openDevTools();
@@ -388,20 +388,20 @@ console.log(204)
 		console.log(string);
 		searchData={
 			string,
-			fromIndex: searchForm.elements['text'].selectionStart
+			fromIndex: searchForm.elements['text'].selectionStart,
+			caseSenstive: searchForm.elements['case-sensitive'].checked
 		};
 		search();
 		searchForm.style.display='none';
 	}
 
-	function search() {
-		if(DEVELOPMENT) console.log(`finding ${searchData.string} …`);
-		searchData.fromIndex=jx.findInTextarea(searchData.string,forms[tab].elements['content'],searchData.fromIndex)+1;
+	function search() {				if(DEVELOPMENT) console.log(`finding ${searchData.string} …`);
+		searchData.fromIndex=jx.findInTextarea(searchData.string,forms[tab].elements['content'],searchData.fromIndex,searchData.caseSenstive)+1;
 	}
 
-	function find() {			if(DEVELOPMENT) console.log('find');
+	function find() {				if(DEVELOPMENT) console.log('find');
 		//	Show Search Form
-			searchForm.style.display='block';
+			searchForm.style.display='flex';
 //		searchData.fromIndex=document.activeElement.selectionStart||0;
 			searchForm.elements['text'].focus();
 			searchForm.elements['text'].select();
@@ -426,7 +426,8 @@ console.log(204)
 			case 'find':
 				searchData={
 					string: data,
-					fromIndex: 1
+					fromIndex: 1,
+					caseSensitive: false
 				};
 				search();
 				break;

scripts/utilities.js

@@ -332,10 +332,10 @@
 	jx.findInTextarea(string,textarea);
 	================================================ */
 
-	jx.findInTextarea=function(string,textarea,start) {
+	jx.findInTextarea=function(string,textarea,start,caseSensitive) {
 		if(!string || !textarea) return;
 		if(start===undefined) start=0;
-		var position=textarea.value.toLowerCase().indexOf(string.toLowerCase(),start);
+		var position = caseSensitive?textarea.value.indexOf(string,start):textarea.value.toLowerCase().indexOf(string.toLowerCase(),start);
 		// var position=textarea.value.search(new RegExp(string,'i'),start);
 		if(position>=0) {
 			textarea.selectionEnd = textarea.selectionStart = position;

styles/main.css

@@ -145,13 +145,17 @@
 		width: 8em;
 		color: #333;
 		text-shadow: 0 1px 0 white;
-qheight: 100%;
 
+		font-family: var(--sans-serif);
+		text-shadow: 0 1px 0 white;
+		font-size: .9rem;
 
-				font-family: var(--sans-serif);
-				text-shadow: 0 1px 0 white;
-				font-size: .9rem;
-
+		border: thin solid #ccc;
+		margin: .125rem;
+		background: #f8f8f8
+	}
+	form#controls>div#misc>select>option {
+		background-color: #eee;
 	}
 	form#qcontrols>div#misc>select:before {
 		content: "*";
@@ -160,6 +164,42 @@ qheight: 100%;
 		content: "qqqq";
 	}
 
+/*	Search
+	================================================ */
+
+	form#search {
+		display: none;
+		background-color: #f8f8f8;
+		padding: .25rem .25rem;
+		font-size: .8rem;
+	}
+	form#search input[name="text"] {
+		font-family: var(--monospace);
+		padding: .125em .5em .25em;
+		flex: 1;
+	}
+	form#search input[id="search-case-sensitive"] {
+		display: none;
+	}
+	form#search input[id="search-case-sensitive"]+label {
+		border: thin solid #ddd;
+		background: linear-gradient(to bottom, #f8f8f8, #eee);
+		box-shadow:
+			inset 1px 1px 1px white,
+			inset -1px -1px 1px #ddd
+			;
+		padding: .125em .5em .25em;
+		margin-right: 2em;
+	}
+	form#search input[id="search-case-sensitive"]:checked+label {
+		color: white;
+		border: thin solid #666;
+		background: linear-gradient(to bottom, #777, #666);
+		box-shadow:
+			inset 1px 1px 1px #666;
+	}
+
+
 /*	Footer
 	================================================ */
 
@@ -172,15 +212,6 @@ qheight: 100%;
 		display: flex;
 		flex-direction: column;
 	}
-	form#search {
-		display: none;
-		background-color: #f8f8f8;
-		padding: .5rem .5rem;
-	}
-	form#search input[name="text"] {
-		font-size: .9rem;
-		padding: .25em .5em .5em;
-	}
 	footer>div#info {
 		padding: 0;
 		display: flex;
@@ -222,6 +253,7 @@ qheight: 100%;
 		box-sizing: border-box;
 		overflow: auto;
 		white-space: nowrap;
+		resize: none;
 	}
 	form#hosts button[name="save"] {
 
@@ -230,9 +262,11 @@ qheight: 100%;
 
 	form textarea[name="content"],
 	div.line-numbers {
-		font-size: 1rem;
-		padding-top: 1rem;
-		resize: none;
+		font-family: var(--monospace);
+		font-size: .9rem;
+		padding-top: 1em;
+		padding-bottom: 1em;
+		line-height: 1.25;
 	}