Changeset 9098

Timestamp:

10/29/2014 12:36:12 AM (10 years ago)

Author:

djpaul

Message:

Mentions: backport upstream JS for contentEditable/TinyMCE support fixes.

See #5969

File:

• trunk/src/bp-activity/js/mentions.js (modified) (2 diffs)

trunk/src/bp-activity/js/mentions.js

@@ -77 +77 @@
                  */
                 before_reposition: function( offset ) {
-                    var $view = $( '#atwho-ground-' + this.id + ' .atwho-view' ),
-                        caret = this.$inputor.caret( 'offset', { iframe: $( '#content_ifr' )[0] } ).left,
-                        move;
-
-                    // If the caret is past horizontal half, then flip it, yo.
-                    if ( caret > ( $( 'body' ).width() / 2 ) ) {
+                    // get the iframe, if any, already applied with atwho
+                    var caret,
+                            line,
+                            iframeOffset,
+                            move,
+                            $view = $( '#atwho-ground-' + this.id + ' .atwho-view' ),
+                            $body = $( 'body' ),
+                            atwhoDataValue = this.$inputor.data( 'atwho' );
+
+                    if ( 'undefined' !== atwhoDataValue && 'undefined' !== atwhoDataValue.iframe && null !== atwhoDataValue.iframe ) {
+                        caret = this.$inputor.caret( 'offset', { iframe: atwhoDataValue.iframe } );
+                        // Caret.js no longer calculates iframe caret position from the window (it's now just within the iframe).
+                        // We need to get the iframe offset from the window and merge that into our object.
+                        iframeOffset = $( atwhoDataValue.iframe ).offset();
+                        if ( 'undefined' !== iframeOffset ) {
+                            caret.left += iframeOffset.left;
+                            caret.top  += iframeOffset.top;
+                        }
+                    } else {
+                        caret = this.$inputor.caret( 'offset' );
+                    }
+
+                    // If the caret is past horizontal half, then flip it, yo
+                    if ( caret.left > ( $body.width() / 2 ) ) {
                         $view.addClass( 'right' );
-                        move = caret - offset.left - this.view.$el.width();
+                        move = caret.left - offset.left - this.view.$el.width();
                     } else {
                         $view.removeClass( 'right' );
-                        move = caret - offset.left + 1;
-                    }
-
-                    offset.top  += 1;
+                        move = caret.left - offset.left + 1;
+                    }
+
+                    // If we're on a small screen, scroll to caret
+                    if ( $body.width() <= 400 ) {
+                        $( document ).scrollTop( caret.top - 6 );
+                    }
+
+                    // New position is under the caret (never above) and positioned to follow
+                    // Dynamic sizing based on the input area (remove 'px' from end)
+                    line = parseInt( this.$inputor.css( 'line-height' ).substr( 0, this.$inputor.css( 'line-height' ).length - 2 ), 10 );
+                    if ( !line || line < 5 ) { // sanity check, and catch no line-height
+                        line = 19;
+                    }
+
+                    offset.top   = caret.top + line;
                     offset.left += move;
                 },
@@ -104 +134 @@
                  */
                 inserting_wrapper: function( $inputor, content, suffix ) {
-                    var new_suffix = ( suffix === '' ) ? suffix : suffix || ' ';
-                    return '' + content + new_suffix;
+                    return '' + content + suffix;
                 }
             }