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 7ac629d3fed69f655626bec1211f242db0435055..e34f361476a0a1fee8226dff0f9c8b8d0128bafb 100644 (file)
--- 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 7fe482755c38a8768708d7fa65eb571f146209db..f868bb1884e2495732ed07d67c1425995250d347 100644 (file)
--- 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 2a220a5051af237eab647d053aba4afbcb75a0f2..4d4003b4deea9e707fd620a6450a79637866b6fe 100644 (file)
--- 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 79a4c90a098c4446b8b128b6859d03ff0e716d1b..7d75d563fc9ff65ac9e9b80d692ac220c22377d2 100644 (file)
--- 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 37dbcae768e391773b24f11da5854f99d01e1eb7..b9332587fb8cb84e2e631e1f596d1b306691294e 100644 (file)
--- 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;
+               }
+       }
+}