Multiple Globe Icons Javascript Fix

I have changed some of the code in light of using multiple “Globe” icons on a page. I have different menus for desktop and mobile, requiring two instances of the icon.

The renderGSatelites function of the plugin’s JavaScript is targeting $('.gglobe') absolutely, which was causing the second icon’s satellites to malform.

I have fixed the code for this function by targeting the target property of the provided Event object, allowing us to base the code on relative calculations.

You can see the code here (line 583 of wp-content/plugins/gtranslate/gtranslate.php): –

            // Adding javascript
            widget_preview += '<script>'+new_line;
            widget_preview += "function renderGSatelites($, e) { $('.gsatelite').remove();"+new_line;
            widget_preview += "var gglobe = $(e.target);"+new_line;
            widget_preview += "var gsatelites = gglobe.prev('.gsatelites');"+new_line;
            widget_preview += "var centerPosition = gglobe.position();"+new_line;
            widget_preview += "centerPosition.left += Math.floor(gglobe.width() / 2) - 10;"+new_line;
            widget_preview += "centerPosition.top += Math.floor(gglobe.height() / 2) - 10;"+new_line;
            widget_preview += 'var language_codes2 = '+JSON.stringify(jQuery(".connectedSortable2 li input:checked").map(function() {return jQuery(this).val();}).toArray())+';'+new_line;
            widget_preview += 'var languages = '+JSON.stringify((function(){var langs = [], selected_lang_codes = jQuery(".connectedSortable2 li input:checked").map(function() {return jQuery(this).val();}).toArray();for(var key in selected_lang_codes)langs.push(gt_lang_array[selected_lang_codes[key]]);return langs;})())+';'+new_line;
            widget_preview += 'var us_flag = '+(jQuery('#alt_us:checked').length ? 'true' : 'false')+';'+new_line;
            widget_preview += 'var ca_flag = '+(jQuery('#alt_ca:checked').length ? 'true' : 'false')+';'+new_line;
            widget_preview += 'var br_flag = '+(jQuery('#alt_br:checked').length ? 'true' : 'false')+';'+new_line;
            widget_preview += 'var mx_flag = '+(jQuery('#alt_mx:checked').length ? 'true' : 'false')+';'+new_line;
            widget_preview += 'var qc_flag = '+(jQuery('#alt_qc:checked').length ? 'true' : 'false')+';'+new_line;
            widget_preview += 'var count = language_codes2.length, r0 = 55, r = r0, d = 34, cntpc = 12, nc = 0, m = 1.75;'+new_line;
            widget_preview += 'cntpc = 2 * Math.PI * r0 / 34;'+new_line;
            widget_preview += 'for (var i = 0, j = 0; i < count; i++, j++) {'+new_line;
            widget_preview += 'var x, y, angle;'+new_line;
            widget_preview += 'do {if (j + 1 > Math.round(2 * r0 * Math.PI / d) * (nc + 1) * (nc + 2) / 2) {nc++;r = r + r0;cntpc = Math.floor(2 * Math.PI * r / d);}angle = j * 2 * Math.PI / cntpc + Math.PI / 4;x = centerPosition.left + Math.cos(angle) * r;y = centerPosition.top + Math.sin(angle) * r;'+new_line;
            widget_preview += "var positionGSatelites = (gsatelites.parent().css('position') == 'fixed' ? gsatelites.parent().position() : gsatelites.offset()),vpHeight = $(window).height(),vpWidth = $(window).width(),tpViz = positionGSatelites.top + y >= 0 && positionGSatelites.top + y < vpHeight,btViz = positionGSatelites.top + y + 24 > 0 && positionGSatelites.top + y + 24 <= vpHeight,ltViz = positionGSatelites.left + x >= 0 && positionGSatelites.left + x < vpWidth,rtViz = positionGSatelites.left + x + 24 > 0 && positionGSatelites.left + x + 24 <= vpWidth,vVisible = tpViz && btViz,hVisible = ltViz && rtViz;if (vVisible && hVisible) {break;} else {j++;}} while (j - i < 10 * count);"+new_line;
            widget_preview += "$('.gsatelites').append('<span class=\"gsatelite gs' + (i + 1) + ' glang_' + language_codes2[i] + '\" onclick=\"doGTranslate("+"\\\\'"+default_language+"|'+language_codes2[i]+'"+"\\\\'"+")\" title=\"' + languages[i] + '\" style=\"background-image:url($wp_plugin_url/24/' + (function(l){if(l == 'en' && us_flag)return 'en-us';if(l == 'pt' && br_flag)return 'pt-br';if(l == 'es' && mx_flag)return 'es-mx';return l;})(language_codes2[i]) + '.png);left:' + x + 'px;top:' + y + 'px;\"></span>');"+new_line;
            widget_preview += "$('.gs' + (i + 1)).delay((i + 1) * 10).fadeIn('fast');"+new_line;
            widget_preview += '}}'+new_line;
            widget_preview += "function hideGSatelites($) { $('.gsatelite').each(function(i) { $(this).delay(($('.gsatelite').length - i - 1) * 10).fadeOut('fast');});}"+new_line;
            widget_preview += "(function gt_jquery_ready() {"+new_line;
            widget_preview += "    if(!window.jQuery||!jQuery.fn.click) return setTimeout(gt_jquery_ready, 20);"+new_line;
            widget_preview += "    (function($) { $('body').click(function() {hideGSatelites($);});$('.gglobe').click(function(e) {e.stopPropagation();renderGSatelites($, e);});})(jQuery);"+new_line;
            widget_preview += '})();'+new_line;
            widget_preview += '<\/script>'+new_line;

I have attached the file here: -https://mega.nz/file/PZ8l3KwQ#DK5oaBtYcT8wSF6jJY5SwoUwGB_7QJNlWvYVz4jWBnw

I have attached the plugin (with corrected file) here: –
https://mega.nz/file/eNkjVaKA#LumqSh3WuiRSOxDk4vPuZVsUerpB-KKKgxGSQAA-8qQ

Requesting this fix be applied to a new build of the plugin, not a fan of leaving custom code in a plugin’s files.