// ==UserScript==
// @name                Instagram为关注用户添加备注
// @name:en             Instagram - Add notes to following
// @name:zh-CN          Instagram - 为关注的用户添加备注
// @name:zh-TW          Instagram - 為追蹤的用戶添加備註
// @name:ja             Instagram - 興味のあるユーザーにメモを追加する
// @name:ko             Instagram - 관심있는 사용자에게 메모 추가
// @namespace           https://greasyfork.org/zh-CN/users/193133-pana
// @homepage            https://www.sailboatweb.com
// @icon                data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMCwxNSBMMjAsNCBMNCw0IEw0LDIwIEwxNSwyMCBMMTUsMTcgQzE1LDE1Ljg5NTQzMDUgMTUuODk1NDMwNSwxNSAxNywxNSBMMjAsMTUgWiBNMTkuNTg1Nzg2NCwxNyBMMTcsMTcgTDE3LDE5LjU4NTc4NjQgTDE5LjU4NTc4NjQsMTcgWiBNNCwyMiBDMi44OTU0MzA1LDIyIDIsMjEuMTA0NTY5NSAyLDIwIEwyLDQgQzIsMi44OTU0MzA1IDIuODk1NDMwNSwyIDQsMiBMMjAsMiBDMjEuMTA0NTY5NSwyIDIyLDIuODk1NDMwNSAyMiw0IEwyMiwxNy40MTQyMTM2IEwxNy40MTQyMTM2LDIyIEw0LDIyIFogTTcsMTcgTDcsMTUgTDEzLDE1IEwxMywxNyBMNywxNyBaIE03LDEzIEw3LDExIEwxNywxMSBMMTcsMTMgTDcsMTMgWiBNNyw5IEw3LDcgTDE3LDcgTDE3LDkgTDcsOSBaIi8+Cjwvc3ZnPgo=
// @version             1.2.0
// @description         为所关注的用户添加备注功能，以帮助识别
// @description:en      Add notes to users you follow to help identify
// @description:zh-CN   为所关注的用户添加备注功能，以帮助识别
// @description:zh-TW   為所追蹤的用戶添加備註功能，以幫助識別
// @description:ja      識別しやすくするために、気になるユーザーにメモを追加します
// @description:ko      식별에 도움이되는 관심 사용자에게 메모 추가
// @author              pana
// @include             http*://www.instagram.com/*
// @require             https://code.jquery.com/jquery-3.4.1.min.js
// @require             https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
// @grant               GM_getValue
// @grant               GM_setValue
// @downloadURL none
// ==/UserScript==

(function() {
	'use strict';
	const LANG = {
		ZH: {
			div_title: '备注',
			input_placeholder: '(请输入备注，置空时删除；按下Enter键保存)',
			save_button_text: '保存',
			cancel_button_text: '取消',
		},
		ZH_TW: {
			div_title: '備註',
			input_placeholder: '(請輸入備註，置空時刪除；按下Enter鍵保存)',
			save_button_text: '保存',
			cancel_button_text: '取消',
		},
		EN: {
			div_title: 'note',
			input_placeholder: '(Enter a note, delete it when blanked; press Enter to save)',
			save_button_text: 'Save',
			cancel_button_text: 'Cancel',
		},
		JA: {
			div_title: '備考',
			input_placeholder: '(コメントを入力し、空白になったら削除してください。)',
			save_button_text: '保存する',
			cancel_button_text: 'キャンセル',
		},
		KO: {
			div_title: '비고',
			input_placeholder: '(메모를 입력하십시오.비워지면 삭제)',
			save_button_text: '저장',
			cancel_button_text: '취소',
		},
	};
	var lang_value = {
		div_title: 'note',
		input_placeholder: '(Please enter a note and delete it when blanked)',
		save_button_text: 'Save',
		cancel_button_text: 'Cancel',
	};
	var user_handle = {
		user_id: '',
		user_tag: '',
	};
	var instagram_config = {};
	var default_config = {
		user_array: [],
	};
	const PAGE_REG = {
		HOMEPAGE: /^https?:\/\/www\.instagram\.com\/?(\?[a-z]+=[a-z\-]+)?$/i,
		USER_PAGE: /^https?:\/\/www\.instagram\.com\/[^/]*\/?(\?[a-z]+=[a-z\-]+)?$/i,
		STORIES: /^https?:\/\/www\.instagram\.com\/stories\/[^/]*\/?(\?[a-z]+=[a-z\-]+)?$/i,
	};

	function judge_User(user_title) {
		for (let i = 0; i < instagram_config.user_array.length; i++) {
			if (user_title === instagram_config.user_array[i].user_id) {
				return i
			}
		}
		return -1
	}
	function write_User(user_title, input_tag) {
		let judge_value = judge_User(user_title);
		if (judge_value !== -1) {
			if (input_tag) {
				instagram_config.user_array[judge_value].user_tag = input_tag
			} else {
				instagram_config.user_array.splice(judge_value, 1)
			}
		} else {
			if (input_tag) {
				let temp_user_obj = {
					user_id: user_title,
					user_tag: input_tag,
				};
				instagram_config.user_array.push(temp_user_obj)
			}
		}
		GM_setValue('instagram_config', instagram_config)
	}
	function create_Add_Input_Div(user_title) {
		let presentation_div = document.createElement('div');
		presentation_div.className = 'presentation_div_for_user';
		presentation_div.style.display = 'flex';
		presentation_div.style.position = 'fixed';
		presentation_div.style.backgroundColor = 'rgba(0, 0, 0, .5)';
		presentation_div.style.top = '0';
		presentation_div.style.bottom = '0';
		presentation_div.style.left = '0';
		presentation_div.style.right = '0';
		presentation_div.style.zIndex = '1';
		presentation_div.style.alignItems = 'center';
		presentation_div.style.justifyContent = 'center';
		presentation_div.addEventListener('click', function(event) {
			if (event.target === this) {
				$('.presentation_div_for_user').remove()
			}
		});
		let dialog_div = document.createElement('div');
		dialog_div.className = 'dialog_div_for_user';
		dialog_div.style.position = 'relative';
		dialog_div.style.width = '400px';
		dialog_div.style.backgroundColor = '#fff';
		dialog_div.style.border = '0 solid #000';
		dialog_div.style.borderRadius = '12px';
		let user_title_p = document.createElement('button');
		user_title_p.className = 'user_title_span_for_user';
		user_title_p.innerText = user_title;
		user_title_p.style.minHeight = '48px';
		user_title_p.style.textAlign = 'center';
		user_title_p.style.border = '1px solid #efefef';
		user_title_p.style.color = 'red';
		user_title_p.style.fontWeight = 'bold';
		user_title_p.style.backgroundColor = 'rgba(0, 0, 0, 0)';
		user_title_p.style.borderTopLeftRadius = '12px';
		user_title_p.style.borderTopRightRadius = '12px';
		let tag_input = document.createElement('input');
		tag_input.className = 'tag_input_for_user';
		tag_input.type = 'text';
		tag_input.placeholder = lang_value.input_placeholder;
		tag_input.style.minHeight = '32px';
		tag_input.style.margin = '5px';
		let judge_value = judge_User(user_title);
		if (judge_value !== -1) {
			tag_input.value = instagram_config.user_array[judge_value].user_tag
		} else {
			tag_input.value = ''
		}
		$(tag_input).keyup(function(e) {
			if (e.keyCode === 13) {
				write_User(user_title, $('.tag_input_for_user').val());
				save_Update_Event(user_title);
				$('.presentation_div_for_user').remove()
			}
		});
		let save_button = document.createElement('button');
		save_button.className = 'save_button_for_user';
		save_button.type = 'button';
		save_button.innerText = lang_value.save_button_text;
		save_button.style.minHeight = '48px';
		save_button.style.cursor = 'pointer';
		save_button.style.border = '1px solid #efefef';
		save_button.style.backgroundColor = 'rgba(0, 0, 0, 0)';
		save_button.addEventListener('click', function() {
			write_User(user_title, $('.tag_input_for_user').val());
			save_Update_Event(user_title);
			$('.presentation_div_for_user').remove()
		});
		let cancel_button = document.createElement('button');
		cancel_button.className = 'cancel_button_for_user';
		cancel_button.type = 'button';
		cancel_button.innerText = lang_value.cancel_button_text;
		cancel_button.style.minHeight = '48px';
		cancel_button.style.cursor = 'pointer';
		cancel_button.style.border = '1px solid #efefef';
		cancel_button.style.backgroundColor = 'rgba(0, 0, 0, 0)';
		cancel_button.style.borderBottomLeftRadius = '12px';
		cancel_button.style.borderBottomRightRadius = '12px';
		cancel_button.addEventListener('click', function(event) {
			$('.presentation_div_for_user').remove()
		});
		dialog_div.appendChild(user_title_p);
		dialog_div.appendChild(tag_input);
		dialog_div.appendChild(save_button);
		dialog_div.appendChild(cancel_button);
		presentation_div.appendChild(dialog_div);
		return presentation_div
	}
	function create_Add_Tags_Div(user_title) {
		let tags_div = document.createElement('div');
		tags_div.className = 'Tags_A';
		tags_div.href = 'javascript:;';
		tags_div.title = lang_value.div_title;
		tags_div.style.width = '32px';
		tags_div.style.height = '32px';
		tags_div.style.backgroundImage = 'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMCwxNSBMMjAsNCBMNCw0IEw0LDIwIEwxNSwyMCBMMTUsMTcgQzE1LDE1Ljg5NTQzMDUgMTUuODk1NDMwNSwxNSAxNywxNSBMMjAsMTUgWiBNMTkuNTg1Nzg2NCwxNyBMMTcsMTcgTDE3LDE5LjU4NTc4NjQgTDE5LjU4NTc4NjQsMTcgWiBNNCwyMiBDMi44OTU0MzA1LDIyIDIsMjEuMTA0NTY5NSAyLDIwIEwyLDQgQzIsMi44OTU0MzA1IDIuODk1NDMwNSwyIDQsMiBMMjAsMiBDMjEuMTA0NTY5NSwyIDIyLDIuODk1NDMwNSAyMiw0IEwyMiwxNy40MTQyMTM2IEwxNy40MTQyMTM2LDIyIEw0LDIyIFogTTcsMTcgTDcsMTUgTDEzLDE1IEwxMywxNyBMNywxNyBaIE03LDEzIEw3LDExIEwxNywxMSBMMTcsMTMgTDcsMTMgWiBNNyw5IEw3LDcgTDE3LDcgTDE3LDkgTDcsOSBaIi8+Cjwvc3ZnPgo=)';
		tags_div.style.backgroundRepeat = 'no-repeat';
		tags_div.style.backgroundPosition = 'center';
		tags_div.style.backgroundSize = '24px auto';
		tags_div.style.marginLeft = '5px';
		tags_div.addEventListener('click', function() {
			document.body.appendChild(create_Add_Input_Div(user_title))
		});
		return tags_div
	}
	function create_Add_Tag_P(tag_string) {
		let tag_p = document.createElement('p');
		tag_p.className = 'tag_p';
		tag_p.style.marginLeft = '5px';
		tag_p.style.color = '#990033';
		tag_p.style.whiteSpace = 'nowrap';
		tag_p.innerText = '(' + tag_string + ')';
		return tag_p
	}
	function create_Add_Tag_Span(tag_string, font_size) {
		let tag_span = document.createElement('span');
		tag_span.className = 'tag_span';
		tag_span.style.marginLeft = '5px';
		tag_span.style.color = '#990033';
		tag_span.style.fontSize = font_size;
		tag_span.innerText = '(' + tag_string + ')';
		return tag_span
	}
	function homepage_Event(dom_container) {
		let user_title = $(dom_container).find('a.nJAzx').attr('title');
		let judge_value = judge_User(user_title);
		if (judge_value !== -1) {
			$(dom_container).find('.e1e1d').append(create_Add_Tag_P(instagram_config.user_array[judge_value].user_tag))
		}
		$(dom_container).find('.e1e1d').append(create_Add_Tags_Div(user_title));
		$(dom_container).find('.e1e1d').css('overflow', 'visible')
	}
	function homepage_Stories_Event(dom_container) {
		let user_title = $(dom_container).find('.jQgLo').text();
		let judge_value = judge_User(user_title);
		if (judge_value !== -1) {
			$(dom_container).find('.jQgLo').append(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '12px'))
		}
	}
	function user_Page_Event(selector_container) {
		let user_title = selector_container.find('.KV-D4').text();
		selector_container.find('.AFWDX').after(create_Add_Tags_Div(user_title));
		let judge_value = judge_User(user_title);
		if (judge_value !== -1) {
			selector_container.find('.AFWDX').after(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '16px'))
		}
		$.each(selector_container.find('span._32eiM'), function(index, item) {
			let em_user_title = item.innerText;
			let em_judge_value = judge_User(em_user_title);
			if (em_judge_value !== -1) {
				item.innerText = em_user_title + ' (' + instagram_config.user_array[em_judge_value].user_tag + ')'
			}
		})
	}
	function stories_Page_Event(selector_container) {
		let user_title = selector_container.find('.FPmhX').text();
		let judge_value = judge_User(user_title);
		if (judge_value !== -1) {
			selector_container.append(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '14px'))
		}
	}
	function follow_Page_Event(selector_container) {
		if (selector_container.find('.tag_span').length === 0) {
			let user_title = selector_container.find('a.FPmhX').attr('title');
			let judge_value = judge_User(user_title);
			if (judge_value !== -1) {
				selector_container.find('a.FPmhX').parent().append(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '14px'))
			}
		}
	}
	function save_Update_Event(user_title) {
		let old_url = location.href;
		if (PAGE_REG.HOMEPAGE.test(old_url)) {
			$.each($('article'), function(index, item) {
				let page_user_title = $(item).find('a.nJAzx').attr('title');
				if (user_title === page_user_title) {
					let judge_value = judge_User(user_title);
					if (judge_value !== -1) {
						if ($(item).find('p.tag_p').length !== 0) {
							$(item).find('p.tag_p').text('(' + instagram_config.user_array[judge_value].user_tag + ')')
						} else {
							$(item).find('.Tags_A').before(create_Add_Tag_P(instagram_config.user_array[judge_value].user_tag))
						}
					} else {
						if ($(item).find('p.tag_p').length !== 0) {
							$(item).find('p.tag_p').remove()
						}
					}
				}
			});
			$.each($('.BI5t6'), function(index, item) {
				let page_user_selector = $(item).find('.jQgLo').clone();
				page_user_selector.find('.tag_span').remove();
				let page_user_title = page_user_selector.text();
				if (user_title === page_user_title) {
					let judge_value = judge_User(user_title);
					if (judge_value !== -1) {
						if ($(item).find('span.tag_span').length !== 0) {
							$(item).find('span.tag_span').text('(' + instagram_config.user_array[judge_value].user_tag + ')')
						} else {
							$(item).find('.jQgLo').append(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '12px'))
						}
					} else {
						if ($(item).find('span.tag_span').length !== 0) {
							$(item).find('span.tag_span').remove()
						}
					}
				}
			})
		} else if (PAGE_REG.USER_PAGE.test(old_url)) {
			let user_title = $('.KV-D4').text();
			let judge_value = judge_User(user_title);
			if (judge_value !== -1) {
				if ($('.tag_span').length !== 0) {
					$('.tag_span').text('(' + instagram_config.user_array[judge_value].user_tag + ')')
				} else {
					$('.AFWDX').after(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '16px'))
				}
			} else {
				if ($('.tag_span').length !== 0) {
					$('.tag_span').remove()
				}
			}
		}
	}
	function set_Language(lang_string) {
		switch (lang_string) {
		case 'zh':
		case 'zh-cn':
			lang_value = LANG.ZH;
			break;
		case 'zh-hk':
		case 'zh-tw':
			lang_value = LANG.ZH_TW;
			break;
		case 'en':
			lang_value = LANG.EN;
			break;
		case 'ja':
			lang_value = LANG.JA;
			break;
		case 'ko':
			lang_value = LANG.KO;
			break;
		default:
			lang_value = LANG.EN;
			break
		}
	}
	function init() {
		set_Language($('html:first').attr('lang'));
		$.each($('article'), function(index, item) {
			homepage_Event(item)
		});
		setTimeout(function() {
			$.each($('.BI5t6'), function(index, item) {
				homepage_Stories_Event(item)
			})
		}, 1000);
		$('#react-root').arrive('article', function() {
			homepage_Event(this)
		});
		$('#react-root').arrive('.BI5t6', function() {
			homepage_Stories_Event(this)
		});
		if ($('.zwlfE').length !== 0) {
			user_Page_Event($('.zwlfE'))
		}
		$('#react-root').arrive('.zwlfE', function() {
			user_Page_Event($(this))
		});
		if ($('.yn6BW').length !== 0) {
			stories_Page_Event($('.yn6BW'))
		}
		$('#react-root').arrive('.yn6BW', function() {
			stories_Page_Event($(this))
		});
		$('body').arrive('.isgrP li', {
			onceOnly: true
		}, function() {
			follow_Page_Event($(this))
		});
		$('body').arrive('.d7ByH', function() {
			follow_Page_Event($(this))
		})
	}
	Promise.all([GM_getValue('instagram_config')]).then(function(data) {
		if (data[0] !== undefined) {
			instagram_config = data[0]
		} else {
			instagram_config = default_config
		}
		init()
	})
})();