Added keyboard shortcuts to top navigation

TODO

@@ -109,7 +109,6 @@ refactors:
 miscellaneous:
     - use 1 token for logins, so that session isn't killed
     - endless pager should include information about page number
-    - add hotkeys for focusing items in top navigation
     - add customizable favicon
     - add customizable logo
     - add log engine and log everything that should be logged

public_html/js/PresenterManager.js

@@ -36,6 +36,7 @@ App.PresenterManager = function(jQuery, topNavigationPresenter, keyboard) {
 		if (lastContentPresenter === null || lastContentPresenter.name !== presenter.name) {
 			keyboard.reset();
 			topNavigationPresenter.changeTitle(null);
+			topNavigationPresenter.focus();
 			presenter.init.call(presenter, args, contentPresenterLoaded);
 			lastContentPresenter = presenter;
 		} else if (lastContentPresenter.reinit) {

public_html/js/Presenters/TopNavigationPresenter.js

@@ -47,6 +47,13 @@ App.Presenters.TopNavigationPresenter = function(
 		$el.find('li.' + selectedElement).find('a').addClass('active');
 	}
 
+	function focus() {
+		var $tmp = jQuery('<a href="#"> </a>');
+		$el.prepend($tmp);
+		$tmp.focus();
+		$tmp.remove();
+	}
+
 	function getBaseTitle() {
 		return baseTitle;
 	}
@@ -63,6 +70,7 @@ App.Presenters.TopNavigationPresenter = function(
 		init: init,
 		render: render,
 		select: select,
+		focus: focus,
 		getBaseTitle: getBaseTitle,
 		changeTitle: changeTitle,
 	};

public_html/templates/top-navigation.tpl

@@ -1,35 +1,94 @@
 <ul>
 	<%
-		var links = [['home', '#/home', 'Home', 'fa-home']];
+		var links = [];
+		links.push({
+			target: '#/home',
+			title: 'Home',
+			icon: 'fa-home'});
+
 		if (canListPosts) {
-			links.push(['posts', '#/posts', 'Posts', 'fa-th']);
+			links.push({
+				target: '#/posts',
+				title: 'Posts',
+				icon: 'fa-th'});
+
 			if (canUploadPosts) {
-				links.push(['upload', '#/upload', 'Upload', 'fa-upload']);
+				links.push({
+					target: '#/upload',
+					title: 'Upload',
+					icon: 'fa-upload'});
 			}
-			links.push(['comments', '#/comments', 'Comments', 'fa-comments']);
+
+			links.push({
+				target: '#/comments',
+				title: 'Comments',
+				icon: 'fa-comments'});
 		}
+
 		if (canListTags) {
-			links.push(['tags', '#/tags', 'Tags', 'fa-tags']);
+			links.push({
+				target: '#/tags',
+				title: 'Tags',
+				icon: 'fa-tags'});
 		}
+
 		if (canListUsers) {
-			links.push(['users', '#/users', 'Users', 'fa-users']);
+			links.push({
+				target: '#/users',
+				title: 'Users',
+				icon: 'fa-users'});
 		}
+
 		if (!loggedIn) {
-			links.push(['login', '#/login', 'Login', 'fa-sign-in']);
-			links.push(['register', '#/register', 'Register', 'fa-file-text-o']);
+			links.push({
+				target: '#/login',
+				title: 'Login',
+				icon: 'fa-sign-in'});
+
+			links.push({
+				target: '#/register',
+				title: 'Register',
+				icon: 'fa-file-text-o'});
+
 		} else {
-			links.push(['my-account', '#/user/' + user.name, 'Account', 'fa-user']);
-			links.push(['logout', '#/logout', 'Logout', 'fa-sign-out']);
+			links.push({
+				className: 'my-account',
+				target: '#/user/' + user.name,
+				title: 'Account',
+				icon: 'fa-user'});
+
+			links.push({
+				target: '#/logout',
+				title: 'Logout',
+				icon: 'fa-sign-out'});
 		}
-		links.push(['help', '#/help', 'Help', 'fa-question-circle']);
+
+		links.push({
+			target: '#/help',
+			title: 'Help',
+			icon: 'fa-question-circle'});
+
+		var takenAccessKeys = [];
+		links = _.map(links, function(link) {
+			if (typeof(link.className) === 'undefined') {
+				link.className = link.title.toLowerCase();
+			}
+			if (typeof(link.accessKey) === 'undefined') {
+				var accessKey = link.title.substring(0, 1);
+				if (!_.contains(takenAccessKeys, accessKey)) {
+					link.accessKey = accessKey;
+					takenAccessKeys.push(accessKey);
+				}
+			}
+			return link;
+		});
 	%>
 
 	<% _.each(links, function(link) { %><!--
-		--><% var className = link[0], target=link[1], title=link[2], iconClassName=link[3] %><!--
-		--><li class="<%= className %>">
-			<a class="big-button" href="<%= target %>">
-				<i class="fa <%= iconClassName %>"></i><br/>
-				<%= title %>
+		--><li class="<%= link.className %>">
+			<a class="big-button" href="<%= link.target %>" <%= link.accessKey ? 'accessKey="' + link.accessKey + '"' : '' %>>
+				<i class="fa <%= link.icon %>"></i><br/>
+				<%= link.title %>
 			</a>
 		</li><!--
 	--><% }) %>