Merge pull request #19 from nextcloud/sidebare-previewv11.0RC2v11.0.0

rich code preview in the sidebar

4 files changed, 118 insertions, 22 deletions

diff --git a/appinfo/app.php b/appinfo/app.php
index e2f851f..d235eda 100644
--- a/appinfo/app.php
+++ b/appinfo/app.php
@@ -8,6 +8,7 @@ if (\OCP\User::isLoggedIn()) {
 		OCP\Util::addStyle('files_texteditor', 'style');
 		OCP\Util::addStyle('files_texteditor', 'mobile');
 		OCP\Util::addscript('files_texteditor', 'editor');
+		OCP\Util::addscript('files_texteditor', 'sidebarpreview');
 		OCP\Util::addscript('files_texteditor', 'core/vendor/ace-builds/src-noconflict/ace');
 
 		$cspManager = \OC::$server->getContentSecurityPolicyManager();
diff --git a/css/style.css b/css/style.css
index 6401982..b1fad6f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -194,3 +194,11 @@ small.unsaved-star {
 	display: inline-block;
 	float: left;
 }
+
+#sidebar_editor .ace_gutter {
+	display: none;
+}
+
+#sidebar_editor .ace_scrollbar.ace_scrollbar-h {
+	display: none;
+}
diff --git a/js/editor.js b/js/editor.js
index 80334de..59b7fc4 100644
--- a/js/editor.js
+++ b/js/editor.js
@@ -237,21 +237,25 @@ var Files_Texteditor = {
 		});
 	},
 
+	getSupportedMimetypes: function() {
+		return [
+			'text',
+			'application/javascript',
+			'application/json',
+			'application/xml',
+			'application/x-empty',
+			'application/x-php',
+			'application/x-pearl',
+			'application/x-text',
+			'application/yaml'
+		];
+	},
+
 	/**
 	 * Registers the file actions
 	 */
 	registerFileActions: function() {
-		var mimes = [
-				'text',
-				'application/javascript',
-				'application/json',
-				'application/xml',
-				'application/x-empty',
-				'application/x-php',
-				'application/x-pearl',
-				'application/x-text',
-				'application/yaml'
-			],
+		var mimes = this.getSupportedMimetypes(),
 			_self = this;
 
 		$.each(mimes, function(key, value) {
@@ -421,10 +425,7 @@ var Files_Texteditor = {
 		window.aceEditor.commands.removeCommand(window.aceEditor.commands.byName.transposeletters);
 	},
 
-	/**
-	 * Sets the syntax highlighting for the editor based on the file extension
-	 */
-	setEditorSyntaxMode: function(extension) {
+	getSyntaxMode: function(extension) {
 		// Loads the syntax mode files and tells the editor
 		var filetype = [];
 		// add file extensions like this: filetype["extension"] = "filetype":
@@ -475,15 +476,26 @@ var Files_Texteditor = {
 		if (filetype[extension] != null) {
 			// Then it must be in the array, so load the custom syntax mode
 			// Set the syntax mode
-			OC.addScript(
+			return OC.addScript(
 				'files_texteditor',
-				'core/vendor/ace-builds/src-noconflict/mode-'+filetype[extension],
-				function () {
-					var SyntaxMode = ace.require("ace/mode/" + filetype[extension]).Mode;
-					window.aceEditor.getSession().setMode(new SyntaxMode());
-				}
-			);
+				'core/vendor/ace-builds/src-noconflict/mode-' + filetype[extension]
+			).then(function () {
+				return ace.require("ace/mode/" + filetype[extension]).Mode;
+			});
 		}
+
+		return $.when();
+	},
+
+	/**
+	 * Sets the syntax highlighting for the editor based on the file extension
+	 */
+	setEditorSyntaxMode: function(extension) {
+		this.getSyntaxMode(extension).then(function(SyntaxMode) {
+			if (SyntaxMode) {
+				window.aceEditor.getSession().setMode(new SyntaxMode());
+			}
+		});
 	},
 
 	/**
diff --git a/js/sidebarpreview.js b/js/sidebarpreview.js
new file mode 100644
index 0000000..9c6548a
--- /dev/null
+++ b/js/sidebarpreview.js
@@ -0,0 +1,75 @@
+/*
+ * 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) {
+			var mimes = OCA.Files_Texteditor.getSupportedMimetypes();
+			var handler = this.handlePreview.bind(this);
+			$.each(mimes, function (key, value) {
+				if (value !== 'text') { // let the regular text preview handle this
+					manager.addPreviewHandler(value, handler);
+				}
+			});
+		},
+
+		handlePreview: function (model, $thumbnailDiv, $thumbnailContainer, fallback) {
+			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 $editorDiv = $("<div id='sidebar_editor'/>");
+				$editorDiv.text(content);
+				$thumbnailDiv.children('.stretcher').remove();
+				$thumbnailDiv.append($editorDiv);
+				var editor = ace.edit('sidebar_editor');
+				editor.setReadOnly(true);
+				var syntaxModePromise;
+				if (model.get('mimetype') === 'text/html') {
+					syntaxModePromise = OCA.Files_Texteditor.getSyntaxMode('html');
+				} else {
+					// Set the syntax mode based on the file extension
+					syntaxModePromise = OCA.Files_Texteditor.getSyntaxMode(
+						model.get('name').split('.')[model.get('name').split('.').length - 1]
+					);
+				}
+				syntaxModePromise.then(function(SyntaxMode) {
+					if (SyntaxMode) {
+						editor.getSession().setMode(new SyntaxMode());
+					}
+				});
+				// Set the theme
+				OC.addScript(
+					'files_texteditor',
+					'core/vendor/ace-builds/src-noconflict/theme-clouds',
+					function () {
+						editor.setTheme("ace/theme/clouds");
+					}
+				);
+				$editorDiv.css("height", previewHeight);
+				$editorDiv.css("width", previewWidth);
+			}, function () {
+				fallback();
+			});
+		},
+
+		getFileContent: function (path) {
+			return $.get(OC.linkToRemoteBase('files' + path));
+		}
+	};
+
+	OC.Plugins.register('OCA.Files.SidebarPreviewManager', new SidebarPreview());
+})();