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, "<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));
}

View File

@ -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)
{
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)
function UpdateListByFilter()
{
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);
let new_hash = name;
if(active_hash.length > 0)
UpdateListByFilter();
}
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();
}

View File

@ -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 {