// ==UserScript==
// @name translate
// @namespace https://lufei.so
// @grant GM_xmlhttpRequest
// @description 划词翻译
// @version 1.3.2
// @downloadURL none
// ==/UserScript==

var sel, text, panel, audio, query
audio = document.createElement('audio')
audio.autoplay = true
function setStyle(el, o) {
    for (var x in o) el.style[x] = o[x]
}
function play(type) {
    audio.src = 'https://dict.youdao.com/dictvoice?audio=' + query + '&' + 'type=' + type
}
function decode(o) {
    // variable
    var us, uk, x, s
    // element
    var header, explains, web, translation
    if (o.errorCode) return
    if (o.basic) {
        us = o.basic['us-phonetic'] || ''
        uk = o.basic['uk-phonetic'] || ''
        query = o.query || ''
        header = document.createElement('div')
        panel.appendChild(header)
        setStyle(header, {
            borderBottom    : '1px dashed #aaa',
            paddingBottom   : '.5rem'
        })
        header.innerHTML = '<span style="color: #333">' + query + '</span>' + '<span data-type="1" style="margin-left: .5rem; color: #7cbef0; cursor: pointer">uk:[' + uk + ']</span>' + '<span data-type="2" style="margin-left: .5rem; color: #7cbef0; cursor: pointer">us:[' + us + ']</span>'
        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  : '1.4rem',
                fontSize    : '.8rem',
                marginTop   : '.5rem'
            })
            panel.appendChild(explains)
            explains.innerHTML = '<li>' + o.basic.explains.join('</li><li>') + '</li>'
        } else if (o.translation) {
            translation = document.createElement('div')
            panel.appendChild(translation)
            translation.innerHTML = o.translation[0]
            setStyle(translation, {
                margin      : 0,
                padding     : 0,
                lineHeight  : '1.4rem',
                fontSize    : '.8rem'
            })
        }
    }
}
panel = document.createElement('div')
document.body.appendChild(panel)
setStyle(panel, {
    position        : 'fixed',
    lineHeight      : '1.5rem',
    border          : '1px solid #eaeaea',
    backgroundColor : '#fff',
    fontSize        : '.8rem',
    fontFamily      : 'monospace, consolas',
    textAlign       : 'left',
    borderRadius    : '.2rem',
    wordBreak       : 'break-all',
    maxWidth        : '25rem',
    display         : 'none',
    color           : '#555',
    padding         : '.5rem',
    boxSizing       : 'border-box'
})
document.addEventListener('mousedown', function(e) {
    if (e.buttons != 2) if (sel) sel.removeAllRanges()
})
document.addEventListener('mouseup', function(e) {
    sel = window.getSelection();
    text = sel.toString();
    if (e.target === panel || panel.contains(e.target)) return
    panel.style.display = 'none'
    panel.innerHTML = ''
    if (text == '' || /^\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) {
          		decode(data)
          		setStyle(panel, {
          	  		top     : e.clientY + 10 + 'px',
            		left    : e.clientX + 'px',
            		display : 'block'
          		})
        	}
      	}
    })
})