From f2f8e36f6b62d9a762ecc3332c921fd253b622d4 Mon Sep 17 00:00:00 2001
From: Robin Appelman <icewind@owncloud.com>
Date: Mon, 31 Aug 2015 13:58:42 +0200
Subject: Add api that allows other app to register "previews" by mimetype

---
 css/style.css | 36 ++++++++++++++++++++++++++++++++++++
 js/editor.js  | 38 ++++++++++++++++++++++++++++++++++++--
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index 71496c5..4fb366c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -47,6 +47,34 @@
 	border-radius: 3px;
 }
 
+#editor_container.hasPreview {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	border: none;
+	margin-top: 45px;
+	border-radius: 0px;
+}
+
+#editor_container.hasPreview #preview {
+	display:block;
+}
+
+#editor_container.hasPreview #editor {
+	width: 50%;
+}
+
+#preview {
+	right: 0;
+	position: absolute;
+	top: 0;
+	display: none;
+	height: 100%;
+	width:50%;
+	padding-top: 46px;
+}
+
 @media(max-width: 768px) {
 	#editor_container {
 		width: 100%;
@@ -57,6 +85,14 @@
 		margin-top: 45px;
 		border-radius: 0px;
 	}
+
+	#editor_container.hasPreview #preview {
+		display: none;
+	}
+
+	#editor_container.hasPreview #editor {
+		width: 100%;
+	}
 }
 
 #editor_close {
diff --git a/js/editor.js b/js/editor.js
index 8fef31e..c8321a8 100644
--- a/js/editor.js
+++ b/js/editor.js
@@ -42,6 +42,22 @@ var Files_Texteditor = {
 	 */
 	saveTimer: null,
 
+	/**
+	 * preview plugins by mimetype
+	 */
+	previewPlugins: {},
+
+	registerPreviewPlugin: function(mimeType, plugin) {
+		this.previewPlugins[mimeType] = plugin;
+	},
+
+	/**
+	 * preview element
+	 */
+	preview: null,
+
+	previewPluginOnChange: null,
+
 	/**
 	 * Save handler, triggered by the button, or keyboard
 	 */
@@ -168,6 +184,10 @@ var Files_Texteditor = {
 				OCA.Files_Texteditor._onUnsaved();
 			}
 		}
+		if (this.previewPluginOnChange) {
+			var text = window.aceEditor.getSession().getValue();
+			this.previewPluginOnChange(text, this.preview);
+		}
 	},
 
 	/**
@@ -187,6 +207,9 @@ var Files_Texteditor = {
 		this.$container = container;
 		this.registerFileActions();
 		this.oldTitle = document.title;
+		$.each(this.previewPlugins, function(mime, plugin) {
+			plugin.init();
+		});
 	},
 
 	/**
@@ -227,7 +250,7 @@ var Files_Texteditor = {
 		container.html(
 			'<div id="editor_overlay"></div>'
 			+'<div id="editor_container" class="icon-loading">'
-			+'<div id="editor_wrap"><div id="editor"></div></div></div>');
+			+'<div id="editor_wrap"><div id="editor"></div><div id="preview"></div></div></div>');
 		$('#app-content').append(container);
 
 		// Get the file data
@@ -246,6 +269,17 @@ var Files_Texteditor = {
 				_self.loadControlBar(file, _self.currentContext);
 				window.aceEditor.getSession().on('change', _self.setupAutosave);
 				window.aceEditor.focus();
+
+				if (_self.previewPlugins[file.mime]){
+					_self.preview = container.find('#preview');
+					_self.preview.addClass(file.mime.replace('/','-'));
+					container.find('#editor_container').addClass('hasPreview');
+					_self.previewPluginOnChange = _.debounce(_self.previewPlugins[file.mime].preview, 200);
+					var text = window.aceEditor.getSession().getValue();
+					_self.previewPluginOnChange(text, _self.preview);
+				} else {
+					_self.previewPluginOnChange = null;
+				}
 			},
 			function(message){
 				// Oh dear
@@ -327,7 +361,7 @@ var Files_Texteditor = {
 			}
 		);
 		// Bind the edit event
-		window.aceEditor.getSession().on('change', this._onEdit);
+		window.aceEditor.getSession().on('change', this._onEdit.bind(this));
 		// Bind save trigger
 		window.aceEditor.commands.addCommand({
 			name: "save",
-- 
cgit v1.2.3