// ==UserScript==
// @name        pixivにメニューを追加
// @namespace   http://web.monogusa-note.com/add-menu-to-pixiv
// @version     1.1
// @description pixivに簡易的なメニューを追加します。
// @author      草村
// @match       https://www.pixiv.net/*
// @grant       none
// ==/UserScript==

( () => {
	const user_id = '';
	const menu = {
//		"ホーム":["/"],
		"作品投稿":["/upload.php", {
			"イラスト":["/upload.php"],
//			"うごイラ":["/ugoira_upload.php"],
			"マンガ":["/upload.php?type=manga"],
//			"小説":["/novel/upload.php"],
		}],
		"作品管理":["/manage/illusts"],
//		"フォロー":["/users/[id]/following"],
//		"フォロワー":["/users/[id]/followers"],
		"フォロー中":["/bookmark.php?type=user"],
		"ブックマーク":["/bookmark.php"],
//		"閲覧履歴":["/history.php"],
//		"しおり":["/novel/marker_all.php"],
//		"設定":["/setting_user.php"],
//		"イラスト・漫画":["/"],
//		"小説":["/novel"],
//		"フォロー新着":["/bookmark_new_illust.php"],
//		"ディスカバリー":["/discovery"],
//		"フィード":["/stacc?mode=unify"],
//		"ランキング":["/ranking.php"],
//		"みんなの新着":["/new_illust.php"],
//		"コンテスト":["/contest"],
	};
	const css = `
		#add-menubar {
			background: #fff;
			font-size: 14px;
			padding: 5px 0;
			animation: add-menu-feedin .5s backwards;
		}
		#add-menubar>ul {
			width: 970px;
			margin: 0 auto;
			padding: 0;
		}
		#add-menubar li {
			position: relative;
			list-style: none;
		}
		#add-menubar>ul>li {
			display: inline-block;
		}
		#add-menubar>ul>li+li {
			border-left: 1px solid #ccc;
		}
		#add-menubar li ul {
			min-width: 100px;
			background: #fff;
			position: absolute;
			z-index: 10;
			padding: 10px;
			opacity: 0;
			box-shadow: 2px 5px 5px rgba(0,0,0,.2);
			transition: .3s;
			transform: translateY(-10px);
			pointer-events: none;
		}
		#add-menubar li:hover ul {
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
		}
		#add-menubar li.none a {
			pointer-events: none;
		}
		#add-menubar li.none:before,
		#add-menubar li.none:after {
			position: absolute;
			bottom: 100%;
			left: 50%;
			transform: translate(-50%, 5px);
			opacity: 0;
			transition: .3s;
			pointer-events: none;
		}
		#add-menubar li.none:before {
			content:"ユーザーIDを設定してください";
			color: #fff;
			background: #333;
			border-radius: 3px;
			padding: 5px 10px;
			white-space: nowrap;
		}
		#add-menubar li.none:after {
			content: "";
			margin: 0 0 -10px;
			border-width: 10px 6px 0;
			border-style: solid;
			border-color: #333 transparent;
		}

		#add-menubar li.none:hover:before,
		#add-menubar li.none:hover:after {
			transform: translate(-50%, -5px);
			opacity: 1;
		}
		#add-menubar a {
			display: block;
			padding: 5px 10px;
		}
		#add-menubar a:hover {
			text-decoration: underline;
		}
		#add-menubar .sub:before,
		#add-menubar .sub:after {
			content: "";
			width: 6px;
			border-bottom: 2px solid #ccc;
			display: inline-block;
			transform: rotate(-45deg);
			transform-origin: left bottom;
		}
		#add-menubar .sub:before {
			transform: rotate(45deg);
			transform-origin: right bottom;
			margin-left: .3em;
		}
		@keyframes add-menu-feedin {
			0% { opacity: 0; transform: translateY(-10px); }
			100% { opacity: 1; transform: translateY(0); }
		}
	`;
	const createlist = ( obj ) => {
		let list = '';
		Object.keys(obj).forEach(key => {
			let url = obj[key][0], sub = obj[key][1];
			const has_sub = sub && Object.keys(sub).length;
			const test_id = /\[id\]/.test(url);
			url = url.replace(/\[id\]/, user_id);
			list += '<li'+ ( !user_id && test_id? ' class="none"' : '' ) +'><a href="'+url+'">'+ key + ( has_sub? '<span class="sub"></span>' : '' ) +'</a>';
			if( has_sub ) {
				list += createlist( sub );
			}
			list += '</li>';
		});
		return '<ul>'+ list + '</ul>';
	}
	const navi = document.createElement('div');
	navi.id = 'add-menubar';
	navi.innerHTML = createlist( menu );
	let insert = document.body;
	insert.prepend(navi);

	const style = document.createElement('style');
	style.textContent = css;
	document.getElementsByTagName('head')[0].appendChild(style);
})();