☰

Google Search Region

A user script that lets you quickly switch Google search to different region.

  1. // ==UserScript==
  2. // @name            Google Search Region
  3. // @namespace       jmln.tw
  4. // @version         0.4.1
  5. // @description     A user script that lets you quickly switch Google search to different region.
  6. // @author          Jimmy Lin
  7. // @license         MIT
  8. // @homepageURL     https://github.com/jmlntw/google-search-region
  9. // @supportURL      https://github.com/jmlntw/google-search-region/issues
  10. // @include         /^https:\/\/(?:ipv4|ipv6|www)\.google\.(?:[a-z\.]+)\/search\?(?:.+&)?q=[^&]+(?:&.+)?$/
  11. // @exclude         /^https:\/\/(?:ipv4|ipv6|www)\.google\.(?:[a-z\.]+)\/search\?(?:.+&)?tbm=lcl(?:&.+)?$/
  12. // @compatible      firefox
  13. // @compatible      chrome
  14. // @compatible      edge
  15. // @compatible      opera
  16. // @run-at          document-end
  17. // @grant           GM_getValue
  18. // @grant           GM_setValue
  19. // @grant           GM.getValue
  20. // @grant           GM.setValue
  21. // ==/UserScript==
  22.  
  23. // =============================================================================
  24. // Add compatibility between the Greasemonkey 4 APIs and existing/legacy APIs.
  25. // =============================================================================
  26.  
  27. if (typeof GM === 'undefined') {
  28.   // eslint-disable-next-line no-global-assign
  29.   GM = {
  30.     getValue: (...args) => Promise.resolve(GM_getValue.apply(this, args)),
  31.     setValue: (...args) => Promise.resolve(GM_setValue.apply(this, args))
  32.   }
  33. }
  34.  
  35. function addStyle (css) {
  36.   const style = document.createElement('style')
  37.   style.type = 'text/css'
  38.   style.textContent = css
  39.   document.head.appendChild(style)
  40.   return style
  41. }
  42. GM.addStyle = addStyle
  43.  
  44. // =============================================================================
  45. // Helper Functions
  46. // =============================================================================
  47.  
  48. /**
  49.  * @param {string} selector
  50.  * @param {Element} [context]
  51.  * @return {Element}
  52.  */
  53. function $ (selector, context) {
  54.   return (context || document).querySelector(selector)
  55. }
  56.  
  57. /**
  58.  * @param {string} selector
  59.  * @param {Element} [context]
  60.  * @return {NodeListOf<Element>}
  61.  */
  62. function $$ (selector, context) {
  63.   return (context || document).querySelectorAll(selector)
  64. }
  65.  
  66. /**
  67.  * @param {Element} target
  68.  * @param {string} type
  69.  * @param {EventListener} callback
  70.  * @param {boolean} [useCapture]
  71.  */
  72. function $on (target, type, callback, useCapture) {
  73.   target.addEventListener(type, callback, !!useCapture)
  74. }
  75.  
  76. /**
  77.  * @param {Element} target
  78.  * @param {string} selector
  79.  * @param {string} type
  80.  * @param {EventListener} callback
  81.  */
  82. function $delegate (target, selector, type, callback) {
  83.   const useCapture = (type === 'blur') || (type === 'focus')
  84.   const dispatchEvent = function dispatchEvent (event) {
  85.     if (event.target.matches(selector)) { callback.call(event.target, event) }
  86.   }
  87.  
  88.   $on(target, type, dispatchEvent, useCapture)
  89. }
  90.  
  91. if (window.NodeList && !window.NodeList.prototype.forEach) {
  92.   window.NodeList.prototype.forEach = Array.prototype.forEach
  93. }
  94.  
  95. // =============================================================================
  96. // Template Engine
  97. // =============================================================================
  98.  
  99. /**
  100.  * @param {string} text
  101.  * @param {Object} data
  102.  * @return {string}
  103.  */
  104. function renderTemplate (text, data) {
  105.   const matcher = /<%-([\s\S]+?)%>|<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g
  106.   const escapeChar = function escapeChar (text) {
  107.     return text
  108.       .replace(/\\/g, '\\\\')
  109.       .replace(/'/g, "\\'")
  110.       .replace(/\r/g, '\\r')
  111.       .replace(/\n/g, '\\n')
  112.       .replace(/\u2028/g, '\\u2028')
  113.       .replace(/\u2029/g, '\\u2029')
  114.   }
  115.   const escape = function escape (text) {
  116.     return ('' + text)
  117.       .replace(/&/g, '&amp;')
  118.       .replace(/</g, '&lt;')
  119.       .replace(/>/g, '&gt;')
  120.       .replace(/"/g, '&quot;')
  121.       .replace(/'/g, '&#x27;')
  122.       .replace(/`/g, '&#x60;')
  123.   }
  124.  
  125.   let index = 0
  126.   let source = "__p += '"
  127.  
  128.   text.replace(matcher, (match, escape, interpolate, evaluate, offset) => {
  129.     source += escapeChar(text.slice(index, offset))
  130.     index = offset + match.length
  131.     if (escape) {
  132.       source += `' + ((__t = (${escape})) == null ? '' : escape(__t)) + '`
  133.     } else if (interpolate) {
  134.       source += `' + ((__t = (${interpolate})) == null ? '' : __t) + '`
  135.     } else if (evaluate) {
  136.       source += `'; ${evaluate} __p += '`
  137.     }
  138.     return match
  139.   })
  140.  
  141.   source += "';"
  142.   source = `
  143.     let __t, __p = '';
  144.     const __j = Array.prototype.join;
  145.     const print = function print () { __p += __j.call(arguments, ''); };
  146.     with (data || {}) { ${source} }
  147.     return __p;
  148.   `
  149.  
  150.   try {
  151.     // eslint-disable-next-line no-new-func
  152.     return new Function('data', 'escape', source).call(this, data, escape)
  153.   } catch (err) {
  154.     err.source = source
  155.     throw err
  156.   }
  157. }
  158.  
  159. // =============================================================================
  160. // User Script Configuration
  161. // =============================================================================
  162.  
  163. /**
  164.  * @typedef {Object} Config
  165.  * @property {boolean} setTLD
  166.  * @property {boolean} setHl
  167.  * @property {boolean} setGl
  168.  * @property {boolean} setCr
  169.  * @property {boolean} setLr
  170.  * @property {boolean} showFlags
  171.  * @property {Array<string>} userRegions
  172.  */
  173.  
  174. /**
  175.  * @type {Config}
  176.  */
  177. const config = Object.seal({
  178.   setTLD: true,
  179.   setHl: true,
  180.   setGl: true,
  181.   setCr: false,
  182.   setLr: false,
  183.   showFlags: true,
  184.   userRegions: ['wt-wt', 'jp-ja', 'tw-zh', 'us-en']
  185. })
  186.  
  187. /**
  188.  * @return {Promise<Config>}
  189.  */
  190. function loadConfig () {
  191.   return GM.getValue('config')
  192.     .then(value => {
  193.       try { return JSON.parse(value) } catch (err) { return {} }
  194.     })
  195.     .then(value => {
  196.       return Object.assign(config, value)
  197.     })
  198. }
  199.  
  200. /**
  201.  * @return {Promise<Config>}
  202.  */
  203. function saveConfig () {
  204.   return GM.setValue('config', JSON.stringify(config))
  205. }
  206.  
  207. // =============================================================================
  208. // Search Regions
  209. // =============================================================================
  210.  
  211. /**
  212.  * @typedef {Object} Region
  213.  * @property {string} id
  214.  * @property {string} name
  215.  * @property {string} [tld]
  216.  * @property {string} [country]
  217.  * @property {string} [lang]
  218.  */
  219.  
  220. /**
  221.  * @type {ReadonlyArray<Region>}
  222.  */
  223. const regions = Object.freeze([
  224.   {id: 'wt-wt', name: 'All Regions', tld: 'com'},
  225.   {id: 'ar-es', name: 'Argentina', tld: 'com.ar', country: 'ar', lang: 'es'},
  226.   {id: 'au-en', name: 'Australia', tld: 'com.au', country: 'au', lang: 'en'},
  227.   {id: 'at-de', name: 'Austria', tld: 'at', country: 'at', lang: 'de'},
  228.   {id: 'be-fr', name: 'Belgium (fr)', tld: 'be', country: 'be', lang: 'fr'},
  229.   {id: 'be-nl', name: 'Belgium (nl)', tld: 'be', country: 'be', lang: 'nl'},
  230.   {id: 'br-pt', name: 'Brazil', tld: 'com.br', country: 'br', lang: 'pt'},
  231.   {id: 'bg-bg', name: 'Bulgaria', tld: 'bg', country: 'bg', lang: 'bg'},
  232.   {id: 'ca-en', name: 'Canada', tld: 'ca', country: 'ca', lang: 'en'},
  233.   {id: 'ca-fr', name: 'Canada (fr)', tld: 'ca', country: 'ca', lang: 'fr'},
  234.   {id: 'ct-ca', name: 'Catalonia', tld: 'cat', country: 'ct', lang: 'ca'},
  235.   {id: 'cl-es', name: 'Chile', tld: 'cl', country: 'cl', lang: 'es'},
  236.   {id: 'cn-zh', name: 'China', tld: 'com.hk', country: 'cn', lang: 'zh-cn'},
  237.   {id: 'co-es', name: 'Colombia', tld: 'com.co', country: 'co', lang: 'es'},
  238.   {id: 'hr-hr', name: 'Croatia', tld: 'hr', country: 'hr', lang: 'hr'},
  239.   {id: 'cz-cs', name: 'Czech Republic', tld: 'cz', country: 'cz', lang: 'cs'},
  240.   {id: 'dk-da', name: 'Denmark', tld: 'dk', country: 'dk', lang: 'da'},
  241.   {id: 'ee-et', name: 'Estonia', tld: 'ee', country: 'ee', lang: 'et'},
  242.   {id: 'fi-fi', name: 'Finland', tld: 'fi', country: 'fi', lang: 'fi'},
  243.   {id: 'fr-fr', name: 'France', tld: 'fr', country: 'fr', lang: 'fr'},
  244.   {id: 'de-de', name: 'Germany', tld: 'de', country: 'de', lang: 'de'},
  245.   {id: 'gr-el', name: 'Greece', tld: 'gr', country: 'gr', lang: 'el'},
  246.   {id: 'hk-zh', name: 'Hong Kong', tld: 'com.hk', country: 'hk', lang: 'zh-hk'},
  247.   {id: 'hu-hu', name: 'Hungary', tld: 'hu', country: 'hu', lang: 'hu'},
  248.   {id: 'in-en', name: 'India', tld: 'co.in', country: 'in', lang: 'en'},
  249.   {id: 'id-id', name: 'Indonesia', tld: 'co.id', country: 'id', lang: 'id'},
  250.   {id: 'id-en', name: 'Indonesia (en)', tld: 'co.id', country: 'id', lang: 'en'},
  251.   {id: 'ie-en', name: 'Ireland', tld: 'ie', country: 'ie', lang: 'en'},
  252.   {id: 'il-he', name: 'Israel', tld: 'co.il', country: 'il', lang: 'he'},
  253.   {id: 'it-it', name: 'Italy', tld: 'it', country: 'it', lang: 'it'},
  254.   {id: 'jp-ja', name: 'Japan', tld: 'co.jp', country: 'jp', lang: 'ja'},
  255.   {id: 'kr-ko', name: 'Korea', tld: 'co.kr', country: 'kr', lang: 'ko'},
  256.   {id: 'lv-lv', name: 'Latvia', tld: 'lv', country: 'lv', lang: 'lv'},
  257.   {id: 'lt-lt', name: 'Lithuania', tld: 'lt', country: 'lt', lang: 'lt'},
  258.   {id: 'my-ms', name: 'Malaysia', tld: 'com.my', country: 'my', lang: 'ms'},
  259.   {id: 'my-en', name: 'Malaysia (en)', tld: 'com.my', country: 'my', lang: 'en'},
  260.   {id: 'mx-es', name: 'Mexico', tld: 'mx', country: 'mx', lang: 'es'},
  261.   {id: 'nl-nl', name: 'Netherlands', tld: 'nl', country: 'nl', lang: 'nl'},
  262.   {id: 'nz-en', name: 'New Zealand', tld: 'co.nz', country: 'nz', lang: 'en'},
  263.   {id: 'no-no', name: 'Norway', tld: 'no', country: 'no', lang: 'no'},
  264.   {id: 'pe-es', name: 'Peru', tld: 'com.pe', country: 'pe', lang: 'es'},
  265.   {id: 'ph-en', name: 'Philippines', tld: 'com.ph', country: 'ph', lang: 'en'},
  266.   {id: 'ph-tl', name: 'Philippines (tl)', tld: 'com.ph', country: 'ph', lang: 'tl'},
  267.   {id: 'pl-pl', name: 'Poland', tld: 'pl', country: 'pl', lang: 'pl'},
  268.   {id: 'pt-pt', name: 'Portugal', tld: 'pt', country: 'pt', lang: 'pt'},
  269.   {id: 'ro-ro', name: 'Romania', tld: 'ro', country: 'ro', lang: 'ro'},
  270.   {id: 'ru-ru', name: 'Russia', tld: 'ru', country: 'ru', lang: 'ru'},
  271.   {id: 'sa-ar', name: 'Saudi Arabia', tld: 'com.sa', country: 'sa', lang: 'ar'},
  272.   {id: 'sg-en', name: 'Singapore', tld: 'com.sg', country: 'sg', lang: 'en'},
  273.   {id: 'sk-sk', name: 'Slovakia', tld: 'sk', country: 'sk', lang: 'sk'},
  274.   {id: 'sl-sl', name: 'Slovenia', tld: 'si', country: 'sl', lang: 'sl'},
  275.   {id: 'za-en', name: 'South Africa', tld: 'co.za', country: 'za', lang: 'en'},
  276.   {id: 'es-es', name: 'Spain', tld: 'es', country: 'es', lang: 'es'},
  277.   {id: 'es-ca', name: 'Spain (ca)', tld: 'es', country: 'es', lang: 'ca'},
  278.   {id: 'se-sv', name: 'Sweden', tld: 'se', country: 'se', lang: 'sv'},
  279.   {id: 'ch-de', name: 'Switzerland (de)', tld: 'ch', country: 'ch', lang: 'de'},
  280.   {id: 'ch-fr', name: 'Switzerland (fr)', tld: 'ch', country: 'ch', lang: 'fr'},
  281.   {id: 'ch-it', name: 'Switzerland (it)', tld: 'ch', country: 'ch', lang: 'it'},
  282.   {id: 'tw-zh', name: 'Taiwan', tld: 'com.tw', country: 'tw', lang: 'zh-tw'},
  283.   {id: 'th-th', name: 'Thailand', tld: 'co.th', country: 'th', lang: 'th'},
  284.   {id: 'tr-tr', name: 'Turkey', tld: 'com.tr', country: 'tr', lang: 'tr'},
  285.   {id: 'gb-en', name: 'United Kingdom', tld: 'co.uk', country: 'gb', lang: 'en'},
  286.   {id: 'us-en', name: 'United States', tld: 'com', country: 'us', lang: 'en'},
  287.   {id: 'us-es', name: 'United States (es)', tld: 'com', country: 'us', lang: 'es'},
  288.   {id: 'vn-vi', name: 'Vietnam', tld: 'com.vn', country: 'vn', lang: 'vi'}
  289. ])
  290.  
  291. /**
  292.  * @param {Object} predicate
  293.  * @return {Region}
  294.  */
  295. function findRegion (predicate) {
  296.   return regions.find(region => {
  297.     return Object.keys(predicate).every(key => {
  298.       return predicate[key] === region[key]
  299.     })
  300.   })
  301. }
  302.  
  303. /**
  304.  * @param {string} regionID
  305.  * @return {Region}
  306.  */
  307. function getRegionByID (regionID) {
  308.   return findRegion({ id: regionID })
  309. }
  310.  
  311. const urlRegExp = Object.freeze({
  312.   tld: /^www\.google\.([\w.]+)$/i,
  313.   cr: /^country(\w+)$/i,
  314.   lr: /^lang_([\w-]+)$/i,
  315.   lang: /-\w+$/i
  316. })
  317.  
  318. /**
  319.  * @return {Region}
  320.  */
  321. function getCurrentRegion () {
  322.   const { hostname, searchParams } = new window.URL(window.location.href)
  323.   const { setTLD, setHl, setGl, setCr, setLr } = config
  324.   const predicate = {}
  325.  
  326.   if (setTLD && urlRegExp.tld.test(hostname)) {
  327.     predicate.tld = hostname.replace(urlRegExp.tld, '$1')
  328.   }
  329.   if (setHl && searchParams.has('hl')) {
  330.     predicate.lang = searchParams.get('hl')
  331.   }
  332.   if (setGl && searchParams.has('gl')) {
  333.     predicate.country = searchParams.get('gl')
  334.   }
  335.   if (setCr && searchParams.has('cr')) {
  336.     predicate.country = searchParams.get('cr').replace(urlRegExp.cr, '$1')
  337.   }
  338.   if (setLr && searchParams.has('lr')) {
  339.     predicate.lang = searchParams.get('lr').replace(urlRegExp.lr, '$1')
  340.   }
  341.  
  342.   for (let prop in predicate) {
  343.     predicate[prop] = predicate[prop].toLowerCase()
  344.   }
  345.  
  346.   return findRegion(predicate)
  347. }
  348.  
  349. /**
  350.  * @type {ReadonlyArray<string>}
  351.  */
  352. const delParams = Object.freeze([
  353.   'aqs',
  354.   'bav',
  355.   'bih',
  356.   'biw',
  357.   'bvm',
  358.   'client',
  359.   'cp',
  360.   'dcr',
  361.   'dpr',
  362.   'dq',
  363.   'ech',
  364.   'ei',
  365.   'gfe_rd',
  366.   'gs_gbg',
  367.   'gs_l',
  368.   'gs_mss',
  369.   'gs_rn',
  370.   'gws_rd',
  371.   'oq',
  372.   'pbx',
  373.   'pf',
  374.   'pq',
  375.   'prds',
  376.   'psi',
  377.   'sa',
  378.   'safe',
  379.   'sclient',
  380.   'source',
  381.   'stick',
  382.   'ved'
  383. ])
  384.  
  385. /**
  386.  * @param {Region} region
  387.  * @return {string}
  388.  */
  389. function getSearchURL (region) {
  390.   const url = new window.URL(window.location.href)
  391.   const { hostname, searchParams } = url
  392.   const { setTLD, setHl, setGl, setCr, setLr } = config
  393.   const { tld, country, lang } = region
  394.  
  395.   if (setTLD && tld) {
  396.     url.hostname = hostname.replace(urlRegExp.tld, `www.google.${tld}`)
  397.   } else if (urlRegExp.tld.test(url.hostname)) {
  398.     url.hostname = 'www.google.com'
  399.   }
  400.   if (setHl && lang) {
  401.     searchParams.set('hl', lang)
  402.   } else {
  403.     searchParams.delete('hl')
  404.   }
  405.   if (setGl && country) {
  406.     searchParams.set('gl', country)
  407.   } else {
  408.     searchParams.delete('gl')
  409.   }
  410.   if (setCr && country) {
  411.     searchParams.set('cr', `country${country.toUpperCase()}`)
  412.   } else {
  413.     searchParams.delete('cr')
  414.   }
  415.   if (setLr && lang) {
  416.     const lr = `lang_${lang.replace(urlRegExp.lang, m => m.toUpperCase())}`
  417.     searchParams.set('lr', lr)
  418.   } else {
  419.     searchParams.delete('lr')
  420.   }
  421.  
  422.   delParams.forEach(param => {
  423.     searchParams.delete(param)
  424.   })
  425.  
  426.   return url.toString()
  427. }
  428.  
  429. // =============================================================================
  430. // User Interface
  431. // =============================================================================
  432.  
  433. /**
  434.  * @param {Element} target
  435.  */
  436. function createMenu (target) {
  437.   const currentRegion = getCurrentRegion()
  438.   const data = { config, regions, getRegionByID, getSearchURL, currentRegion }
  439.   const template = `
  440.     <% const { showFlags, userRegions } = config; %>
  441.  
  442.     <span>
  443.       <g-popup>
  444.         <!-- Menu Dropdown Toggle -->
  445.         <div class="CcNe6e hide-focus-ring" aria-haspopup="true" role="button" tabindex="0">
  446.           <div class="hdtb-mn-hd gm-region-menu-toggle <%- currentRegion ? 'hdtb-sel' : '' %>" data-gm-region-onclick="toggleMenu">
  447.             <div class="mn-hd-txt KTBKoe" data-gm-region-onclick="toggleMenu">
  448.               <% if (currentRegion) { %>
  449.                 <% let { name, country } = currentRegion; %>
  450.                 <% if (country && showFlags) { %> <span class="flag flag-<%- country %>" data-gm-region-onclick="toggleMenu"></span> <% } %>
  451.                 <%- name %>
  452.               <% } else { %>
  453.                 Regions
  454.               <% } %>
  455.             </div>
  456.             <span class="mn-dwn-arw gTl8xb"></span>
  457.           </div>
  458.         </div>
  459.         <!-- Menu Dropdown -->
  460.         <div class="UjBGL pkWBse iRQHZe gm-region-menu-dropdown" style="display: none">
  461.           <g-menu class="cF4V5c Tlae9d yTik0 wplJBd PBn44e" role="menu" tabindex="-1">
  462.             <!-- User Regions List -->
  463.             <% userRegions.map(getRegionByID).forEach(region => { %>
  464.               <% if (!region) { return; } %>
  465.               <% let { id, name, country } = region; %>
  466.               <% let isCurrent = currentRegion && currentRegion.id === id; %>
  467.               <% let url = getSearchURL(region); %>
  468.               <g-menu-item class="EpPYLd hide-focus-ring <%- isCurrent ? 'nvELY' : '' %>">
  469.                 <div class="YpcDnf OSrXXb HG1dvd">
  470.                   <a href="<%- url %>" role="menuitem">
  471.                     <% if (country && showFlags) { %> <span class="flag flag-<%- country %>"></span> <% } %>
  472.                     <%- name %>
  473.                   </a>
  474.                 </div>
  475.               </g-menu-item>
  476.             <% }); %>
  477.             <!-- Configuration Modal Toggle -->
  478.             <g-menu-item class="ErsxPb hide-focus-ring">
  479.               <div class="znKVS tnhqA">
  480.                 <a class="gm-region-menu-config" data-gm-region-onclick="showModal" title="Google Search Region">...</a>
  481.               </div>
  482.             </g-menu-item>
  483.           </g-menu>
  484.         </div>
  485.       </g-popup>
  486.     </span>
  487.   `
  488.   const html = renderTemplate(template, data)
  489.  
  490.   target.insertAdjacentHTML('afterend', html)
  491. }
  492.  
  493. /**
  494.  * @param {Element} target
  495.  */
  496. function createModal (target) {
  497.   const data = { config, regions }
  498.   const template = `
  499.     <% const { setTLD, setHl, setGl, setCr, setLr, showFlags, userRegions } = config; %>
  500.  
  501.     <!-- Configuration Modal -->
  502.     <div class="gm-region-modal" data-gm-region-onclick="hideModal">
  503.       <!-- Modal Dialog -->
  504.       <div class="gm-region-modal-dialog">
  505.         <!-- Modal Header -->
  506.         <div class="gm-region-modal-header">
  507.           <div class="gm-region-modal-title">Google Search Region</div>
  508.           <div class="gm-region-modal-close" role="button" aria-label="Close" data-gm-region-onclick="hideModal"></div>
  509.         </div>
  510.  
  511.         <!-- Modal Body -->
  512.         <div class="gm-region-modal-body">
  513.           <!-- Menu Configuration -->
  514.           <div class="gm-region-modal-subtitle">Menu</div>
  515.           <!-- config.showFlags -->
  516.           <label class="gm-region-control">
  517.             <input class="gm-region-control-input" type="checkbox" data-gm-region-config="showFlags" <%- showFlags ? 'checked' : '' %>>
  518.             <span class="gm-region-control-indicator"></span>
  519.             <span class="gm-region-control-description">Show country flags</span>
  520.           </label>
  521.  
  522.           <!-- URL Configuration -->
  523.           <div class="gm-region-modal-subtitle">URL</div>
  524.           <!-- config.setTLD -->
  525.           <label class="gm-region-control">
  526.             <input class="gm-region-control-input" type="checkbox" data-gm-region-config="setTLD" <%- setTLD ? 'checked' : '' %>>
  527.             <span class="gm-region-control-indicator"></span>
  528.             <span class="gm-region-control-description">Set top level domain</span>
  529.           </label>
  530.           <!-- config.setHl -->
  531.           <label class="gm-region-control">
  532.             <input class="gm-region-control-input" type="checkbox" data-gm-region-config="setHl" <%- setHl ? 'checked' : '' %>>
  533.             <span class="gm-region-control-indicator"></span>
  534.             <span class="gm-region-control-description">Set host language (hl)</span>
  535.           </label>
  536.           <!-- config.setGl -->
  537.           <label class="gm-region-control">
  538.             <input class="gm-region-control-input" type="checkbox" data-gm-region-config="setGl" <%- setGl ? 'checked' : '' %>>
  539.             <span class="gm-region-control-indicator"></span>
  540.             <span class="gm-region-control-description">Set region (gl)</span>
  541.           </label>
  542.           <!-- config.setCr -->
  543.           <label class="gm-region-control">
  544.             <input class="gm-region-control-input" type="checkbox" data-gm-region-config="setCr" <%- setCr ? 'checked' : '' %>>
  545.             <span class="gm-region-control-indicator"></span>
  546.             <span class="gm-region-control-description">Set country filter (cr)</span>
  547.           </label>
  548.           <!-- config.setLr -->
  549.           <label class="gm-region-control">
  550.             <input class="gm-region-control-input" type="checkbox" data-gm-region-config="setLr" <%- setLr ? 'checked' : '' %>>
  551.             <span class="gm-region-control-indicator"></span>
  552.             <span class="gm-region-control-description">Set language filter (lr)</span>
  553.           </label>
  554.  
  555.           <!-- Regions Configuration -->
  556.           <div class="gm-region-modal-subtitle">Regions</div>
  557.           <div class="gm-region-columns">
  558.             <!-- config.userRegions -->
  559.             <% regions.forEach(region => { %>
  560.               <% let { id, name, country } = region; %>
  561.               <% let isChecked = userRegions.includes(id); %>
  562.               <label class="gm-region-control" title="<%- name %>">
  563.                 <input class="gm-region-control-input" type="checkbox"
  564.                        data-gm-region-config="userRegions:<%- id %>" <%- isChecked ? 'checked' : '' %>>
  565.                 <span class="gm-region-control-indicator"></span>
  566.                 <span class="gm-region-control-description">
  567.                   <% if (country) { %> <span class="flag flag-<%- country %>"></span> <% } %>
  568.                   <%- name %>
  569.                 </span>
  570.               </label>
  571.             <% }); %>
  572.           </div>
  573.         </div>
  574.  
  575.         <!-- Modal Footer -->
  576.         <div class="gm-region-modal-footer">
  577.           <button class="gm-region-btn gm-region-btn-primary" data-gm-region-onclick="save">Save</button>
  578.           <button class="gm-region-btn gm-region-btn-default" data-gm-region-onclick="hideModal">Cancel</button>
  579.         </div>
  580.       </div>
  581.     </div>
  582.   `
  583.   const html = renderTemplate(template, data)
  584.  
  585.   target.insertAdjacentHTML('beforeend', html)
  586. }
  587.  
  588. /**
  589.  * @return {Promise<void>}
  590.  */
  591. function delegateEvents () {
  592.   const body = document.body
  593.   const events = {}
  594.  
  595.   events.showModal = function showModal () {
  596.     const modal = $('.gm-region-modal')
  597.     if (modal) { modal.style.display = null } else { createModal(body) }
  598.   }
  599.  
  600.   events.hideModal = function hideModal () {
  601.     const modal = $('.gm-region-modal')
  602.     if (modal) { modal.style.display = 'none' }
  603.   }
  604.  
  605.   events.toggleMenu = function toggleMenu () {
  606.     const menu = $('.gm-region-menu-dropdown')
  607.     const toggle = $('.gm-region-menu-toggle')
  608.     if (menu) {
  609.       if (menu.style.display === 'none') {
  610.         menu.style.display = 'block'
  611.         menu.style.left = toggle.getBoundingClientRect().left + 'px'
  612.       } else {
  613.         menu.style.display = 'none'
  614.       }
  615.     }
  616.   }
  617.  
  618.   events.save = function save () {
  619.     const modal = $('.gm-region-modal')
  620.     const controls = $$('[data-gm-region-config]', modal)
  621.     const pending = {}
  622.  
  623.     controls.forEach(control => {
  624.       const attr = control.getAttribute('data-gm-region-config').split(':')
  625.       const [name, value = control.value] = attr
  626.  
  627.       if (typeof config[name] === 'boolean') {
  628.         pending[name] = control.checked
  629.       }
  630.       if (Array.isArray(config[name])) {
  631.         if (!Array.isArray(pending[name])) { pending[name] = [] }
  632.         if (control.checked) { pending[name].push(value) }
  633.       }
  634.     })
  635.  
  636.     Object.assign(config, pending)
  637.  
  638.     saveConfig().then(() => {
  639.       window.location.reload()
  640.     })
  641.   }
  642.  
  643.   $delegate(body, '[data-gm-region-onclick]', 'click', event => {
  644.     const name = event.target.getAttribute('data-gm-region-onclick')
  645.     const callback = events[name]
  646.     if (callback) { callback.call(event.target, event) }
  647.   })
  648.  
  649.   return Promise.resolve()
  650. }
  651.  
  652. /**
  653.  * @return {Promise<HTMLStyleElement>}
  654.  */
  655. function addStyles () {
  656.   addStyle(`
  657.     /*!
  658.      * Region Menu Dropdown CSS
  659.      */
  660.     .hdtb-sel{font-weight:700}
  661.     .gm-region-menu-toggle{margin-inline-end:32px}
  662.     .gm-region-menu-dropdown{display:none;position:absolute;max-height:80vh;overflow-y:auto;z-index:200}
  663.     .gm-region-menu-dropdown-show{display:block}
  664.     .gm-region-menu-dropdown .hdtbItm.hdtbSel{padding:0}
  665.     .gm-region-menu-dropdown .hdtbItm.hdtbSel a{background-color:transparent}
  666.     .gm-region-menu-config{cursor:pointer}
  667.     .gm-region-menu-dropdown g-menu-item:hover{background-color:rgba(0,0,0,.1)}
  668.     /*!
  669.      * Configuration Modal CSS
  670.      */
  671.     .gm-region-modal{display:flex;align-items:center;justify-content:center;position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.75);color:#4d5156}
  672.     .gm-region-modal-dialog{display:block;width:800px;max-width:80vw;max-height:80vh;overflow:auto;margin:32px;padding:32px;border:1px solid #c5c5c5;box-shadow:0 4px 16px rgba(0,0,0,.2);background-color:#fff;font-size:13px}
  673.     .gm-region-modal-header{display:flex;justify-content:space-between}
  674.     .gm-region-modal-footer{text-align:right}
  675.     .gm-region-modal-body{margin:16px 0}
  676.     .gm-region-modal-title{font-size:16px;font-weight:thin}
  677.     .gm-region-modal-subtitle{margin:16px 0;font-size:13px;font-weight:700}
  678.     .gm-region-modal-close{display:inline-block;width:10px;height:10px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAAElBMVEX////39/e9vb2zs7PCwsLv7++5ffrDAAAAL0lEQVQI12MIEWBgdGVwVmQQMmEQMhJUVmRgVFYyEmBgEDJWZICQEBGILEQlRBcAq64FtxSToc8AAAAASUVORK5CYII=');background-repeat:no-repeat;cursor:pointer}
  679.     .gm-region-columns{max-height:300px;overflow-x:auto;-webkit-column-count:5;-moz-column-count:5;column-count:5}
  680.     .gm-region-control{display:block;margin:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  681.     .gm-region-control-input{display:none}
  682.     .gm-region-control-indicator{display:inline-block;margin:0 4px;width:10px;height:10px;border:1px solid #c6c6c6;border-radius:1px;vertical-align:middle}
  683.     .gm-region-control-indicator::after{content:" ";display:none;position:relative;top:-3px;width:15px;height:15px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAtklEQVQ4y2P4//8/A7Ux1Q0cxoaCADIbCUgCMTvVXAoE5kA8CYidyXYpGrAH4iVAHIXiCwoMDQTimUBcBsRMlBrKCsTpUANzkC0j11BuIK6EGlgKsoAkQ4FgChD7AzELVI8YEDdDDawDYk6YQaQY6gg1oAqILYC4D8oHGcyLbBAphoJAKtQgGO4EYiHk2CLHUJAXm6AG9gCxNHoSIMdQEJCFGqiALaGSayjMxQwUGzq0S6nhZygA2ojsbh6J67kAAAAASUVORK5CYII=');background-repeat:no-repeat;background-position:-5px -3px}
  684.     .gm-region-control:hover .gm-region-control-indicator{border-color:#b2b2b2;box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}
  685.     .gm-region-control-input:checked~.gm-region-control-indicator::after{display:inline-block}
  686.     .gm-region-btn{display:inline-block;min-width:70px;height:27px;padding:0 8px;border:1px solid;border-radius:2px;font-family:inherit;font-size:11px;font-weight:700;outline:0}
  687.     .gm-region-btn-default{border-color:rgba(0,0,0,.1);background-image:linear-gradient(#f5f5f5,#f1f1f1);color:#444}
  688.     .gm-region-btn-default:hover{border-color:#c6c6c6;background-image:linear-gradient(#f8f8f8,#f1f1f1);color:#333}
  689.     .gm-region-btn-default:focus{border-color:#4d90fe}
  690.     .gm-region-btn-primary{border-color:#3079ed;background-image:linear-gradient(#4d90fe,#4787ed);color:#fff}
  691.     .gm-region-btn-primary:hover{border-color:#2f5bb7;background-image:linear-gradient(#4d90fe,#357ae8);color:#fff}
  692.     .gm-region-btn-primary:focus{border-color:transparent;box-shadow:inset 0 0 0 1px #fff}
  693.     /*!
  694.      * Generated with CSS Flag Sprite Generator <https://www.flag-sprites.com/>
  695.      *
  696.      * FAMFAMFAM Flag Icons <http://www.famfamfam.com/lab/icons/flags/>
  697.      * These flag icons are available for free use for any purpose with no
  698.      * requirement for attribution.
  699.      */
  700.     .flag{display:inline-block;width:16px;height:11px;background:url('data:image/png;base64,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') no-repeat;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated;vertical-align:middle}
  701.     .flag.flag-ar{background-position:0 0}
  702.     .flag.flag-at{background-position:-16px 0}
  703.     .flag.flag-au{background-position:-32px 0}
  704.     .flag.flag-be{background-position:-48px 0}
  705.     .flag.flag-bg{background-position:-64px 0}
  706.     .flag.flag-br{background-position:-80px 0}
  707.     .flag.flag-ca{background-position:-96px 0}
  708.     .flag.flag-ct{background-position:-112px 0}
  709.     .flag.flag-ch{background-position:0 -11px}
  710.     .flag.flag-cl{background-position:-16px -11px}
  711.     .flag.flag-cn{background-position:-32px -11px}
  712.     .flag.flag-co{background-position:-48px -11px}
  713.     .flag.flag-cz{background-position:-64px -11px}
  714.     .flag.flag-de{background-position:-80px -11px}
  715.     .flag.flag-dk{background-position:-96px -11px}
  716.     .flag.flag-ee{background-position:-112px -11px}
  717.     .flag.flag-es{background-position:0 -22px}
  718.     .flag.flag-fi{background-position:-16px -22px}
  719.     .flag.flag-fr{background-position:-32px -22px}
  720.     .flag.flag-gb{background-position:-48px -22px}
  721.     .flag.flag-gr{background-position:-64px -22px}
  722.     .flag.flag-hk{background-position:-80px -22px}
  723.     .flag.flag-hr{background-position:-96px -22px}
  724.     .flag.flag-hu{background-position:-112px -22px}
  725.     .flag.flag-id{background-position:0 -33px}
  726.     .flag.flag-ie{background-position:-16px -33px}
  727.     .flag.flag-il{background-position:-32px -33px}
  728.     .flag.flag-in{background-position:-48px -33px}
  729.     .flag.flag-it{background-position:-64px -33px}
  730.     .flag.flag-jp{background-position:-80px -33px}
  731.     .flag.flag-kr{background-position:-96px -33px}
  732.     .flag.flag-lt{background-position:-112px -33px}
  733.     .flag.flag-lv{background-position:0 -44px}
  734.     .flag.flag-mx{background-position:-16px -44px}
  735.     .flag.flag-my{background-position:-32px -44px}
  736.     .flag.flag-nl{background-position:-48px -44px}
  737.     .flag.flag-no{background-position:-64px -44px}
  738.     .flag.flag-nz{background-position:-80px -44px}
  739.     .flag.flag-pe{background-position:-96px -44px}
  740.     .flag.flag-ph{background-position:-112px -44px}
  741.     .flag.flag-pl{background-position:0 -55px}
  742.     .flag.flag-pt{background-position:-16px -55px}
  743.     .flag.flag-ro{background-position:-32px -55px}
  744.     .flag.flag-ru{background-position:-48px -55px}
  745.     .flag.flag-sa{background-position:-64px -55px}
  746.     .flag.flag-se{background-position:-80px -55px}
  747.     .flag.flag-sg{background-position:-96px -55px}
  748.     .flag.flag-sk{background-position:-112px -55px}
  749.     .flag.flag-sl{background-position:0 -66px}
  750.     .flag.flag-th{background-position:-16px -66px}
  751.     .flag.flag-tr{background-position:-32px -66px}
  752.     .flag.flag-tw{background-position:-48px -66px}
  753.     .flag.flag-us{background-position:-64px -66px}
  754.     .flag.flag-vn{background-position:-80px -66px}
  755.     .flag.flag-za{background-position:-96px -66px}
  756.   `)
  757.  
  758.   if (
  759.     window
  760.       .getComputedStyle(document.body)
  761.       .getPropertyValue('background-color') !== 'rgb(255, 255, 255)'
  762.   ) {
  763.     addStyle(`
  764.       /*!
  765.      * Configuration Modal CSS (Dark Theme)
  766.      */
  767.     .gm-region-modal{background-color:rgba(32,33,36,.75);color:#bdc1c6}
  768.     .gm-region-modal-dialog{box-shadow:0 4px 16px rgba(0,0,0,.8);border:1px solid #313437;background:#202124}
  769.     .gm-region-modal-close{filter:invert(100%)}
  770.     .gm-region-control-indicator{border:1px solid #5f6368}
  771.     .gm-region-control-indicator::after{filter:invert(100%)}
  772.     `)
  773.   }
  774.  
  775.   return Promise.resolve(true)
  776. }
  777.  
  778. // =============================================================================
  779. // Initialization
  780. // =============================================================================
  781.  
  782. /**
  783.  * @return {Promise<Element>}
  784.  */
  785. function waitForPageReady () {
  786.   return new Promise(resolve => {
  787.     const observee = $('#hdtb')
  788.     const observer = new MutationObserver(() => {
  789.       const target = $('#hdtbMenus > #tn_1 > div:first-child')
  790.       if (target) {
  791.         resolve(target)
  792.         observer.disconnect()
  793.       }
  794.     })
  795.  
  796.     observer.observe(observee, { childList: true, subtree: true })
  797.   })
  798. }
  799.  
  800. Promise.all([
  801.   waitForPageReady(),
  802.   loadConfig(),
  803.   delegateEvents(),
  804.   addStyles()
  805. ]).then(values => createMenu(values[0]))