Scrolling

fishythefish · Feb 23, 2014 · a7ec074 · a7ec074
1 parent 4369dad
commit a7ec074
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 67 deletions.
diff --git a/css/options.css b/css/options.css
diff --git a/css/popup.css b/css/popup.css
@@ -1,8 +1,16 @@
 body {
 	width: 768px;
 	background-color: #333;
-	overflow-x: hidden;
-	-ms-overflow-x: hidden;
+	padding: 0;
+}
+
+#topbar {
+	width: inherit;
+	height: 30px;
+	position: fixed;
+	top: 0;
+	margin: 0;
+	background-color: inherit;
 }
 
 #searchbar {
@@ -12,21 +20,45 @@ body {
 	font-size: 20px;
 	background-color: inherit;
 	color: #3CF;
+	position: fixed;
+	top: 10px;
 }
 
 #searchresults {
 	width: inherit;
 	font-size: 20px;
+	margin: 45px 0 0 0;
 }
 
 .result {
+	background-color: inherit;
 	font-family: "Helvetica", sans-serif;
 	border-width: 1px;
 	border-style: none none dotted none;
 	border-color: #3CF;
 	color: #CCC;
+	clear: both;
 }
 
 .match {
 	color: #3CF;
+}
+
+.result p {
+	background-color: inherit;
+}
+
+.alignleft {
+	margin: 5px;
+	float: left;
+}
+
+.alignright {
+	margin: 5px;
+	float: right;
+	color: #999;
+}
+
+.highlight {
+	color: #FFF;
 }
diff --git a/default.bartender b/default.bartender
diff --git a/html/options.html b/html/options.html
diff --git a/html/popup.html b/html/popup.html
@@ -6,6 +6,7 @@
 		<script src="/js/popup.js"></script>
 	</head>
 	<body>
+		<div id="topbar"></div>
 		<input id="searchbar"
 			type="text"
 			autocomplete="on"

diff --git a/js/options.js b/js/options.js
diff --git a/js/popup.js b/js/popup.js
@@ -3,32 +3,79 @@ $(document).ready(function()
 	var $searchbar = $("#searchbar");
 	var $searchresults = $("#searchresults");
 
-	var results = ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta', 'eta',
-		'theta', 'iota', 'kappa', 'lambda', 'mu', 'nu', 'xi', 'omicron', 'pi',
-		'rho', 'sigma', 'tau', 'upsilon', 'phi', 'chi', 'psi', 'omega'];
+	var results = {
+		"New: New tab": "(Ctrl+T)",
+		"New: New window": "(Ctrl+N)",
+		"New: New incognito window": "(Ctrl+Shift+N)",
+		"Open: Open home page": "(Alt+Home)",
+		"Open: Open last tab": "(Ctrl+Shift+T)",
+		"Open: Open recent tab": "",
+		"Open: Open URL": "",
+		"Close: Close tab": "(Ctrl+W)",
+		"Close: Exit": "(Ctrl+Shift+Q)",
+		"Switch to tab": "",
+		"Reload: Reload page": "(F5)",
+		"Reload: Reload page uncached": "(Ctrl+F5)",
+		"Bookmarks: Show bookmarks bar": "(Ctrl+Shift+B)",
+		"Bookmarks: Bookmark manager": "(Ctrl+Shift+O)",
+		"Bookmarks: Import bookmarks and settings": "",
+		"Bookmarks: Bookmark this page": "(Ctrl+D)",
+		"Bookmarks: Bookmark open pages": "(Ctrl+Shift+D)",
+		"Bookmarks: Unbookmark this page": "",
+		"File: Save": "(Ctrl+S)",
+		"File: Open": "(Ctrl+O)",
+		"File: Find": "(Ctrl+F)",
+		"File: Print": "(Ctrl+P)",
+		"Tools: Extensions": "",
+		"Tools: Task manager": "(Shift+Esc)",
+		"Tools: Clear browsing data": "(Ctrl+Shift+Del)",
+		"Tools: Report an issue": "(Alt+Shift+I)",
+		"Tools: View source": "(Ctrl+U)",
+		"Tools: Developer tools": "(Ctrl+Shift+I)",
+		"Tools: JavaScript console": "(Ctrl+Shift+J)",
+		"Tools: Inspect devices": "",
+		"Tools: History": "(Ctrl+H)",
+		"Tools: Downloads": "(Ctrl+J)",
+		"Tools: Settings": "",
+		"Tools: About Google Chrome": "",
+		"Tools: Help": ""
+	};
 
-	updateresults(results, "");
+	addresults(results);
 
-	$searchbar.on("input", function()
-	{
-		var text = $searchbar.val();
+	var selected = 1;
+	var resultlength = Object.keys(results).length;
 
-		/*function validate(value, index, array)
+	$searchbar.on("keydown", function(e)
+	{
+		switch (e.keyCode)
 		{
-			var pattern = /[\w ():-]/gi;
-			var check = pattern.test(value);
-			return check;
+			case 13:
+
+			case 38:
+				--selected;
+				break;
+			case 40:
+				++selected;
+				break;
+			default: break;
 		}
+		selected %= resultlength;
+		if (selected <= 0) selected += resultlength;
+		sethighlight(selected);
+	});
 
+	$searchbar.on("input", function()
+	{
 		var text = $searchbar.val();
-		var filtered = [].filter.call(text, validate).join("");
-		$searchbar.val(filtered);*/
+
 		updateresults(results, text.split(""));
 	});
 
 	function updateresults(results, chars)
 	{
 		$searchresults.empty();
+		resultlength = 0;
 
 		if (chars.length === 0)
 		{
@@ -44,17 +91,22 @@ $(document).ready(function()
 			}
 			patternstring += "(.*)";
 			var pattern = new RegExp(patternstring, "i");
-			for (var i in results)
+			for (var result in results)
 			{
-				var result = results[i];
 				var matches = pattern.exec(result);
 				if (!matches) continue;
-				var divcontents = "";
+				++resultlength;
+				var divcontents = "<p class='alignleft'>";
 				for (var j = 1; j < matches.length - 2; j += 2)
 				{
 					divcontents += matches[j] + "<span class='match'>" + matches[j + 1] + "</span>";
 				}
 				divcontents += matches[j];
+				divcontents += "</p>";
+				if (results[result].length !== 0)
+				{
+					divcontents += "<p class='alignright'>" + results[result] + "</p>";
+				}
 				$searchresults.append("<div class='result'>" + divcontents + "</div>");
 			}
 		}
@@ -65,16 +117,43 @@ $(document).ready(function()
 		}
 		else
 		{
+			selected = 1;
+			sethighlight(selected);
 			$searchresults.show();
 		}
 	}
 
 	function addresults(results)
 	{
-		for (var i in results)
+		resultlength = Object.keys(results).length;
+		for (var result in results)
 		{
-			var result = results[i];
-			$searchresults.append("<div class='result'>" + result + "</div>");
+			var divcontents = "<p class='alignleft'>" + result + "</p>";
+			if (results[result].length !== 0)
+			{
+				divcontents += "<p class='alignright'>" + results[result] + "</p>";
+			}
+			$searchresults.append("<div class='result'>" + divcontents + "</div>");
 		}
+
+		if ($searchresults.is(":empty"))
+		{
+			$searchresults.hide();
+		}
+		else
+		{
+			selected = 1;
+			sethighlight(selected);
+			$searchresults.show();
+		}
+	}
+
+	function sethighlight(index)
+	{
+		$searchresults.children().removeClass("highlight");
+		$searchresults.children(":nth-child(" + index + ")").addClass("highlight");
+
+		var scrollpos = (selected - 1) * 34;
+		window.scrollTo(0, scrollpos);
 	}
 });
diff --git a/manifest.json b/manifest.json
@@ -35,7 +35,6 @@
 	// },
 	"incognito": "split",
 	"offline_enabled": true,
-	"options_page": "/html/options.html",
 	"permissions": [
 		"bookmarks",
 		"browsingData",