Usability fixes
This commit is contained in:
parent
ef4043b07c
commit
5a84789c7b
|
@ -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>
|
||||||
|
|
|
@ -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();
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue