kenkeiras/new-codigoparallevar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Show results on notes's search-box.

Browse Source
This commit is contained in:
Sergio Martínez Portela 2022-10-17 00:10:06 +02:00
parent a616d903fb
commit d81db05633
3 changed files with 93 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/generate.py
View File

@ -483,12 +483,12 @@ def as_document(html, title):
<body>
<nav>
<h1><a href="/">Código para llevar [Notes]</a></h1>
<input type="text" id="searchbox" disabled="true" placeholder="Search in notes (requires JS)" />
<input type="text" id="searchbox" disabled="true" placeholder="Search (requires JS)" />
</nav>
{html}
<script src="../static/search-box.js"></script>
<script tye="text/javascript">_codigoparallevar_enable_search_box('#searchbox', {{placeholder: 'Search in notes...'}})</script>
<script tye="text/javascript">_codigoparallevar_enable_search_box('#searchbox', {{placeholder: 'Search...'}})</script>
</body>
</html>
"""

27
static/search-box.js
View File

@ -34,6 +34,15 @@ function _codigoparallevar_enable_search_box(selector, options) {
element.onfocus = () => {
resultsBoxBackdrop.classList.remove('hidden');
innerSearchBox.focus();
const wasKeyDown = document.onkeydown;
document.onkeydown = (ev) => {
if (ev.key === 'Escape') {
resultsBoxBackdrop.classList.add('hidden');
document.onkeydown = wasKeyDown;
ev.stopPropagation();
}
};
};
const DEBOUNCE_TIME = 500; // Milliseconds
@ -62,7 +71,20 @@ function _codigoparallevar_enable_search_box(selector, options) {
return;
}
console.log('=>', body);
resultsList.innerHTML = '';
for (const note of body.results.notes) {
const resultCard = document.createElement('li');
const resultContents = document.createElement('a');
resultContents.setAttribute('href', './' + note.id + '.node.html');
const resultTitle = document.createElement('h2');
resultTitle.innerText = note.title;
resultContents.appendChild(resultTitle);
resultCard.appendChild(resultContents);
resultsList.appendChild(resultCard);
}
});
};
element.removeAttribute('disabled');
@ -75,3 +97,6 @@ function _codigoparallevar_enable_search_box(selector, options) {
};
}
// // TODO: Remove this when dev is done
// _codigoparallevar_enable_search_box('#searchbox', {placeholder: 'Search...'})
// document.querySelector('#searchbox').focus()

67
static/style.css
View File

@ -19,6 +19,8 @@ body nav h1 {
color: #000;
display: inline-block;
}
/* Search box */
body nav input {
background-color: transparent;
color: #000;
@ -27,10 +29,56 @@ body nav input {
}
.results-box-container {
z-index: 5;
position: absolute;
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.3);
top: 0;
left: 0;
}
.results-box-container.hidden {
display: none;
}
.results-box {
min-width: 50vw;
max-width: 90vw;
min-height: 20ex;
max-height: 90vh;
overflow: auto;
border-radius: 4px;
margin: 2rem auto;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25);
background-color: #fff;
}
.results-box-container .results-box input {
width: 90%;
margin: 0 auto;
padding-top: 2ex;
display: block;
background-color: transparent;
color: #000;
border: none;
border-bottom: 1px solid #444;
}
/* Search box results */
.results-box ul {
list-style: none;
padding: 0;
}
.results-box ul li {
padding: 0.25ex;
margin: 1ex;
border-radius: 4px;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25);
}
.results-box ul li h2 {
font-size: 125%;
padding: 1.25ex;
display: block;
margin: 0;
}
@font-face {
@ -239,7 +287,7 @@ tr.__table-separator {
color: #fafafe;
}
a {
color: #94dcff;
color: #00fdf2;
}
h1,h2,h3,h4,h5,h6 {
color: #f7da4a;
@ -264,6 +312,21 @@ tr.__table-separator {
color: #ddd;
border-bottom: 1px solid #888;
}
.results-box-container .results-box input {
color: #ddd;
border-bottom: 1px solid #888;
}
.results-box {
box-shadow: none;
background-color: #262826;
}
.results-box ul li {
background-color: #303330;
box-shadow: none;
}
.results-box ul li h2 {
color: white;
}
/* Code blocks */
pre {