augusto
/
inflectived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Usability fixes

This commit is contained in:
Augusto Gunsch 2021-12-26 14:46:40 -03:00
parent ef4043b07c
commit 5a84789c7b
No known key found for this signature in database
GPG Key ID: F7EEFE29825C72DC
2 changed files with 174 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/index.html
View File

@ -16,7 +16,7 @@
<div class="containter" id="main"> <div class="containter" id="main">
<form class="sticky-top" id="search-form"> <form class="sticky-top" id="search-form">
<div class="ui-widget" id="search-widget"> <div class="ui-widget" id="search-widget">
<input id="search-bar" placeholder="Search..." type="text" autocorrect="off" autocapitalize="none"> <input id="search-bar" placeholder="Search..." type="text" autocorrect="off" autocapitalize="none" autofocus>
</div> </div>
<button type="submit" class="ui-button ui-widget ui-button-icon-only" id="search"> <button type="submit" class="ui-button ui-widget ui-button-icon-only" id="search">
<span class="ui-icon ui-icon-search"></span> <span class="ui-icon ui-icon-search"></span>

28
static/index.js
View File

@ -1,10 +1,20 @@
$(document).ready(() => {
let polishSchemas = null; let polishSchemas = null;
$.ajax({ $.ajax({
url: '/static/schemas/polish.json', url: '/static/schemas/polish.json',
success: data => polishSchemas = data success: data => {
polishSchemas = data
if(window.location.hash) {
getWord();
}
}
}); });
window.onhashchange = () => {
getWord();
};
let searchBar = $('#search-bar'); let searchBar = $('#search-bar');
searchBar.autocomplete({ searchBar.autocomplete({
@ -16,9 +26,8 @@ searchBar.autocomplete({
} }
}); });
let bar = $('#search-bar') $('#search-bar').on('focus', e => {
bar.click((e) => { setTimeout(() => e.currentTarget.select(), 100);
bar[0].select();
}); });
$('#search-form').on('submit', (e) => { $('#search-form').on('submit', (e) => {
@ -26,16 +35,18 @@ $('#search-form').on('submit', (e) => {
let word = e.target[0].value let word = e.target[0].value
getWord(word); window.location.hash = `#${word}`;
}); });
function getWord(word) { function getWord() {
let word = window.location.hash.replace('#', '');
$.ajax({ $.ajax({
url: '/langs/polish/words/' + word, url: '/langs/polish/words/' + word,
success: (data) => { success: (data) => {
$('#ajax-content').html(generateHtml(word, data)) $('#ajax-content').html(generateHtml(word, data))
searchBar.autocomplete('close'); searchBar.autocomplete('close');
window.scrollTo(0, 0);
}, },
error: err => console.error(err) error: err => console.error(err)
@ -145,7 +156,7 @@ function generateHtml(word, data) {
if('form_of' in sense) { if('form_of' in sense) {
let word = sense.form_of[0].word; let word = sense.form_of[0].word;
html += sense.glosses[0].replace(new RegExp(`of ${word}$`), ''); html += sense.glosses[0].replace(new RegExp(`of ${word}$`), '');
html += ` of <a href="#" class="link-primary" onclick="getWord('${word}')">${word}</a>`; html += ` of <a href="#${word}" class="link-primary">${word}</a>`;
} else { } else {
html += sense.glosses[0]; html += sense.glosses[0];
} }
@ -181,7 +192,4 @@ function generateHtml(word, data) {
return html; return html;
} }
$(document).ready(function() {
$('#search-bar').select();
}); });