Changeset 9100

Timestamp:

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

Author:

djpaul

Message:

Mentions: load in the dashboard's Visual editor.

Inspired by Automattic's O2 team's implementation of the At.js library
inside publishing screens.

Also updated RTL CSS missed from a previous commit.

Fixes #5969

Location:

trunk/src/bp-activity

Files:

• css/mentions-rtl.css (modified) (4 diffs)
• js/mentions.js (modified) (2 diffs)

trunk/src/bp-activity/css/mentions-rtl.css

@@ -1 +1 @@
 .atwho-view {
-    background: #FFF;
+    background: rgba(204, 204, 204, 0.8);
     border-radius: 2px;
     border: 1px solid rgb(204, 204, 204);
@@ -17 +17 @@
 }
 .atwho-view ul {
+    background: #FFF;
     list-style: none;
     margin: auto;
@@ -63 +64 @@
         margin: 0 0 0 10px;
     }
-    .atwho-view small {
-        display: none;
-    }
 }
 @media (max-width: 400px) {
@@ -78 +76 @@
         width: 30px;
     }
+    .atwho-view {
+        border-radius: 0;
+        height: 100%;
+        right: 0 !important;
+        width: 100%;
+    }
+    .atwho-view ul li .username {
+        display: inline-block;
+        margin: -10px 0 0 0;
+        padding: 10px 0;
+    }
+    .atwho-view ul li small {
+        display: inline-block;
+        margin-right: 20px;
+    }
 }

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

@@ -222 +222 @@
 
     $( document ).ready(function() {
-        var users = [];
+        var loadMentionsInTinyMCE,
+            loadAttempts = 0,
+            users        = [];
 
         if ( typeof window.BP_Suggestions === 'object' ) {
@@ -228 +230 @@
         }
 
+        // Dashoard post 'visual' editor.
+        loadMentionsInTinyMCE = function() {
+            if ( loadAttempts < 4 || ! $( 'body' ).hasClass( 'wp-admin' ) ) {
+                loadAttempts++;
+
+                if ( typeof window.tinyMCE === 'undefined' || window.tinyMCE.activeEditor === null || typeof window.tinyMCE.activeEditor === 'undefined' ) {
+                    setTimeout( loadMentionsInTinyMCE, 500 );
+                    return;
+                }
+            }
+
+            $( window.tinyMCE.activeEditor.contentDocument.activeElement )
+                .atwho( 'setIframe', $( '#content_ifr' )[0] )
+                .bp_mentions( users );
+        };
+
         // Activity/reply, post comments, dashboard post 'text' editor.
         $( '.bp-suggestions, #comments form textarea, .wp-editor-area' ).bp_mentions( users );
+
+        // Dashbboard post 'visual' editor.
+        loadMentionsInTinyMCE();
     });
 })( jQuery );