WordPress phpBB mChat integration procedure

User avatar
axew3
w3all User
w3all User
Posts: 1539
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

WordPress phpBB mChat integration procedure

Post by axew3 » Thu Jan 24, 2019 8:57 am

This post contain the integration plugin wp_w3all 1.9.5 RC2
and the 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).
This work both on integration running as Linked users or Not.

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.
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

before to follow and apply procedure, it is needed to install this 1.9.5 RC3 in attach:
wp-w3all-phpbb-integration_1.9.5_RC1.zip
wp-w3all-phpbb-integration_1.9.5_RC2.zip
wp-w3all-phpbb-integration_1.9.5_RC3.zip
(187.18 KiB) Downloaded 4 times
(just replace plugin's files with files of this RC release archive: NOTE -> until 1.9.5 or > not released)

Activate the new 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 before the other iframe resizer added code):

Code: Select all

<!-- INCLUDEJS ajax.js -->
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 ){
$( document ).ready(function() {
$( "#page-header,#page-footer" ).css( { "height" : "0px", "max-height" : "0px", "overflow": "hidden" } ); // can't be none, or events will not affect
$( "body" ).css( "padding", "0px" );
$( ".page-body h2" ).css( "display", "none" );
$( "div.mchat-text blockquote div cite a" ).click(function(e) {
		if( /\?jumpto=/ig.exec(this.href) == null ){
		e.preventDefault();
		window.open(this.href,'_blank');
		return;
	}
});

$( "div.list-inner span.mchat-title a" ).click(function(e) {
		e.preventDefault();
		window.open(this.href,'_blank');
		return;
});
$( "a[href='#']" ).click(function(e) {
		e.preventDefault();
		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();
		window.open(href,'_blank');
		return;
	}
});
});
}
</script>
Until this part not added by default into overall_footer.html "official" code, would be necessary to prevent that the resizer scroll on chat, so to avoid this, on the overall_footer.html js code you added, this line:

Code: Select all

 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
should be changed into:

Code: Select all

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
}
This will be added on the default overall_footer.html js code when new plugin version released.
(Note that at date of this post, the overall_footer.html js code has been changed several times to fix little issues now resolved.

#########################
If not running 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: Select all

<script type="text/javascript" src="https://www.axew3.com/phpBB/iframeResizer.contentWindow.min.js" defer></script>
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.

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"]
You can't use a widget and/or shortcode instance on same page, nor duplicated of the same on same page:
it can be only: one shortcode x page or one widget x page.

User avatar
axew3
w3all User
w3all User
Posts: 1539
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: WordPress phpBB mChat integration procedure

Post by axew3 » Thu Jan 24, 2019 9:16 pm

The above procedure and plugin files have been updated at date of this post!
New easy procedure, that require NO mChat files to be edited.

User avatar
axew3
w3all User
w3all User
Posts: 1539
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: WordPress phpBB mChat integration procedure

Post by axew3 » Fri Jan 25, 2019 5:52 pm

little piece of js code to add into overall_footer.html just updated at date of this post.

xray
User ww
User ww
Posts: 30
Joined: Mon Dec 24, 2018 9:48 pm

Re: WordPress phpBB mChat integration procedure

Post by xray » Mon Jan 28, 2019 8:18 am

I have noticed an issue in mChat regarding any link in the chat. example if you have the latest topic or post showing in the mCaht window and then use the chat window created it will try an open the link within the chat window instead of taking you to the forum. you can see the example on my site if you don't understand.

User avatar
axew3
w3all User
w3all User
Posts: 1539
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: WordPress phpBB mChat integration procedure

Post by axew3 » Mon Jan 28, 2019 9:03 am

AH! i was quite sure that all resolved since this last 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 ){
$( document ).ready(function() {
$( "#page-header,#page-footer" ).css( { "height" : "0px", "max-height" : "0px", "overflow": "hidden" } ); // can't be none, or events will not affect
$( "body" ).css( "padding", "0px" );
$( ".page-body h2" ).css( "display", "none" );
$( "div.mchat-text blockquote div cite a" ).click(function(e) {
		if( /\?jumpto=/ig.exec(this.href) == null ){
		e.preventDefault();
		window.open(this.href,'_blank');
		return;
	}
});

$( "div.list-inner span.mchat-title a" ).click(function(e) {
		e.preventDefault();
		window.open(this.href,'_blank');
		return;
});
$( "a[href='#']" ).click(function(e) {
		e.preventDefault();
		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();
		window.open(href,'_blank');
		return;
	}
});
});
}
</script>
any link, you mean an external link like

Code: Select all

[url]http://externalsite.com[/url]
or that point to a post within the board?
ok! let think and add the joke, patching asap!

User avatar
axew3
w3all User
w3all User
Posts: 1539
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: WordPress phpBB mChat integration procedure

Post by axew3 » Mon Jan 28, 2019 9:11 am

ok, i've just test and if i'm not wrong you mean links within board, like this:
https://localhost/root_integrations/php ... um.php?f=2
assuming we are on localhost. Think you mean this.
Any other link (also just inserted on chat, the latest pushed), i have the right result with above code, but may i've still not understand your point instead, or not try out the issue.

The kind of url like the above will open within the chat, the forum or the linked topic/post, yes.
I had not give a try to this, patching asap.

[EDITED]

User avatar
axew3
w3all User
w3all User
Posts: 1539
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: WordPress phpBB mChat integration procedure

Post by axew3 » Mon Jan 28, 2019 9:17 am

the above has been edited

xray
User ww
User ww
Posts: 30
Joined: Mon Dec 24, 2018 9:48 pm

Re: WordPress phpBB mChat integration procedure

Post by xray » Mon Jan 28, 2019 10:11 am

I applied the new code, but that did not work.

The link for a post in the chat box is what I am referring to. If there is a topic post and clicked its staying within the chat. If I am using the mChat from the iFrame the link will work. Expected behavior would be when clicking on a link within the wp_chat box it will open the iFrame forum, or if its an external link to another site than it goes there. Otherwise it will open the forum.

User avatar
axew3
w3all User
w3all User
Posts: 1539
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: WordPress phpBB mChat integration procedure

Post by axew3 » Mon Jan 28, 2019 10:14 am

yes gotcha the problem looking asap

User avatar
axew3
w3all User
w3all User
Posts: 1539
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: WordPress phpBB mChat integration procedure

Post by axew3 » Mon Jan 28, 2019 2:29 pm

ok look may i have over complicate things, it seem to me lack of the right tricky and easy logic that exist behind, even if i've not still discover. I will return over as soon i stop to fight with an mmpeg install on a centoOS cloud server :( unable to compile it correctly like a newbie from hours now- damned

But in the while the patched code may can be something like this (that maybe resolve the problem):

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
$( "body" ).css( "padding", "0px" );
$( ".page-body h2" ).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>

Post Reply