Ticket #2646: 2646.2.patch

src/templates/default/css/bbpress.css

@@ -858 +858 @@
         line-height: 16px;
 }
 
+#bbpress-forums .bbp-replies .bbp-reply-form {
+        margin: 0 10px 0 10px;
+}
+
 /* =Edit User
 -------------------------------------------------------------- */
 

src/templates/default/js/reply.js

@@ +1 @@
+/* globals tinyMCE */
 addReply = {
-        moveForm : function(replyId, parentId, respondId, postId) {
-                var t = this, div, reply = t.I(replyId), respond = t.I(respondId), cancel = t.I('bbp-cancel-reply-to-link'), parent = t.I('bbp_reply_to'), post = t.I('bbp_topic_id');
 
+        /**
+         * Move the reply form when "Reply" is clicked.
+         *
+         * @since 2.6.2
+         * @param {string} replyId
+         * @param {string} parentId
+         * @param {string} respondId
+         * @param {string} postId
+         * @returns {undefined|Boolean}
+         */
+        moveForm: function ( replyId, parentId, respondId, postId ) {
+
+                /* Get initial elements */
+                var t       = this,
+                        reply   = t.getElement( replyId ),
+                        respond = t.getElement( respondId ),
+                        cancel  = t.getElement( 'bbp-cancel-reply-to-link' ),
+                        parent  = t.getElement( 'bbp_reply_to' ),
+                        post    = t.getElement( 'bbp_topic_id' );
+
+                /* Remove the editor, if its already been moved */
+                t.removeEditor();
+
+                /* Bail to avoid errors */
                 if ( ! reply || ! respond || ! cancel || ! parent ) {
                         return;
                 }
 
                 t.respondId = respondId;
-                postId = postId || false;
+                postId      = postId || false;
 
-                if ( ! t.I('bbp-temp-form-div') ) {
-                        div = document.createElement('div');
-                        div.id = 'bbp-temp-form-div';
+                /* Setup a temporary div for relocating back when clicking cancel */
+                if ( ! t.getElement( 'bbp-temp-form-div' ) ) {
+                        var div = document.createElement( 'div' );
+
+                        div.id            = 'bbp-temp-form-div';
                         div.style.display = 'none';
-                        respond.parentNode.insertBefore(div, respond);
+
+                        respond.parentNode.appendChild( div );
                 }
 
-                reply.parentNode.appendChild(respond);
+                /* Relocate the element */
+                reply.parentNode.appendChild( respond );
+
                 if ( post && postId ) {
                         post.value = postId;
                 }
-                parent.value = parentId;
+
+                parent.value         = parentId;
                 cancel.style.display = '';
 
-                cancel.onclick = function() {
-                        var t = addReply, temp = t.I('bbp-temp-form-div'), respond = t.I(t.respondId);
+                /* Add the editor where it now belongs */
+                t.addEditor();
 
+                /**
+                 * When cancelling a Reply.
+                 *
+                 * @since 2.6.2
+                 * @returns {void}
+                 */
+                cancel.onclick = function () {
+                        var t       = addReply,
+                                temp    = t.getElement( 'bbp-temp-form-div' ),
+                                respond = t.getElement( t.respondId );
+
+                        t.removeEditor();
+
                         if ( ! temp || ! respond ) {
                                 return;
                         }
 
-                        t.I('bbp_reply_to').value = '0';
-                        temp.parentNode.insertBefore(respond, temp);
-                        temp.parentNode.removeChild(temp);
+                        t.getElement( 'bbp_reply_to' ).value = '0';
+
+                        temp.parentNode.insertBefore( respond, temp );
+                        temp.parentNode.removeChild( temp );
+
                         this.style.display = 'none';
-                        this.onclick = null;
-                        return false;
+                        this.onclick       = null;
+
+                        t.addEditor();
                 };
 
-                try { t.I('bbp_reply_content').focus(); }
-                catch(e) {}
+                t.scrollToForm(t);
 
                 return false;
         },
 
-        I : function(e) {
+        /**
+         * Scrolls to the top of the page.
+         *
+         * @since 2.6.2
+         * @param {HTMLElement} t The HTML element.
+         * @return {void}
+         */
+        scrollToForm: function(t) {
+
+                /* Get initial variables to start computing boundaries */
+                var form        = t.getElement( 'new-post' ),
+                        elemRect    = form.getBoundingClientRect(),
+                        position    = (window.pageYOffset || document.scrollTop)  - (document.clientTop || 0),
+                        destination = ( position + elemRect.top ),
+                        negative    = ( destination < position ),
+                        adminbar    = t.getElement( 'wpadminbar'),
+                        offset      = 0;
+
+                /* Offset by the adminbar */
+                if ( typeof ( adminbar ) !== 'undefined' ) {
+                        offset = adminbar.scrollHeight;
+                }
+
+                /* Compute the difference, depending on direction */
+                distance = ( true === negative )
+                        ? ( position - destination )
+                        : ( destination - position );
+
+                /* Do some math to compute the animation steps */
+                var vast       = ( distance > 800 ),
+                        speed_step = vast ? 30 : 20,
+                        speed      = Math.min( 12, Math.round( distance / speed_step ) ),
+                        step       = Math.round( distance / speed_step ),
+                        steps      = [],
+                        timer      = 0;
+
+                /* Scroll up */
+                if ( true === negative ) {
+                        while ( position > destination ) {
+                                position -= step;
+
+                                if ( position < destination ) {
+                                        position = destination;
+                                }
+
+                                steps.push( position - offset );
+
+                                setTimeout( function() {
+                                        window.scrollTo( 0, steps.shift() );
+                                }, timer * speed );
+
+                                timer++;
+                        }
+
+                /* Scroll down */
+                } else {
+                        while ( position < destination ) {
+                                position += step;
+
+                                if ( position > destination ) {
+                                        position = destination;
+                                }
+
+                                steps.push( position - offset );
+
+                                setTimeout( function() {
+                                        window.scrollTo( 0, steps.shift() );
+                                }, timer * speed );
+
+                                timer++;
+                        }
+                }
+        },
+
+        /**
+         * Get an element by ID
+         *
+         * @since 2.6.2
+         * @param {string} e
+         * @returns {HTMLElement} Element
+         */
+        getElement: function (e) {
                 return document.getElementById(e);
+        },
+
+        /**
+         * Remove the Editor
+         *
+         * @since 2.6.2
+         * @returns {void}
+         */
+        removeEditor: function () {
+
+                /* Bail to avoid error */
+                if ( typeof (tinyMCE) === 'undefined' ) {
+                        return;
         }
+
+                var tmce = tinyMCE.get( 'bbp_reply_content' );
+
+                if ( tmce && ! tmce.isHidden() ) {
+                        this.mode = 'tmce';
+                        tmce.remove();
+
+                } else {
+                        this.mode = 'html';
+                }
+        },
+
+        /**
+         * Add the Editor
+         *
+         * @since 2.6.2
+         * @returns {void}
+         */
+        addEditor: function () {
+
+                /* Bail to avoid error */
+                if ( typeof (tinyMCE) === 'undefined' ) {
+                        return;
+                }
+
+                if ( 'tmce' === this.mode ) {
+                        switchEditors.go( 'bbp_reply_content', 'tmce' );
+
+                } else if ( 'html' === this.mode ) {
+                        switchEditors.go( 'bbp_reply_content', 'html' );
+                }
+        }
 };