translator

划词翻译

От 20.07.2016. Виж последната версия.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да инсталирате разширение, като например Tampermonkey .

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==UserScript==
// @name translator
// @namespace https://lufei.so
// @grant GM_xmlhttpRequest
// @description 划词翻译
// @version 1.4.2
// ==/UserScript==

var sel, panel, audio, query
audio = document.createElement('audio')
audio.autoplay = true
function setStyle(el, o) {
    var x, arr = []
    function toLineThrough(s) {
        return s.replace(/[A-Z]/g, function(c) {
            return '-' + c.toLowerCase()
        })
    }
    for (x in o) {
        arr.push(toLineThrough(x) + ': ' + o[x])
    }
    el.setAttribute('style', arr.join(';'))
}
function play(type) {
    audio.src = 'https://dict.youdao.com/dictvoice?audio=' + window.encodeURIComponent(query) + '&type=' + type
}
function htmlEntities(s) {
    var o = {
        '<': '&#60;',
        '>': '&#62;',
        '&': '&#38;',
        '"': '&#34;',
        "'": '&#39;'
    }
    return s.replace(/[<>&"]/g, function(c) {
        return o[c]
    })
}
function decode(o) {
    // variable
    var us, uk, x
    // element
    var header, explains, web, translation
    if (o.basic) {
        us = o.basic['us-phonetic'] || ''
        uk = o.basic['uk-phonetic'] || ''
        query = o.query || ''
        header = document.createElement('div')
        setStyle(header, {
            borderBottom    : '1px dashed #aaa',
            paddingBottom   : '8px'
        })
        header.innerHTML = '<span style="color: #333; font-size: 13px">' + htmlEntities(query) + '</span>' + '<span data-type="1" style="font-size: 13px; margin-left: .5rem; color: #7cbef0; cursor: pointer">uk:[' + uk + ']</span>' + '<span data-type="2" style="font-size: 13px; margin-left: .5rem; color: #7cbef0; cursor: pointer">us:[' + us + ']</span>'
        panel.appendChild(header)
        header.onclick = function(e) {
            if (e.target.dataset.type) play(e.target.dataset.type)
        }
        if (o.basic.explains) {
            explains = document.createElement('ul')
            setStyle(explains, {
                margin      : 0,
                padding     : 0,
                listStyle   : 'none',
                lineHeight  : '22px',
                fontSize    : '13px',
                marginTop   : '8px'
            })
            explains.innerHTML = '<li style="line-height: 22px; font-size: 13px; color: #555">' + o.basic.explains.join('</li><li style="line-height: 22px; font-size: 13px; color: #555">') + '</li>'
            panel.appendChild(explains)
            
        }
    } else if (o.translation) {
        translation = document.createElement('div')
        translation.innerHTML = o.translation[0]
        setStyle(translation, {
            margin      : 0,
            padding     : 0,
            lineHeight  : '22px',
            fontSize    : '13px',
            color       : '#555'
        })
        panel.appendChild(translation)
    }
}
panel = document.createElement('div')
setStyle(panel, {
    position        : 'fixed',
    border          : '1px solid #eaeaea',
    backgroundColor : '#fff',
    fontSize        : '13px',
    fontFamily      : 'monospace, consolas',
    textAlign       : 'left',
    borderRadius    : '4px',
    wordBreak       : 'break-all',
    maxWidth        : '400px',
    color           : '#555',
    padding         : '8px',
    boxSizing       : 'border-box',
  	zIndex			: 999
})
document.addEventListener('mousedown', function(e) {
    if (e.buttons != 2) if (sel) sel.removeAllRanges()
})
document.addEventListener('mouseup', function(e) {
    var text
    sel = window.getSelection()
    text = sel.toString()
    if (e.target === panel || panel.contains(e.target)) return
    panel.innerHTML = ''
    if (panel && panel.parentElement) panel.parentElement.removeChild(panel)
    if (/^\s*$/.test(text)) return
    GM_xmlhttpRequest({
        method: 'GET',
        url: 'https://fanyi.youdao.com/openapi.do?relatedUrl=http%3A%2F%2Ffanyi.youdao.com%2Fopenapi%3Fpath%3Dweb-mode&keyfrom=test&key=null&type=data&doctype=json&version=1.1&q=' + window.encodeURIComponent(text),
        onload: function(data) {
            data = JSON.parse(data.responseText)
            if (data.errorCode === 0) {
                var w = window.innerWidth,
                    h = window.innerHeight
                decode(data)
                if (e.clientY > h * .5) {
                    panel.style.top = 'auto'
                    panel.style.bottom = h - e.clientY + 10 + 'px'
                } else {
                    panel.style.top = e.clientY + 10 + 'px'
                    panel.style.bottom = 'auto'
                }
                if (e.clientX > w * .5) {
                    panel.style.left = 'auto'
                    panel.style.right = w - e.clientX + 'px'
                } else {
                    panel.style.left = e.clientX + 'px'
                    panel.style.right = 'auto'
                }
                document.body.appendChild(panel)
            }
        }
    })
})