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>

64
static/index.js
View File

@ -1,48 +1,59 @@
let polishSchemas = null; $(document).ready(() => {
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();
}
}
});
let searchBar = $('#search-bar'); window.onhashchange = () => {
getWord();
};
searchBar.autocomplete({ let searchBar = $('#search-bar');
searchBar.autocomplete({
source: (request, response) => { source: (request, response) => {
$.ajax({ $.ajax({
url: '/langs/polish/words?like=' + request.term + '&limit=20&offset=0', url: '/langs/polish/words?like=' + request.term + '&limit=20&offset=0',
success: data => response(data) success: data => response(data)
}) })
} }
}); });
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) => {
e.preventDefault(); e.preventDefault();
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)
}) })
} }
function getCells(forms, tags) { function getCells(forms, tags) {
if(tags.length === 0) if(tags.length === 0)
return undefined; return undefined;
@ -58,9 +69,9 @@ function getCells(forms, tags) {
return undefined; return undefined;
return cells; return cells;
} }
function generateList(data) { function generateList(data) {
let html = '<ul>'; let html = '<ul>';
data.forEach(cell => data.forEach(cell =>
html += `<li><strong>${cell.form}</strong> - ${cell.tags.join(', ')}</li>` html += `<li><strong>${cell.form}</strong> - ${cell.tags.join(', ')}</li>`
@ -68,9 +79,9 @@ function generateList(data) {
html += '</ul>'; html += '</ul>';
return html; return html;
} }
function generateTable(schemas, pos, forms) { function generateTable(schemas, pos, forms) {
let schema = schemas.find(schema => schema.pos.includes(pos)); let schema = schemas.find(schema => schema.pos.includes(pos));
// No schema was provided by the server - fallback to a list // No schema was provided by the server - fallback to a list
@ -111,9 +122,9 @@ function generateTable(schemas, pos, forms) {
} }
return html; return html;
} }
function generateHtml(word, data) { function generateHtml(word, data) {
let html = ''; let html = '';
if(data.length === 0) { if(data.length === 0) {
@ -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];
} }
@ -180,8 +191,5 @@ function generateHtml(word, data) {
} }
return html; return html;
} }
$(document).ready(function() {
$('#search-bar').select();
}); });