Add support for keyboard navigation with shortcuts

picturelicious.sql

@@ -80,6 +80,7 @@ CREATE TABLE `pl_users` (
   `images` int(11) NOT NULL default '0',
   `avatar` varchar(255) collate utf8_unicode_ci NOT NULL,
   `website` varchar(255) collate utf8_unicode_ci NOT NULL,
+  `activateShortcuts` tinyint(1) NOT NULL default '0',
   `email` varchar(255) collate utf8_unicode_ci NOT NULL,
   PRIMARY KEY  (`id`)
 ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

picturelicious/lib/users.php

@@ -15,6 +15,7 @@ class User {
 	public $id = 0;
 	public $validationString = '';
 	public $admin = 0;
+    public $activateShortcuts = false;
 	public $website = 0;
 		
 	public function __construct() {
@@ -22,7 +23,7 @@ class User {
 	
 	public function validate( $id ) {
 		$u = DB::getRow( 
-			'SELECT id, name, admin, website FROM '.TABLE_USERS.' WHERE valid = 0 AND remember = :1', 
+			'SELECT id, name, admin, website, activateShortcuts FROM '.TABLE_USERS.' WHERE valid = 0 AND remember = :1',
 			$id
 		);
 		
@@ -38,6 +39,7 @@ class User {
 		$_SESSION['name'] = $this->name = $u['name'];
 		$_SESSION['admin'] = $this->admin = $u['admin'];
 		$_SESSION['website'] = $this->website = $u['website'];
+        $_SESSION['activateShortcuts'] = $this->activateShortcuts = $u['activateShortcuts'];
 
 		setcookie( Config::$rememberCookie, $id, time() + 3600 * 24 * 365, Config::$absolutePath );
 		
@@ -78,7 +80,7 @@ class User {
 		
 		if( isset($_POST['login']) ) { // post login
 			$u = DB::getRow(
-				'SELECT id, name, admin, website FROM '.TABLE_USERS.' WHERE name = :1 AND pass = :2 and valid = 1', 
+				'SELECT id, name, admin, website, activateShortcuts  FROM '.TABLE_USERS.' WHERE name = :1 AND pass = :2 and valid = 1',
 				$_POST['name'], md5($_POST['pass']) 
 			);
 			if( !empty($u) ) {
@@ -87,6 +89,7 @@ class User {
 				$_SESSION['name'] = $this->name = $u['name'];
 				$_SESSION['admin'] = $this->admin = $u['admin'];
 				$_SESSION['website'] = $this->website = $u['website'];
+                $_SESSION['activateShortcuts'] = $this->activateShortcuts = $u['activateShortcuts'];
 				
 				if( !empty($_POST['remember']) ) {
 					$r = md5(uniqid(rand()));
@@ -111,12 +114,13 @@ class User {
 				$this->name = $_SESSION['name'];
 				$this->admin = $_SESSION['admin'];
 				$this->website = $_SESSION['website'];
+                $this->activateShortcuts = $_SESSION['activateShortcuts'];
 			}
 		} 
 		
 		else if( !empty($_COOKIE[Config::$rememberCookie]) ) { // remember cookie found
 			$u = DB::getRow(
-				'SELECT id, name, admin, website FROM '.TABLE_USERS.' WHERE remember = :1', 
+				'SELECT id, name, admin, website, activateShortcuts FROM '.TABLE_USERS.' WHERE remember = :1',
 				$_COOKIE[Config::$rememberCookie]
 			);
 			if( !empty($u) ) {
@@ -126,6 +130,7 @@ class User {
 				$_SESSION['name'] = $this->name = $u['name'];
 				$_SESSION['admin'] = $this->admin = $u['admin'];
                 $_SESSION['website'] = $this->website = $u['website'];
+                $_SESSION['activateShortcuts'] = $this->activateShortcuts = $u['activateShortcuts'];
 				
 				// refresh for another year
 				setcookie( Config::$rememberCookie, $_COOKIE[Config::$rememberCookie], time() + 3600 * 24 * 365, Config::$absolutePath );
@@ -140,9 +145,11 @@ class User {
 	}
 	
 	public function profile( $localFile, &$messages ) {
-		$upd = array( 'website' => $_POST['website'] );
+		$upd = array(   'website' => $_POST['website'],
+                        'activateShortcuts' => $_POST['activateShortcuts']);
 		
 		$_SESSION['website'] = $_POST['website'];
+        $_SESSION['activateShortcuts'] = $_POST['activateShortcuts'];
 		
 		if( Config::$vbbIntegration['enabled'] ) { 
 			global $vbulletin;
@@ -262,6 +269,7 @@ class User {
 			'score' => 0,
 			'images' => 0,
 			'website' => '',
+            'activateShortcuts' => 0,
 			'avatar' => Config::$images['avatarsPath'].'default.png',
 			'remember' => $this->validationString,
 			'admin' => 0,

picturelicious/media/shortcuts.js.php

@@ -0,0 +1,17 @@
+<?php
+header( 'Content-type: text/javascript; charset=utf-8' );
+?>
+
+document.onkeydown=function(e){
+    var keyCode = e.keyCode || e.which;
+    var arrow = {left: 37, up: 38, right: 39, down: 40 };
+
+    switch(keyCode){
+        case arrow.left:
+            document.getElementById('prevBar').click();
+            break;
+        case arrow.right:
+            document.getElementById('nextBar').click();
+            break;
+    }
+}

picturelicious/templates/header.tpl.php

@@ -5,6 +5,7 @@
 	<link rel="stylesheet" type="text/css" href="<?php echo Config::$absolutePath; ?>media/styles.css" />
 	<link rel="icon" href="<?php echo Config::$absolutePath; ?>media/favicon.ico"/>
 	<script type="text/javascript" src="<?php echo Config::$absolutePath; ?>media/picturelicious.js"></script>
+    <?php if( $user->id && $user->activateShortcuts ){ ?><script type="text/javascript" src="<?php echo Config::$absolutePath; ?>media/shortcuts.js.php"></script><?php } ?>
 </head>
 <body>
 

picturelicious/templates/profile.tpl.php

@@ -17,7 +17,7 @@
 		<?php } ?>
 		
 		<dl class="form">
-			<dt>Passwort:</dt>
+			<dt>Password:</dt>
 			<dd>
 				<input type="password" name="cpass" /> (leave empty, if you don't want to change it)
 			</dd>
@@ -42,6 +42,12 @@
 				<input type="text" name="website" value="<?php echo htmlspecialchars( $user->website ); ?>"/>
 			</dd>
 
+            <dt>Navigation:</dt>
+            <dd>
+                <input class="check" type="checkbox" name="activateShortcuts" id="inputActivateShortcuts" value="1"<? if( $user->activateShortcuts == 1 ) { echo ' checked="checked"'; } ?> />
+                <label for="inputActivateShortcutsRemember">activate keyboard shortcuts(<?php echo $user->activateShortcuts ?>)</label>
+            </dd>
+			
 			<dt>Avatar:</dt>
 			<dd>
 				<input type="file" name="avatar" style="color: #000; background-color: #fff;"/><br/>