Add large sidebar previews for text files

4 files changed, 83 insertions, 10 deletions

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index 669a15c4e38..a49b37e6aab 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 5b7906bbb98..cfd1fffae13 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 00000000000..de264ed1e56
--- /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 ffa566f4e9b..30d5bb87f13 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');