Index page bug fixes and improvements

site/4ed_site_render_main.cpp

@@ -339,7 +339,7 @@ render_doc_cluster_to_html(Arena *scratch, Doc_Cluster *cluster,
             fprintf(file_index, "<h1>%.*s Index</h1>\n", string_expand(cluster->title));
             fprintf(file_index, "<div class=\"spacer\"></div>\n");
             
-            fprintf(file_index, "<input autofocus class=\"filter_box\" type=\"text\" id=\"search_input\" onkeyup=\"SearchKeyUp(event)\" onkeydown=\"SearchKeyDown(event)\""
+            fprintf(file_index, "<input autofocus class=\"filter_box\" type=\"text\" id=\"search_input\" oninput=\"SearchInput(event)\" onkeydown=\"SearchKeyDown(event)\""
                         "placeholder=\"Filter...\" title=\"Filter...\">");
     fprintf(file_index, "<div class=\"spacer\"></div>\n");
     
@@ -348,7 +348,7 @@ render_doc_cluster_to_html(Arena *scratch, Doc_Cluster *cluster,
     fprintf(file_index, "<ul class=\"docs_menu\" id=\"docs_menu\">\n");
     for (i32 i = 0; i < counter; i += 1){
         Doc_Page *node = ptrs[i];
-                fprintf(file_index, "<li><a onclick=\"UpdateActiveDoc(this.innerHTML)\" href=\"#%.*s\">%.*s</a></li>",
+                fprintf(file_index, "<li><a href=\"#%.*s\">%.*s</a></li>",
                 string_expand(node->name),
                 string_expand(node->name));
     }

site/static/docs/search.js

@@ -1,11 +1,22 @@
 const menu_id = "docs_menu";
 const filter_id = "search_input";
+var last_active_hash = "";
 
 window.onload = function()
 {
-	UpdateActiveDoc(window.location.hash.substr(1));
+	let new_hash = window.location.hash.substr(1);
+	UpdateActiveDoc(last_active_hash, new_hash);
+	last_active_hash = new_hash;
+	UpdateListByFilter();
 };
 
+window.onhashchange = function()
+{
+	let new_hash = window.location.hash.substr(1);
+	UpdateActiveDoc(last_active_hash, new_hash);
+	last_active_hash = new_hash;
+}
+
 function StringMatch4coderFuzzy(a, b)
 {
 	let match = true;
@@ -30,27 +41,7 @@ function StringMatch4coderFuzzy(a, b)
 	return match;
 }
 
-function SearchKeyDown(event)
+function UpdateListByFilter()
-{
-	if(event.keyCode == 13)
-	{
-		event.preventDefault();
-		let ul = document.getElementById(menu_id);
-		let li = ul.getElementsByTagName("li");
-
-		for (let i = 0; i < li.length; i++)
-		{
-			if(li[i].style.display == "")
-			{
-				UpdateActiveDoc(li[i].getElementsByTagName("a")[0].innerHTML);
-	    		window.location.hash = li[i].getElementsByTagName("a")[0].innerHTML;
-	    		break;
-			}
-		}
-	}
-}
-
-function SearchKeyUp(event)
 {
 	let ul = document.getElementById(menu_id);
 	let li = ul.getElementsByTagName("li");
@@ -77,14 +68,41 @@ function SearchKeyUp(event)
 	}
 }
 
-function UpdateActiveDoc(name)
+function SearchInput(event)
 {
-	let active_hash = window.location.hash.substr(1);
+	UpdateListByFilter();
-	let new_hash = name;
+}
-	if(active_hash.length > 0)
+
+function SearchKeyDown(event)
+{
+	if(event.keyCode == 13)
 	{
-		document.getElementById(active_hash).classList.add("hidden");
+		event.preventDefault();
+		let ul = document.getElementById(menu_id);
+		let li = ul.getElementsByTagName("li");
+
+		for (let i = 0; i < li.length; i++)
+		{
+			if(li[i].style.display == "")
+			{
+				let new_hash = li[i].getElementsByTagName("a")[0].innerHTML;
+				UpdateActiveDoc(last_active_hash, new_hash);
+	    		window.location.hash = new_hash;
+	    		break;
+			}
+		}
+	}
+}
+
+function UpdateActiveDoc(old_hash, new_hash)
+{
+	if(old_hash != null && old_hash != undefined && old_hash.length > 0)
+	{
+		document.getElementById(old_hash).classList.add("hidden");
+	}
+	if(new_hash != null && new_hash != undefined && new_hash.length > 0)
+	{
+		document.getElementById(new_hash).classList.remove("hidden");
 	}
-	document.getElementById(new_hash).classList.remove("hidden");
 	document.getElementById(filter_id).focus();
 }

site/static/docs/styles.css

@@ -138,14 +138,20 @@ table.normal td {
 }
 
 .sidebar {
-	position: absolute;
 	background: #0C0C0C;
 	border-right: 1px solid #90B080;
 	border-bottom: 1px solid #90B080;
-	width: 20rem;
+	width: 24rem;
 	padding: 2em 2em 2em 2em;
 	display: inline-block;
 	float: left;
+	position: fixed;
+	height: 100%;
+	overflow-y: scroll;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 .docs_menu {
@@ -190,9 +196,15 @@ table.normal td {
 	.sidebar {
 		position: relative;
 		width: calc(100% - 5em);
+		height: auto;
         display: block;
 		margin-bottom: 2em;
 		border: none;
+		box-sizing: content-box;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		-o-box-sizing: content-box;
+		overflow-y: auto;
 	}
 
 	.api_page_preview {