☰

Greasyfork - Add notes to the script

Add a note for scripts to help identify and search

As of 2020-05-28. See the latest version.

  1. // ==UserScript==
  2. // @name                Greasyfork - Add notes to the script
  3. // @name:zh-CN          Greasyfork - 为脚本添加备注
  4. // @name:zh-TW          Greasyfork - 為腳本新增備註
  5. // @namespace           https://greatest.deepsurf.us/zh-CN/users/193133-pana
  6. // @homepage            https://www.sailboatweb.com
  7. // @version             1.0.0
  8. // @description         Add a note for scripts to help identify and search
  9. // @description:zh-CN   为脚本添加备注功能，以帮助识别和搜索
  10. // @description:zh-TW   為腳本新增備註功能，以幫助識別和搜尋
  11. // @author              pana
  12. // @license             GNU General Public License v3.0 or later
  13. // @include             http*://*greatest.deepsurf.us/*
  14. // @include             http*://*sleazyfork.org/*
  15. // @grant               GM_getValue
  16. // @grant               GM_setValue
  17. // ==/UserScript==
  18.  
  19. (function() {
  20.     'use strict';
  21.     const LANG = {
  22.         'EN': {
  23.             'title': 'Note',
  24.             'add_button_text': 'Add note',
  25.             'add_button_title': 'Add notes to the script',
  26.             'modify_button_text': 'Modify note',
  27.             'modify_button_title': 'Modify notes for the script',
  28.             'input_placeholder': '(Enter a note, delete it when blanked; press Enter to save)',
  29.             'save_button_text': 'Save',
  30.             'clear_button_text': 'Clear',
  31.             'cancel_button_text': 'Cancel',
  32.             'search_placeholder': 'Search notes'
  33.         },
  34.         'ZH_CN': {
  35.             'title': '备注',
  36.             'add_button_text': '添加备注',
  37.             'add_button_title': '为脚本添加备注',
  38.             'modify_button_text': '修改备注',
  39.             'modify_button_title': '为脚本修改备注',
  40.             'input_placeholder': '(请输入备注，置空时删除；按下Enter键保存)',
  41.             'save_button_text': '保存',
  42.             'clear_button_text': '清除',
  43.             'cancel_button_text': '取消',
  44.             'search_placeholder': '搜索备注'
  45.         },
  46.         'ZH_TW': {
  47.             'title': '備註',
  48.             'add_button_text': '新增備註',
  49.             'add_button_title': '為腳本新增備註',
  50.             'modify_button_text': '修改備註',
  51.             'modify_button_title': '為腳本修改備註',
  52.             'input_placeholder': '(請輸入備註，置空時刪除；按下Enter鍵儲存)',
  53.             'save_button_text': '儲存',
  54.             'clear_button_text': '清除',
  55.             'cancel_button_text': '取消',
  56.             'search_placeholder': '搜尋備註'
  57.         }
  58.     };
  59.     const ICON = {
  60.         'DOWN_ARROW': 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTEuOTk2IDQ5MS45OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5MS45OTYgNDkxLjk5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00ODQuMTMyLDEyNC45ODZsLTE2LjExNi0xNi4yMjhjLTUuMDcyLTUuMDY4LTExLjgyLTcuODYtMTkuMDMyLTcuODZjLTcuMjA4LDAtMTMuOTY0LDIuNzkyLTE5LjAzNiw3Ljg2bC0xODMuODQsMTgzLjg0OCAgICBMNjIuMDU2LDEwOC41NTRjLTUuMDY0LTUuMDY4LTExLjgyLTcuODU2LTE5LjAyOC03Ljg1NnMtMTMuOTY4LDIuNzg4LTE5LjAzNiw3Ljg1NmwtMTYuMTIsMTYuMTI4ICAgIGMtMTAuNDk2LDEwLjQ4OC0xMC40OTYsMjcuNTcyLDAsMzguMDZsMjE5LjEzNiwyMTkuOTI0YzUuMDY0LDUuMDY0LDExLjgxMiw4LjYzMiwxOS4wODQsOC42MzJoMC4wODQgICAgYzcuMjEyLDAsMTMuOTYtMy41NzIsMTkuMDI0LTguNjMybDIxOC45MzItMjE5LjMyOGM1LjA3Mi01LjA2NCw3Ljg1Ni0xMi4wMTYsNy44NjQtMTkuMjI0ICAgIEM0OTEuOTk2LDEzNi45MDIsNDg5LjIwNCwxMzAuMDQ2LDQ4NC4xMzIsMTI0Ljk4NnoiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)',
  61.         '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=)',
  62.     };
  63.     const STYLE_VALUE = `
  64.         .my_greasyfork_note_btn {
  65.             margin-left: 10px;
  66.         }
  67.         .list_show, .show_separator {
  68.             display: block !important;
  69.         }
  70.         #presentation_div_for_user {
  71.             display: flex;
  72.             position: fixed;
  73.             background-color: rgba(0, 0, 0, .5);
  74.             top: 0;
  75.             bottom: 0;
  76.             left: 0;
  77.             right: 0;
  78.             z-index: 1;
  79.             align-items: center;
  80.             justify-content: center;
  81.         }
  82.         .dialog_div_for_user {
  83.             position: relative;
  84.             width: 400px;
  85.             background-color: #fff;
  86.             border: 0 solid #000;
  87.             border-radius: 12px;
  88.             display: flex;
  89.             flex-direction: column;
  90.         }
  91.         .user_title_span_for_user {
  92.             min-height: 48px;
  93.             text-align: center;
  94.             border: 1px solid #efefef;
  95.             color: #003399;
  96.             font-weight: bold;
  97.             background-color: rgba(0, 0, 0, 0);
  98.             border-top-left-radius: 12px;
  99.             border-top-right-radius: 12px;
  100.         }
  101.         .tag_input_for_user {
  102.             min-height: 32px;
  103.             margin: 5px;
  104.             border: 1px solid #cc6666;
  105.             padding-left: 5px;
  106.         }
  107.         .button_for_user {
  108.             min-height: 48px;
  109.             cursor: pointer;
  110.             border: 1px solid #efefef;
  111.             background-color: rgba(0, 0, 0, 0);
  112.         }
  113.         .cancel_button_for_user {
  114.             border-bottom-left-radius: 12px;
  115.             border-bottom-right-radius: 12px;
  116.         }
  117.         #searchFrame {
  118.             position: relative;
  119.             margin-left: 15px;
  120.         }
  121.         #myInputSearch {
  122.             width: 175px;
  123.             height: 25px;
  124.             border: 1px solid #999;
  125.             border-radius: 3px;
  126.             padding: 0 3px;
  127.             position: relative;
  128.         }
  129.         #dropDowns {
  130.             width: 15px;
  131.             height: 15px;
  132.             background-repeat: no-repeat;
  133.             background-size: 12px auto;
  134.             position: absolute;
  135.             top: 8px;
  136.             right: 2px;
  137.         }
  138.         .ins_down_arrow {
  139.             background-image: ${ICON.DOWN_ARROW};
  140.         }
  141.         .ins_up_arrow {
  142.             background-image: ${ICON.UP_ARROW};
  143.         }
  144.         #tagsList {
  145.             width: 180px;
  146.             height: 220px;
  147.             overflow-y: scroll;
  148.             text-align: left;
  149.             border: 1px solid #999;
  150.             display: none;
  151.             position: absolute;
  152.             top: 27px;
  153.             background-color: #fff;
  154.             z-index: 1;
  155.         }
  156.         .ins_list_item {
  157.             cursor: pointer;
  158.             color: #000;
  159.             padding-left: 5px;
  160.         }
  161.         .ins_highlight {
  162.             background-color: #6699cc;
  163.         }
  164.         .ins_hide {
  165.             display: none;
  166.         }
  167.         .ins_tag_span {
  168.             margin-left: 20px;
  169.             color: #336699;
  170.         }
  171.         .my_note_btn_hide {
  172.             display: none;
  173.         }
  174.         ol.script-list li:hover .my_greasyfork_note_btn {
  175.             display: inline !important;
  176.         }
  177.     `;
  178.     class Greasyfork_Note {
  179.         constructor(config, lang, show_list = []) {
  180.             this.config = config;
  181.             this.lang = lang;
  182.             this.showList = show_list;
  183.         }
  184.         createNoteBtn(script_id, callback, class_name = "my_greasyfork_note_btn") {
  185.             let btn = document.createElement('a');
  186.             btn.className = class_name;
  187.             btn.target = '_self';
  188.             btn.href = 'javascript:;';
  189.             if (this.judgeScripts(script_id)) {
  190.                 btn.textContent = this.lang.modify_button_text;
  191.                 btn.title = this.lang.modify_button_title;
  192.             } else {
  193.                 btn.textContent = this.lang.add_button_text;
  194.                 btn.title = this.lang.add_button_title;
  195.             }
  196.             btn.addEventListener('click', () => {
  197.                 document.body.appendChild(this.createNoteFrame(script_id, () => {    
  198.                     if (this.judgeScripts(script_id)) {
  199.                         btn.textContent = this.lang.modify_button_text;
  200.                         btn.title = this.lang.modify_button_title;
  201.                     } else {
  202.                         btn.textContent = this.lang.add_button_text;
  203.                         btn.title = this.lang.add_button_title;
  204.                     }
  205.                     if (typeof(callback) == 'function') {
  206.                         callback();
  207.                     }
  208.                 }));
  209.             });
  210.             return btn;
  211.         }
  212.         judgeScripts(script_id) {
  213.             if (this.getScriptIndex(script_id) == -1) {
  214.                 return false;
  215.             }
  216.             return true;
  217.         }
  218.         getScriptIndex(script_id) {
  219.             for (let i in this.config.scripts_array) {
  220.                 if (script_id == this.config.scripts_array[i].id) {
  221.                     return i;
  222.                 }
  223.             }
  224.             return -1;
  225.         }
  226.         getScriptTag(script_id) {
  227.             if (this.judgeScripts(script_id)) {
  228.                 return this.config.scripts_array[this.getScriptIndex(script_id)].tag;
  229.             }
  230.             return '';
  231.         }
  232.         getScriptFormatTag(script_id) {
  233.             if (this.judgeScripts(script_id)) {
  234.                 return '[' + this.getScriptTag(script_id) + ']';
  235.             }
  236.             return '';
  237.         }
  238.         writeScripts(script_id, tag_value) {
  239.             if (this.judgeScripts(script_id)) {
  240.                 let index = this.getScriptIndex(script_id);
  241.                 if (tag_value) {
  242.                     this.config.scripts_array[index].tag = tag_value;
  243.                 } else {
  244.                     this.config.scripts_array.splice(index, 1);
  245.                 }
  246.             } else {
  247.                 if (tag_value) {
  248.                     let temp_scripts_obj = {
  249.                         'id': script_id,
  250.                         'tag': tag_value
  251.                     };
  252.                     this.config.scripts_array.push(temp_scripts_obj);
  253.                 }
  254.             }
  255.             GM_setValue('greasyfork_config', this.config);
  256.         }
  257.         removeNoteFrame(frame_id = 'presentation_div_for_user') {
  258.             let temp_ele = document.getElementById(frame_id);
  259.             temp_ele.parentNode.removeChild(temp_ele);
  260.         }
  261.         createNoteFrame(script_id, callback) {
  262.             let that = this;
  263.             let presentation_div = document.createElement('div');
  264.             presentation_div.id = 'presentation_div_for_user';
  265.             presentation_div.addEventListener('click', function (event) {
  266.                 if (event.target === this) {
  267.                     that.removeNoteFrame();
  268.                 }
  269.             });
  270.             let dialog_div = document.createElement('div');
  271.             dialog_div.className = 'dialog_div_for_user';
  272.             let user_title_p = document.createElement('button');
  273.             user_title_p.className = 'user_title_span_for_user';
  274.             user_title_p.textContent = "ID: " + script_id;
  275.             let tag_input = document.createElement('input');
  276.             tag_input.className = 'tag_input_for_user';
  277.             tag_input.type = 'text';
  278.             tag_input.placeholder = this.lang.input_placeholder;
  279.             if (this.judgeScripts(script_id)) {
  280.                 tag_input.value = this.config.scripts_array[this.getScriptIndex(script_id)].tag;
  281.             } else {
  282.                 tag_input.value = '';
  283.             }
  284.             tag_input.addEventListener('keyup', (e) => {
  285.                 if (e.keyCode === 13) {
  286.                     this.writeScripts(script_id, tag_input.value);
  287.                     this.resetSearchFrame();
  288.                     if (typeof(callback) == 'function') {
  289.                         callback();
  290.                     }
  291.                     this.removeNoteFrame();
  292.                 }
  293.             });
  294.             setTimeout(function() {
  295.                 try {
  296.                     tag_input.focus();
  297.                     tag_input.select();
  298.                 } catch(e) {
  299.                     console.error(e);
  300.                 }
  301.             }, 200);
  302.             let save_button = document.createElement('button');
  303.             save_button.className = 'button_for_user';
  304.             save_button.type = 'button';
  305.             save_button.innerText = this.lang.save_button_text;
  306.             save_button.addEventListener('click', () => {
  307.                 this.writeScripts(script_id, tag_input.value);
  308.                 this.resetSearchFrame();
  309.                 if (typeof(callback) == 'function') {
  310.                     callback();
  311.                 }
  312.                 this.removeNoteFrame();
  313.             });
  314.             let clear_button = document.createElement('button');
  315.             clear_button.className = 'button_for_user';
  316.             clear_button.type = 'button';
  317.             clear_button.innerText = this.lang.clear_button_text;
  318.             clear_button.addEventListener('click', () => {
  319.                 this.writeScripts(script_id, '');
  320.                 this.resetSearchFrame();
  321.                 if (typeof(callback) == 'function') {
  322.                     callback();
  323.                 }
  324.                 this.removeNoteFrame();
  325.             });
  326.             let cancel_button = document.createElement('button');
  327.             cancel_button.className = 'button_for_user cancel_button_for_user';
  328.             cancel_button.type = 'button';
  329.             cancel_button.innerText = this.lang.cancel_button_text;
  330.             cancel_button.addEventListener('click', () => {
  331.                 this.removeNoteFrame();
  332.             });
  333.             dialog_div.appendChild(user_title_p);
  334.             dialog_div.appendChild(tag_input);
  335.             dialog_div.appendChild(save_button);
  336.             dialog_div.appendChild(clear_button);
  337.             dialog_div.appendChild(cancel_button);
  338.             presentation_div.appendChild(dialog_div);
  339.             return presentation_div;
  340.         }
  341.         resetSearchFrame() {
  342.             let tags_list = document.getElementById('tagsList');
  343.             if (tags_list) {
  344.                 tags_list.innerHTML = "";
  345.                 this.config.scripts_array.forEach((item, index) => {
  346.                     tags_list.appendChild(this.createListDiv(index, item));
  347.                 });
  348.             }
  349.         }
  350.         cretaeSearchFrame() {
  351.             let search_frame = document.createElement('div');
  352.             search_frame.id = 'searchFrame';
  353.             let search_input = document.createElement('input');
  354.             search_input.id = 'myInputSearch';
  355.             search_input.type = 'text';
  356.             search_input.placeholder = this.lang.search_placeholder;
  357.             search_input.value = "";
  358.             search_input.addEventListener('focusin', () => {
  359.                 document.getElementById('tagsList').classList.add('list_show');
  360.                 let arrow = document.getElementById('dropDowns');
  361.                 arrow.classList.remove('ins_down_arrow');
  362.                 arrow.classList.add('ins_up_arrow');
  363.                 this.searchEvent(search_input);
  364.             });
  365.             search_frame.appendChild(search_input);
  366.             let dropdowns = document.createElement('div');
  367.             dropdowns.id = 'dropDowns';
  368.             dropdowns.className = 'ins_down_arrow';
  369.             dropdowns.addEventListener('click', function() {
  370.                 let tags_list = document.getElementById('tagsList');
  371.                 if (tags_list.classList.contains('list_show')) {
  372.                     tags_list.classList.remove('list_show');
  373.                 } else {
  374.                     tags_list.classList.add('list_show');
  375.                 }
  376.                 if (this.classList.contains('ins_up_arrow')) {
  377.                     this.classList.remove('ins_up_arrow');
  378.                 } else {
  379.                     this.classList.add('ins_up_arrow');
  380.                 }
  381.                 if (this.classList.contains('ins_down_arrow')) {
  382.                     this.classList.remove('ins_down_arrow');
  383.                 } else {
  384.                     this.classList.add('ins_down_arrow');
  385.                 }
  386.             });
  387.             search_frame.appendChild(dropdowns);
  388.             let tags_list = document.createElement('div');
  389.             tags_list.id = 'tagsList';
  390.             for (let i = 0; i < this.config.scripts_array.length; i ++) {
  391.                 tags_list.appendChild(this.createListDiv(i, this.config.scripts_array[i]));
  392.             }
  393.             search_frame.appendChild(tags_list);
  394.             document.body.onclick = function(e){
  395.                 e = e || window.event;
  396.                 let target = e.target || e.srcElement;
  397.                 if(target !== document.getElementById('dropDowns') && target !== document.getElementById('tagsList') && target !== document.getElementById('myInputSearch')){
  398.                     document.getElementById('tagsList').classList.remove('list_show');
  399.                     let arrow = document.getElementById('dropDowns');
  400.                     arrow.classList.remove('ins_up_arrow');
  401.                     arrow.classList.add('ins_down_arrow');
  402.                 }
  403.             };
  404.             return search_frame;
  405.         }
  406.         createListDiv(id_number, scripts_obj) {
  407.             let list_div = document.createElement('div');
  408.             list_div.id = 'tags_' + id_number;
  409.             list_div.className = 'ins_list_item';
  410.             list_div.textContent = scripts_obj.tag;
  411.             list_div.addEventListener('mouseenter', function() {
  412.                 for (let ele of document.querySelectorAll('#tagsList div')) {
  413.                     ele.classList.remove('ins_highlight');
  414.                 }
  415.                 this.classList.add('ins_highlight');
  416.             });
  417.             list_div.addEventListener('click', function() {
  418.                 location.pathname = location.pathname.replace(/^(\/[\w-]+)\/?.*/i, "$1" + "/scripts/" + scripts_obj.id);
  419.             });
  420.             return list_div;
  421.         }
  422.         searchEvent(input_dom) {
  423.             let list_arr = [];
  424.             for (let ele of document.querySelectorAll('#tagsList div')) {
  425.                 let arr_obj = {
  426.                     'eleContainer': ele.textContent,
  427.                     'ele': ele
  428.                 };
  429.                 list_arr.push(arr_obj);
  430.             }
  431.             let current_index = 0;
  432.             input_dom.addEventListener('keyup', (event) => {
  433.                 document.getElementById('tagsList').classList.add('list_show');
  434.                 let arrow = document.getElementById('dropDowns');
  435.                 arrow.classList.remove('ins_down_arrow');
  436.                 arrow.classList.add('ins_up_arrow');
  437.                 let search_val;
  438.                 switch (event.keyCode) {
  439.                     case 38:
  440.                     case 40:
  441.                     case 37:
  442.                     case 39:
  443.                         event.returnValue = false;
  444.                         break;
  445.                     case 13:
  446.                         this.showList[current_index].click();
  447.                         break;
  448.                     default:
  449.                         search_val = input_dom.value;
  450.                         this.showList = [];
  451.                         list_arr.forEach((item) => {
  452.                             if (item.eleContainer.indexOf(search_val) !== -1) {
  453.                                 item.ele.classList.remove('ins_hide');
  454.                                 this.showList.push(item.ele);
  455.                             } else {
  456.                                 item.ele.classList.add('ins_hide');
  457.                             }
  458.                         });
  459.                         current_index = 0;
  460.                         break;
  461.                 }
  462.                 this.showList.forEach(function(item, index) {
  463.                     if (index === current_index) {
  464.                         item.classList.add('ins_highlight');
  465.                         document.getElementById('tagsList').scrollTop = item.offsetTop;
  466.                     } else {
  467.                         item.classList.remove('ins_highlight');
  468.                     }
  469.                 });
  470.                 let list_height = 22 * this.showList.length;
  471.                 if (list_height < 220) {
  472.                     document.getElementById('tagsList').style.height = list_height + 'px';
  473.                 } else {
  474.                     document.getElementById('tagsList').style.height = '220px';
  475.                 }
  476.             });
  477.             input_dom.addEventListener('keydown', (event) => {
  478.                 if (event.keyCode === 38) {
  479.                     current_index --;
  480.                     if (current_index < 0) {
  481.                         current_index = 0;
  482.                     }
  483.                 } else if (event.keyCode === 40) {
  484.                     current_index ++;
  485.                     if (current_index >= this.showList.length) {
  486.                         current_index = this.showList.length - 1;
  487.                     }
  488.                 }
  489.                 this.showList.forEach(function(item, index) {
  490.                     if (index === current_index) {
  491.                         item.classList.add('ins_highlight');
  492.                         document.getElementById('tagsList').scrollTop = item.offsetTop;
  493.                     } else {
  494.                         item.classList.remove('ins_highlight');
  495.                     }
  496.                 });
  497.             });
  498.         }
  499.         createNoteSpan(script_id, an_class_name = "") {
  500.             let note_span = document.createElement('span');
  501.             note_span.className = 'ins_tag_span';
  502.             if (an_class_name) {
  503.                 note_span.classList.add(an_class_name);
  504.             }
  505.             note_span.textContent = '[' + this.getScriptTag(script_id) + ']';
  506.             return note_span;
  507.         }
  508.     }
  509.     function init(greasyfork_config) {
  510.         let pathname = location.pathname;
  511.         let style_dom = document.createElement('style');
  512.         style_dom.type = 'text/css';
  513.         style_dom.innerHTML = STYLE_VALUE;
  514.         document.body.appendChild(style_dom);
  515.         let lang_str = document.documentElement.lang;
  516.         let lang_value;
  517.         switch (lang_str) {
  518.             case 'zh':
  519.             case 'zh-cn':
  520.             case 'zh-CN':
  521.                 lang_value = LANG.ZH_CN;
  522.                 break;
  523.             case 'zh-hk':
  524.             case 'zh-HK':
  525.             case 'zh-tw':
  526.             case 'zh-TW':
  527.                 lang_value = LANG.ZH_TW;
  528.                 break;
  529.             case 'en':
  530.             default:
  531.                 lang_value = LANG.EN;
  532.                 break;
  533.         }
  534.         let note_obj = new Greasyfork_Note(greasyfork_config, lang_value);
  535.         let search_li = document.createElement('li');
  536.         search_li.appendChild(note_obj.cretaeSearchFrame());
  537.         document.querySelector('#site-nav nav').insertAdjacentElement('afterbegin', search_li);
  538.         if (/^\/[\w-]+\/scripts\/\d+-/i.test(pathname)) {
  539.             let script_id = /^\/[\w-]+\/scripts\/(\d+)-/i.exec(pathname)[1];
  540.             if (document.getElementById('script-feedback-suggestion')) {
  541.                 document.getElementById('script-feedback-suggestion').appendChild(note_obj.createNoteBtn(script_id, function() {
  542.                     if (document.querySelector('#script-info h2 > span')) {
  543.                         let span_dom = document.querySelector('#script-info h2 > span');
  544.                         if (note_obj.judgeScripts(script_id)) {
  545.                             span_dom.textContent = note_obj.getScriptFormatTag(script_id);
  546.                         } else {
  547.                             document.querySelector('#script-info h2').removeChild(span_dom);
  548.                         }
  549.                     } else {
  550.                         if (note_obj.judgeScripts(script_id)) {
  551.                             document.querySelector('#script-info h2').appendChild(note_obj.createNoteSpan(script_id));
  552.                         }
  553.                     }
  554.                 }));
  555.             }
  556.             if (note_obj.judgeScripts(script_id)) {
  557.                 document.querySelector('#script-info h2').appendChild(note_obj.createNoteSpan(script_id));
  558.             }
  559.         } else if (/^\/[\w-]+\/scripts/i.test(pathname) || /^\/[\w-]+\/users\/\d+/i.test(pathname)) {
  560.             let browse_list = document.querySelectorAll('ol.script-list li');
  561.             for (let ele of browse_list) {
  562.                 let script_id = ele.getAttribute('data-script-id');
  563.                 if (script_id) {
  564.                     if (ele.querySelector('dd.script-list-author span')) {
  565.                         ele.querySelector('dd.script-list-author span').appendChild(note_obj.createNoteBtn(script_id, function() {
  566.                             if (ele.querySelector('h2 > .ins_tag_span')) {
  567.                                 let span_dom = ele.querySelector('h2 .ins_tag_span');
  568.                                 if (note_obj.judgeScripts(script_id)) {
  569.                                     span_dom.textContent = note_obj.getScriptFormatTag(script_id);
  570.                                 } else {
  571.                                     ele.querySelector('h2').removeChild(span_dom);
  572.                                 }
  573.                             } else {
  574.                                 if (note_obj.judgeScripts(script_id)) {
  575.                                     ele.querySelector('.name-description-separator').after(note_obj.createNoteSpan(script_id));
  576.                                 }
  577.                             }
  578.                         }, 'my_greasyfork_note_btn my_note_btn_hide'));
  579.                     }
  580.                     if (note_obj.judgeScripts(script_id)) {
  581.                         ele.querySelector('.name-description-separator').after(note_obj.createNoteSpan(script_id));
  582.                     }
  583.                 }
  584.             }
  585.         }
  586.     }
  587.     Promise.all([GM_getValue('greasyfork_config')]).then(function(data) {
  588.         let greasyfork_config = {
  589.             scripts_array: []
  590.         };
  591.         if (data[0] !== undefined) {
  592.             greasyfork_config = data[0];
  593.         }
  594.         init(greasyfork_config);
  595.     }).catch(function(e) {
  596.         console.error('Script error.');
  597.         console.error(e);
  598.     });
  599. })();