Usability fixes

static/index.html

@@ -16,7 +16,7 @@
 		<div class="containter" id="main">
 			<form class="sticky-top" id="search-form">
 				<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>
 				<button type="submit" class="ui-button ui-widget ui-button-icon-only" id="search">
 					<span class="ui-icon ui-icon-search"></span>

static/index.js

@@ -1,48 +1,59 @@
-let polishSchemas = null;
+$(document).ready(() => {
+    let polishSchemas = null;
 
-$.ajax({
+    $.ajax({
         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) => {
             $.ajax({
                 url: '/langs/polish/words?like=' + request.term + '&limit=20&offset=0',
                 success: data => response(data)
             })
         }
-});
+    });
 
-let bar = $('#search-bar')
-bar.click((e) => {
-    bar[0].select();
-});
+    $('#search-bar').on('focus', e => {
+        setTimeout(() => e.currentTarget.select(), 100);
+    });
 
-$('#search-form').on('submit', (e) => {
+    $('#search-form').on('submit', (e) => {
         e.preventDefault();
 
         let word = e.target[0].value
 
-    getWord(word);
-});
+        window.location.hash = `#${word}`;
+    });
 
-function getWord(word) {
+    function getWord() {
+        let word = window.location.hash.replace('#', '');
         $.ajax({
             url: '/langs/polish/words/' + word,
 
             success: (data) => {
                 $('#ajax-content').html(generateHtml(word, data))
                 searchBar.autocomplete('close');
+                window.scrollTo(0, 0);
             },
 
             error: err => console.error(err)
         })
-}
+    }
 
-function getCells(forms, tags) {
+    function getCells(forms, tags) {
         if(tags.length === 0)
             return undefined;
 
@@ -58,9 +69,9 @@ function getCells(forms, tags) {
             return undefined;
 
         return cells;
-}
+    }
 
-function generateList(data) {
+    function generateList(data) {
         let html = '<ul>';
         data.forEach(cell =>
             html += `<li><strong>${cell.form}</strong> - ${cell.tags.join(', ')}</li>`
@@ -68,9 +79,9 @@ function generateList(data) {
         html += '</ul>';
 
         return html;
-}
+    }
 
-function generateTable(schemas, pos, forms) {
+    function generateTable(schemas, pos, forms) {
         let schema = schemas.find(schema => schema.pos.includes(pos));
 
         // No schema was provided by the server - fallback to a list
@@ -111,9 +122,9 @@ function generateTable(schemas, pos, forms) {
         }
 
         return html;
-}
+    }
 
-function generateHtml(word, data) {
+    function generateHtml(word, data) {
         let html = '';
 
         if(data.length === 0) {
@@ -145,7 +156,7 @@ function generateHtml(word, data) {
                         if('form_of' in sense) {
                             let word = sense.form_of[0].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 {
                             html += sense.glosses[0];
                         }
@@ -180,8 +191,5 @@ function generateHtml(word, data) {
         }
 
         return html;
-}
-
-$(document).ready(function() {
-    $('#search-bar').select();
+    }
 });