// ==UserScript==
// @name         Hi, Google Translate, don't translate here (*)
// @name:zh-CN   Hi, 谷歌翻译，不要翻译代码块 (*)
// @namespace    https://github.com/xianghongai/Tampermonkey-UserScript
// @version      0.0.3
// @description  Google Translate, don't translate code
// @description:zh-CN   谷歌翻译不翻译代码块
// @author       Nicholas Hsiang
// @icon         https://xinlu.ink/favicon.ico
// @match        http*://*/*
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function () {
  'use strict';

    function notranslate() {
        const preEles = [
            ...document.querySelectorAll('pre'),
            ...document.querySelectorAll('code'),
            ...document.querySelectorAll('.prism-code'), // https://formatjs.io
            ...document.querySelectorAll('a.type'), // https://nodejs.org
            ...document.querySelectorAll('.example-wrap'), // https://www.wolframalpha.com/
            ...document.querySelectorAll('#handbook-content h2, .handbook-toc, #sidebar'), // https://www.typescriptlang.org/
        ];

        preEles.forEach((tiem) => {
            tiem.classList.add('notranslate');
            tiem.setAttribute('translate', 'no');
        });
    }

    function createStyleSheet() {
        const style = `.google-translate__no { position: fixed; right: 10px; bottom: 10px; z-index: 999; cursor: pointer; margin: 0; padding: 0; width: 18px; height: 18px; line-height: 18px; text-align: center; }`;
        const headEle = document.head || document.getElementsByTagName('head')[0];
        const styleEle = document.createElement('style');
        styleEle.type = 'text/css';

        if (styleEle.styleSheet) {
            styleEle.styleSheet.cssText = style;
        } else {
            styleEle.appendChild(document.createTextNode(style));
        }
        
        headEle.appendChild(styleEle);
        return style;
    }

    function createElement() {
        const icon = `
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
          <defs>
            <clipPath id="clip-translate">
              <rect width="32" height="32"/>
            </clipPath>
          </defs>
          <g id="translate" clip-path="url(#clip-translate)">
            <path id="Untitled-1" d="M59.056,103.379l-3.507-3.466.041-.041a24.19,24.19,0,0,0,5.122-9.016h4.045V88.095H55.093V85.333H52.332v2.761H42.667v2.761H58.089a21.768,21.768,0,0,1-4.377,7.387,21.6,21.6,0,0,1-3.189-4.625H47.762a24.248,24.248,0,0,0,4.115,6.3l-7.028,6.931,1.961,1.961,6.9-6.9,4.294,4.294,1.049-2.817m7.773-7H64.068l-6.213,16.569h2.761l1.546-4.142h6.558l1.56,4.142h2.761L66.829,96.379m-3.617,9.665,2.237-5.978,2.237,5.978H63.212Z" transform="translate(-41.667 -83.333)"/>
          </g>
        </svg>
        `;
        const bodyContainer = document.querySelector("body");
        const ele = document.createElement('span');

        ele.setAttribute('title', `Hi, Google Translate, don't translate here`)
        ele.classList.add('google-translate__no');

        // const text = document.createTextNode(`don't translate code`);
        // ele.appendChild(text);

        ele.innerHTML = icon;
        bodyContainer.appendChild(ele);
    }

    // 有的站点不生效，需要手动触发
    function manual() {
        const ele = document.querySelector('.google-translate__no');

        ele.addEventListener('click', () => {
            notranslate();
        })
    }

    // @grant        GM_addStyle
    // GM_addStyle(createStyleSheet());
    createStyleSheet();
    createElement();
    manual();
    notranslate();

})();