Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved translate widget #2553

Merged
merged 2 commits into from
Jun 3, 2018
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions app/views/sidebar/_related.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,20 @@
<% end %>

<% if @node && (@node.has_power_tag('iso') || @node.has_power_tag('lang')) %>
<h4><%= t('sidebar._related.translation') %></h4>
<p>
<div id="google_translate_element"></div><script type="text/javascript">
<div id="google_translate_element" class="alert alert-info">
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
addLabelTranslateElement();
}
function addLabelTranslateElement() {
var paragraph = document.createElement('span');
paragraph.innerHTML = "Translation: ";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, this is looking good -- is there a reason the title is added using JavaScript rather than inline? I see - perhaps because the whole element is replaced?

What about making a sub- <div> with the google_translate_element id, and putting the <h4> outside that, but still inside an outer <div> with alert alert-info class? That way the translate div is replaced but it's alongside the <h4> and still inside the alert box?

Thank you!

paragraph.style.fontSize = '125%';
document.getElementsByClassName("skiptranslate goog-te-gadget")[0].prepend(paragraph);
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</p>
</div>
<% end %>

<% responses = @node.responses if @node %>
Expand Down