WP_w3all WordPress phpBB mChat integration procedure

Post by **axew3** » Mon Feb 18, 2019 12:09 am

Note:
FROM 1.9.5 or >
phpBB mChat WordPress integration requirements

UPDATED on 02 Sep 2020

Procedure to fully integrate mChat into WordPress, as widget, as shortcode element iframe on page or as button that toggle the chat:
check online example phpBB mChat into WordPress
At date of this post, the code is suitable for phpBB 3.2.. and latest mChat 2.1.2 (but following procedure, there is no reason to think it will not work fine on any version of phpBB and mChat).
Work both on integration running as Linked users or Not.

NOTE: do not activate on same page, both mChat widget and shortcode instances:
viewtopic.php?p=4789#p4789

Note that all mChat options on phpBB, so for example the option to display or not to a specified user group the chat, affect if integration run as linked users, (and in the other hand also if not linked, because mChat display into an iframe)
So if an user in phpBB can't see the chat, then he can't see nor in wp.
Also note that you need to apply Can view mChat settings on ACP groups permissions. After you choose/select options for the group, click on the APPLY ALL button. Note that you need to do this step even if the option appear as selected or not selected. Choose options that you want to apply and click on APPLY ALL button.

w3all WordPress phpBB mChat integration procedure

Activate the mChat option on plugin admin page, or activate it after procedure applied:
phpBB mChat integration

on the overall_footer.html of your theme, where this line (or just before the other iframe resizer added code):

Code: Select all

<!-- EVENT overall_footer_body_after -->

immediately after ADD this code:

Code: Select all

<script>
// a simple mChat style/display example setup for WP 
if( /#w3allmchatif/ig.exec(document.URL) != null || /#w3allmchatif/ig.exec(document.location.href) != null ){
	var boardU = "{BOARD_URL}";
	var hnofollow = 0;
$( document ).ready(function() {

$( "body" ).on("click", "a", function(e) {
	var href = $(this).attr("href");

 if( typeof href != 'undefined' && this.href[this.href.length -1] != '#' && /\?jumpto=/ig.exec(this.href) == null )
	{
	 if( href.indexOf(boardU) < 0 || href.indexOf('i=permissions&mode=setting_user_global') > -1 || href.indexOf('/mchat') > -1 ){
	 //if(href.indexOf('/mchat') > -1){
	 if( /[.+[\/mchat]$/ig.exec(href) !== null ){
		return;
	 }
	 
		hnofollow = 1;
		e.preventDefault();
		e.stopPropagation();
		window.open(href,'_blank');
		return;
	} else {
		e.preventDefault();
		e.stopPropagation();
		window.open(href,'_blank');
		return;
	}
	}
});	
	
$( "#page-header,#page-footer" ).css( { "height" : "0px", "max-height" : "0px", "overflow": "hidden" } ); // can't be none, or events will not affect
$( ".page-body,#wrap" ).css( { "margin" : "0px", "padding" : "0px" } );
$( ".page-body h2,#mchat-legend" ).css( "display", "none" );
$( "div.mchat-text blockquote div cite a" ).click(function(e) {
	if( /\?jumpto=/ig.exec(this.href) == null ){
		e.preventDefault();
		if(hnofollow < 1){
		 window.open(this.href,'_blank');
	  }
		return;
	}
});

$( "div.list-inner span.mchat-title a" ).click(function(e) {
		e.preventDefault();
		window.open(this.href,'_blank');
		return;
});

$( "body" ).on("click", ".username,.username-coloured,#mchat-legend a,cite a", function(e) {
	var href = $(this).attr("href");
	if( typeof href != 'undefined' && /\?jumpto=/ig.exec(this.href) == null ){
		e.preventDefault();
		if(hnofollow < 1){
		window.open(href,'_blank');
	}
		return;
	}
});

}); // ready
}
</script>

FOLLOW MORE BELOW, UNDER THE STRIKE TEXT

If running integration in iframe mode, then into overall_footer.html added code, would be necessary to prevent that the resizer scroll on chat, and to avoid this, on the overall_footer.html js code you added, this line:
[code] if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,50); // change 50 to another value may 0 or 100 or 500. Top distance gap in px when page scroll top[/code]
should be changed into:
[code]if( typeof w3_chat_phpBBpage == 'undefined' ){ // activate fix for mchat to not scroll
if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,50); // change 50 to another value may 0 or 100 or 500. Top distance gap in px when page scroll top
}[/code]

AND the line:
[code]parent.w3all_ajaxup_from_phpbb(w3appendevents); [/code]
INTO:
[code]if(w3appendevents.indexOf('w3allmchatif') == -1){
//if(parent.location.href.indexOf(wordpress_url_page_forum) > -1){
parent.w3all_ajaxup_from_phpbb(w3appendevents);
//}
}[/code]

(because the code not need to execute when not in page forum, the js function
w3all_ajaxup_from_phpbb
come out on wp header html output only on page forum (with code as is))
but the call to this function is done within overall_footer.html of phpBB, which is part of mChat, so called all over wp if mchat active, also when not on page forum)

#########################
If not running the integration in iframe mode, then you do not added the overall_footer.html code of the iframe resizer already, then you'll need to add this into your phpBB overall_footer.html template file, just before the closing </body> tag:
[code]<script type="text/javascript" src="https://www.axew3.com/phpBB/iframeResiz ... dow.min.js" defer></script>[/code]
change the URL to fit /point to the file iframeResizer.contentWindow.min.js you go to add into your phpBB root folder. Copy the file iframeResizer.contentWindow.min.js that is contained inside wp_w3all plugin folder
wp/wp-content/plugins/wp-w3all-phpbb-integration/addons/resizer/
and paste it into your phpBB root folder.
#########################

Remember to recompile phpBB template.

If you want to use the mChat shortcode button, that toggle the mChat as on the online example,
then (as code actually is) open this file:
/wp-content/plugins/\wp-w3all-phpbb-integration/addons/custom_js_css.php
or if you use custom files folder option, then the one you copied/pasted on:
/wp-content/plugins/wp-w3all-config/custom_js_css.php

and on top, check for this:

Code: Select all

#w3all_phpbb_mchat_iframe{
/* activate this only if on shortcode mode */
/* position:absolute;top:0px; */
}

change into this:

Code: Select all

#w3all_phpbb_mchat_iframe{
/* activate this only if on shortcode mode */
position:absolute;top:0px;
}

Widget and Shortcode
Activate the new mChat widget in WordPress if you want a widget.
To use/activate the shortcode, that will display as button (like on online example) or as element on page where it is applied, you'll use the shortcode in this way:

to display as element on page/post:

Code: Select all

 [w3allphpbbmchat]

to display as toggle button:

Code: Select all

[w3allphpbbmchat mchat_w3_toggle="1"]

If you want to change javascript code and or CSS of mChat in WordPress, you can do this on file:
/wp-content/plugins/wp-w3all-phpbb-integration/addons/custom_js_css.php
or again, if you use custom files folder option, then the one you copied/pasted on:
/wp-content/plugins/wp-w3all-config/custom_js_css.php

the option:
Use custom files to display Last Topics Widgets, Login Widget or Last Topics Shortcode content on plugin admin affect this file.
So if option active, you need to copy and paste, like others files on folder /views, this file into the folder:
/wp-content/plugins/wp-w3all-config
you created.

The same is valid for the others two files:
/wp-content/plugins/wp-w3all-phpbb-integration/views/wp_w3all_phpbb_mchat.php (widget)
/wp-content/plugins/wp-w3all-phpbb-integration/views/wp_w3all_phpbb_mchat_short.php (shortcode)
copy and paste, like others files on folder /views, these files (or which you use/activate) into the folder:
/wp-content/plugins/wp-w3all-config
if the plugin option
Use custom files to display Last Topics Widgets, Login Widget or Last Topics Shortcode content is active.

The page-forum has been excluded to load the mChat iframe.