MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Any JavaScript here will be loaded for all users on every page load. */
/* Google Translate widget for Chameleon skin (selected languages only) — SAFE FOR VE */

(function () {
  // ---- guards: never run on editor/VE or without Chameleon navbar ----
  mw.loader.using(['mediawiki.util']).then(function () {
    var isVE = mw.util.getParamValue('veaction') === 'edit';
    var isEdit = mw.config.get('wgAction') === 'edit';
    var isChameleon = mw.config.get('skin') === 'chameleon';
    var hasNavbar = !!document.querySelector('.navbar-collapse');

    if (isVE || isEdit || !isChameleon || !hasNavbar) {
      return; // bail out: do not touch DOM or load scripts while editing / wrong skin
    }

    var LANGS = 'ko,ja,es,de,zh-CN,zh-TW,fr,ar,hi,pt,ru';
    var CONTAINER_ID = 'google_translate_element';

    function ensureContainer() {
      // only attach inside the Chameleon navbar; never fall back to <body> on VE
      var host = document.querySelector('.navbar-collapse');
      if (!host) return;
      if (!document.getElementById(CONTAINER_ID)) {
        var el = document.createElement('div');
        el.id = CONTAINER_ID;
        el.style.marginLeft = '15px';
        host.appendChild(el);
      }
    }

    // dedicated init
    window.koreapediaGTEInit = function () {
      ensureContainer();
      if (!(window.google && google.translate && google.translate.TranslateElement)) return;
      new google.translate.TranslateElement({
        pageLanguage: 'en',
        includedLanguages: LANGS,
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
      }, CONTAINER_ID);
    };

    function loadOrInit() {
      if (window.google && google.translate && google.translate.TranslateElement) {
        window.koreapediaGTEInit();
        return;
      }
      if (!document.querySelector('script[src*="translate_a/element.js"]')) {
        var s = document.createElement('script');
        s.src = 'https://translate.google.com/translate_a/element.js?cb=koreapediaGTEInit';
        document.head.appendChild(s);
      }
    }

    // ---- Only attach styling logic when the widget can actually appear (read view) ----
    (function () {
      var RIGHT_INSET = 160;
      var FRAME_WIDTH = 500;

      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);
      }

      document.addEventListener('click', function (e) {
        var el = e.target.closest && e.target.closest('#google_translate_element');
        if (el) {
          setTimeout(findAndStyle, 120);
          setTimeout(findAndStyle, 400);
        }
      });

      window.addEventListener('resize', function () {
        setTimeout(findAndStyle, 150);
      });

      // scope the observer only on read view; avoid observing whole document in editors
      var mo = new MutationObserver(function () { setTimeout(findAndStyle, 50); });
      mo.observe(document.body, { childList: true, subtree: true });

      // init
      $(function () {
        ensureContainer();
        loadOrInit();
        findAndStyle();
      });
    })();
  });
})();