Changeset 12122 for branches/3.0/src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php

Timestamp:

05/25/2018 03:52:08 AM (7 years ago)

Author:

imath

Message:

BP Nouveau: Improve Messages UI extensibility

In BP Nouveau, the Messages UI is a Backbone based one. This means current legacy hooks inserted into the JS templates are a bit more different to use for plugin developers as it requires them to use JavaScript to get the data models. If the current AJAX requests still need a way to be extended to fetch extra data such as specific Messages metas, this commit is a first step to help plugin developers to insert content into the Messages UI without changing their habits about using the PHP Messages template global variables to get data about the Messages loop. This is done by introducing the back compatibility function bp_nouveau_messages_catch_hook_content(). This function is used during the AJAX requests that are fetching messages for a specific thread. As a start, 2 legacy hooks have been moved from the JS Template level to this higher level :

• bp_before_message_content
• bp_after_message_content

If actions are attached to these hooks their outputs will be caught using the buffer and will be "transported" as new properties, respectively beforeContent and afterContent, of the JSON reply that is used by the Messages UI. If these 2 properties are set and populated, their content will be output inside the corresponding JS templates.

Props pareshradadiya

Fixes #7847 (Branch 3.0)

File:

• branches/3.0/src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php (modified) (1 diff)

branches/3.0/src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php

@@ -273 +273 @@
     </div>
 
-    <?php bp_nouveau_messages_hook( 'before', 'content' ); ?>
-
-    <div class="message-content"><# print( data.content ) #></div>
-
-    <?php bp_nouveau_messages_hook( 'after', 'content' ); ?>
+    <# if ( data.beforeContent ) { #>
+        <div class="bp-messages-hook before-message-content">{{{data.beforeContent}}}</div>
+    <# } #>
+
+    <div class="message-content">{{{data.content}}}</div>
+
+    <# if ( data.afterContent ) { #>
+        <div class="bp-messages-hook after-message-content">{{{data.afterContent}}}</div>
+    <# } #>
 
 </script>