From c670b85dafc039f47a1569eb14906169109b2403 Mon Sep 17 00:00:00 2001
From: Tobias Reich <tobias.reich.ich@gmail.com>
Date: Fri, 28 Nov 2014 23:21:32 +0100
Subject: [PATCH] Show medium in view.php when available #67

---
 dist/main.js             | Bin 170176 -> 170214 bytes
 dist/view.js             | Bin 97090 -> 97267 bytes
 src/scripts/view/main.js |  53 +++++++++++++++++++++++++++------------
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/dist/main.js b/dist/main.js
index be5a4eafe825a6cc9459d1764934c5fab095d09e..f1fa527549c7e9a064956712a0507d0cdce8d40e 100644
GIT binary patch
delta 84
zcmX@Gk?Yw;u7)j)b!YgK^YcnlD@uG*^Gfv+Q&P6iJ;T@{&XuO5qm*1yl%t(CUE~R4
ixr|<EUQ%XWibk|ja(-@ZVqS`NB1}c%_Kqiv7Fz&|aUdW7

delta 58
zcmV-A0LB02u?oPk3V^f$e$1C|ya5;lVPs?|mmtjn7?+^q0S1>V%K-|Pc)S4*x53N-
QP#2dd<N<28vE%_Yw8+O7?EnA(

diff --git a/dist/view.js b/dist/view.js
index 56fd4d9f8af25177a5826771fe593b850adc6762..c48dc1b20195c4d2521f51b684401a1c37fa8915 100644
GIT binary patch
delta 2299
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

delta 2150
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
TD|86B3&-FU^e{OF9hH9qh34kl

diff --git a/src/scripts/view/main.js b/src/scripts/view/main.js
index 644d6d1..bb44d33 100644
--- a/src/scripts/view/main.js
+++ b/src/scripts/view/main.js
@@ -39,32 +39,50 @@ key = function(e) {
 
 	var code = (e.keyCode ? e.keyCode : e.which);
 
-	if (code===27&&visibleInfobox()) {
+	if (code===27) {
 		hideInfobox();
 		e.preventDefault();
 	}
 
 }
 
-visibleInfobox = function() {
+getPhotoSize = function(photo) {
 
-	if (parseInt(infobox.css('right').replace('px', ''))<0)	return false;
-	else													return true;
+	// Size can be 'big', 'medium' or 'small'
+	// Default is big
+	// Small is centered in the middle of the screen
+	var size		= 'big',
+		scaled		= false,
+		hasMedium	= photo.medium!=='',
+		pixelRatio	= window.devicePixelRatio,
+		view		= {
+			width:	$(window).width()-60,
+			height:	$(window).height()-100
+		};
 
-}
+	// Detect if the photo will be shown scaled,
+	// because the screen size is smaller than the photo
+	if (photo.width>view.width||
+		photo.width>view.height) scaled = true;
 
-isPhotoSmall = function(photo) {
+	// Calculate pixel ratio of screen
+	if (pixelRatio!==undefined&&pixelRatio>1) {
+		view.width	= view.width * pixelRatio;
+		view.height	= view.height * pixelRatio;
+	}
 
-	var size = {
-		width:	false,
-		height:	false
-	};
+	// Medium available and
+	// Medium still bigger than screen
+	if (hasMedium===true&&
+		(1920>view.width&&1080>view.height)) size = 'medium';
 
-	if (photo.width<$(window).width()-60)		size.width = true;
-	if (photo.height<$(window).height()-100)	size.height = true;
+	// Photo not scaled
+	// Photo smaller then screen
+	if (scaled===false&&
+		(photo.width<view.width&&
+		photo.width<view.height)) size = 'small';
 
-	if (size.width&&size.height)	return true;
-	else							return false;
+	return size;
 
 }
 
@@ -88,14 +106,17 @@ loadPhotoInfo = function(photoID) {
 	var params = 'function=getPhoto&photoID=' + photoID + '&albumID=0&password=""';
 	$.ajax({type: 'POST', url: api_path, data: params, dataType: 'json', success: function(data) {
 
+		var size = getPhotoSize(data);
+
 		if (!data.title) data.title = 'Untitled';
 		document.title = 'Lychee - ' + data.title;
 		headerTitle.html(data.title);
 
 		imageview.attr('data-id', photoID);
 
-		if (isPhotoSmall(data))	imageview.html("<div id='image' class='small' style='background-image: url(" + data.url + "); width: " + data.width + "px; height: " + data.height + "px; margin-top: -" + parseInt((data.height/2)-20) + "px; margin-left: -" + data.width/2 + "px;'></div>");
-		else					imageview.html("<div id='image' style='background-image: url(" + data.url + ");'></div>");
+		if (size==='big')			imageview.html("<div id='image' style='background-image: url(" + data.url + ");'></div>");
+		else if (size==='medium')	imageview.html("<div id='image' style='background-image: url(" + data.medium + ");'></div>");
+		else						imageview.html("<div id='image' class='small' style='background-image: url(" + data.url + "); width: " + data.width + "px; height: " + data.height + "px; margin-top: -" + parseInt((data.height/2)-20) + "px; margin-left: -" + data.width/2 + "px;'></div>");
 
 		imageview
 			.removeClass('fadeOut')