From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 5 Mar 2014 17:12:42 +0000 (+0100)
Subject: ImageViewer: Fixed next/previous image // added keyboard controls
X-Git-Tag: 2.0.4~32^2~2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=77404ea98f42c4d49521db0eef5543d0638cbd7d;p=GitHub%2FWoltLab%2FWCF.git

ImageViewer: Fixed next/previous image // added keyboard controls
---

diff --git a/wcfsetup/install/files/js/WCF.ImageViewer.js b/wcfsetup/install/files/js/WCF.ImageViewer.js
index 54e9374f50..a5aac579c7 100644
--- a/wcfsetup/install/files/js/WCF.ImageViewer.js
+++ b/wcfsetup/install/files/js/WCF.ImageViewer.js
@@ -152,6 +152,12 @@ $.widget('ui.wcfImageViewer', {
 	 */
 	_disableSlideshow: false,
 	
+	/**
+	 * event namespace used to distinguish event handlers using $.proxy
+	 * @var	string
+	 */
+	_eventNamespace: '',
+	
 	/**
 	 * list of available images
 	 * @var	array<object>
@@ -266,6 +272,7 @@ $.widget('ui.wcfImageViewer', {
 		this._container = null;
 		this._didInit = false;
 		this._disableSlideshow = (this.element.data('disableSlideshow'));
+		this._eventNamespace = this.element.wcfIdentify();
 		this._images = [ ];
 		this._isOpen = false;
 		this._items = -1;
@@ -311,6 +318,8 @@ $.widget('ui.wcfImageViewer', {
 			}
 		}
 		
+		$(document).on('keydown.' + this._eventNamespace, $.proxy(this._keyDown, this));
+		
 		this._isOpen = true;
 		
 		WCF.System.DisableScrolling.disable();
@@ -335,6 +344,8 @@ $.widget('ui.wcfImageViewer', {
 			this._timer.stop();
 		}
 		
+		$(document).off('keydown.' + this._eventNamespace);
+		
 		this._isOpen = false;
 		
 		WCF.System.DisableScrolling.enable();
@@ -394,6 +405,65 @@ $.widget('ui.wcfImageViewer', {
 		return true;
 	},
 	
+	/**
+	 * Closes the slideshow on escape.
+	 * 
+	 * @param	object		event
+	 * @return	boolean
+	 */
+	_keyDown: function(event) {
+		switch (event.which) {
+			// close slideshow
+			case $.ui.keyCode.ESCAPE:
+				this.close();
+			break;
+			
+			// show previous image
+			case $.ui.keyCode.LEFT:
+				this._previousImage();
+			break;
+			
+			// show next image
+			case $.ui.keyCode.RIGHT:
+				this._nextImage();
+			break;
+			
+			// enable fullscreen mode
+			case $.ui.keyCode.UP:
+				if (!this._container.hasClass('maximized')) {
+					this._toggleView();
+				}
+			break;
+			
+			// disable fullscreen mode
+			case $.ui.keyCode.DOWN:
+				if (this._container.hasClass('maximized')) {
+					this._toggleView();
+				}
+			break;
+			
+			// jump to image page or full version
+			case $.ui.keyCode.ENTER:
+				var $link = this._ui.header.find('> div > h1 > a');
+				if ($link.length == 1) {
+					// forward to image page
+					window.location = $link.prop('href');
+				}
+				else {
+					// forward to full version
+					this._ui.slideshow.full.trigger('click');
+				}
+			break;
+			
+			// toggle play/pause (80 = [p])
+			case 80:
+				this._ui.slideshow.toggle.trigger('click');
+			break;
+		}
+		
+		return false;
+	},
+	
 	/**
 	 * Renders the image viewer UI.
 	 * 
@@ -590,7 +660,6 @@ $.widget('ui.wcfImageViewer', {
 		}
 		
 		var $left = Math.floor((containerDimensions.width - $width) / 2);
-		var $top = Math.floor((containerDimensions.height - $height) / 2);
 		
 		this._ui.images[targetIndex].css({
 			height: $height + 'px',
@@ -724,6 +793,8 @@ $.widget('ui.wcfImageViewer', {
 	 */
 	_nextImage: function(event) {
 		if (this._ui.slideshow.next.hasClass('pointer')) {
+			this._disableSlideshow = true;
+			
 			this.stopSlideshow(true);
 			this.showImage(this._active + 1);
 		}
@@ -736,6 +807,8 @@ $.widget('ui.wcfImageViewer', {
 	 */
 	_previousImage: function(event) {
 		if (this._ui.slideshow.previous.hasClass('pointer')) {
+			this._disableSlideshow = true;
+			
 			this.stopSlideshow(true);
 			this.showImage(this._active - 1);
 		}