From a4d75a60a9f7784ffe13c88108f3e8c9cb551188 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Mon, 4 Jul 2016 12:54:12 +0200 Subject: [PATCH] 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 = $('
').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');