From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 2 Feb 2016 12:43:09 +0000 (+0100)
Subject: Improved redactor integration
X-Git-Tag: 3.0.0_Beta_1~2030^2~107
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=42af78b3ac5f57bbd6ad0e09663567071b76e8d8;p=GitHub%2FWoltLab%2FWCF.git

Improved redactor integration
---

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index ab2aea0de0..e12ed688dd 100644
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -27,7 +27,7 @@
 		var config = {
 			buttons: buttons,
 			minHeight: 200,
-			plugins: ['WoltLabButton', 'WoltLabDropdown', 'WoltLabEvent', 'WoltLabQuote'],
+			plugins: ['WoltLabButton', 'WoltLabDropdown', 'WoltLabEvent', 'WoltLabLink', 'WoltLabQuote'],
 			woltlab: {
 				autosave: autosave
 			}
@@ -53,6 +53,7 @@
 		'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabButton.js?v={@LAST_UPDATE_TIME}',
 		'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabDropdown.js?v={@LAST_UPDATE_TIME}', 
 		'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabEvent.js?v={@LAST_UPDATE_TIME}',
+		'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabLink.js?v={@LAST_UPDATE_TIME}',
 		{if $__wcf->session->getPermission('admin.content.cms.canUseMedia')}'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMedia.js?v={@LAST_UPDATE_TIME}',{/if}
 		'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMention.js?v={@LAST_UPDATE_TIME}',
 		'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabQuote.js?v={@LAST_UPDATE_TIME}'
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabDropdown.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabDropdown.js
index e313a9c5fc..44f7e9af61 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabDropdown.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabDropdown.js
@@ -17,8 +17,8 @@ $.Redactor.prototype.WoltLabDropdown = function() {
 		
 		_hideAll: function() {
 			var hideAll = this.dropdown.hideAll;
-			this.dropdown.hideAll = (function() {
-				hideAll.call(this);
+			this.dropdown.hideAll = (function(e, key) {
+				hideAll.call(this, e, key);
 				
 				$('.redactor-dropdown-' + this.uuid).stop(true, true).hide();
 			}).bind(this);
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabLink.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabLink.js
new file mode 100644
index 0000000000..d2f6c61602
--- /dev/null
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabLink.js
@@ -0,0 +1,69 @@
+$.Redactor.prototype.WoltLabLink = function() {
+	"use strict";
+	
+	var _dialogApi = null;
+	
+	return {
+		init: function() {
+			this.link.show = this.WoltLabLink.show.bind(this);
+			
+			require(['WoltLab/WCF/Ui/Redactor/Link'], function(UiRedactorLink) {
+				_dialogApi = UiRedactorLink;
+			});
+		},
+		
+		show: function(e) {
+			// if call from clickable element
+			if (typeof e !== 'undefined' && e.preventDefault)
+			{
+				e.preventDefault();
+			}
+			
+			// close tooltip
+			this.observe.closeAllTooltip();
+			
+			// is link
+			var $el = this.link.is();
+			
+			// WoltLab START
+			// this.link.buildModal($el);
+			_dialogApi.showDialog({
+				insert: ($el === false),
+				submitCallback: (function() {
+					// build link
+					var link = this.link.buildLinkFromModal();
+					if (link === false) {
+						return false;
+					}
+					
+					this.selection.restore();
+					
+					// insert or update
+					this.link.insert(link, true);
+					
+					return true;
+				}).bind(this)
+			});
+			// WoltLab END
+			
+			// build link
+			var link = this.link.buildLinkFromElement($el);
+			
+			// if link cut & paste inside editor browser added self host to a link
+			link.url = this.link.removeSelfHostFromUrl(link.url);
+			
+			// set modal values
+			this.link.setModalValues(link);
+			
+			// WoltLab START
+			// this.modal.show();
+			// WoltLab END
+			
+			// focus
+			if (this.detect.isDesktop())
+			{
+				$('#redactor-link-url').focus();
+			}
+		}
+	};
+};
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dialog.js
index 966e02b86c..10d4140fcf 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dialog.js
@@ -187,7 +187,6 @@ define(
 					closeButtonLabel: Language.get('wcf.global.button.close'),
 					closeConfirmMessage: '',
 					disableContentPadding: false,
-					disposeOnClose: false,
 					title: '',
 					
 					// callbacks
@@ -260,10 +259,6 @@ define(
 			elAttr(dialog, 'role', 'dialog');
 			elData(dialog, 'id', id);
 			
-			if (options.disposeOnClose) {
-				elData(dialog, 'dispose-on-close', true);
-			}
-			
 			var header = elCreate('header');
 			dialog.appendChild(header);
 			
@@ -500,17 +495,7 @@ define(
 				data.onClose(id);
 			}
 			
-			if (elAttr(data.dialog, 'data-dispose-on-close')) {
-				setTimeout(function() {
-					if (elAttr(data.dialog, 'aria-hidden') === 'true') {
-						_container.removeChild(data.dialog);
-						_dialogs['delete'](id);
-					}
-				}, 5000);
-			}
-			else {
-				elAttr(data.dialog, 'aria-hidden', 'true');
-			}
+			elAttr(data.dialog, 'aria-hidden', 'true');
 			
 			// get next active dialog
 			_activeDialog = null;
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Link.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Link.js
new file mode 100644
index 0000000000..b2d5f1ec6e
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Link.js
@@ -0,0 +1,68 @@
+define(['Language', 'Ui/Dialog'], function(Language, UiDialog) {
+	"use strict";
+	
+	var _boundListener = false;
+	var _callback = null;
+	
+	return {
+		showDialog: function(options) {
+			UiDialog.open(this);
+			
+			UiDialog.setTitle(this, Language.get('wcf.redactor.link.' + (options.insert ? 'add' : 'edit')));
+			
+			var submitButton = elById('redactor-modal-button-action');
+			submitButton.textContent = Language.get('wcf.global.button.' + (options.insert ? 'insert' : 'save'));
+			
+			_callback = options.submitCallback;
+			
+			if (!_boundListener) {
+				_boundListener = true;
+				
+				submitButton.addEventListener(WCF_CLICK_EVENT, this._submit.bind(this));
+			}
+		},
+		
+		_submit: function() {
+			if (_callback()) {
+				UiDialog.close(this);
+			}
+			else {
+				var url = elById('redactor-link-url');
+				var small = (url.nextElementSibling && url.nextElementSibling.nodeName === 'SMALL') ? url.nextElementSibling : null;
+				
+				if (small === null) {
+					small = elCreate('small');
+					small.className = 'innerError';
+					small.textContent = Language.get('wcf.global.form.error.empty');
+					url.parentNode.appendChild(small);
+				}
+			}
+		},
+		
+		_dialogSetup: function() {
+			return {
+				id: 'redactorDialogLink',
+				options: {
+					onClose: function() {
+						var url = elById('redactor-link-url');
+						var small = (url.nextElementSibling && url.nextElementSibling.nodeName === 'SMALL') ? url.nextElementSibling : null;
+						if (small !== null) {
+							elRemove(small);
+						}
+					}
+				},
+				source: '<dl>'
+						+ '<dt><label for="redactor-link-url">' + Language.get('wcf.redactor.link.url') + '</label></dt>'
+						+ '<dd><input type="url" id="redactor-link-url" class="long"></dd>'
+					+ '</dl>'
+					+ '<dl>'
+						+ '<dt><label for="redactor-link-url-text">' + Language.get('wcf.redactor.link.text') + '</label></dt>'
+						+ '<dd><input type="text" id="redactor-link-url-text" class="long"></dd>'
+					+ '</dl>'
+					+ '<div class="formSubmit">'
+						+ '<button id="redactor-modal-button-action" class="buttonPrimary"></button>'
+					+ '</div>'
+			};
+		}
+	};
+});
diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index 8909f16101..a8a4e5f5e0 100644
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -164,6 +164,11 @@
 .redactor-dropdown {
 	> .dropdownMenu {
 		display: block;
+		visibility: visible;
+		
+		/* we cannot influence the actual dropdown position as set by Redactor,
+		   forces a gap while keeping the inline top-attribute unaffected */
+		transform: translateY(3px);
 		
 		> li:hover {
 			background-color: transparent !important;