Index page bug fixes and improvements

master
Ryan Fleury 2019-12-18 08:40:02 -07:00
parent 4817510c5d
commit 63ec08150a
3 changed files with 62 additions and 32 deletions

View File

@ -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, "<h1>%.*s Index</h1>\n", string_expand(cluster->title));
fprintf(file_index, "<div class=\"spacer\"></div>\n"); 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...\">"); "placeholder=\"Filter...\" title=\"Filter...\">");
fprintf(file_index, "<div class=\"spacer\"></div>\n"); 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"); fprintf(file_index, "<ul class=\"docs_menu\" id=\"docs_menu\">\n");
for (i32 i = 0; i < counter; i += 1){ for (i32 i = 0; i < counter; i += 1){
Doc_Page *node = ptrs[i]; 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),
string_expand(node->name)); string_expand(node->name));
} }

View File

@ -1,11 +1,22 @@
const menu_id = "docs_menu"; const menu_id = "docs_menu";
const filter_id = "search_input"; const filter_id = "search_input";
var last_active_hash = "";
window.onload = function() 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) function StringMatch4coderFuzzy(a, b)
{ {
let match = true; let match = true;
@ -30,27 +41,7 @@ function StringMatch4coderFuzzy(a, b)
return match; 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 ul = document.getElementById(menu_id);
let li = ul.getElementsByTagName("li"); 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(); document.getElementById(filter_id).focus();
} }

View File

@ -138,14 +138,20 @@ table.normal td {
} }
.sidebar { .sidebar {
position: absolute;
background: #0C0C0C; background: #0C0C0C;
border-right: 1px solid #90B080; border-right: 1px solid #90B080;
border-bottom: 1px solid #90B080; border-bottom: 1px solid #90B080;
width: 20rem; width: 24rem;
padding: 2em 2em 2em 2em; padding: 2em 2em 2em 2em;
display: inline-block; display: inline-block;
float: left; 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 { .docs_menu {
@ -190,9 +196,15 @@ table.normal td {
.sidebar { .sidebar {
position: relative; position: relative;
width: calc(100% - 5em); width: calc(100% - 5em);
height: auto;
display: block; display: block;
margin-bottom: 2em; margin-bottom: 2em;
border: none; 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 { .api_page_preview {