From e5c01f514dd835767a0b4dcda385f8c0c124de4f Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 8 Jul 2016 14:35:25 +0200
Subject: [PATCH] Added custom toolbar for CodeMirror

---
 wcfsetup/install/files/acp/style/layout.scss  | 29 +++++++++++++
 .../files/acp/templates/__pageAddContent.tpl  | 31 +++++++++++---
 .../js/WoltLab/WCF/Acp/Ui/CodeMirror/Media.js | 41 +++++++++++++++++++
 .../js/WoltLab/WCF/Acp/Ui/CodeMirror/Page.js  | 24 +++++++++++
 4 files changed, 119 insertions(+), 6 deletions(-)
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Media.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Page.js

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 7fe5f13e86..263294e10f 100644
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -259,3 +259,32 @@ $wcfAcpMenuWidth: 150px;
 .pageFooter {
 	box-shadow: 0 0 10px rgba(0, 0, 0, .6);
 }
+
+.codemirrorToolbar {
+	background-color: rgb(52, 73, 94);
+	display: flex;
+	flex-wrap: wrap;
+	
+	> li {
+		flex: 0 0 auto;
+		margin-bottom: 1px;
+		
+		> a {
+			color: rgb(255, 255, 255);
+			display: block;
+			font-size: 12px;
+			outline: none;
+			padding: 10px;
+			text-align: center;
+			font-weight: 400;
+			
+			&:hover {
+				background-color: rgb(19, 34, 48);
+			}
+			
+			.icon {
+				color: inherit;
+			}
+		}
+	}
+}
diff --git a/wcfsetup/install/files/acp/templates/__pageAddContent.tpl b/wcfsetup/install/files/acp/templates/__pageAddContent.tpl
index 3f4ae3d8c8..da388b07a7 100644
--- a/wcfsetup/install/files/acp/templates/__pageAddContent.tpl
+++ b/wcfsetup/install/files/acp/templates/__pageAddContent.tpl
@@ -1,7 +1,7 @@
-<textarea name="content[{@$languageID}]" id="content{@$languageID}">{if !$content[$languageID]|empty}{$content[$languageID]}{/if}</textarea>
-{if $pageType == 'text'}
-	{capture append='__redactorJavaScript'}, '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabPage.js?v={@LAST_UPDATE_TIME}'{/capture}
-	{capture append='__redactorConfig'}
+{assign var='__pageContentID' value='content'|concat:$languageID}
+
+<script data-relocate="true">
+	require(['Language'], function (Language) {
 		Language.addObject({
 			'wcf.page.search': '{lang}wcf.page.search{/lang}',
 			'wcf.page.search.error.tooShort': '{lang}wcf.page.search.error.tooShort{/lang}',
@@ -10,7 +10,26 @@
 			'wcf.page.search.results': '{lang}wcf.page.search.results{/lang}',
 			'wcf.page.search.results.description': '{lang}wcf.page.search.results.description{/lang}'
 		});
-		
+	})
+</script>
+
+{if $pageType == 'html' || $pageType == 'tpl'}
+	<ul class="codemirrorToolbar">
+		<li><a href="#" id="codemirror-{@$__pageContentID}-media" class="jsTooltip" title="{lang}wcf.editor.button.media{/lang}"><span class="icon icon16 fa-file-o"></span></a></li>
+		<li><a href="#" id="codemirror-{@$__pageContentID}-page" class="jsTooltip" title="{lang}wcf.editor.button.page{/lang}"><span class="icon icon16 fa-file-text-o"></span></a></li>
+	</ul>
+	<script data-relocate="true">
+		require(['WoltLab/WCF/Acp/Ui/CodeMirror/Media', 'WoltLab/WCF/Acp/Ui/CodeMirror/Page'], function(AcpUiCodeMirrorMedia, AcpUiCodeMirrorPage) {
+			new AcpUiCodeMirrorMedia('{@$__pageContentID}');
+			new AcpUiCodeMirrorPage('{@$__pageContentID}');
+		});
+	</script>
+{/if}
+
+<textarea name="content[{@$languageID}]" id="{@$__pageContentID}">{if !$content[$languageID]|empty}{$content[$languageID]}{/if}</textarea>
+{if $pageType == 'text'}
+	{capture append='__redactorJavaScript'}, '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabPage.js?v={@LAST_UPDATE_TIME}'{/capture}
+	{capture append='__redactorConfig'}
 		buttonOptions.woltlabPage = { icon: 'fa-file-text-o', title: '{lang}wcf.editor.button.page{/lang}' };
 		
 		buttons.push('woltlabPage');
@@ -18,7 +37,7 @@
 		config.plugins.push('WoltLabPage');
 	{/capture}
 	
-	{include file='wysiwyg' wysiwygSelector='content'|concat:$languageID}
+	{include file='wysiwyg' wysiwygSelector=$__pageContentID}
 {elseif $pageType == 'html'}
 	{include file='codemirror' codemirrorMode='htmlmixed' codemirrorSelector='#content'|concat:$languageID}
 {elseif $pageType == 'tpl'}
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Media.js b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Media.js
new file mode 100644
index 0000000000..4aa3759e2e
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Media.js
@@ -0,0 +1,41 @@
+define(['WoltLab/WCF/Media/Manager/Editor'], function(MediaManagerEditor) {
+	"use strict";
+	
+	function AcpUiCodeMirrorMedia(elementId) { this.init(elementId); }
+	AcpUiCodeMirrorMedia.prototype = {
+		init: function(elementId) {
+			this._element = elById(elementId);
+			
+			var button = elById('codemirror-' + elementId + '-media');
+			button.classList.add(button.id);
+			
+			new MediaManagerEditor({
+				buttonClass: button.id,
+				callbackInsert: this._insert.bind(this),
+				editor: null
+			});
+		},
+		
+		_insert: function (mediaList, insertType, thumbnailSize) {
+			var content = '';
+			
+			if (insertType === 'gallery') {
+				var mediaIds = [];
+				mediaList.forEach(function(item) {
+					mediaIds.push(item.mediaID);
+				});
+				
+				content = '{{ mediaGallery="' + mediaIds.join(',') + '" }}';
+			}
+			else {
+				mediaList.forEach(function(item) {
+					content += '{{ media="' + item.mediaID + '" size="' + thumbnailSize + '" }}';
+				});
+			}
+			
+			this._element.codemirror.replaceSelection(content);
+		}
+	};
+	
+	return AcpUiCodeMirrorMedia;
+});
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Page.js b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Page.js
new file mode 100644
index 0000000000..2c6f4f5f99
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Page.js
@@ -0,0 +1,24 @@
+define(['WoltLab/WCF/Ui/Page/Search'], function(UiPageSearch) {
+	"use strict";
+	
+	function AcpUiCodeMirrorPage(elementId) { this.init(elementId); }
+	AcpUiCodeMirrorPage.prototype = {
+		init: function(elementId) {
+			this._element = elById(elementId);
+			
+			elById('codemirror-' + elementId + '-page').addEventListener(WCF_CLICK_EVENT, this._click.bind(this));
+		},
+		
+		_click: function (event) {
+			event.preventDefault();
+			
+			UiPageSearch.open(this._insert.bind(this));
+		},
+		
+		_insert: function (pageID) {
+			this._element.codemirror.replaceSelection('{{ page="' + pageID + '" }}');
+		}
+	};
+	
+	return AcpUiCodeMirrorPage;
+});
-- 
2.20.1