From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 28 Aug 2016 11:26:59 +0000 (+0200)
Subject: Improved editor state in non-last-page reply
X-Git-Tag: 3.0.0_Beta_1~443
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=2f035ee4261aa9f067d8aa3466d00e287950a301;p=GitHub%2FWoltLab%2FWCF.git

Improved editor state in non-last-page reply
---

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index 7ac629d3fe..e34f361476 100644
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -100,6 +100,29 @@
 				element.value = autosave.getInitialValue();
 			}
 			
+			var placeholderCallback = null, replyContainer = element.closest('.messageQuickReplyContent');
+			if (replyContainer) {
+				var container = elById('messageQuickReply');
+				if (container.classList.contains('messageQuickReplyCollapsed')) {
+					placeholderCallback = function (event) {
+						if (event instanceof Event) {
+							event.preventDefault();
+						}
+						
+						if (container.classList.contains('messageQuickReplyCollapsed')) {
+							container.classList.remove('messageQuickReplyCollapsed');
+							$(element).redactor('focus.end');
+							
+							replyContainer.removeEventListener(WCF_CLICK_EVENT, placeholderCallback);
+						}
+						
+						return null;
+					};
+					
+					replyContainer.addEventListener(WCF_CLICK_EVENT, placeholderCallback);
+				}
+			}
+			
 			var config = {
 				buttons: buttons,
 				formatting: ['p', 'h2', 'h3', 'h4'],
@@ -149,7 +172,7 @@
 				linkify: false,
 				linkSize: 0xBADC0DED, // some random value to disable truncating
 				minHeight: 200,
-				placeholder: elData(element, 'placeholder') || '',
+				//placeholder: elData(element, 'placeholder') || '',
 				plugins: [
 					// Imperavi
 					'alignment',
@@ -189,7 +212,8 @@
 					buttons: buttonOptions,
 					buttonMobile: buttonMobile,
 					customButtons: customButtons,
-					highlighters: highlighters
+					highlighters: highlighters,
+					placeholderCallback: placeholderCallback
 				}
 			};
 			
@@ -217,10 +241,15 @@
 			
 			config.callbacks = config.callbacks || { };
 			config.callbacks.init = function() {
+				var editor = element.previousElementSibling;
+				if (replyContainer) {
+					elData(editor, 'reply-placeholder', elData(element, 'reply-placeholder'));
+				}
+				
 				// slight delay to allow Redactor to initialize itself
 				window.setTimeout(function() {
 					$(element).redactor('code.set', content);
-					$(element).redactor('core.editor')[0].classList.add('redactorReady');
+					editor.classList.add('redactorReady');
 				}, 10);
 			};
 			
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js
index 7fe482755c..f868bb1884 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js
@@ -25,7 +25,7 @@ $.Redactor.prototype.WoltLabCaret = function() {
 			var selection = window.getSelection();
 			
 			var saveRange = function () {
-				internalRange = selection.getRangeAt(0).cloneRange();
+				internalRange = (selection.rangeCount) ? selection.getRangeAt(0).cloneRange() : null;
 			};
 			
 			var restoreRange = function () {
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabInsert.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabInsert.js
index 2a220a5051..4d4003b4de 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabInsert.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabInsert.js
@@ -3,8 +3,12 @@ $.Redactor.prototype.WoltLabInsert = function() {
 	
 	return {
 		init: function () {
+			var callback = this.opts.woltlab.placeholderCallback;
+			
 			var mpHtml = this.insert.html;
 			this.insert.html = (function (html, data) {
+				if (callback) callback = callback();
+				
 				this.placeholder.hide();
 				this.core.editor().focus();
 				
@@ -19,6 +23,13 @@ $.Redactor.prototype.WoltLabInsert = function() {
 					elRemove(block);
 				}
 			}).bind(this);
+			
+			var mpText = this.insert.text;
+			this.insert.text = (function (text) {
+				if (callback) callback = callback();
+				
+				mpText.call(this, text);
+			}).bind(this);
 		}
 	};
 };
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 79a4c90a09..7d75d563fc 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -599,7 +599,3 @@
 		}
 	}
 }
-
-#messageQuickReply .messageSidebar {
-	opacity: .6;
-}
diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index 37dbcae768..b9332587fb 100644
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -490,3 +490,70 @@
 	height: 238px;
 	width: 100%;
 }
+
+.messageQuickReplyCollapsed {
+	.messageSidebar {
+		pointer-events: none;
+		
+		@include screen-sm-down {
+			opacity: .6;
+		}
+		
+		@include screen-md-up {
+			> .messageAuthor {
+				> :not(.userAvatar),
+				.badgeOnline {
+					display: none;
+				}
+			}
+			
+			> .userCredits {
+				display: none;
+			}
+		}
+	}
+	
+	.messageQuickReplyContent {
+		// simulate clickable area
+		cursor: pointer;
+		
+		.wysiwygTextarea {
+			height: 138px;
+		}
+		
+		> .messageBody,
+		> .messageFooter {
+			pointer-events: none;
+		}
+		
+		.redactor-editor {
+			max-height: 100px !important;
+			min-height: 100px !important;
+			overflow: hidden;
+			position: relative;
+			
+			&::before {
+				color: rgb(169, 169, 169);
+				content: attr(data-reply-placeholder);
+				display: block;
+				left: 20px;
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+			
+			> * {
+				visibility: hidden;
+			}
+		}
+		
+		.redactor-toolbar > li,
+		.messageTabMenu li {
+			opacity: .5;
+		}
+		
+		> .messageFooter {
+			display: none;
+		}
+	}
+}