From 04c902a7eaad3405dddc33b139eecdd26f4e2025 Mon Sep 17 00:00:00 2001
From: Robin Appelman <robin@icewind.nl>
Date: Thu, 16 Feb 2017 15:33:34 +0100
Subject: Add toggle between edit only/edit with preview/preview only

Fixes https://github.com/icewind1991/files_markdown/issues/24

Signed-off-by: Robin Appelman <robin@icewind.nl>
---
 js/editor.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

(limited to 'js')

diff --git a/js/editor.js b/js/editor.js
index 59b7fc4..c03fddc 100644
--- a/js/editor.js
+++ b/js/editor.js
@@ -316,6 +316,7 @@ var Files_Texteditor = {
 					var text = window.aceEditor.getSession().getValue();
 					_self.previewPluginOnChange(text, _self.preview);
 					window.aceEditor.resize();
+					_self.loadPreviewControlBar();
 				} else {
 					_self.previewPluginOnChange = null;
 				}
@@ -349,6 +350,54 @@ var Files_Texteditor = {
 
 	},
 
+	setPreviewMode: function(mode) {
+		var container = $('#app-content-texteditor');
+		var controlBar = $('#preview_editor_controls');
+		controlBar.find('button').removeClass('active');
+		controlBar.find('button[data-type="' + mode + '"]').addClass('active');
+		switch (mode) {
+			case 'mixed':
+				container.find('#editor_container').addClass('hasPreview');
+				container.find('#editor').show();
+				container.find('#preview_wrap').css('width', '50%');
+				break;
+			case 'text':
+				container.find('#editor_container').removeClass('hasPreview');
+				container.find('#editor').show();
+				container.find('#preview_wrap').css('width', '50%');
+				break;
+			case 'image':
+				container.find('#editor_container').addClass('hasPreview');
+				container.find('#editor').hide();
+				container.find('#preview_wrap').css('width', '100%');
+				break;
+		}
+	},
+
+	loadPreviewControlBar: function() {
+		var makeButton = function (type, tooltip, active) {
+			var button = $('<button/>');
+			button.tooltip({
+				title: tooltip,
+				container: 'body',
+				placement: 'bottom',
+				delay: {show: 500, hide: 0}
+			});
+			if (active) {
+				button.addClass('active');
+			}
+			button.click(this.setPreviewMode.bind(this, type));
+			button.attr('data-type', type);
+			return button.css('background-image', 'url("' + OC.imagePath('files_texteditor', type) + '")');
+		}.bind(this);
+
+		var controls = $('<span/>').attr('id', 'preview_editor_controls');
+		controls.append(makeButton('text', t('files_texteditor', 'Edit')));
+		controls.append(makeButton('mixed', t('files_texteditor', 'Mixed'), true));
+		controls.append(makeButton('image', t('files_texteditor', 'Preview')));
+		$('#editor_close').after(controls);
+	},
+
 	/**
 	 * Removes the control bar
 	 */
-- 
cgit v1.2.3