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

var panel = document.createElement('div');
panel.style.position = 'fixed';
panel.style.zIndex = 999;
panel.style.display = 'none';
panel.style.border = '1px solid #eaeaea';
panel.style.backgroundColor = '#fff';
panel.style.borderRadius = '4px';
panel.style.padding = '.5rem 1rem';
panel.style.fontFamily = 'monospace, consolas';
panel.style.fontSize = '14px';
panel.style.color = '#555';
panel.style.textAlign = 'left';
document.body.appendChild(panel);
var sel, text, show = true;

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)) {
		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(event) {
                var data = JSON.parse(event.responseText),
                    s = '';
                if (data.errorCode === 0) {
					if (data.basic) {
						s += '<div>' + data.translation[0] + '<span>[' + data.basic.phonetic + ']</span>' + '</div>';
                        data.basic.explains.forEach(function(e) {
                            s += '<div>' + e + '</div>';
                        });
                    } else {
						s += '<div>' + data.translation[0] + '</div>';
					}
                    panel.innerHTML = s;
					panel.style.top = e.clientY + 10 + 'px';
        			panel.style.left = e.clientX + 'px';
        			panel.style.display = 'block';
                }
            }
        });
	}
});