为用户添加备注功能，以帮助识别和搜索
目前为
// ==UserScript==
// @name Instagram为关注用户添加备注
// @name:en Instagram - Add a note to the user
// @name:zh-CN Instagram - 为用户添加备注
// @name:zh-TW Instagram - 為使用者新增備註
// @name:ja Instagram - ユーザーに備考を加える
// @name:ko Instagram - 사용자에 대한 주석 추가
// @namespace https://gf.qytechs.cn/zh-CN/users/193133-pana
// @homepage https://www.sailboatweb.com
// @icon data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMCwxNSBMMjAsNCBMNCw0IEw0LDIwIEwxNSwyMCBMMTUsMTcgQzE1LDE1Ljg5NTQzMDUgMTUuODk1NDMwNSwxNSAxNywxNSBMMjAsMTUgWiBNMTkuNTg1Nzg2NCwxNyBMMTcsMTcgTDE3LDE5LjU4NTc4NjQgTDE5LjU4NTc4NjQsMTcgWiBNNCwyMiBDMi44OTU0MzA1LDIyIDIsMjEuMTA0NTY5NSAyLDIwIEwyLDQgQzIsMi44OTU0MzA1IDIuODk1NDMwNSwyIDQsMiBMMjAsMiBDMjEuMTA0NTY5NSwyIDIyLDIuODk1NDMwNSAyMiw0IEwyMiwxNy40MTQyMTM2IEwxNy40MTQyMTM2LDIyIEw0LDIyIFogTTcsMTcgTDcsMTUgTDEzLDE1IEwxMywxNyBMNywxNyBaIE03LDEzIEw3LDExIEwxNywxMSBMMTcsMTMgTDcsMTMgWiBNNyw5IEw3LDcgTDE3LDcgTDE3LDkgTDcsOSBaIi8+Cjwvc3ZnPgo=
// @version 3.1.0
// @description 为用户添加备注功能，以帮助识别和搜索
// @description:en Add a note for users to help identify and search
// @description:zh-CN 为用户添加备注功能，以帮助识别和搜索
// @description:zh-TW 為使用者新增備註功能，以幫助識別和搜尋
// @description:ja ユーザーに備考機能を追加し、識別と検索を助ける
// @description:ko 식별 및 검색에 도움이 되는 사용자에 대한 주석 추가 기능
// @license GNU General Public License v3.0 or later
// @author pana
// @include http*://*instagram.com/*
// @require https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_deleteValue
// @grant GM_listValues
// ==/UserScript==
(function() {
'use strict';
const LANG = {
'ZH': {
'div_title': '备注',
'input_placeholder': '(请输入备注，置空时删除；按下Enter键保存)',
'save_button_text': '保存',
'clear_button_text': '清除',
'cancel_button_text': '取消',
'search_placeholder': '搜索备注',
'add_button_title': '为用户添加备注',
'modify_button_title': '为用户修改备注'
},
'ZH_TW': {
'div_title': '備註',
'input_placeholder': '(請輸入備註，置空時刪除；按下Enter鍵儲存)',
'save_button_text': '儲存',
'clear_button_text': '清除',
'cancel_button_text': '取消',
'search_placeholder': '搜尋備註',
'add_button_title': '為使用者新增備註',
'modify_button_title': '為使用者修改備註'
},
'EN': {
'div_title': 'Note',
'input_placeholder': '(Enter a note, delete it when blanked; press Enter to save)',
'save_button_text': 'Save',
'clear_button_text': 'Clear',
'cancel_button_text': 'Cancel',
'search_placeholder': 'Search notes',
'add_button_title': 'Add notes to the user',
'modify_button_title': 'Modify notes for the user'
},
'JA': {
'div_title': '備考',
'input_placeholder': '(注を入力して、空にした時に削除してください。)',
'save_button_text': '保存する',
'clear_button_text': 'クリア',
'cancel_button_text': 'キャンセル',
'search_placeholder': '検索備考',
'add_button_title': 'ユーザーに備考を追加する',
'modify_button_title': 'ユーザーのために備考を修正する'
},
'KO': {
'div_title': '주석',
'input_placeholder': '(메모를 입력하십시오. 비어 있을 때 삭제하십시오.)',
'save_button_text': '보존',
'clear_button_text': '제거',
'cancel_button_text': '취소',
'search_placeholder': '검색 노트',
'add_button_title': '사용자에 대한 주석 추가',
'modify_button_title': '사용자에 대한 주석 수정'
}
};
const ICON = {
'TAGS': 'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMCwxNSBMMjAsNCBMNCw0IEw0LDIwIEwxNSwyMCBMMTUsMTcgQzE1LDE1Ljg5NTQzMDUgMTUuODk1NDMwNSwxNSAxNywxNSBMMjAsMTUgWiBNMTkuNTg1Nzg2NCwxNyBMMTcsMTcgTDE3LDE5LjU4NTc4NjQgTDE5LjU4NTc4NjQsMTcgWiBNNCwyMiBDMi44OTU0MzA1LDIyIDIsMjEuMTA0NTY5NSAyLDIwIEwyLDQgQzIsMi44OTU0MzA1IDIuODk1NDMwNSwyIDQsMiBMMjAsMiBDMjEuMTA0NTY5NSwyIDIyLDIuODk1NDMwNSAyMiw0IEwyMiwxNy40MTQyMTM2IEwxNy40MTQyMTM2LDIyIEw0LDIyIFogTTcsMTcgTDcsMTUgTDEzLDE1IEwxMywxNyBMNywxNyBaIE03LDEzIEw3LDExIEwxNywxMSBMMTcsMTMgTDcsMTMgWiBNNyw5IEw3LDcgTDE3LDcgTDE3LDkgTDcsOSBaIi8+Cjwvc3ZnPgo=)',
'DOWN_ARROW': 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTEuOTk2IDQ5MS45OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5MS45OTYgNDkxLjk5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00ODQuMTMyLDEyNC45ODZsLTE2LjExNi0xNi4yMjhjLTUuMDcyLTUuMDY4LTExLjgyLTcuODYtMTkuMDMyLTcuODZjLTcuMjA4LDAtMTMuOTY0LDIuNzkyLTE5LjAzNiw3Ljg2bC0xODMuODQsMTgzLjg0OCAgICBMNjIuMDU2LDEwOC41NTRjLTUuMDY0LTUuMDY4LTExLjgyLTcuODU2LTE5LjAyOC03Ljg1NnMtMTMuOTY4LDIuNzg4LTE5LjAzNiw3Ljg1NmwtMTYuMTIsMTYuMTI4ICAgIGMtMTAuNDk2LDEwLjQ4OC0xMC40OTYsMjcuNTcyLDAsMzguMDZsMjE5LjEzNiwyMTkuOTI0YzUuMDY0LDUuMDY0LDExLjgxMiw4LjYzMiwxOS4wODQsOC42MzJoMC4wODQgICAgYzcuMjEyLDAsMTMuOTYtMy41NzIsMTkuMDI0LTguNjMybDIxOC45MzItMjE5LjMyOGM1LjA3Mi01LjA2NCw3Ljg1Ni0xMi4wMTYsNy44NjQtMTkuMjI0ICAgIEM0OTEuOTk2LDEzNi45MDIsNDg5LjIwNCwxMzAuMDQ2LDQ4NC4xMzIsMTI0Ljk4NnoiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)',
'UP_ARROW': 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTIuMDAyIDQ5Mi4wMDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5Mi4wMDIgNDkyLjAwMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00ODQuMTM2LDMyOC40NzNMMjY0Ljk4OCwxMDkuMzI5Yy01LjA2NC01LjA2NC0xMS44MTYtNy44NDQtMTkuMTcyLTcuODQ0Yy03LjIwOCwwLTEzLjk2NCwyLjc4LTE5LjAyLDcuODQ0ICAgIEw3Ljg1MiwzMjguMjY1QzIuNzg4LDMzMy4zMzMsMCwzNDAuMDg5LDAsMzQ3LjI5N2MwLDcuMjA4LDIuNzg0LDEzLjk2OCw3Ljg1MiwxOS4wMzJsMTYuMTI0LDE2LjEyNCAgICBjNS4wNjQsNS4wNjQsMTEuODI0LDcuODYsMTkuMDMyLDcuODZzMTMuOTY0LTIuNzk2LDE5LjAzMi03Ljg2bDE4My44NTItMTgzLjg1MmwxODQuMDU2LDE4NC4wNjQgICAgYzUuMDY0LDUuMDYsMTEuODIsNy44NTIsMTkuMDMyLDcuODUyYzcuMjA4LDAsMTMuOTYtMi43OTIsMTkuMDI4LTcuODUybDE2LjEyOC0xNi4xMzIgICAgQzQ5NC42MjQsMzU2LjA0MSw0OTQuNjI0LDMzOC45NjUsNDg0LjEzNiwzMjguNDczeiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)',
'SEARCH': 'url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9InNlYXJjaEljb25UaXRsZSIgc3Ryb2tlPSJyZ2JhKDI5LDE2MSwyNDIsMS4wMCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYmEoMjksMTYxLDI0MiwxLjAwKSI+IDx0aXRsZSBpZD0ic2VhcmNoSWNvblRpdGxlIj5TZWFyY2g8L3RpdGxlPiA8cGF0aCBkPSJNMTQuNDEyMTEyMiwxNC40MTIxMTIyIEwyMCwyMCIvPiA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI2Ii8+IDwvc3ZnPg==)'
};
const STYLE_VALUE = `
.ins_visible {
overflow: visible !important;
}
.ins_tag_p {
margin-left: 5px;
color: #336699;
white-space: nowrap;
}
.ins_tag_a {
background-image: ${ICON.TAGS};
background-repeat: no-repeat;
background-position: center;
margin-left: 5px;
cursor: pointer;
}
.ins_homepage_icon {
width: 24px;
height: 24px;
background-size: 24px;
margin-top: 8px;
}
.ins_user_page_icon {
width: 24px;
height: 24px;
background-size: 24px;
margin-top: 2px;
}
#presentation_div_for_user {
display: flex;
position: fixed;
background-color: rgba(0, 0, 0, .5);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
align-items: center;
justify-content: center;
}
.dialog_div_for_user {
position: relative;
width: 400px;
background-color: #fff;
border: 0 solid #000;
border-radius: 12px;
}
.user_title_span_for_user {
min-height: 48px;
text-align: center;
border: 1px solid #efefef;
color: #003399;
font-weight: bold;
background-color: rgba(0, 0, 0, 0);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
white-space: pre-wrap;
cursor: text;
user-select: text;
line-height: 24px;
}
.tag_input_for_user {
min-height: 32px;
margin: 5px;
border: 1px solid #cc6666;
padding-left: 5px;
}
.button_for_user {
min-height: 48px;
cursor: pointer;
border: 1px solid #efefef;
background-color: rgba(0, 0, 0, 0);
}
.button_for_user:hover {
color: #1da1f2;
}
.cancel_button_for_user {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
#searchFrame {
position: relative;
margin-left: 15px;
}
#myInputSearch {
width: 200px;
height: 26px;
border: 1px solid #999;
border-radius: 3px;
padding: 0 3px;
position: relative;
}
#dropDowns {
width: 15px;
height: 15px;
background-repeat: no-repeat;
background-size: 12px auto;
position: absolute;
top: 8px;
right: 2px;
}
.ins_down_arrow {
background-image: ${ICON.DOWN_ARROW};
}
.ins_up_arrow {
background-image: ${ICON.UP_ARROW};
}
.tags_list {
width: 208px;
height: 250px;
overflow-y: scroll;
text-align: left;
border: 1px solid #999;
display: none;
position: absolute;
top: 30px;
background-color: #fff;
}
.tags_mobile_list {
width: 350px;
height: 250px;
overflow-y: scroll;
text-align: left;
display: none;
position: absolute;
margin: 0 20px;
z-index: 100;
background-color: rgb(37, 51, 65);
border: 1px solid rgba(29, 161, 242, 0.1);
top: 45px;
}
.ins_list_item {
cursor: pointer;
padding-left: 5px;
height: 25px;
line-height: 25px;
white-space: nowrap;
overflow: hidden;
}
.ins_mobile_list_item {
cursor: pointer;
color: #fff;
padding-left: 5px;
height: 25px;
line-height: 25px;
white-space: nowrap;
overflow: hidden;
}
.ins_highlight {
background-color: #6699cc;
}
.ins_hide {
display: none;
}
.ins_tag_div {
color: #336699;
margin-bottom: 20px;
font-size: 18px;
}
.ins_tag_span {
margin-left: 5px;
color: #336699;
}
.font_size_14 {
font-size: 14px;
}
.font_blue_color {
color: #336699 !important;
}
.list_show {
display: block !important;
}
#my_search_bottom_layer_div {
display: flex;
position: fixed;
background-color: rgba(0, 0, 0, .5);
top: -50vh;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
align-items: center;
justify-content: center;
}
#floatSearchFrame {
position: relative;
}
#myFloatInputSearch {
width: 350px;
height: 40px;
border: 2px solid #000;
border-radius: 40px;
padding: 0 20px;
position: relative;
background-color: rgb(37, 51, 65);
color: #fff;
outline: none;
}
#mobileSearchButton {
height: 45px;
width: 45px;
display: block;
background-image: ${ICON.SEARCH};
background-repeat: no-repeat;
background-size: 24px auto;
background-position: center;
}
`;
var selector = {
'body': 'body',
'root': '#react-root',
'search': {
'frame': '.LWmhU'
},
'homepage': {
'article': 'article',
'id': '.e1e1d a',
'id_shell': '.e1e1d',
'icon': 'span.wmtNn',
'comment_id': '.FPmhX',
'comment_at': '._8Pl3R .notranslate'
},
'homepage_stories': {
'id': '.eebAO',
'id_shell': '.Fd_fQ',
},
'homepage_recommend': {
'id': '.fDxYl a'
},
'user_page': {
'frame': '.zwlfE',
'id': '.KV-D4',
'bar': '.AFWDX',
'box': '.nZSzR',
'common': 'span._32eiM',
'suggest': '.Qj3-a'
},
'stories': {
'id': '.FPmhX',
'id_shell': '.yn6BW'
},
'watch_list': {
'initial_item': '.isgrP li',
'later_item': '.d7ByH',
'id': 'a.FPmhX'
},
'dialog': {
'frame': '._2dDPU article',
'comment_id': '.EtaWk .ZIAjV',
'comment_at': '.EtaWk .notranslate'
},
'request': {
'follow': '.yrJyr'
},
'mobile': {
'bottom_bar': '.BvyAW'
}
};
class Instagram_Note {
constructor(config, lang, show_list = []) {
this.config = config;
this.lang = lang;
this.showList = show_list;
}
isMobilePage() {
return /android|webos|iphone|ipod|blackberry/i.test(navigator.userAgent);
}
judgeUsers(user_id) {
for (let key in this.config) {
if (key == user_id) {
return true;
}
}
return false;
}
writeUsers(user_id, tag_value) {
if (this.judgeUsers(user_id)) {
if (tag_value) {
this.config[user_id].tag = tag_value;
} else {
delete this.config[user_id];
}
} else {
if (tag_value) {
this.config[user_id] = {'tag': tag_value};
}
}
if (this.judgeUsers(user_id)) {
GM_setValue(user_id, this.config[user_id]);
} else {
GM_deleteValue(user_id);
}
}
getUserTag(user_id) {
if (this.judgeUsers(user_id)) {
return this.config[user_id].tag;
}
return '';
}
getUserFormatTag(user_id) {
if (this.judgeUsers(user_id)) {
return '[' + this.getUserTag(user_id) + ']';
}
return '';
}
getUserAtTag(user_id) {
if (this.judgeUsers(user_id)) {
return '@' + this.getUserTag(user_id);
}
return '';
}
removeNoteFrame(frame_id = 'presentation_div_for_user') {
let temp_ele = document.getElementById(frame_id);
if (temp_ele) {
temp_ele.parentNode.removeChild(temp_ele);
}
}
createNoteFrame(user_id, callback) {
let that = this;
let presentation_div = document.createElement('div');
presentation_div.id = 'presentation_div_for_user';
presentation_div.addEventListener('click', function (event) {
if (event.target === this) {
that.removeNoteFrame();
}
});
let dialog_div = document.createElement('div');
dialog_div.className = 'dialog_div_for_user';
let user_title_p = document.createElement('button');
user_title_p.className = 'user_title_span_for_user';
user_title_p.textContent = 'ID: ' + user_id;
let tag_input = document.createElement('input');
tag_input.className = 'tag_input_for_user';
tag_input.type = 'text';
tag_input.placeholder = this.lang.input_placeholder;
if (this.judgeUsers(user_id)) {
tag_input.value = this.config[user_id].tag;
} else {
tag_input.value = '';
}
tag_input.addEventListener('keyup', (e) => {
if (e.keyCode === 13) {
this.writeUsers(user_id, tag_input.value);
this.resetSearchFrame();
if (typeof(callback) == 'function') {
callback();
}
this.removeNoteFrame();
}
});
setTimeout(function() {
try {
tag_input.focus();
tag_input.select();
} catch(e) {
console.error(e);
}
}, 200);
let save_button = document.createElement('button');
save_button.className = 'button_for_user';
save_button.type = 'button';
save_button.innerText = this.lang.save_button_text;
save_button.addEventListener('click', () => {
this.writeUsers(user_id, tag_input.value);
this.resetSearchFrame();
if (typeof(callback) == 'function') {
callback();
}
this.removeNoteFrame();
});
let clear_button = document.createElement('button');
clear_button.className = 'button_for_user';
clear_button.type = 'button';
clear_button.innerText = this.lang.clear_button_text;
clear_button.addEventListener('click', () => {
this.writeUsers(user_id, '');
this.resetSearchFrame();
if (typeof(callback) == 'function') {
callback();
}
this.removeNoteFrame();
});
let cancel_button = document.createElement('button');
cancel_button.className = 'button_for_user cancel_button_for_user';
cancel_button.type = 'button';
cancel_button.innerText = this.lang.cancel_button_text;
cancel_button.addEventListener('click', () => {
this.removeNoteFrame();
});
dialog_div.appendChild(user_title_p);
dialog_div.appendChild(tag_input);
dialog_div.appendChild(save_button);
dialog_div.appendChild(clear_button);
dialog_div.appendChild(cancel_button);
presentation_div.appendChild(dialog_div);
return presentation_div;
}
toggleList(status = "") {
let tag_list = document.getElementById('tagsList');
let arrow = document.getElementById('dropDowns');
if (tag_list && arrow) {
if (status == 'show') {
tag_list.classList.add('list_show');
arrow.classList.remove('ins_down_arrow');
arrow.classList.add('ins_up_arrow');
} else if (status == 'hide') {
tag_list.classList.remove('list_show');
arrow.classList.remove('ins_up_arrow');
arrow.classList.add('ins_down_arrow');
} else {
if (tag_list.classList.contains('list_show')) {
tag_list.classList.remove('list_show');
arrow.classList.remove('ins_up_arrow');
arrow.classList.add('ins_down_arrow');
} else {
tag_list.classList.add('list_show');
arrow.classList.remove('ins_down_arrow');
arrow.classList.add('ins_up_arrow');
}
}
}
}
resetSearchFrame() {
let tags_list = document.getElementById('tagsList');
if (tags_list) {
tags_list.innerHTML = "";
for (let key in this.config) {
tags_list.appendChild(this.createListDiv(key));
}
}
}
createSearchFrame() {
let search_frame = document.createElement('div');
search_frame.id = 'searchFrame';
let search_input = document.createElement('input');
search_input.id = 'myInputSearch';
search_input.type = 'text';
search_input.placeholder = this.lang.search_placeholder;
search_input.value = "";
search_input.addEventListener('focusin', () => {
this.toggleList('show');
this.searchEvent(search_input);
});
search_frame.appendChild(search_input);
let dropdowns = document.createElement('div');
dropdowns.id = 'dropDowns';
dropdowns.className = 'ins_down_arrow';
dropdowns.addEventListener('click', () => {
this.toggleList();
});
search_frame.appendChild(dropdowns);
let tags_list = document.createElement('div');
tags_list.id = 'tagsList';
tags_list.className = 'tags_list';
for (let key in this.config) {
tags_list.appendChild(this.createListDiv(key));
}
search_frame.appendChild(tags_list);
document.body.onclick = (e) => {
e = e || window.event;
let target = e.target || e.srcElement;
if(target !== document.getElementById('dropDowns') && target !== document.getElementById('tagsList') && target !== document.getElementById('myInputSearch')){
this.toggleList('hide');
}
};
return search_frame;
}
removeFloatSearchFrame(frame_id = 'my_search_bottom_layer_div') {
let search_frame = document.getElementById(frame_id);
if (search_frame) {
search_frame.parentNode.removeChild(search_frame);
}
}
createFloatSearchFrame() {
let that = this;
let bottom_layer_div = document.createElement('div');
bottom_layer_div.id = 'my_search_bottom_layer_div';
bottom_layer_div.addEventListener('click', function(event) {
if (event.target === this) {
that.removeFloatSearchFrame();
}
});
let search_frame = document.createElement('div');
search_frame.id = 'floatSearchFrame';
bottom_layer_div.appendChild(search_frame);
let search_input = document.createElement('input');
search_input.id = 'myFloatInputSearch';
search_input.type = 'text';
search_input.placeholder = this.lang.search_placeholder;
search_input.value = "";
search_input.addEventListener('focusin', () => {
document.getElementById('tagsList').classList.add('list_show');
this.searchEvent(search_input);
});
setTimeout(function() {
try {
search_input.focus();
search_input.select();
} catch(e) {
console.error(e);
}
}, 200);
search_frame.appendChild(search_input);
let tags_list = document.createElement('div');
tags_list.id = 'tagsList';
tags_list.className = 'tags_mobile_list';
for (let key in this.config) {
tags_list.appendChild(this.createListDiv(key, true));
}
search_frame.appendChild(tags_list);
return bottom_layer_div;
}
createMobileSearchButton() {
let search_btn = document.createElement('div');
search_btn.id = 'mobileSearchButton';
search_btn.addEventListener('click', (event) => {
event.stopPropagation();
document.body.appendChild(this.createFloatSearchFrame());
});
return search_btn;
}
searchEvent(input_dom) {
let list_arr = [];
for (let ele of document.querySelectorAll('#tagsList div')) {
let arr_obj = {
'eleContainer': ele.textContent,
'ele': ele
};
list_arr.push(arr_obj);
}
let current_index = 0;
input_dom.addEventListener('keyup', (event) => {
this.toggleList('show');
let search_val;
switch (event.keyCode) {
case 38:
case 40:
case 37:
case 39:
event.returnValue = false;
break;
case 13:
this.showList[current_index].click();
break;
default:
search_val = input_dom.value;
this.showList = [];
list_arr.forEach((item) => {
if (item.eleContainer.indexOf(search_val) !== -1) {
item.ele.classList.remove('ins_hide');
this.showList.push(item.ele);
} else {
item.ele.classList.add('ins_hide');
}
});
current_index = 0;
break;
}
this.showList.forEach(function(item, index) {
if (index === current_index) {
item.classList.add('ins_highlight');
document.getElementById('tagsList').scrollTop = item.offsetTop;
} else {
item.classList.remove('ins_highlight');
}
});
let list_height = 25 * this.showList.length;
if (list_height < 250) {
document.getElementById('tagsList').style.height = list_height + 'px';
} else {
document.getElementById('tagsList').style.height = '250px';
}
});
input_dom.addEventListener('keydown', (event) => {
if (event.keyCode === 38) {
current_index --;
if (current_index < 0) {
current_index = 0;
}
} else if (event.keyCode === 40) {
current_index ++;
if (current_index >= this.showList.length) {
current_index = this.showList.length - 1;
}
}
this.showList.forEach(function(item, index) {
if (index === current_index) {
item.classList.add('ins_highlight');
document.getElementById('tagsList').scrollTop = item.offsetTop;
} else {
item.classList.remove('ins_highlight');
}
});
});
}
createNoteBtn(user_id, callback, an_class_name = "") {
let btn = document.createElement('div');
btn.className = 'ins_tag_a';
if (an_class_name) {
btn.classList.add(an_class_name);
}
if (this.judgeUsers(user_id)) {
btn.title = this.lang.modify_button_title;
} else {
btn.title = this.lang.add_button_title;
}
btn.addEventListener('click', (event) => {
event.stopPropagation();
document.body.appendChild(this.createNoteFrame(user_id, () => {
if (this.judgeUsers(user_id)) {
btn.title = this.lang.modify_button_title;
} else {
btn.title = this.lang.add_button_title;
}
if (typeof(callback) == 'function') {
callback();
}
}));
});
return btn;
}
createNoteTag(user_id, tag = 'span', an_class_name = '') {
let note_tag = document.createElement(tag);
note_tag.className = 'ins_tag ins_tag_' + tag;
if (an_class_name) {
note_tag.classList.add(an_class_name);
}
note_tag.textContent = this.getUserFormatTag(user_id);
return note_tag;
}
createListDiv(key_value, float_status = false) {
let list_div = document.createElement('div');
list_div.id = 'tags_' + key_value;
list_div.className = 'ins_list_item';
if (float_status) {
list_div.className = 'ins_mobile_list_item';
}
list_div.textContent = this.config[key_value].tag;
list_div.title = key_value + '\n' + this.config[key_value].tag;
list_div.addEventListener('mouseenter', function() {
for (let ele of document.querySelectorAll('#tagsList div')) {
ele.classList.remove('ins_highlight');
}
this.classList.add('ins_highlight');
});
list_div.addEventListener('click', function() {
window.location.pathname = '/' + key_value + '/';
});
return list_div;
}
isUsersFromLink(link) {
return /^\/[^/]+\/$/i.test(link.replace(location.origin, ""));
}
getUserIdFromLink(link) {
return link.replace(location.origin + '/', '').replace(/\/$/, '');
}
doneHandle(user_id, ele, path_name, a = null, at = false, t = true) {
if (a) {
if (path_name) {
if (ele.querySelector(path_name)) {
let path_ele = ele.querySelector(path_name);
if (path_ele.querySelector('.ins_tag')) {
let tag_dom = path_ele.querySelector('.ins_tag');
if (this.judgeUsers(user_id)) {
tag_dom.textContent = this.getUserFormatTag(user_id);
} else {
path_ele.removeChild(tag_dom);
}
} else {
if (this.judgeUsers(user_id)) {
path_ele.appendChild(this.createNoteTag(user_id, a));
}
}
}
} else {
if (ele.querySelector('.ins_tag')) {
let an_tag_dom = ele.querySelector('.ins_tag');
if (this.judgeUsers(user_id)) {
an_tag_dom.textContent = this.getUserFormatTag(user_id);
} else {
ele.removeChild(an_tag_dom);
}
} else {
if (this.judgeUsers(user_id)) {
ele.appendChild(this.createNoteTag(user_id, a));
}
}
}
} else {
if (path_name) {
if (ele.querySelector(path_name)) {
let source_dom = ele.querySelector(path_name);
if (this.judgeUsers(user_id)) {
source_dom.textContent = at ? this.getUserAtTag(user_id) : this.getUserTag(user_id);
if (t) {
source_dom.title = user_id;
}
source_dom.classList.add('font_blue_color');
} else {
source_dom.textContent = at ? '@' + user_id : user_id;
if (t) {
source_dom.title = '';
}
source_dom.classList.remove('font_blue_color');
}
}
} else {
if (this.judgeUsers(user_id)) {
ele.textContent = at ? this.getUserAtTag(user_id) : this.getUserTag(user_id);
if (t) {
ele.title = user_id;
}
ele.classList.add('font_blue_color');
} else {
ele.textContent = at ? '@' + user_id : user_id;
if (t) {
ele.title = '';
}
ele.classList.remove('font_blue_color');
}
}
}
}
}
function save_Event(user_id, note_obj) {
for (let article of document.querySelectorAll(selector.homepage.article)) {
if (article.querySelector(selector.homepage.id)) {
let article_user = article.querySelector(selector.homepage.id);
let article_user_id = note_obj.getUserIdFromLink(article_user.href);
if (article_user_id == user_id) {
note_obj.doneHandle(user_id, article_user);
}
}
for (let comment of article.querySelectorAll(selector.homepage.comment_id)) {
let comment_id = note_obj.getUserIdFromLink(comment.href);
if (comment_id == user_id) {
note_obj.doneHandle(user_id, comment, null, null, false, false);
}
}
for (let comment_at of article.querySelectorAll(selector.homepage.comment_at)) {
let comment_at_id = note_obj.getUserIdFromLink(comment_at.href);
if (comment_at_id == user_id) {
note_obj.doneHandle(user_id, comment_at);
}
}
for (let pic_comment_user of (article.querySelectorAll(selector.dialog.comment_id))) {
let pic_comment_id = note_obj.getUserIdFromLink(pic_comment_user.href);
if (pic_comment_id == user_id) {
note_obj.doneHandle(user_id, pic_comment_user);
}
}
for (let pic_comment_at of article.querySelectorAll(selector.dialog.comment_at)) {
let pic_comment_at_id = note_obj.getUserIdFromLink(pic_comment_at.href);
if (pic_comment_at_id == user_id) {
note_obj.doneHandle(user_id, pic_comment_at, null, null, true);
}
}
}
for (let homepage_stories of document.querySelectorAll(selector.homepage_stories.id_shell)) {
if (homepage_stories.querySelector(selector.homepage_stories.id)) {
let homepage_stories_id = homepage_stories.querySelector(selector.homepage_stories.id).textContent;
if (homepage_stories_id == user_id) {
if (note_obj.judgeUsers(user_id)) {
homepage_stories.title = note_obj.getUserTag(user_id);
} else {
homepage_stories.title = '';
}
}
}
}
for (let user_page of document.querySelectorAll(selector.user_page.frame)) {
if (user_page.querySelector(selector.user_page.id)) {
let user_page_id = user_page.querySelector(selector.user_page.id).textContent;
if (user_page_id == user_id) {
if (user_page.querySelector('.ins_tag_div')) {
let ins_tag_div = user_page.querySelector('.ins_tag_div');
if (note_obj.judgeUsers(user_id)) {
ins_tag_div.textContent = note_obj.getUserFormatTag(user_id);
} else {
ins_tag_div.parentNode.removeChild(ins_tag_div);
}
} else {
if (note_obj.judgeUsers(user_id)) {
user_page.querySelector(selector.user_page.box).after(note_obj.createNoteTag(user_id, 'div'));
}
}
}
}
}
for (let dialog of document.querySelectorAll(selector.dialog.frame)) {
if (dialog.querySelector(selector.homepage.id)) {
let dialog_a = dialog.querySelector(selector.homepage.id);
let dialog_id = note_obj.getUserIdFromLink(dialog_a.href);
if (dialog_id == user_id) {
note_obj.doneHandle(user_id, dialog_a);
}
}
for (let comment_user of dialog.querySelectorAll(selector.dialog.comment_id)) {
let comment_id = note_obj.getUserIdFromLink(comment_user.href);
if (comment_id == user_id) {
note_obj.doneHandle(user_id, comment_user);
}
}
for (let comment_at of dialog.querySelectorAll(selector.dialog.comment_at)) {
let comment_at_id = note_obj.getUserIdFromLink(comment_at.href);
if (comment_at_id == user_id) {
note_obj.doneHandle(user_id, comment_at, null, null, true);
}
}
}
}
function init() {
let instagram_config = {};
let keys_array = GM_listValues();
for (let key of keys_array) {
if (key == 'instagram_config') {
let old_data = GM_getValue('instagram_config');
if (old_data !== undefined) {
for (let ele of old_data.user_array) {
let ele_id = ele.user_id;
instagram_config[ele_id] = {'tag': ele.user_tag};
GM_setValue(ele_id, instagram_config[ele_id]);
}
}
GM_deleteValue('instagram_config');
} else {
let key_data = GM_getValue(key);
instagram_config[key] = key_data;
}
}
let lang_str = document.documentElement.lang;
let lang_value;
switch (lang_str) {
case 'zh':
case 'zh-cn':
lang_value = LANG.ZH;
break;
case 'zh-hk':
case 'zh-tw':
lang_value = LANG.ZH_TW;
break;
case 'ja':
lang_value = LANG.JA;
break;
case 'ko':
lang_value = LANG.KO;
break;
case 'en':
default:
lang_value = LANG.EN;
break;
}
let note_obj = new Instagram_Note(instagram_config, lang_value);
let arrive_option = {
'fireOnAttributesModification': true,
'existing': true
};
let style_dom = document.createElement('style');
style_dom.type = 'text/css';
style_dom.innerHTML = STYLE_VALUE;
document.body.appendChild(style_dom);
document.querySelector(selector.root).arrive(selector.search.frame, arrive_option, function() {
this.after(note_obj.createSearchFrame());
});
if (note_obj.isMobilePage()) {
document.querySelector(selector.root).arrive(selector.mobile.bottom_bar, arrive_option, function() {
this.appendChild(note_obj.createMobileSearchButton());
});
}
document.querySelector(selector.root).arrive(selector.homepage.article, arrive_option, function() {
if (this.querySelector(selector.homepage.id)) {
let homepage_id = this.querySelector(selector.homepage.id);
let user_id = note_obj.getUserIdFromLink(homepage_id.href);
if (note_obj.judgeUsers(user_id)) {
note_obj.doneHandle(user_id, homepage_id);
}
if (this.querySelector(selector.homepage.icon)) {
this.querySelector(selector.homepage.icon).insertAdjacentElement('beforebegin', note_obj.createNoteBtn(user_id, function() {
save_Event(user_id, note_obj);
}, 'ins_homepage_icon'));
}
}
for (let comment of this.querySelectorAll(selector.homepage.comment_id)) {
let comment_id = note_obj.getUserIdFromLink(comment.href);
if (note_obj.judgeUsers(comment_id)) {
note_obj.doneHandle(comment_id, comment, null, null, false, false);
}
}
this.arrive(selector.homepage.comment_at, arrive_option, (comment_at) => {
let comment_at_id = note_obj.getUserIdFromLink(comment_at.href);
if (note_obj.judgeUsers(comment_at_id)) {
note_obj.doneHandle(comment_at_id, comment_at, null, null, true);
}
});
this.arrive(selector.dialog.comment_id, arrive_option, (pic_comment_user) => {
let pic_comment_id = note_obj.getUserIdFromLink(pic_comment_user.href);
if (note_obj.judgeUsers(pic_comment_id)) {
note_obj.doneHandle(pic_comment_id, pic_comment_user);
}
});
this.arrive(selector.dialog.comment_at, arrive_option, (pic_comment_at) => {
let pic_comment_at_id = note_obj.getUserIdFromLink(pic_comment_at.href);
if (note_obj.judgeUsers(pic_comment_at_id)) {
note_obj.doneHandle(pic_comment_at_id, pic_comment_at, null, null, true);
}
});
});
document.querySelector(selector.root).arrive(selector.homepage_stories.id_shell, arrive_option, function() {
if (this.querySelector(selector.homepage_stories.id)) {
let user_id = this.querySelector(selector.homepage_stories.id).textContent;
if (note_obj.judgeUsers(user_id)) {
this.title = note_obj.getUserTag(user_id);
}
}
});
document.querySelector(selector.root).arrive(selector.homepage_recommend.id, arrive_option, function() {
let user_id = note_obj.getUserIdFromLink(this.href);
if (note_obj.judgeUsers(user_id)) {
note_obj.doneHandle(user_id, this, null, null, false, false);
}
});
document.querySelector(selector.root).arrive(selector.user_page.frame, arrive_option, function() {
if (this.querySelector(selector.user_page.id)) {
let user_id = this.querySelector(selector.user_page.id).textContent;
if (this.querySelector(selector.user_page.bar)) {
this.querySelector(selector.user_page.bar).after(note_obj.createNoteBtn(user_id, function() {
save_Event(user_id, note_obj);
}, 'ins_user_page_icon'));
}
if (note_obj.judgeUsers(user_id)) {
this.querySelector(selector.user_page.box).after(note_obj.createNoteTag(user_id, 'div'));
}
}
for (let common_user of this.querySelectorAll(selector.user_page.common)) {
let common_user_id = common_user.textContent;
if (note_obj.judgeUsers(common_user_id)) {
common_user.title = note_obj.getUserTag(common_user_id);
common_user.classList.add('font_blue_color');
}
}
});
document.querySelector(selector.root).arrive(selector.stories.id_shell, arrive_option, function() {
if (this.querySelector(selector.stories.id)) {
let stories = this.querySelector(selector.stories.id);
let user_id = note_obj.getUserIdFromLink(stories.href);
if (note_obj.judgeUsers(user_id)) {
note_obj.doneHandle(user_id, stories, null, null, false, false);
}
}
});
document.querySelector(selector.body).arrive(selector.watch_list.initial_item, arrive_option, function() {
if (this.querySelector(selector.watch_list.id)) {
let initial_item = this.querySelector(selector.watch_list.id);
let user_id = note_obj.getUserIdFromLink(initial_item.href);
if (note_obj.judgeUsers(user_id)) {
note_obj.doneHandle(user_id, initial_item, null, null, false, false);
}
}
});
document.querySelector(selector.body).arrive(selector.watch_list.later_item, arrive_option, function() {
if (this.querySelector(selector.watch_list.id)) {
let later_item = this.querySelector(selector.watch_list.id);
let user_id = note_obj.getUserIdFromLink(later_item.href);
if (note_obj.judgeUsers(user_id)) {
note_obj.doneHandle(user_id, later_item, null, null, false, false);
}
}
});
document.querySelector(selector.body).arrive(selector.dialog.frame, arrive_option, function() {
if (this.querySelector(selector.homepage.id)) {
let dialog_a = this.querySelector(selector.homepage.id);
let user_id = note_obj.getUserIdFromLink(dialog_a.href);
if (note_obj.judgeUsers(user_id)) {
note_obj.doneHandle(user_id, dialog_a);
}
if (this.querySelector(selector.homepage.icon)) {
this.querySelector(selector.homepage.icon).insertAdjacentElement('beforebegin', note_obj.createNoteBtn(user_id, function() {
save_Event(user_id, note_obj);
}, 'ins_homepage_icon'));
}
}
for (let like of this.querySelectorAll(selector.homepage.comment_id)) {
let like_id = note_obj.getUserIdFromLink(like.href);
if (note_obj.judgeUsers(like_id)) {
note_obj.doneHandle(like_id, like, null, null, false, false);
}
}
this.arrive(selector.dialog.comment_id, arrive_option, (comment_user) => {
let comment_id = note_obj.getUserIdFromLink(comment_user.href);
if (note_obj.judgeUsers(comment_id)) {
note_obj.doneHandle(comment_id, comment_user);
}
});
this.arrive(selector.dialog.comment_at, arrive_option, (comment_at) => {
let comment_at_id = note_obj.getUserIdFromLink(comment_at.href);
if (note_obj.judgeUsers(comment_at_id)) {
note_obj.doneHandle(comment_at_id, comment_at, null, null, true);
}
});
});
document.querySelector(selector.root).arrive(selector.request.follow, arrive_option, function() {
let user_id = note_obj.getUserIdFromLink(this.href);
if (note_obj.judgeUsers(user_id)) {
note_obj.doneHandle(user_id, this, null, null, false, false);
}
});
document.querySelector(selector.root).arrive(selector.user_page.suggest, arrive_option, function() {
let user_id = note_obj.getUserIdFromLink(this.href);
if (note_obj.judgeUsers(user_id)) {
note_obj.doneHandle(user_id, this, null, null, false, false);
}
});
}
init();
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址