ui2022/translate_widget.html.twig line 1

Open in your IDE?
  1. {% set translationLanguages = _args.languages|default(cms.translationLanguages) %}
  2. {% set userEffectiveLanguage = cms.userEffectiveLanguage %}
  4. {% if translationLanguages is not empty %}
  5.     {% set defaultLanguage = constant('App\\Util\\Locales::ISO6391__ENGLISH') %}
  6.     {% set defaultLanguageHumanReadable = (constant('App\\Util\\Locales::ISO6391_HUMAN_READABLE'))[defaultLanguage] %}
  7.     {% set translationLanguages  = {(defaultLanguage): defaultLanguageHumanReadable}|merge(translationLanguages) %}
  9.     {% do dom_scripts_head([
  10.         'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit',
  11.     ]) %}
  13.     <div class="col-auto mp__head-right">
  14.         <div id="language-switcher" class="dropdown dropdown-lang notranslate">
  15.             <a class="select-lang dropdown-toggle" href="#" role="button" data-toggle="dropdown"
  16.                aria-expanded="false">{{ translationLanguages[userEffectiveLanguage] }}</a>
  18.             <div class="dropdown-menu" aria-labelledby="select-language">
  19.                 {% for lang, name in translationLanguages %}
  20.                     <a class="dropdown-item{% if userEffectiveLanguage is same as(lang) %} d-none{% endif %}"
  21.                        href="#" data-href="{{ path('app.notifications.portal.language.set', {language: lang}) }}"
  22.                        data-lang="{{ lang }}">{{ name }}</a>
  23.                 {% endfor %}
  24.             </div>
  25.         </div>
  26.     </div>
  28.     <script type="text/javascript">
  29.         (function (window, document, $, undefined) {
  30.             $(function () {
  31.                 $('#language-switcher .dropdown-menu').on('click', 'a.dropdown-item', function (e) {
  32.                     e.preventDefault();
  34.                     var lang = $(this).attr('data-lang');
  35.                     $('#language-switcher .select-lang').text($(this).text());
  37.                     $('#language-switcher .dropdown-menu .dropdown-item').each(function (index, elem) {
  38.                         $(elem).toggleClass(
  39.                             'd-none',
  40.                             ($(elem).attr('data-lang') === lang)
  41.                         );
  42.                     });
  44.                     {% if app.user %}
  45.                     $.ajax({
  46.                         url: $(this).attr('data-href'),
  47.                         method: 'GET',
  48.                     });
  49.                     {% endif %}
  51.                     if (lang === '{{ defaultLanguage }}') {
  52.                         dismissGoogleTranslate();
  53.                         $('#language-switcher .select-lang').text('{{ defaultLanguageHumanReadable }}');
  54.                     } else {
  55.                         triggerLangChangeEvent(document.querySelector('.goog-te-combo'), 'change', lang);
  56.                     }
  57.                 });
  60.             });
  61.         })(window, document, jQuery);
  63.         function googleTranslateElementInit() {
  64.             new google.translate.TranslateElement({
  65.                 pageLanguage: '{{ defaultLanguage }}',
  66.                 includedLanguages: '{{ translationLanguages|keys|join(',') }}',
  67.                 layout: google.translate.TranslateElement.InlineLayout.simple,
  69.             }, 'google_translate_element');
  71.             // set cookie
  72.             var lang = '{{ userEffectiveLanguage }}';
  73.             var intervalId = setInterval(function(){
  74.                 if ($('.goog-te-combo').length > 0){ // Check if element has been found
  75.                     if (lang !== '{{ defaultLanguage }}' && $('.goog-te-combo').val() !== lang) {
  76.                         triggerLangChangeEvent(document.querySelector('.goog-te-combo'), 'change', lang);
  77.                     }
  79.                     clearInterval(intervalId);
  80.                 }
  81.             }, 1000);
  83.         }
  85.         // fire google change event, set cookie
  86.         function triggerLangChangeEvent(element, eventName, lang) {
  87.             $('.goog-te-combo').val(lang);
  88.             var event;
  89.             if (document.createEvent) {
  90.                 event = document.createEvent('HTMLEvents');
  91.                 event.initEvent(eventName, true, true);
  92.                 element.dispatchEvent(event);
  93.             } else {
  94.                 event = document.createEventObject();
  95.                 event.eventType = eventName;
  96.                 element.fireEvent('on' + event.eventType, event);
  97.             }
  98.         }
  100.         // back to default language
  101.         function dismissGoogleTranslate() {
  103.             // find `iframe` element with GoogleTranslate select and buttons
  104.             var iframe = document.getElementsByClassName('goog-te-banner-frame')[0]
  105.                 || document.getElementById(':1.container');
  106.             if (!iframe) return;
  108.             // search all buttons from the retrieved iframe
  109.             var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  110.             var restore_el = innerDoc.getElementsByTagName("button");
  112.             // fire `click` event on the `restore` button, that `Shows the origin`
  113.             for (var i = 0; i < restore_el.length; i++) {
  114.                 if (restore_el[i].id.indexOf("restore") >= 0) {
  115.                     restore_el[i].click();
  116.                     return;
  117.                 }
  118.             }
  119.         }
  120.     </script>
  122.     <div class="google-translate d-none" id="google_translate_element"></div>
  123.     <style>
  124.         body {
  125.             position: static !important;
  126.             top: 0 !important;
  127.         }
  129.         .skiptranslate {
  130.             display: none !important;
  131.         }
  132.     </style>
  134. {% endif %}