// ==UserScript==
// @name          聚合辞典
// @namespace     http://tampermonkey.net/
// @version       0.1.0
// @description   在常用英文/中文在线辞典网页上增加一个浮层列表，以方便在其之间快速跳转，提高词汇查询效率。
// @author        http://twitter.com/rockucn
// @icon          https://www.google.com/s2/favicons?sz=64&domain=greasyfork.org

// @match         *://www.vocabulary.com/dictionary*
// @match         *://www.91dict.com/words*

// @grant         unsafeWindow
// @grant         window.onload
// @grant         GM_getValue
// @grant         GM_setValue
// @run-at        document-body

// @license       MIT
// @downloadURL none
// ==/UserScript==

// 辞典网址配置
const urlMapping = [
	{
		name: "Vocabulary",
		dicUrl: "https://www.vocabulary.com/dictionary/",
		keyName: "",
		testUrl: /https:\/\/www.vocabulary.com\/dictionary\/*/,
	},
	{
		name: "人人词典",
		dicUrl: "https://www.91dict.com/words?w=",
		keyName: "w",
		testUrl: /https:\/\/www.91dict.com\/words.*/,
	},
];

// JS 获取 url 参数
function getQueryVariable(variable) {
	let query = window.location.search.substring(1);
	let pairs = query.split("&");
	for (let pair of pairs) {
		let [key, value] = pair.split("=");
		if (key === variable) {
			return decodeURIComponent(value);
		}
	}
	return null;
}

// 从 url 中获取搜索关键词
function getKeywords() {
	let keywords = "";
	for (let item of urMapping) {
		if (item.testUrl.test(window.location.href)) {
			keywords = getQueryVariable(item.keyName);
			break;
		}
	}
	console.log(keywords);
	return keywords;
}

// 获取域名
const hostname = window.location.hostname;

let isBlank = GM_getValue("isBlank");

console.log("新标签页打开？", isBlank);
if (isBlank === undefined) {
	GM_setValue("isBlank", false);
	isBlank = false;
}

// 改变打开辞典链接的方式（当前tab中打开/新tab中打开）
const engine = document.getElementByClassName("dic-a");
function triggerAttribute(value) {
	for (const item of engine) {
		item.target = value;
	}
}

// 添加节点
function addBox() {
	// 主元素
	const dics = document.createElement("div");
	dics.id = "dic-app-box";
	dics.style = `
	    position: fixed;
		top: 148px;
		left: 8px;
		width: 100px;
		background-color: rgba(230, 230, 230, 0.5);
		font-size: 12px;
		border-radius: 6px;
		z-index: 99999;`;
	document.body.insertAdjacentElement("afterBegin", dics);
	
	// 标题
	let title = document.createElement("span");
	title.innerText = "聚合辞典";
	title.style = `
		display: block;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 5px;
		font-size： 12px;
		font-weight: bold;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select:none;`;
	title.style.textDecoration = isBlack ? "underline" : "";
	title.ondblclick = () => {
		title.style.textDecoration = !isBlank ? "underline" : "";
		GM_setValue("isBlank", !isBlank);
		isBlank = !isBlank;
		triggerAttribute(isBlank ? "_blank" : "");
	};
	dics.apppendChild(title);
	
	// 辞典列表
	for (let index in urlMapping) {
		let item = urlMapping(index);
		
		// 列表样式
		let style = `
			display: block;
			padding: 8px;
			text-decoration: none`;
		let defaultStyle = style + `
			color: rgba(51, 51, 51, 0.6) !important;`;
		let hoverStyle = style + `
			color: #fff !important;
			background-color: #555;`;
			
		// 辞典链接
		let a = document.createElement("a");
		a.innerText = item.name;
		a.style = defaultStyle;
		a.className = "dic-a";
		a.href = item.dicUrl + getKeywords();
		if (!item.dicUrl.includes(hostname) && isBlank) {
			a.target = "_blank";
		}
		
		// 鼠标移入&移出效果，相当于 hover
		a.onmouseenter = function() {
			this.style = hoverStyle;
		};
		a.onmouseleave = function() {
			this.style = defaultStyle;
		};
		dics.appendChild(a);
	}
}

(function() {
	"use strict";
	window.onload = addBox();
})();