Changeset 6965

Timestamp:

11/19/2019 04:51:57 PM (5 years ago)

Author:

johnjamesjacoby

Message:

Replies: ensure visual editor works correctly with hierarchical replies.

This commit updates reply.js in the default theme to include a bit of element juggling that prevents TinyMCE from freezing up when it is relocated on the page.

Before this commit, clicking "Reply" while having the Visual Editor enabled would cause it to not be able to be typed inside of. Now, when clicking commit, TinyMCE is correctly reinvoked in its new location, and the page will expediently scroll to that new position, fixing a related UX bug where it was possible for the reply form to get lost inside of deep hierarchies.

Props chherbst. Fixes #2646. For 2.6.2, branches/2.6.

Location:

branches/2.6/src/templates/default

Files:

• css/bbpress.css (modified) (1 diff)
• js/reply.js (modified) (3 diffs)

branches/2.6/src/templates/default/css/bbpress.css

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

branches/2.6/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;
@@ -8 +31 @@
 
         t.respondId = respondId;
-        postId = postId || false;
-
-        if ( ! t.I('bbp-temp-form-div') ) {
-            div = document.createElement('div');
-            div.id = 'bbp-temp-form-div';
+        postId      = postId || false;
+
+        /* 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);
-        }
-
-        reply.parentNode.appendChild(respond);
+
+            respond.parentNode.appendChild( div );
+        }
+
+        /* 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 ) {
@@ -31 +73 @@
             }
 
-            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' );
+        }
     }
 };