From f06b38e281d0067f331441975249352d86d3393c Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 7 Jun 2016 18:01:45 +0200
Subject: [PATCH] Added support for image adding and floats

---
 com.woltlab.wcf/templates/wysiwygToolbar.tpl  |   5 +-
 .../redactor2/plugins/WoltLabButton.js        |   7 +-
 .../redactor2/plugins/WoltLabImage.js         | 133 +++++++++++++++++-
 wcfsetup/install/files/style/ui/redactor.scss |  11 ++
 4 files changed, 147 insertions(+), 9 deletions(-)

diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
index ddd7aaa582..f3f2e52230 100644
--- a/com.woltlab.wcf/templates/wysiwygToolbar.tpl
+++ b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
@@ -11,6 +11,7 @@ buttonOptions = {
 	table: { icon: 'fa-table', title: '{lang}wcf.editor.button.table{/lang}' },
 	underline: { icon: 'fa-underline', title: '{lang}wcf.editor.button.underline{/lang}' },
 	woltlabColor: { icon: 'fa-paint-brush', title: '{lang}wcf.editor.button.color{/lang}' },
+	woltlabImage: { icon: 'fa-picture-o', title: '{lang}wcf.editor.button.image{/lang}' },
 	woltlabMedia: { icon: 'fa-file-o', title: '{lang}wcf.editor.button.media{/lang}' },
 	woltlabQuote: { icon: 'fa-comment', title: '{lang}wcf.editor.button.quote{/lang}' },
 	woltlabSize: { icon: 'fa-text-height', title: '{lang}wcf.editor.button.size{/lang}' }
@@ -46,11 +47,9 @@ buttons.push('alignment');
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('url')}
 	buttons.push('link');
 {/if}
-{*
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('img')}
-	buttons.push('image');
+	buttons.push('woltlabImage');
 {/if}
-*}
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('table')}
 	buttons.push('table');
 {/if}
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
index 3cf57f9c09..8708e139df 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
@@ -13,6 +13,11 @@ $.Redactor.prototype.WoltLabButton = function() {
 					continue;
 				}
 				
+				//noinspection JSUnresolvedVariable
+				if (!this.opts.woltlab.buttons.hasOwnProperty(buttonName)) {
+					throw new Error("Missing button definition for '" + buttonName + "'.");
+				}
+				
 				//noinspection JSUnresolvedVariable
 				buttonData = this.opts.woltlab.buttons[buttonName];
 				
@@ -27,7 +32,7 @@ $.Redactor.prototype.WoltLabButton = function() {
 				// set icon
 				this.button.setIcon(button, '<span class="icon icon16 ' + buttonData.icon + '"></span>');
 				if (!button[0]) {
-					console.debug(buttonName);
+					throw new Error("Missing button element for '" + buttonName + "'.");
 				}
 				// set title
 				//noinspection JSUnresolvedVariable
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabImage.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabImage.js
index bf119939d8..2f45234abe 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabImage.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabImage.js
@@ -3,22 +3,145 @@ $.Redactor.prototype.WoltLabImage = function() {
 	
 	return {
 		init: function() {
-			// overwrite modal templates
+			var button = this.button.add('woltlabImage', '');
+			this.button.addCallback(button, this.WoltLabImage.add);
+			
+			// add support for image source when editing
+			// TODO: float
+			var mpShowEdit = this.image.showEdit;
+			this.image.showEdit = function($image) {
+				mpShowEdit($image);
+				
+				elById('redactor-image-source').value = $image[0].src;
+				
+				var float = elById('redactor-image-float');
+				if ($image[0].classList.contains('messageFloatObjectLeft')) float.value = 'left';
+				else if ($image[0].classList.contains('messageFloatObjectRight')) float.value = 'right';
+			};
+			
+			var mpUpdate = this.image.update;
+			this.image.update = (function() {
+				var sourceInput = elById('redactor-image-source');
+				var showError = function(inputElement, message) {
+					$('<small class="innerError" />').text(message).insertAfter(inputElement);
+				};
+				
+				// check if source is valid
+				var source = sourceInput.value.trim();
+				if (source === '') {
+					return showError(sourceInput, WCF.Language.get('wcf.global.form.error.empty'));
+				}
+				else if (!source.match(this.opts.regexps.url)) {
+					return showError(sourceInput, WCF.Language.get('wcf.editor.image.source.error.invalid'));
+				}
+				
+				var image = this.observe.image[0];
+				
+				// update image source
+				image.src = source;
+				
+				// remove old float classes
+				image.classList.remove('messageFloatObjectLeft');
+				image.classList.remove('messageFloatObjectRight');
+				
+				// set float behavior
+				var float = elById('redactor-image-float').value;
+				if (float === 'left' || float === 'right') {
+					image.classList.add('messageFloatObject' + WCF.String.ucfirst(float));
+				}
+				
+				mpUpdate();
+				
+				// remove alt/title attribute again (not supported)
+				image.removeAttribute('alt');
+				image.removeAttribute('title');
+			}).bind(this);
+			
+			// overwrite modal template
 			this.opts.modal['image-edit'] = '<div class="section">'
 					+ '<dl>'
-						+ '<dt><label>' + this.lang.get('title') + '</label></dt>'
-						+ '<dd><input type="text" id="redactor-image-title" class="long"></dd>'
+						+ '<dt><label for="redactor-image-source">' + WCF.Language.get('wcf.editor.image.source') + '</label></dt>'
+						+ '<dd>'
+							+ '<input type="text" id="redactor-image-source" class="long">'
+							+ '<small>' + WCF.Language.get('wcf.editor.image.source.description') + '</small>'
+						+ '</dd>'
 					+ '</dl>'
 					+ '<dl>'
-						+ '<dt><label>' + this.lang.get('link') + '</label></dt>'
-						+ '<dd><input type="text" id="redactor-image-link" class="long" aria-label="' + this.lang.get('link') + '"></dd>'
+						+ '<dt><label for="redactor-image-link">' + WCF.Language.get('wcf.editor.image.link') + '</label></dt>'
+						+ '<dd>'
+							+ '<input type="text" id="redactor-image-link" class="long">'
+							+ '<small>' + WCF.Language.get('wcf.editor.image.link.description') + '</small>'
+						+ '</dd>'
 					+ '</dl>'
+					+ '<dl>'
+						+ '<dt><label for="redactor-image-float">' + WCF.Language.get('wcf.editor.image.float') + '</label></dt>'
+						+ '<dd>'
+							+ '<select id="redactor-image-float">'
+								+ '<option value="none">' + WCF.Language.get('wcf.global.noSelection') + '</option>'
+								+ '<option value="left">' + WCF.Language.get('wcf.editor.image.float.left') + '</option>'
+								+ '<option value="right">' + WCF.Language.get('wcf.editor.image.float.right') + '</option>'
+							+ '</select>'
+							+ '<small>' + WCF.Language.get('wcf.editor.image.float.description') + '</small>'
+						+ '</dd>'
+					+ '</dl>'
+					+ '<input id="redactor-image-title" style="display: none">' /* dummy because redactor expects it to be present */
 					+ '<div class="formSubmit">'
 						+ '<button id="redactor-modal-button-action" class="buttonPrimary">Insert</button>'
 						+ '<button id="redactor-modal-button-delete" class="redactor-modal-button-offset">Delete</button>'
 					+ '</div>'
 				+ '</div>';
+		},
+		
+		add: function() {
+			this.modal.load('image-edit', WCF.Language.get('wcf.editor.image.insert'));
+			
+			this.modal.show();
+			
+			this.modal.getDeleteButton().hide();
+			var button = this.modal.getActionButton();
+			button[0].addEventListener(WCF_CLICK_EVENT, this.WoltLabImage.insert);
+		},
+		
+		insert: function(event) {
+			event.preventDefault();
+			
+			// remove any existing error messages first
+			this.modal.getModal().find('.innerError').remove();
+			
+			var sourceInput = elById('redactor-image-source');
+			var showError = function(inputElement, message) {
+				$('<small class="innerError" />').text(message).insertAfter(inputElement);
+			};
+			
+			// check if source is valid
+			var source = sourceInput.value.trim();
+			if (source === '') {
+				return showError(sourceInput, WCF.Language.get('wcf.global.form.error.empty'));
+			}
+			else if (!source.match(this.opts.regexps.url)) {
+				return showError(sourceInput, WCF.Language.get('wcf.editor.image.source.error.invalid'));
+			}
+			
+			// check if link is valid
+			var linkInput = elById('redactor-image-link');
+			var link = linkInput.value.trim();
+			
+			if (link !== '' && !link.match(this.opts.regexps.url)) {
+				return showError(linkInput, WCF.Language.get('wcf.editor.image.link.error.invalid'));
+			}
+			
+			var float = elById('redactor-image-float').value, className = '';
+			if (float === 'left' || float === 'right') {
+				className = 'messageFloatObject' + WCF.String.ucfirst(float);
+			}
+			
+			var html = '<img src="' + WCF.String.escapeHTML(source) + '"' + (className ? ' class="' + className + '"' : '') + '>';
+			if (link) {
+				html = '<a href="' + WCF.String.escapeHTML(link) + '">' + html + '</a>'; 
+			}
 			
+			this.modal.close();
+			this.insert.html(html);
 		}
 	};
 };
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index 4ff264bac9..741b8990a2 100644
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -476,3 +476,14 @@
 .woltlab-size-18 { font-size: 18px; }
 .woltlab-size-24 { font-size: 24px; }
 .woltlab-size-36 { font-size: 36px; }
+
+/* image float */
+.messageFloatObjectLeft {
+	float: left;
+	margin: 0 20px 20px 0;
+}
+
+.messageFloatObjectRight {
+	float: right;
+	margin: 0 0 20px 20px;
+}
-- 
2.20.1