<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[BuddyPress][12121] trunk/src: BP Nouveau: Improve Messages UI extensibility</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://buddypress.trac.wordpress.org/changeset/12121">12121</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://buddypress.trac.wordpress.org/changeset/12121","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>imath</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2018-05-25 03:48:20 +0000 (Fri, 25 May 2018)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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
See <a href="http://buddypress.trac.wordpress.org/ticket/7847">#7847</a> (Trunk)</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcbpcorebpcorefunctionsphp">trunk/src/bp-core/bp-core-functions.php</a></li>
<li><a href="#trunksrcbptemplatesbpnouveaubuddypresscommonjstemplatesmessagesindexphp">trunk/src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php</a></li>
<li><a href="#trunksrcbptemplatesbpnouveauincludesmessagesajaxphp">trunk/src/bp-templates/bp-nouveau/includes/messages/ajax.php</a></li>
<li><a href="#trunksrcbptemplatesbpnouveauincludesmessagesfunctionsphp">trunk/src/bp-templates/bp-nouveau/includes/messages/functions.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcbpcorebpcorefunctionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-core/bp-core-functions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-core/bp-core-functions.php 2018-05-24 21:02:54 UTC (rev 12120)
+++ trunk/src/bp-core/bp-core-functions.php 2018-05-25 03:48:20 UTC (rev 12121)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3840,3 +3840,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'li' => array(),
</span><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * Remove script and style tags from a string.
+ *
+ * @since 3.0.1
+ *
+ * @param string $string The string to strip tags from.
+ * @return string The stripped tags string.
+ */
+function bp_strip_script_and_style_tags( $string ) {
+ return preg_replace( '@<(script|style)[^>]*?>.*?</\\1>@si', '', $string );
+}
</ins></span></pre></div>
<a id="trunksrcbptemplatesbpnouveaubuddypresscommonjstemplatesmessagesindexphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php 2018-05-24 21:02:54 UTC (rev 12120)
+++ trunk/src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php 2018-05-25 03:48:20 UTC (rev 12121)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -272,11 +272,15 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php bp_nouveau_messages_hook( 'before', 'content' ); ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.beforeContent ) { #>
+ <div class="bp-messages-hook before-message-content">{{{data.beforeContent}}}</div>
+ <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="message-content"><# print( data.content ) #></div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="message-content">{{{data.content}}}</div>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php bp_nouveau_messages_hook( 'after', 'content' ); ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.afterContent ) { #>
+ <div class="bp-messages-hook after-message-content">{{{data.afterContent}}}</div>
+ <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcbptemplatesbpnouveauincludesmessagesajaxphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-templates/bp-nouveau/includes/messages/ajax.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-templates/bp-nouveau/includes/messages/ajax.php 2018-05-24 21:02:54 UTC (rev 12120)
+++ trunk/src/bp-templates/bp-nouveau/includes/messages/ajax.php 2018-05-25 03:48:20 UTC (rev 12121)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -134,9 +134,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> wp_send_json_error( $response );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Get the message bye pretending we're in the message loop.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Get the message by pretending we're in the message loop.
</ins><span class="cx" style="display: block; padding: 0 10px"> global $thread_template;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $bp = buddypress();
+ $reset_action = $bp->current_action;
+
+ // Override bp_current_action().
+ $bp->current_action = 'view';
+
</ins><span class="cx" style="display: block; padding: 0 10px"> bp_thread_has_messages( array( 'thread_id' => (int) $_POST['thread_id'] ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Set the current message to the 2nd last.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -182,9 +188,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $reply['is_starred'] = array_search( 'unstar', explode( '/', $star_link ) );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $extra_content = bp_nouveau_messages_catch_hook_content( array(
+ 'beforeContent' => 'bp_before_message_content',
+ 'afterContent' => 'bp_after_message_content',
+ ) );
+
+ if ( array_filter( $extra_content ) ) {
+ $reply = array_merge( $reply, $extra_content );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Clean up the loop.
</span><span class="cx" style="display: block; padding: 0 10px"> bp_thread_messages();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Remove the bp_current_action() override.
+ $bp->current_action = $reset_action;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> wp_send_json_success( array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'messages' => array( $reply ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'feedback' => __( 'Your reply was sent successfully', 'buddypress' ),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -356,10 +374,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> wp_send_json_error( $response );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $thread_id = (int) $_POST['id'];
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $thread_id = (int) $_POST['id'];
+ $bp = buddypress();
+ $reset_action = $bp->current_action;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Override bp_current_action().
+ $bp->current_action = 'view';
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Simulate the loop.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! bp_thread_has_messages( array( 'thread_id' => $thread_id ) ) ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Remove the bp_current_action() override.
+ $bp->current_action = $reset_action;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> wp_send_json_error( $response );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -422,11 +448,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $thread->messages[ $i ]['star_nonce'] = wp_create_nonce( 'bp-messages-star-' . bp_get_the_thread_message_id() );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $extra_content = bp_nouveau_messages_catch_hook_content( array(
+ 'beforeContent' => 'bp_before_message_content',
+ 'afterContent' => 'bp_after_message_content',
+ ) );
+
+ if ( array_filter( $extra_content ) ) {
+ $thread->messages[ $i ] = array_merge( $thread->messages[ $i ], $extra_content );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $i += 1;
</span><span class="cx" style="display: block; padding: 0 10px"> endwhile;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $thread->messages = array_filter( $thread->messages );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Remove the bp_current_action() override.
+ $bp->current_action = $reset_action;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> wp_send_json_success( $thread );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcbptemplatesbpnouveauincludesmessagesfunctionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-templates/bp-nouveau/includes/messages/functions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-templates/bp-nouveau/includes/messages/functions.php 2018-05-24 21:02:54 UTC (rev 12120)
+++ trunk/src/bp-templates/bp-nouveau/includes/messages/functions.php 2018-05-25 03:48:20 UTC (rev 12121)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -438,3 +438,35 @@
</span><span class="cx" style="display: block; padding: 0 10px"> )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * Fires Messages Legacy hooks to catch the content and add them
+ * as extra keys to the JSON Messages UI reply.
+ *
+ * @since 3.0.1
+ *
+ * @param array $hooks The list of hooks to fire.
+ * @return array An associative containing the caught content.
+ */
+function bp_nouveau_messages_catch_hook_content( $hooks = array() ) {
+ $content = array();
+
+ ob_start();
+ foreach ( $hooks as $js_key => $hook ) {
+ if ( ! has_action( $hook ) ) {
+ continue;
+ }
+
+ // Fire the hook.
+ do_action( $hook );
+
+ // Catch the sanitized content.
+ $content[ $js_key ] = bp_strip_script_and_style_tags( ob_get_contents() );
+
+ // Clean the buffer.
+ ob_clean();
+ }
+ ob_end_clean();
+
+ return $content;
+}
</ins></span></pre>
</div>
</div>
</body>
</html>