Google translation button integration

Support area for phpBB's mChat extension
dimassamid
Donor
Posts: 16
Joined: 11 Jan 2019, 04:19

Google translation button integration

Post by dimassamid » 17 Apr 2020, 15:06

Hello!

I would like to integrate the Google translate button for mChat messages.

I have added translation script to overall_header.html and mchat_messages.html


overall_header.html

Code: Select all

<!-- Translate -->
<script>
function googleSectionalElementInit() {
  new google.translate.SectionalElement({
    sectionalNodeClassName: 'goog-trans-section',
    controlNodeClassName: 'goog-trans-control',
    background: '#f4fa58'
  }, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
<!-- Translate -->
mchat_messages.html

Code: Select all

<div class="mchat-text">
	{% EVENT dmzx_mchat_messages_text_before %}
	<div class="goog-trans-section">{{ mchatrow.MCHAT_MESSAGE }}<a href="javascript:void(0)"><span class="goog-trans-control"></span></a></div>
	{% EVENT dmzx_mchat_messages_text_after %}
</div>
It's working fine for current messages, but old messages (I use Infinite scroll addon) and new messages do not contain a translation link. Need to reload the full page (F5) so that links appear.
Could you help me please? How to integrate the script correctly? Is it possible?

Thanks in advance!

User avatar
kasimi
mChat developer
Posts: 1069
Joined: 06 Oct 2016, 09:56
Location: Germany

Re: Google translation button integration

Post by kasimi » 17 Apr 2020, 15:30

Try this:
  • Open ext/dmzx/mchat/styles/all/template/javascript/mchat.js
  • Find, around line 380:

    Code: Select all

    $(mChat).trigger('mchat_response_handle_data_after', [json]);
  • Add before:

    Code: Select all

    $.getScript("//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit");
This entirely ignores the performance aspect because it re-translates the entire section after each message is added. Maybe there's a better way, but I'm not familiar with Google Translate at all.

kingbob777
Donor
Posts: 23
Joined: 22 Jul 2019, 23:05

Re: Google translation button integration

Post by kingbob777 » 21 Apr 2020, 20:27

This sounds cool, will it be made into an extension? :beer:

dimassamid
Donor
Posts: 16
Joined: 11 Jan 2019, 04:19

Re: Google translation button integration

Post by dimassamid » 05 May 2020, 01:11

Hello!

No, it didn't help :(

Also I added the full link:

Code: Select all

$.getScript("//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en");
It's working, but after each update one more "TRANSLATE" button appears:
TranslateTranslateTranslateTranslateTranslateTranslateTranslateTranslateTranslateTranslateTranslateTranslate etc...

User avatar
kasimi
mChat developer
Posts: 1069
Joined: 06 Oct 2016, 09:56
Location: Germany

Re: Google translation button integration

Post by kasimi » 07 May 2020, 15:33

I don't use Google Translate so I can't test it. I'm sure there's a way to remove the duplicate buttons but I would need access to a live board where this is happening. Feel free to send me a PM.

User avatar
kasimi
mChat developer
Posts: 1069
Joined: 06 Oct 2016, 09:56
Location: Germany

Re: Google translation button integration

Post by kasimi » 14 May 2020, 12:08

Thank you dimassamid for the PM and for providing a test board. I have fixed the issue and created a small extension that adds the Translate button: viewtopic.php?f=41&t=453

Who is online

Users browsing this forum: CCBot [Bot] and 1 guest