MediaWiki:Common.js: Difference between revisions

/* Any JavaScript here will be loaded for all users on every page load. */
/* Google Translate widget for Chameleon skin (selected languages only) */

(function () {
  var LANGS = 'ko,ja,es,de,zh-CN,zh-TW,fr,ar,hi,pt,ru'; // note: no 'en' (it's pageLanguage)
  var CONTAINER_ID = 'google_translate_element';

  // Ensure container exists before init
  function ensureContainer() {
    if (!document.getElementById(CONTAINER_ID)) {
      var host = document.querySelector('.navbar-collapse') || document.body;
      var el = document.createElement('div');
      el.id = CONTAINER_ID;
      el.style.marginLeft = '15px';
      host.appendChild(el);
    }
  }

  // NEW callback name to bust any stale init
  window.koreapediaGTEInit = function () {
    ensureContainer();
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      includedLanguages: LANGS,
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, CONTAINER_ID);
  };

  // Load script only if needed; otherwise call init directly
  function loadOrInit() {
    // If library is already there, just init with our options
    if (window.google && google.translate && google.translate.TranslateElement) {
      window.koreapediaGTEInit();
      return;
    }
    // Avoid adding duplicate script tags
    if (!document.querySelector('script[src*="translate_a/element.js"]')) {
      var s = document.createElement('script');
      s.src = '//translate.google.com/translate_a/element.js?cb=koreapediaGTEInit';
      document.head.appendChild(s);
    }
  }

  mw.loader.using('mediawiki.util', function () {
    $(function () {
      ensureContainer();
      loadOrInit();
    });
  });
})();

/* ==== Force single-column Google Translate menu (robust) ==== */
(function () {
  var RIGHT_INSET = 160;   // how much of the right side to hide (px)
  var FRAME_WIDTH = 500;   // visible width (px)

  function styleMenuFrame(f) {
    try {
      f.style.setProperty('width', FRAME_WIDTH + 'px', 'important');
      f.style.setProperty('maxWidth', FRAME_WIDTH + 'px', 'important');
      f.style.setProperty('borderRadius', '8px', 'important');
      f.style.setProperty('boxShadow', '0 8px 24px rgba(0,0,0,.18)', 'important');
      f.style.setProperty('clip-path', 'inset(0 ' + RIGHT_INSET + 'px 0 0)', 'important');
      f.style.setProperty('-webkit-clip-path', 'inset(0 ' + RIGHT_INSET + 'px 0 0)', 'important');
      f.style.setProperty('overflow', 'hidden', 'important');
      f.style.setProperty('zIndex', '999999', 'important');
    } catch (e) {}
  }

  function findAndStyle() {
    var frames = document.querySelectorAll(
      'iframe.goog-te-menu-frame, iframe[id*="goog-te-menu"], iframe[src*="translate.googleapis.com"], iframe[src*="translate.google.com"]'
    );
    frames.forEach(styleMenuFrame);
  }

  // Style when user opens the dropdown
  document.addEventListener('click', function (e) {
    if (e.target.closest('#google_translate_element')) {
      setTimeout(findAndStyle, 120);
      setTimeout(findAndStyle, 400); // second pass for late loads
    }
  });

  // Also style on resize (menu can reflow)
  window.addEventListener('resize', function () {
    setTimeout(findAndStyle, 150);
  });

  // Watch the DOM for when Google injects the iframe
  var mo = new MutationObserver(function () { setTimeout(findAndStyle, 50); });
  mo.observe(document.documentElement, { childList: true, subtree: true });

  // One initial attempt
  findAndStyle();
})();