extern/the-glorious-startpage
1
0
Fork 1
mirror of https://github.com/manilarome/the-glorious-startpage.git synced 2024-11-27 10:03:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

input events and ui consistency

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-06 10:35:54 +08:00
parent b52d86b0e2
commit a43fe216e3
3 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/search-box.css
View File

@ -2,7 +2,7 @@
width: 100%;
height: auto;
top: 60%;
top: 40%;
opacity: 0;
position: absolute;
@ -45,7 +45,7 @@
.showSearchBox {
opacity: 1 !important;
top: 90% !important;
top: 70% !important;
pointer-events: initial !important;
}
@ -56,7 +56,7 @@
.showSearchBox {
opacity: 1 !important;
top: 70% !important;
top: 65% !important;
pointer-events: initial !important;
}
}

17
css/suggestions.css
View File

@ -51,8 +51,12 @@
height: auto;
/*Always center horizontally*/
display: table-cell;
width: auto;
/*display: table-cell;*/
/*width: auto;*/
/*text-align: center;*/
display: inline-flex;
width: 100%;
text-align: center;
}
@ -81,4 +85,13 @@
.phraseButton:active {
background: var(--base-active-bg);
}
@media screen and (max-width: 580px) {
/*The Li*/
#phrase {
display: inline-flex !important;
width: 100% !important;
text-align: center !important;
}
}

24
js/auto-suggest.js
View File

@ -2,10 +2,10 @@ var searchBox = document.getElementById('searchBox');
var suggestionsUL = document.getElementById('suggestions');
var suggestionsContainer = document.getElementById('suggestionsContainer');
// Create input events
const phraseEvents = button => {
// Update searchbox on enter key
const phraseButtonCallback = button => {
// Update searchbox on enter key and mouse click
button.onkeyup = event => {
if (event.key === 'Enter') {
@ -13,15 +13,25 @@ const phraseButtonCallback = button => {
searchBox.value = button.innerText;
searchBox.focus();
} else if (event.key === 'Backspace') {
searchBox.focus();
}
}
// Onmouseup event
button.onmouseup = event => {
searchBox.value = button.innerText;
searchBox.focus();
}
}
// Generate and parse suggestions
const autocompleteCallback = phrase => {
// Filter/parse the object
var suggestion = phrase.map(i => i.phrase)
.filter(s => !(s.toLowerCase() === String(searchBox.value).toLowerCase()))
.slice(0, 4);
@ -33,6 +43,7 @@ const autocompleteCallback = phrase => {
// Generate list elements
for (i = 0; i < (suggestion.length); i++) {
// Create html elements
var li = document.createElement('li');
li.id = 'phrase';
@ -41,8 +52,12 @@ const autocompleteCallback = phrase => {
button.className = 'phraseButton';
button.innerHTML = suggestion[i];
phraseButtonCallback(button);
// Create input events
phraseEvents(button);
// Appent to ul
li.appendChild(button);
suggestionsUL.appendChild(li);
}
@ -64,6 +79,7 @@ searchBox.onkeyup = event => {
return;
}
// Fetch from duckduckgo
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "https://duckduckgo.com/ac/?callback=autocompleteCallback&q="+String(searchBox.value);