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> <body>
<nav> <nav>
<h1><a href="/">Código para llevar [Notes]</a></h1> <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> </nav>
{html} {html}
<script src="../static/search-box.js"></script> <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> </body>
</html> </html>
""" """

27
static/search-box.js
View File

@ -34,6 +34,15 @@ function _codigoparallevar_enable_search_box(selector, options) {
element.onfocus = () => { element.onfocus = () => {
resultsBoxBackdrop.classList.remove('hidden'); resultsBoxBackdrop.classList.remove('hidden');
innerSearchBox.focus(); 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 const DEBOUNCE_TIME = 500; // Milliseconds
@ -62,7 +71,20 @@ function _codigoparallevar_enable_search_box(selector, options) {
return; 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'); 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; color: #000;
display: inline-block; display: inline-block;
} }
/* Search box */
body nav input { body nav input {
background-color: transparent; background-color: transparent;
color: #000; color: #000;
@ -27,10 +29,56 @@ body nav input {
} }
.results-box-container { .results-box-container {
z-index: 5; z-index: 5;
position: absolute; position: fixed;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(0,0,0,0.3); 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 { @font-face {
@ -239,7 +287,7 @@ tr.__table-separator {
color: #fafafe; color: #fafafe;
} }
a { a {
color: #94dcff; color: #00fdf2;
} }
h1,h2,h3,h4,h5,h6 { h1,h2,h3,h4,h5,h6 {
color: #f7da4a; color: #f7da4a;
@ -264,6 +312,21 @@ tr.__table-separator {
color: #ddd; color: #ddd;
border-bottom: 1px solid #888; 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 */ /* Code blocks */
pre { pre {