This commit is contained in:
Simon Redfern 2021-08-11 10:48:54 +02:00
commit 738ca48cf7
4 changed files with 68 additions and 22 deletions

View File

@ -6,20 +6,28 @@
<div class="api_list">
<div class="api-info-about">
<div class="info-box">
<a hidden id="expand_all_items_link" onclick="expandAllItems()"></a><!-- Unicode number: U+2BC8 -->
<a id="collapse_all_items_link" onclick="collapseAllItems()"></a><!-- Unicode number: U+2BC6 -->
</div>
<div class="info-box">
<h3 class="info-box__about_selected">Glossary Index</h3>
</div>
</div>
<div class="api-info-filter">
<input oninput="filterGlossary(this)" type="text" placeholder="Filter..">
</div>
<ul>
<li class="api_group_item">
<div class="api_group_name">OBP</div>
<ul>
<li class="api_list_item">
<a class="api_list_item_link" href="./#anchor">Title</a>
</li>
</ul>
<details open style="cursor:s-resize;" class="api_group_item_details">
<summary class="api_group_item_details_summary"><a class="api_group_name">OBP</a></summary>
<ul>
<li class="api_list_item">
<a onclick="setApiLisItemLinkToClicked(this)" class="api_list_item_link" href="./#anchor">Title</a>
</li>
</ul>
</details>
</li>
</ul>
</div>

View File

@ -29,15 +29,15 @@
<div class="api-info-about">
<div class="info-box">
<a hidden id="expand_all_endpoints_link" onclick="expandAllEndpoints()">&#11208;</a>
<a id="collapse_all_endpoints_link" onclick="collapseAllEndpoints()">&#11206;</a>
<a hidden id="expand_all_items_link" onclick="expandAllItems()"></a><!-- Unicode number: U+2BC8 -->
<a id="collapse_all_items_link" onclick="collapseAllItems()"></a><!-- Unicode number: U+2BC6 -->
</div>
<div class="info-box">
<h3 class="info-box__about_selected">API Explorer</h3>
</div>
</div>
<div class="api-info-search">
<input oninput="searchForEndpoints(this)" type="text" placeholder="Filter.." name="search">
<div class="api-info-filter">
<input oninput="filterEndpoints(this)" type="text" placeholder="Filter..">
</div>
<ul>

View File

@ -1748,7 +1748,7 @@ details > summary.api_group_item_details_summary{
cursor:s-resize;
}
.api-info-search input[type=text] {
.api-info-filter input[type=text] {
padding: 10px;
margin-bottom: 10px;
font-size: 17px;
@ -1757,7 +1757,7 @@ details > summary.api_group_item_details_summary{
background: #f1f1f1;
}
.api-info-search::after {
.api-info-filter::after {
content: "";
clear: both;
display: table;

View File

@ -126,28 +126,28 @@ function setApiLisItemLinkToClicked(element) {
}
function collapseAllEndpoints() {
function collapseAllItems() {
var coll = document.getElementsByClassName("api_group_item_details");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].removeAttribute("open");
};
document.getElementById("expand_all_endpoints_link").removeAttribute("hidden");
document.getElementById("collapse_all_endpoints_link").setAttribute("hidden", true);
document.getElementById("expand_all_items_link").removeAttribute("hidden");
document.getElementById("collapse_all_items_link").setAttribute("hidden", true);
}
function expandAllEndpoints() {
function expandAllItems() {
var coll = document.getElementsByClassName("api_group_item_details");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].setAttribute("open", true);
};
document.getElementById("expand_all_endpoints_link").setAttribute("hidden", true);
document.getElementById("collapse_all_endpoints_link").removeAttribute("hidden");
document.getElementById("expand_all_items_link").setAttribute("hidden", true);
document.getElementById("collapse_all_items_link").removeAttribute("hidden");
}
function searchForEndpoints(element) {
function filterEndpoints(element) {
var searchText = String(element.value).toLowerCase();
var coll = document.getElementsByClassName("api_group_item_details");
@ -158,8 +158,8 @@ function searchForEndpoints(element) {
coll[i].setAttribute("open", true);
coll[i].removeAttribute("hidden");
};
document.getElementById("expand_all_endpoints_link").setAttribute("hidden", true);
document.getElementById("collapse_all_endpoints_link").removeAttribute("hidden");
document.getElementById("expand_all_items_link").setAttribute("hidden", true);
document.getElementById("collapse_all_items_link").removeAttribute("hidden");
// Filter out the list of APIs in accordance to the search text
var endpoints = document.getElementsByClassName("api_list_item");
@ -184,3 +184,41 @@ function searchForEndpoints(element) {
if (emptyList) { coll[i].setAttribute("hidden", true); };
};
}
function filterGlossary(element) {
var filterText = String(element.value).toLowerCase();
var coll = document.getElementsByClassName("api_group_item_details");
var i;
// Show and open al top level headings
for (i = 0; i < coll.length; i++) {
coll[i].setAttribute("open", true);
coll[i].removeAttribute("hidden");
};
document.getElementById("expand_all_items_link").setAttribute("hidden", true);
document.getElementById("collapse_all_items_link").removeAttribute("hidden");
// Filter out the list of APIs in accordance to the search text
var endpoints = document.getElementsByClassName("api_list_item");
for (i = 0; i < endpoints.length; i++) {
var endpoint = endpoints[i].querySelector(".api_list_item_link");
if(String(endpoint.text).toLowerCase().includes(filterText)) {
endpoints[i].removeAttribute("hidden");
} else {
endpoints[i].setAttribute("hidden", true);
}
};
// Filter out all top level headings with empty list
for (i = 0; i < coll.length; i++) {
var groupEndpoints = coll[i].getElementsByClassName("api_list_item");
var j;
var emptyList = true;
for (j = 0; j < groupEndpoints.length; j++) {
var attribute = groupEndpoints[j].getAttribute("hidden");
if (attribute == false || attribute == null) { emptyList = false; };
};
if (emptyList) { coll[i].setAttribute("hidden", true); };
};
}