From 860b7c36ecc97f4e33abfb68790a66dd8f24532d Mon Sep 17 00:00:00 2001
From: Robin Appelman <icewind@owncloud.com>
Date: Mon, 4 Jul 2016 12:02:07 +0200
Subject: [PATCH 1/4] Factor out handling sidebar previews

---
 apps/files/js/mainfileinfodetailview.js      |  88 ++--------------
 apps/files/js/sidebarpreviewmanager.js       | 105 +++++++++++++++++++
 apps/files/lib/Controller/ViewController.php |   1 +
 3 files changed, 113 insertions(+), 81 deletions(-)
 create mode 100644 apps/files/js/sidebarpreviewmanager.js

diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index c586135b9c..30b2b531df 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -57,6 +57,11 @@
 		 */
 		_fileActions: null,
 
+		/**
+		 * @type {OCA.Files.SidebarPreviewManager}
+		 */
+		_previewManager: null,
+
 		events: {
 			'click a.action-favorite': '_onClickFavorite',
 			'click a.action-default': '_onClickDefaultAction',
@@ -81,6 +86,7 @@
 			if (!this._fileActions) {
 				throw 'Missing required parameter "fileActions"';
 			}
+			this._previewManager = new OCA.Files.SidebarPreviewManager(this._fileList);
 		},
 
 		_onClickPermalink: function() {
@@ -158,7 +164,7 @@
 				var $container = this.$el.find('.thumbnailContainer');
 				if (!this.model.isDirectory()) {
 					$iconDiv.addClass('icon-loading icon-32');
-					this.loadPreview(this.model.getFullPath(), this.model.get('mimetype'), this.model.get('etag'), $iconDiv, $container, this.model.isImage());
+					this._previewManager.loadPreview(this.model, $iconDiv, $container);
 				} else {
 					var iconUrl = this.model.get('icon') || OC.MimeType.getIconUrl('dir');
 					$iconDiv.css('background-image', 'url("' + iconUrl + '")');
@@ -169,86 +175,6 @@
 				this.$el.empty();
 			}
 			this.delegateEvents();
-		},
-
-		loadPreview: function(path, mime, etag, $iconDiv, $container, isImage) {
-			var maxImageWidth  = $container.parent().width() + 50;  // 50px for negative margins
-			var maxImageHeight = maxImageWidth / (16/9);
-			var smallPreviewSize = 75;
-
-			var isLandscape = function(img) {
-				return img.width > (img.height * 1.2);
-			};
-
-			var isSmall = function(img) {
-				return (img.width * 1.1) < (maxImageWidth * window.devicePixelRatio);
-			};
-
-			var getTargetHeight = function(img) {
-				if(isImage) {
-					var targetHeight = img.height / window.devicePixelRatio;
-					if (targetHeight <= smallPreviewSize) {
-						targetHeight = smallPreviewSize;
-					}
-					return targetHeight;
-				}else{
-					return smallPreviewSize;
-				}
-			};
-
-			var getTargetRatio = function(img){
-				var ratio = img.width / img.height;
-				if (ratio > 16/9) {
-					return ratio;
-				} else {
-					return 16/9;
-				}
-			};
-
-			this._fileList.lazyLoadPreview({
-				path: path,
-				mime: mime,
-				etag: etag,
-				y: isImage ? maxImageHeight : smallPreviewSize,
-				x: isImage ? maxImageWidth : smallPreviewSize,
-				a: isImage ? 1 : null,
-				mode: isImage ? 'cover' : null,
-				callback: function (previewUrl, img) {
-					$iconDiv.previewImg = previewUrl;
-
-					// as long as we only have the mimetype icon, we only save it in case there is no preview
-					if (!img) {
-						return;
-					}
-					$iconDiv.removeClass('icon-loading icon-32');
-					var targetHeight = getTargetHeight(img);
-					if (this.model.isImage() && targetHeight > smallPreviewSize) {
-						$container.addClass((isLandscape(img) && !isSmall(img))? 'landscape': 'portrait');
-						$container.addClass('image');
-					}
-
-					// only set background when we have an actual preview
-					// when we don't have a preview we show the mime icon in the error handler
-					$iconDiv.css({
-						'background-image': 'url("' + previewUrl + '")',
-						height: (targetHeight > smallPreviewSize)? 'auto': targetHeight,
-						'max-height': isSmall(img)? targetHeight: null
-					});
-
-					var targetRatio = getTargetRatio(img);
-					$iconDiv.find('.stretcher').css({
-						'padding-bottom': (100 / targetRatio) + '%'
-					});
-				}.bind(this),
-				error: function () {
-					$iconDiv.removeClass('icon-loading icon-32');
-					this.$el.find('.thumbnailContainer').removeClass('image'); //fall back to regular view
-					$iconDiv.css({
-						'background-image': 'url("' + $iconDiv.previewImg + '")'
-					});
-					OC.Util.scaleFixForIE8($iconDiv);
-				}.bind(this)
-			});
 		}
 	});
 
diff --git a/apps/files/js/sidebarpreviewmanager.js b/apps/files/js/sidebarpreviewmanager.js
new file mode 100644
index 0000000000..5b7906bbb9
--- /dev/null
+++ b/apps/files/js/sidebarpreviewmanager.js
@@ -0,0 +1,105 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function () {
+	SidebarPreviewManager = function (fileList) {
+		this._fileList = fileList;
+	};
+
+	SidebarPreviewManager.prototype = {
+		loadPreview: function (model, $thumbnailDiv, $thumbnailContainer) {
+			// todo allow plugins to register custom handlers by mimetype
+			this.fallbackPreview(model, $thumbnailDiv, $thumbnailContainer);
+		},
+
+		// previews for images and mimetype icons
+		fallbackPreview: function (model, $thumbnailDiv, $thumbnailContainer) {
+			var isImage = model.isImage();
+			var maxImageWidth = $thumbnailContainer.parent().width() + 50;  // 50px for negative margins
+			var maxImageHeight = maxImageWidth / (16 / 9);
+			var smallPreviewSize = 75;
+
+			var isLandscape = function (img) {
+				return img.width > (img.height * 1.2);
+			};
+
+			var isSmall = function (img) {
+				return (img.width * 1.1) < (maxImageWidth * window.devicePixelRatio);
+			};
+
+			var getTargetHeight = function (img) {
+				if (isImage) {
+					var targetHeight = img.height / window.devicePixelRatio;
+					if (targetHeight <= smallPreviewSize) {
+						targetHeight = smallPreviewSize;
+					}
+					return targetHeight;
+				} else {
+					return smallPreviewSize;
+				}
+			};
+
+			var getTargetRatio = function (img) {
+				var ratio = img.width / img.height;
+				if (ratio > 16 / 9) {
+					return ratio;
+				} else {
+					return 16 / 9;
+				}
+			};
+
+			this._fileList.lazyLoadPreview({
+				path: model.getFullPath(),
+				mime: model.get('mimetype'),
+				etag: model.get('etag'),
+				y: isImage ? maxImageHeight : smallPreviewSize,
+				x: isImage ? maxImageWidth : smallPreviewSize,
+				a: isImage ? 1 : null,
+				mode: isImage ? 'cover' : null,
+				callback: function (previewUrl, img) {
+					$thumbnailDiv.previewImg = previewUrl;
+
+					// as long as we only have the mimetype icon, we only save it in case there is no preview
+					if (!img) {
+						return;
+					}
+					$thumbnailDiv.removeClass('icon-loading icon-32');
+					var targetHeight = getTargetHeight(img);
+					if (isImage && targetHeight > smallPreviewSize) {
+						$thumbnailContainer.addClass((isLandscape(img) && !isSmall(img)) ? 'landscape' : 'portrait');
+						$thumbnailContainer.addClass('image');
+					}
+
+					// only set background when we have an actual preview
+					// when we don't have a preview we show the mime icon in the error handler
+					$thumbnailDiv.css({
+						'background-image': 'url("' + previewUrl + '")',
+						height: (targetHeight > smallPreviewSize) ? 'auto' : targetHeight,
+						'max-height': isSmall(img) ? targetHeight : null
+					});
+
+					var targetRatio = getTargetRatio(img);
+					$thumbnailDiv.find('.stretcher').css({
+						'padding-bottom': (100 / targetRatio) + '%'
+					});
+				},
+				error: function () {
+					$thumbnailDiv.removeClass('icon-loading icon-32');
+					$thumbnailContainer.removeClass('image'); //fall back to regular view
+					$thumbnailDiv.css({
+						'background-image': 'url("' + $thumbnailDiv.previewImg + '")'
+					});
+				}
+			});
+		}
+	};
+
+	OCA.Files.SidebarPreviewManager = SidebarPreviewManager;
+})();
diff --git a/apps/files/lib/Controller/ViewController.php b/apps/files/lib/Controller/ViewController.php
index 18b6cf719c..ffa566f4e9 100644
--- a/apps/files/lib/Controller/ViewController.php
+++ b/apps/files/lib/Controller/ViewController.php
@@ -174,6 +174,7 @@ class ViewController extends Controller {
 		\OCP\Util::addScript('files', 'favoritesplugin');
 
 		\OCP\Util::addScript('files', 'detailfileinfoview');
+		\OCP\Util::addScript('files', 'sidebarpreviewmanager');
 		\OCP\Util::addScript('files', 'detailtabview');
 		\OCP\Util::addScript('files', 'mainfileinfodetailview');
 		\OCP\Util::addScript('files', 'detailsview');

From a4d75a60a9f7784ffe13c88108f3e8c9cb551188 Mon Sep 17 00:00:00 2001
From: Robin Appelman <icewind@owncloud.com>
Date: Mon, 4 Jul 2016 12:54:12 +0200
Subject: [PATCH 2/4] Add large sidebar previews for text files

---
 apps/files/css/detailsView.css               | 19 +++++---
 apps/files/js/sidebarpreviewmanager.js       | 26 +++++++++--
 apps/files/js/sidebarpreviewtext.js          | 47 ++++++++++++++++++++
 apps/files/lib/Controller/ViewController.php |  1 +
 4 files changed, 83 insertions(+), 10 deletions(-)
 create mode 100644 apps/files/js/sidebarpreviewtext.js

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index 669a15c4e3..a49b37e6aa 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -32,17 +32,17 @@
 	float: left;
 }
 
-#app-sidebar .thumbnailContainer.image {
+#app-sidebar .thumbnailContainer.large {
 	margin-left: -15px;
 	margin-right: -35px; /* 15 + 20 for the close button */
 	margin-top: -15px;
 }
 
-#app-sidebar .thumbnailContainer.image.portrait {
+#app-sidebar .thumbnailContainer.large.portrait {
 	margin: 0; /* if we don't fit the image anyway we give it back the margin */
 }
 
-#app-sidebar .image .thumbnail {
+#app-sidebar .large .thumbnail {
 	width:100%;
 	display:block;
 	background-repeat: no-repeat;
@@ -53,20 +53,27 @@
 	height: auto;
 }
 
-#app-sidebar .image .thumbnail .stretcher {
+#app-sidebar .large .thumbnail .stretcher {
 	content: '';
 	display: block;
 	padding-bottom: 56.25%; /* sets height of .thumbnail to 9/16 of the width */
 }
 
-#app-sidebar .image.portrait .thumbnail {
+#app-sidebar .large.portrait .thumbnail {
 	background-position: 50% top;
 }
 
-#app-sidebar .image.portrait .thumbnail {
+#app-sidebar .large.portrait .thumbnail {
 	background-size: contain;
 }
 
+#app-sidebar .text {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-left: 5px;
+	font-size: 80%;
+}
+
 #app-sidebar .thumbnail {
 	width: 75px;
 	height: 75px;
diff --git a/apps/files/js/sidebarpreviewmanager.js b/apps/files/js/sidebarpreviewmanager.js
index 5b7906bbb9..cfd1fffae1 100644
--- a/apps/files/js/sidebarpreviewmanager.js
+++ b/apps/files/js/sidebarpreviewmanager.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2015
+ * Copyright (c) 2016
  *
  * This file is licensed under the Affero General Public License version 3
  * or later.
@@ -11,12 +11,30 @@
 (function () {
 	SidebarPreviewManager = function (fileList) {
 		this._fileList = fileList;
+		this._previewHandlers = {};
+		OC.Plugins.attach('OCA.Files.SidebarPreviewManager', this);
 	};
 
 	SidebarPreviewManager.prototype = {
+		addPreviewHandler: function (mime, handler) {
+			this._previewHandlers[mime] = handler;
+		},
+
+		getPreviewHandler: function (mime) {
+			var mimePart = mime.split('/').shift();
+			if (this._previewHandlers[mime]) {
+				return this._previewHandlers[mime];
+			} else if(this._previewHandlers[mimePart]) {
+				return this._previewHandlers[mimePart];
+			} else {
+				return this.fallbackPreview.bind(this);
+			}
+		},
+
 		loadPreview: function (model, $thumbnailDiv, $thumbnailContainer) {
-			// todo allow plugins to register custom handlers by mimetype
-			this.fallbackPreview(model, $thumbnailDiv, $thumbnailContainer);
+			var handler = this.getPreviewHandler(model.get('mimetype'));
+			var fallback = this.fallbackPreview.bind(this, model, $thumbnailDiv, $thumbnailContainer);
+			handler(model, $thumbnailDiv, $thumbnailContainer, fallback);
 		},
 
 		// previews for images and mimetype icons
@@ -74,7 +92,7 @@
 					var targetHeight = getTargetHeight(img);
 					if (isImage && targetHeight > smallPreviewSize) {
 						$thumbnailContainer.addClass((isLandscape(img) && !isSmall(img)) ? 'landscape' : 'portrait');
-						$thumbnailContainer.addClass('image');
+						$thumbnailContainer.addClass('large');
 					}
 
 					// only set background when we have an actual preview
diff --git a/apps/files/js/sidebarpreviewtext.js b/apps/files/js/sidebarpreviewtext.js
new file mode 100644
index 0000000000..de264ed1e5
--- /dev/null
+++ b/apps/files/js/sidebarpreviewtext.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2016
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function () {
+	var SidebarPreview = function () {
+	};
+
+	SidebarPreview.prototype = {
+		attach: function (manager) {
+			manager.addPreviewHandler('text', this.handlePreview.bind(this));
+		},
+
+		handlePreview: function (model, $thumbnailDiv, $thumbnailContainer, fallback) {
+			console.log(model);
+			var previewWidth = $thumbnailContainer.parent().width() + 50;  // 50px for negative margins
+			var previewHeight = previewWidth / (16 / 9);
+
+			this.getFileContent(model.getFullPath()).then(function (content) {
+				$thumbnailDiv.removeClass('icon-loading icon-32');
+				$thumbnailContainer.addClass('large');
+				$thumbnailContainer.addClass('text');
+				var $textPreview = $('<pre/>').text(content);
+				$thumbnailDiv.children('.stretcher').remove();
+				$thumbnailDiv.append($textPreview);
+				$thumbnailContainer.height(previewHeight);
+			}, function () {
+				fallback();
+			});
+		},
+
+		getFileContent: function (path) {
+			console.log(path);
+			var url = OC.linkToRemoteBase('files' + path);
+			console.log(url);
+			return $.get(url);
+		}
+	};
+
+	OC.Plugins.register('OCA.Files.SidebarPreviewManager', new SidebarPreview());
+})();
diff --git a/apps/files/lib/Controller/ViewController.php b/apps/files/lib/Controller/ViewController.php
index ffa566f4e9..30d5bb87f1 100644
--- a/apps/files/lib/Controller/ViewController.php
+++ b/apps/files/lib/Controller/ViewController.php
@@ -175,6 +175,7 @@ class ViewController extends Controller {
 
 		\OCP\Util::addScript('files', 'detailfileinfoview');
 		\OCP\Util::addScript('files', 'sidebarpreviewmanager');
+		\OCP\Util::addScript('files', 'sidebarpreviewtext');
 		\OCP\Util::addScript('files', 'detailtabview');
 		\OCP\Util::addScript('files', 'mainfileinfodetailview');
 		\OCP\Util::addScript('files', 'detailsview');

From 2e5e0c157d60d3fb2a059af355816e692c7ecd36 Mon Sep 17 00:00:00 2001
From: Morris Jobke <hey@morrisjobke.de>
Date: Mon, 4 Jul 2016 15:38:16 +0200
Subject: [PATCH 3/4] adjust padding of text preview

---
 apps/files/css/detailsView.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index a49b37e6aa..2ec16993ef 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -67,11 +67,12 @@
 	background-size: contain;
 }
 
-#app-sidebar .text {
+#app-sidebar .large.text {
 	overflow-y: scroll;
 	overflow-x: hidden;
-	padding-left: 5px;
+	padding-top: 15px;
 	font-size: 80%;
+	margin-left: 0;
 }
 
 #app-sidebar .thumbnail {

From dd337597b35b1fc70441e271a3eb560385da18a6 Mon Sep 17 00:00:00 2001
From: Morris Jobke <hey@morrisjobke.de>
Date: Mon, 4 Jul 2016 17:38:26 +0200
Subject: [PATCH 4/4] for text use max-height to trim whitespace

---
 apps/files/js/sidebarpreviewtext.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/files/js/sidebarpreviewtext.js b/apps/files/js/sidebarpreviewtext.js
index de264ed1e5..5af17bd555 100644
--- a/apps/files/js/sidebarpreviewtext.js
+++ b/apps/files/js/sidebarpreviewtext.js
@@ -29,7 +29,7 @@
 				var $textPreview = $('<pre/>').text(content);
 				$thumbnailDiv.children('.stretcher').remove();
 				$thumbnailDiv.append($textPreview);
-				$thumbnailContainer.height(previewHeight);
+				$thumbnailContainer.css("max-height", previewHeight);
 			}, function () {
 				fallback();
 			});