improve search UX

This commit is contained in:
Pim Snel 2022-01-06 19:17:53 +01:00
parent 66c6e88f0c
commit 0fdd65d660
7 changed files with 79 additions and 31 deletions

27
CHANGELOG.md Normal file
View File

@ -0,0 +1,27 @@
# CHANGELOG
## Version 1.1
- [x] hover plus handicon row
- [x] search improvements
- [x] allow enter
- [x] read url query string
## Version 1
- [x] finish nokogiri
- [x] write to json
- [x] make search front end
- [x] write last updated
- [x] reference to home manager and appendix page
- [x] github actions
- [x] bug <name> filtered out
- [x] improve style
- [x] cleanup/reorganize
- [x] logo
- [x] footer/header like the NUR
- [x] stats
- [x] onclick show complete listing

View File

@ -4,31 +4,10 @@ Find home manager options quickly.
## TODO
### Version 1
- [x] finish nokogiri
- [x] write to json
- [x] make search front end
- [x] write last updated
- [x] reference to home manager and appendix page
- [x] github actions
- [x] run
- [x] commit
- [x] bug <name> filtered out
- [x] improve style
- [x] cleanup/reorganize
- [x] logo
- [x] footer/header like the NUR
- [x] stats
- [x] onclick show complete listing
### Next version
- [ ] preserve links in declared_by
- [ ] search improvements
- [ ] no results when nothing entered
- [ ] allow enter
- [ ] read url query string
- [ ] preserve links in declared_by
- [ ] github action parser working?
## Contribute

View File

@ -12,3 +12,11 @@ mark {
table tr td {
overflow-wrap: break-word !important;
}
table tr.optrow:hover {
background-color: #e9e9e9 !important;
}
table tr.optrow {
cursor: pointer;
}

File diff suppressed because one or more lines are too long

View File

@ -24,7 +24,7 @@
<link rel="stylesheet" href="css/style.css">
<script async defer data-website-id="d3180f83-7b82-4f8b-8904-6ccefbc34e37" src="https://umami.poppygo.io/umami.js"></script>
</head>
<body>
<body onload="docOnload();">
<header>
<div class="logo">
@ -89,7 +89,7 @@
</select>
</li>
<form>
<form method="get" action="?" onSubmit="searchEnter()">
<div class="form-group">
<label for="searchInput">
Filter text
@ -137,7 +137,7 @@
</div>
</footer>
<script type="text/javascript" src="https://rawgit.com/kristopolous/Porter-Stemmer/master/PorterStemmer1980.min.js"></script>
<!--<script type="text/javascript" src="https://rawgit.com/kristopolous/Porter-Stemmer/master/PorterStemmer1980.min.js"></script>-->
<script type="text/javascript" src="https://unpkg.com/js-search@1.3.7/dist/umd/js-search.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>

View File

@ -12,6 +12,32 @@ var rebuildAndRerunSearch = function() {
searchOptions();
};
var searchEnter = function() {
event.preventDefault();
console.log(window.location.href);
if(searchInput.value !== ""){
newurl = window.location.href.split('?')[0]+"?"+searchInput.value;
console.log(newurl);
window.location.href = encodeURI(newurl);
}
}
var docOnload = function(){
var queryString = "";
if(window.location.href.includes("?")){
queryString = decodeURI(window.location.href.split('?')[1]);
searchInput.value = queryString;
}
if(queryString!==""){
searchOptions();
}
}
indexOnDescriptionCheckbox.onchange = rebuildAndRerunSearch;
indexOnTitleCheckbox.onchange = rebuildAndRerunSearch;
indexStrategySelect.onchange = rebuildAndRerunSearch;
@ -66,6 +92,11 @@ var updateOptionsTable = function(options) {
att.value = "expandOption("+i+")";
tableRow.setAttributeNode(att);
var att1 = document.createAttribute("class");
att1.value = "optrow";
tableRow.setAttributeNode(att1);
var att2 = document.createAttribute("style");
att2.value = "overflow-wrap: break-word";
titleColumn.setAttributeNode(att2);
@ -90,7 +121,6 @@ var expandOption = function(el){
var declared_by_str = String(currentSet[el].declared_by).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/\n/g, '<br>');
var elDeclaredBy = "<h5 style='margin:1em 0 0 0'>Declared by</h5><div>" + declared_by_str+ "</div>";
modalBody.innerHTML = elDesc + elNote + elType + elDefault + elExample + elDeclaredBy;
@ -135,6 +165,7 @@ xmlhttp.onreadystatechange = function() {
allOptions = json.options;
lastUpdate = json.last_update;
updateLastUpdate(lastUpdate);
updateOptionCount(allOptions.length);
@ -143,8 +174,9 @@ xmlhttp.onreadystatechange = function() {
showElement(indexedOptionsTable);
rebuildSearchIndex();
updateOptionsTable(allOptions);
updateLastUpdate(lastUpdate);
if(searchInput.value ==""){
updateOptionsTable(allOptions);
}
}
}
xmlhttp.open('GET', 'data/options.json', true);

View File

@ -52,7 +52,7 @@ data.search('dt').each do |dt|
end
# print "---------------------------------------\n"
print "TITLE:\n#{option_title}\n\n"
# print "TITLE:\n#{option_title}\n\n"
# print "DESC:\n#{option_desc}\n\n"
# print "NOTE:\n#{option_note}\n\n" if option_note != ""
# print "TYPE:\n#{option_type}\n\n"
@ -83,3 +83,5 @@ outobj["options"] = outarr
File.open("data/options.json","w") do |f|
f.write(outobj.to_json)
end
print "Finished parsing home manager options."