Google Translate: Filter & Flags

Filters languages and shows country flags on Google Translate

K instalaci tototo skriptu si budete muset nainstalovat rozšíření jako Tampermonkey, Greasemonkey nebo Violentmonkey.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat manažer uživatelských skriptů.

(Už mám manažer uživatelských skriptů, nechte mě ho nainstalovat!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Už mám manažer uživatelských stylů, nechte mě ho nainstalovat!)

// ==UserScript==
// @name        Google Translate: Filter & Flags
// @namespace   https://github.com/HatScripts/google-translate-filter-and-flags
// @version     1.0.2
// @license     MIT
// @description Filters languages and shows country flags on Google Translate
// @author      HatScripts
// @icon        https://ssl.gstatic.com/translate/favicon.ico
// @match       http://translate.google.com/*
// @match       https://translate.google.com/*
// @require     https://openuserjs.org/src/libs/sizzle/GM_config.js
// @grant       GM_addStyle
// @grant       GM_getValue
// @grant       GM_setValue
// @grant       GM_registerMenuCommand
// @run-at      document-idle
// ==/UserScript==

/* global GM_config, GM_info, GM_registerMenuCommand */

;(() => {
  'use strict'

  GM_config.init({
    id: 'gtff_config',
    title: GM_info.script.name + ' Settings',
    fields: {
      SHOW_FLAGS: {
        label: 'Show flags',
        type: 'checkbox',
        default: true,
        title: 'Show country flags next to languages'
      },
      FILTER_LANGUAGES: {
        label: 'Filter languages',
        type: 'checkbox',
        default: true,
        title: 'Show only the specified languages'
      },
      LANGUAGES_SHOWN: {
        label: 'Languages shown',
        type: 'textarea',
        default: 'ar,de,el,en,eo,es,fi,fr,it,ja,ko,la,no,pt,ru,sv,zh-CN',
        title: 'The languages to show, as ISO 639-1 language codes, separated by commas'
      }
    }
  })

  GM_registerMenuCommand('Settings', () => {
    GM_config.open()
  })

  console.log(GM_info.script.name)

  const LANG_MAP = {
    'iw': 'he', // Hebrew
    'jw': 'jv', // Javanese
    'mni-Mtei': 'mni', // Meiteilon (Manipuri)
    'zh-CN': 'zh', // Chinese (Simplified)
    'zh-TW': 'zh', // Chinese (Traditional)
  }

  const prefix = '.qSb8Pe'
  if (!document.querySelector(prefix)) {
    console.error('Couldn\'t find language buttons')
  }

  let css = '/* ' + GM_info.script.name + ' */'

  if (GM_config.get('FILTER_LANGUAGES')) {
    css += prefix + '{ display: none; }'
    console.log(GM_config.get('LANGUAGES_SHOWN').split(','))
    css += GM_config.get('LANGUAGES_SHOWN').split(',').map(lang => `${prefix}[data-language-code=${lang}]`).join(',')
    css += '{ display: inline-flex; }'
    css += '.C96yib > .vSUSRc > ' + prefix + ' { display: inline-flex; }'
  }

  if (GM_config.get('SHOW_FLAGS')) {
    //css += `${prefix}.RCaXn:not(.KKjvXb) .W5jNxd, ${prefix} .g3XDjb { display: none !important; }`
    css += `${prefix} > .l7O9Dc { background-repeat: no-repeat; background-size: contain; background-position-x: 6px; }`
    css += `${prefix} > .l7O9Dc > i { display: none !important; }`
    document.querySelectorAll(prefix).forEach(wrapper => {
      let code1 = wrapper.dataset.languageCode
      let code2 = LANG_MAP[code1] || code1
      css += `${prefix}[data-language-code=${code1}] > .l7O9Dc {`
      css += `background-image: url(https://hatscripts.github.io/circle-flags/flags/language/${code2}.svg) !important;`
      css += '}'
    })
  }

  GM_addStyle(css)
})()