☰

GGn Tag selector

Enhanced Tag selector for GGn

  1. // ==UserScript==
  2. // @name			 GGn Tag selector
  3. // @description		 Enhanced Tag selector for GGn
  4. // @namespace	     ggntagselector
  5. // @version			 1.3
  6. // @match			 *://gazellegames.net/upload.php*
  7. // @match			 *://gazellegames.net/torrents.php?*action=advanced*
  8. // @match			 *://gazellegames.net/torrents.php*id=*
  9. // @exclude			 *://gazellegames.net/torrents.php*action=editgroup*
  10. // @match			 *://gazellegames.net/requests.php*
  11. // @match			 *://gazellegames.net/user.php*action=edit*
  12. // @grant			 GM.setValue
  13. // @grant			 GM.getValue
  14. // @grant			 GM_setValue
  15. // @grant			 GM_getValue
  16. // @grant			 GM_addStyle
  17. // @license			 MIT
  18. // @author			 tweembp, ingts
  19. // ==/UserScript==
  20. // noinspection CssUnresolvedCustomProperty,CssUnusedSymbol
  21.  
  22. const locationhref = location.href
  23. const isUploadPage = locationhref.includes('upload.php'),
  24.     isGroupPage = locationhref.includes('torrents.php?id='),
  25.     isSearchPage = locationhref.includes('action=advanced'),
  26.     isRequestPage = locationhref.includes('requests.php') && !locationhref.includes('action=new'),
  27.     isCreateRequestPage = locationhref.includes('action=new'),
  28.     isUserPage = locationhref.includes('user.php')
  29.  
  30. const SEPERATOR = '|'
  31. const TAGSEPERATOR = ', '
  32. const defaultHotkeys = {
  33.     'favorite': [
  34.         'shift + digit1',
  35.         'shift + digit2',
  36.         'shift + digit3',
  37.         'shift + digit4',
  38.         'shift + digit5',
  39.         'shift + digit6',
  40.         'shift + digit7',
  41.         'shift + digit8',
  42.         'shift + digit9',
  43.     ],
  44.     'preset': [
  45.         'alt + digit1',
  46.         'alt + digit2',
  47.         'alt + digit3',
  48.         'alt + digit4',
  49.         'alt + digit5',
  50.         'alt + digit6',
  51.         'alt + digit7',
  52.         'alt + digit8',
  53.         'alt + digit9',
  54.     ],
  55. }
  56. const defaulthotkeyPrefixes = {
  57.     'show_indices': 'shift'
  58. }
  59. const modifiers = ["shift", "alt", "ctrl", "cmd"]
  60. const categoryDict = {
  61.     "genre": [
  62.         "4x",
  63.         "action",
  64.         "adventure",
  65.         "aerial.combat",
  66.         "agriculture",
  67.         "arcade",
  68.         "auto.battler",
  69.         "beat.em.up",
  70.         "board.game",
  71.         "building",
  72.         "bullet.hell",
  73.         "card.game",
  74.         "casual",
  75.         "childrens",
  76.         "city.building",
  77.         "clicker",
  78.         "creature.collector",
  79.         "d10.system",
  80.         "d20.system",
  81.         "driving",
  82.         "dungeon.crawler",
  83.         "educational",
  84.         "espionage",
  85.         "exploration",
  86.         "fighting",
  87.         "fitness",
  88.         "game.show",
  89.         "grand.strategy",
  90.         "hack.and.slash",
  91.         "hidden.object",
  92.         "horror",
  93.         "hunting",
  94.         "interactive.fiction",
  95.         "jigsaw",
  96.         "karaoke",
  97.         "management",
  98.         "match.3",
  99.         "mini.game",
  100.         "music",
  101.         "open.world",
  102.         "parody",
  103.         "party",
  104.         "pinball",
  105.         "platform",
  106.         "point.and.click",
  107.         "puzzle",
  108.         "quiz",
  109.         "rhythm",
  110.         "roguelike",
  111.         "role.playing.game",
  112.         "runner",
  113.         "sandbox",
  114.         "shoot.em.up",
  115.         "shooter",
  116.         "first.person.shooter",
  117.         "third.person.shooter",
  118.         "simulation",
  119.         "solitaire",
  120.         "space",
  121.         "stealth",
  122.         "strategy",
  123.         "real.time.strategy",
  124.         "turn.based.strategy",
  125.         "stunts",
  126.         "survival",
  127.         "tabletop",
  128.         "tactics",
  129.         "text.adventure",
  130.         "time.management",
  131.         "tower.defense",
  132.         "trivia",
  133.         "typing",
  134.         "vehicular.combat",
  135.         "visual.novel",
  136.         "wargame",
  137.         "word.game",
  138.         "word.construction",
  139.     ],
  140.     "theme": [
  141.         "adult",
  142.         "romance",
  143.         "comedy",
  144.         "crime",
  145.         "drama",
  146.         "fantasy",
  147.         "historical",
  148.         "mystery",
  149.         "thriller",
  150.         "science.fiction",
  151.     ],
  152.     "sports": [
  153.         "american.football",
  154.         "baseball",
  155.         "basketball",
  156.         "billiards",
  157.         "blackjack",
  158.         "bowling",
  159.         "boxing",
  160.         "chess",
  161.         "cricket",
  162.         "cycling",
  163.         "extreme.sports",
  164.         "fishing",
  165.         "go",
  166.         "golf",
  167.         "hockey",
  168.         "ice.skating",
  169.         "mahjong",
  170.         "pachinko",
  171.         "pinball",
  172.         "poker",
  173.         "racing",
  174.         "rugby",
  175.         "skateboarding",
  176.         "slots",
  177.         "snowboarding",
  178.         "soccer",
  179.         "sports",
  180.         "tennis",
  181.         "wrestling",
  182.     ],
  183.     "simulation": [
  184.         "business.simulation",
  185.         "construction.simulation",
  186.         "dating.simulation",
  187.         "flight.simulation",
  188.         "life.simulation",
  189.         "space.simulation",
  190.         "vehicle.simulation",
  191.         "walking.simulation",
  192.     ],
  193.     "ost": [
  194.         "acappella",
  195.         "acid.house",
  196.         "acid.jazz",
  197.         "acoustic",
  198.         "afrobeat",
  199.         "alternative",
  200.         "ambient",
  201.         "arrangement",
  202.         "ballad",
  203.         "black.metal",
  204.         "breakbeat",
  205.         "breakcore",
  206.         "chill.out",
  207.         "chillwave",
  208.         "chipbreak",
  209.         "chiptune",
  210.         "choral",
  211.         "citypop",
  212.         "classical",
  213.         "country",
  214.         "dance",
  215.         "dark.ambient",
  216.         "dark.electro",
  217.         "dark.synth",
  218.         "dark.wave",
  219.         "downtempo",
  220.         "dream.pop",
  221.         "drum.and.bass",
  222.         "dubstep",
  223.         "electro",
  224.         "electronic",
  225.         "electronic.rock",
  226.         "epic.metal",
  227.         "euro.house",
  228.         "experimental",
  229.         "folk",
  230.         "funk",
  231.         "happy.hardcore",
  232.         "hardcore",
  233.         "heavy.metal",
  234.         "hip.hop",
  235.         "horrorcore",
  236.         "house",
  237.         "hymn",
  238.         "indie.pop",
  239.         "indie.rock",
  240.         "industrial",
  241.         "instrumental",
  242.         "jazz",
  243.         "lo.fi",
  244.         "modern.classical",
  245.         "new.age",
  246.         "opera",
  247.         "orchestral",
  248.         "phonk",
  249.         "piano",
  250.         "pop",
  251.         "rhythm.and.blues",
  252.         "rock",
  253.         "smooth.jazz",
  254.         "sound.effects",
  255.         "symphonic",
  256.         "synth",
  257.         "synth.pop",
  258.         "synthwave",
  259.         "traditional",
  260.         "techno",
  261.         "trance",
  262.         "vaporwave",
  263.         "violin",
  264.         "vocal",
  265.     ],
  266.     "books": [
  267.         "art.book",
  268.         "collection",
  269.         "comic.book",
  270.         "fiction",
  271.         "game.design",
  272.         "game.programming",
  273.         "psychology",
  274.         "social.science",
  275.         "gamebook",
  276.         "graphic.novel",
  277.         "guide",
  278.         "magazine",
  279.         "non.fiction",
  280.         "novelization",
  281.         "programming",
  282.         "business",
  283.         "reference",
  284.         "study"
  285.     ],
  286.     "applications": [
  287.         "apps.windows",
  288.         "apps.linux",
  289.         "apps.mac",
  290.         "apps.android",
  291.         "utility",
  292.         "development",
  293.     ],
  294. }
  295. // relevant keys for each upload category
  296. const categoryKeys = {
  297.     'Games': ["genre", "theme", "sports", "simulation"],
  298.     'E-Books': ['books'],
  299.     'Applications': ['applications'],
  300.     'OST': ['ost']
  301. }
  302. const specialTags = ['pack', 'collection']
  303.  
  304. // common functions
  305. function titlecase(s) {
  306.     let out = s.split('.').map((e) => {
  307.         if (!["and", "em"].includes(e)) {
  308.             return e[0].toUpperCase() + e.slice(1)
  309.         } else {
  310.             return e
  311.         }
  312.     }).join(' ')
  313.     return out[0].toUpperCase() + out.slice(1)
  314. }
  315.  
  316. function normalise_combo_string(s) {
  317.     return s.trim().split('+').map((c) => c.trim().toLowerCase()).join(' + ')
  318. }
  319.  
  320. function observe_element(element, property, callback, delay = 0) {
  321.     let elementPrototype = Object.getPrototypeOf(element)
  322.     if (elementPrototype.hasOwnProperty(property)) {
  323.         let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, property)
  324.         Object.defineProperty(element, property, {
  325.             get: function () {
  326.                 return descriptor.get.apply(this, arguments)
  327.             },
  328.             set: function () {
  329.                 let oldValue = this[property]
  330.                 descriptor.set.apply(this, arguments)
  331.                 let newValue = this[property]
  332.                 if (typeof callback == "function") {
  333.                     setTimeout(callback.bind(this, oldValue, newValue), delay)
  334.                 }
  335.                 return newValue
  336.             },
  337.             configurable: true
  338.         })
  339.     }
  340. }
  341.  
  342.  
  343. function addTagFromSearch(event) {
  344.     let tag = event.target.value.trim()
  345.     tag = tag.replaceAll(' ', '.')
  346.     if (tag.length > 0) {
  347.         add_tag(tag)
  348.     }
  349. }
  350.  
  351. if (!isUserPage) {
  352.     if (isSearchPage) {
  353.         const taglist = document.getElementById('taglist')
  354.         taglist.style.display = 'none'
  355.         taglist.nextElementSibling.style.display = 'none'
  356.     }
  357.     if (isGroupPage) {
  358.         document.getElementById('tags_add_note').remove() // "To add multiple tags separate by comma" text
  359.     }
  360.     // load settings
  361.     let currentFavoritesDict = (GM_getValue('gts_favorites')) || {}
  362.     let currentPresetsDict = (GM_getValue('gts_presets')) || {}
  363.     let hotkeys = (GM_getValue('gts_hotkeys')) || defaultHotkeys
  364.     let hotkeyPrefixes = (GM_getValue('gts_hotkey_prefixes')) || defaulthotkeyPrefixes
  365.  
  366.     let searchStringDict = {}
  367.     for (const tags of Object.values(categoryDict)) {
  368.         // map from tag => search title, string
  369.         for (const tag of tags) {
  370.             const title = titlecase(tag)
  371.             searchStringDict[tag] = `${title.toLowerCase()}${SEPERATOR}${tag}`
  372.         }
  373.     }
  374.  
  375.     let foundTags = -1
  376.     let windowEvents = []
  377.  
  378.     // language=CSS
  379.     GM_addStyle(`
  380.         .gts-selector *::-webkit-scrollbar {
  381.             width: 3px;
  382.         }
  383.  
  384.         .gts-selector *::-webkit-scrollbar-track {
  385.             background: transparent;
  386.         }
  387.  
  388.         .gts-selector *::-webkit-scrollbar-thumb {
  389.             background-color: rgba(155, 155, 155, 0.5);
  390.             border-radius: 20px;
  391.             border: transparent;
  392.         }
  393.  
  394.         .gts-unlisted-tag {
  395.             color: coral !important;
  396.         }
  397.  
  398.         .gts-remove-unlisted {
  399.             margin-top: 15px;
  400.         }
  401.  
  402.         #genre_tags {
  403.             display: none !important
  404.         }
  405.  
  406.         .gts-add-preset {
  407.             display: none;
  408.         }
  409.         
  410.         .gts-selector {
  411.             display: none;
  412.             position: absolute;
  413.             background-color: rgb(27, 48, 63);
  414.             box-sizing: border-box;
  415.             padding: .5em 1em 1em 1em;
  416.             border: 3px solid var(--rowb);
  417.             box-shadow: -3px 3px 5px var(--black);
  418.             z-index: 99999;
  419.             grid-template-columns: auto fit-content(180px) fit-content(180px);
  420.             column-gap: 1em;
  421.             min-width: min-content !important;
  422.             max-width: 1000px !important;
  423.             font-size: 13px;
  424.         }
  425.  
  426.         .gts-selector h1 {
  427.             margin: 0;
  428.             font-weight: normal;
  429.             padding-bottom: 0;
  430.         }
  431.  
  432.         .gts-tag {
  433.             height: fit-content;
  434.             font-family: inherit;
  435.             font-size: inherit;
  436.             opacity: 1 !important;
  437.             background: none!important;
  438.             border: none;
  439.             padding: 0!important;
  440.             color: var(--lightBlue);
  441.             text-decoration: none;
  442.             cursor: pointer;
  443.             text-align: start;
  444.         }
  445.  
  446.         .gts-sidearea {
  447.             min-width: 150px;
  448.             box-sizing: border-box;
  449.             border-left: 2px solid var(--grey);
  450.             padding-left: 1em;
  451.         }
  452.  
  453.         .gts-selector .gts-sidearea h1 {
  454.             font-size: 1.2em;
  455.             margin-top: 1em;
  456.             margin-bottom: 0.25em;
  457.         }
  458.  
  459.         .gts-sidearea h1:nth-child(2) {
  460.             margin-top: 0;
  461.         }
  462.  
  463.         .gts-current-tags-inner {
  464.             font-size: 0.9em;
  465.             margin-top: 1em;
  466.             overflow-y: auto;
  467.             max-height: 320px;
  468.         }
  469.  
  470.         .gts-searchbar {
  471.             display: flex;
  472.             column-gap: 1em;
  473.             margin-bottom: 1em;
  474.             align-items: center;
  475.             
  476.             div {
  477.                 width: fit-content !important;
  478.             }
  479.         }
  480.         
  481.         #gts-search {
  482.             flex: 1;
  483.         }
  484.  
  485.         .gts-categoryarea {
  486.             display: grid;
  487.             grid-template-columns: 1fr 1fr;
  488.             column-gap: 10px;
  489.  
  490.             .gts-right {
  491.                 display: grid;
  492.                 grid-template-columns: 1fr 1fr;
  493.                 height: 100%;
  494.                 column-gap: 1em;
  495.                 width: max-content;
  496.             }
  497.  
  498.             .gts-left {
  499.                 height: 100%;
  500.             }
  501.  
  502.             .gts-category-inner {
  503.                 display: grid;
  504.                 grid-template-columns: 1fr;
  505.                 column-gap: 1em;
  506.                 overflow-y: auto;
  507.                 max-height: 145px;
  508.             }
  509.         }
  510.  
  511.         .gts-category .gts-category-inner, #gts-favoritearea, #gts-presetarea {
  512.             font-size: .9em;
  513.             margin-top: 0.5em;
  514.             width: max-content !important;
  515.         }
  516.  
  517.         #gts-presetarea {
  518.             max-height: 140px;
  519.             overflow-y: auto;
  520.             width: unset !important;
  521.         }
  522.  
  523.         #gts-favoritearea {
  524.             max-height: 140px;
  525.             overflow-y: auto;
  526.             /*grid-template-columns: 1fr 1fr;*/
  527.             /*display: grid;*/
  528.             /*column-gap: .5em;*/
  529.         }
  530.  
  531.         .gts-category h1 {
  532.             font-size: 1.1em;
  533.         }
  534.  
  535.         .gts-category-genre .gts-category-inner {
  536.             grid-template-columns: auto auto;
  537.             max-height: 320px;
  538.         }
  539.  
  540.         .gts-tag-idx {
  541.             color: yellow;
  542.             font-weight: bold;
  543.             margin-left: 0.25em;
  544.         }
  545.  
  546.         .hide-idx .gts-tag-idx {
  547.             visibility: hidden;;
  548.         }
  549.  
  550.         #gts-selector a {
  551.             font-size: inherit !important;
  552.         }
  553.  
  554.         .gts-tag-link-wrapper {
  555.             width: fit-content !important;
  556.             max-width: 100px;
  557.             scroll-snap-align: start;
  558.         }
  559.  
  560.         .gts-tag-wrapper {
  561.             width: fit-content !important;
  562.             max-width: 100px;
  563.         }
  564.  
  565.         .gts-category .gts-tag-wrapper {
  566.             width: fit-content(120px);
  567.         }
  568.  
  569.         .gts-category-genre .gts-tag-wrapper {
  570.             max-width: 120px;
  571.             width: max-content !important;
  572.         }
  573.  
  574.         .gts-category .gts-tag-link-wrapper {
  575.             width: fit-content(120px);
  576.         }
  577.  
  578.         .gts-category-genre .gts-tag-link-wrapper {
  579.             max-width: 120px;
  580.             width: max-content !important;
  581.         }
  582.  
  583.         .gts-category-simulation {
  584.             grid-column: span 2;
  585.  
  586.             .gts-tag-wrapper {
  587.                 max-width: unset;
  588.             }
  589.             
  590.             .gts-category-inner {
  591.                 width: 100% !important;
  592.             }
  593.         }
  594.  
  595.         /*region non-Games*/
  596.         .gts-categoryarea-E-Books,
  597.         .gts-categoryarea-E-Books .gts-right,
  598.         .gts-categoryarea-Applications,
  599.         .gts-categoryarea-Applications .gts-right,
  600.         .gts-categoryarea-OST,
  601.         .gts-categoryarea-OST .gts-right {
  602.             grid-template-columns: 1fr;
  603.         }
  604.  
  605.         .gts-categoryarea-E-Books .gts-category .gts-category-inner,
  606.         .gts-categoryarea-OST .gts-category .gts-category-inner,
  607.         .gts-categoryarea-Applications .gts-category .gts-category-inner {
  608.             max-height: 300px;
  609.             grid-template-columns: repeat(6, fit-content(180px));
  610.             row-gap: 0.3em;
  611.         }
  612.  
  613.         /*endregion*/
  614.     `)
  615.     // renderer functions
  616.     let tagBox, searchBox, modal, presetButton, currentUploadCategory, showIndicess, removeUnlistedButton
  617.     let allCurrentCategoryTags = []
  618.  
  619.     function render_tag_links(tags, idx) {
  620.         let html = ''
  621.         for (const tag of tags) {
  622.             html += `<div class="gts-tag-wrapper"><button type="button" class="gts-tag" data-tag-idx="${idx}" data-tag="${tag}">${titlecase(tag)}</button>`
  623.             if (idx < 9) {
  624.                 html += `<span data-tag-idx="${idx}" class="gts-tag-idx">${idx + 1}</span>`
  625.             }
  626.             html += `</div>`
  627.             idx += 1
  628.         }
  629.         return [html, idx]
  630.     }
  631.  
  632.     function filter_category_dict(query, categoryDict, currentUploadCategory = 'Games') {
  633.         let filteredDict = {}
  634.         foundTags = []
  635.         for (const [category, tags] of Object.entries(categoryDict)) {
  636.             if (!categoryKeys[currentUploadCategory].includes(category)) {
  637.                 continue
  638.             }
  639.             filteredDict[category] = []
  640.             for (const tag of tags) {
  641.                 if (searchStringDict[tag].includes(query)) {
  642.                     filteredDict[category].push(tag)
  643.                     foundTags.push(tag)
  644.                 }
  645.             }
  646.         }
  647.         return filteredDict
  648.     }
  649.  
  650.     function draw_currenttagsarea() {
  651.         removeUnlistedButton.style.display = 'none'
  652.         let html = `<h1>Current Tags</h1> (<small>Click to remove</small>)
  653. 		<div class="gts-current-tags-inner">`
  654.         const tags = parse_text_to_tag_list(tagBox.value.trim())
  655.  
  656.         const unlistedTags = tags.filter(tag => !allCurrentCategoryTags.includes(tag))
  657.         for (const [idx, tag] of tags.entries()) {
  658.             html += `<div>${idx + 1}. <button type="button" class="gts-tag ${unlistedTags.includes(tag) ? 'gts-unlisted-tag' : ''}" data-tag="${tag}">${titlecase(tag)}</button></div>`
  659.         }
  660.         html += `</div>`
  661.         const tagArea = document.querySelector('#gts-currenttagsarea')
  662.         tagArea.innerHTML = html
  663.         for (const tagLink of tagArea.querySelectorAll('.gts-tag')) {
  664.             tagLink.onclick = event => {
  665.                 event.preventDefault()
  666.                 const currentTags = parse_text_to_tag_list(tagBox.value.trim())
  667.                 const clickedTag = event.target.getAttribute('data-tag')
  668.                 tagBox.value = currentTags.filter(t => t !== clickedTag).join(TAGSEPERATOR)
  669.                 // draw_currenttagsarea()
  670.             }
  671.         }
  672.         if (unlistedTags.length > 0) {
  673.             removeUnlistedButton.style.display = 'block'
  674.             removeUnlistedButton.onclick = () => {
  675.                 for (const unlistedTag of tagArea.querySelectorAll('.gts-unlisted-tag')) {
  676.                     unlistedTag.click()
  677.                 }
  678.             }
  679.         }
  680.     }
  681.  
  682.     function draw_categoryarea(query = SEPERATOR) {
  683.         let categoryAreaHTML = ''
  684.         let idx = 0
  685.         let tagLinks
  686.         const filteredDict = filter_category_dict(query, categoryDict, currentUploadCategory)
  687.         if (currentUploadCategory === 'Games') {
  688.             if (filteredDict['genre'].length > 0) {
  689.                 [tagLinks, idx] = render_tag_links(filteredDict['genre'], idx)
  690.                 categoryAreaHTML += `
  691. 							<div class="gts-left">
  692. 								<div class="gts-category gts-category-genre" tabindex="-1">
  693. 									<h1 class="gts-h1">Genre</h1>
  694. 									<div class="gts-category-inner" tabindex="-1">
  695. 										${tagLinks}
  696. 									</div>
  697. 								</div>
  698. 							</div>`
  699.             }
  700.  
  701.         }
  702.         categoryAreaHTML += `<div class="gts-right" tabindex="-1">`
  703.         for (const [category, tags] of Object.entries(filteredDict)) {
  704.             if ((currentUploadCategory === 'Games' && category === 'genre') || tags.length === 0) {
  705.                 continue
  706.             }
  707.             [tagLinks, idx] = render_tag_links(tags, idx)
  708.             categoryAreaHTML += `<div class="gts-category gts-category-${category}" tabindex="-1">`
  709.             if (categoryKeys[currentUploadCategory].length > 1) {
  710.                 categoryAreaHTML += `<h1>${titlecase(category)}</h1>`
  711.             }
  712.             categoryAreaHTML += `
  713. 					<div class="gts-category-inner" tabindex="-1">
  714. 						${tagLinks}
  715. 					</div>
  716. 				</div>`
  717.         }
  718.         document.querySelector('#gts-categoryarea').innerHTML = categoryAreaHTML
  719.         document.querySelectorAll('#gts-categoryarea .gts-tag').forEach((el) => {
  720.             el.addEventListener('click', (event) => {
  721.                 event.preventDefault()
  722.                 const tag = event.target.getAttribute('data-tag').trim()
  723.                 const favoriteChecked = check_favorite()
  724.                 if (favoriteChecked) {
  725.                     add_favorite(tag).then(() => {
  726.                         draw_favoritearea()
  727.                         register_hotkeys('favorite')
  728.                     })
  729.                 } else {
  730.                     add_tag(tag)
  731.                 }
  732.             })
  733.         })
  734.     }
  735.  
  736.     function draw_presetarea() {
  737.         let html = ''
  738.         const currentPresets = currentPresetsDict[currentUploadCategory] || []
  739.         for (const [idx, preset] of currentPresets.entries()) {
  740.             html += `<div class="gts-preset">${idx + 1}. 
  741. 				<button type="button" class="gts-preset-link gts-tag" data-preset="${preset}">
  742. 					${preset.split(TAGSEPERATOR).map((tag) => titlecase(tag)).join(TAGSEPERATOR)}</button>
  743. 				</div>
  744. 			</div>`
  745.         }
  746.         document.querySelector('#gts-presetarea').innerHTML = html
  747.         document.querySelectorAll('#gts-presetarea .gts-preset-link').forEach((el) => {
  748.             el.addEventListener('click', (event) => {
  749.                 event.preventDefault()
  750.                 const preset = event.target.getAttribute('data-preset').trim()
  751.                 if (check_remove()) {
  752.                     remove_preset(preset).then(() => {
  753.                         draw_presetarea()
  754.                     })
  755.                 } else {
  756.                     tagBox.value = preset
  757.                     tagBox.focus()
  758.                     searchBox.value = ''
  759.                     searchBox.focus()
  760.                 }
  761.             })
  762.         })
  763.     }
  764.  
  765.     function draw_favoritearea() {
  766.         let html = ''
  767.         const currentFavorites = currentFavoritesDict[currentUploadCategory] || []
  768.         for (const [idx, tag] of currentFavorites.entries()) {
  769.             html += `<div class="gts-favorite">${idx + 1}. <button type="button" class="gts-tag" data-tag="${tag}">${titlecase(tag)}</button></div></div>`
  770.         }
  771.         document.querySelector('#gts-favoritearea').innerHTML = html
  772.         document.querySelectorAll('#gts-favoritearea .gts-tag').forEach((el) => {
  773.             el.addEventListener('click', (event) => {
  774.                 event.preventDefault()
  775.                 const tag = event.target.getAttribute('data-tag').trim()
  776.                 if (check_remove()) {
  777.                     remove_favorite(tag).then(() => {
  778.                         draw_favoritearea()
  779.                         register_hotkeys('favorite')
  780.                     })
  781.                 } else {
  782.                     add_tag(tag)
  783.                 }
  784.             })
  785.         })
  786.     }
  787.  
  788.     function insert_modal(addTagsToggle) {
  789.         modal = document.createElement('div')
  790.         const tagBoxStyle = tagBox.currentStyle || window.getComputedStyle(tagBox)
  791.         const tdStyle = tagBox.parentElement.currentStyle || window.getComputedStyle(tagBox.parentElement)
  792.         modal.style.top = (parseInt(tagBoxStyle.marginTop.replace('px', ''), 10) +
  793.             parseInt(tagBoxStyle.marginBottom.replace('px', ''), 10) +
  794.             tagBoxStyle.offsetHeight) + 'px'
  795.         modal.style.left = (parseInt(tagBoxStyle.marginLeft.replace('px', ''), 10) + parseInt(tdStyle.paddingLeft.replace('px', ''), 10)) + 'px'
  796.         modal.id = 'gts-selector'
  797.         modal.classList.add('gts-selector')
  798.         modal.setAttribute('tabindex', '-1')
  799.         modal.innerHTML = `
  800. 			<div class="gts-selectarea">
  801. 				<div class="gts-searchbar">
  802. 					<input id="gts-search" type="text" placeholder="Search (Enter to add as-is${addTagsToggle ? ', ctrl+enter to submit' : ''})">
  803. 					<div class="gts-settings-wrapper" tabindex="-1">
  804. 						<a href="/user.php?action=edit#ggn-tag-selector" target="_blank"  tabindex="-1">[Settings]</a>
  805. 					</div>
  806. 					${isSearchPage ? `<div class="gts-checkbox-wrapper" style="text-align: right;">
  807. 						<input id="gts-exclude-checkbox" type="checkbox" tabindex="-1">
  808. 						<label class="gts-label" for="gts-exclude-checkbox">Exclude</label>
  809. 					</div>` : ''}
  810. 					<div class="gts-checkbox-wrapper" style="text-align: right;">
  811. 						<input id="gts-favorite-checkbox" type="checkbox" tabindex="-1">
  812. 						<label class="gts-label" for="gts-favorite-checkbox">Favorite</label>
  813. 					</div>
  814. 				</div>
  815. 				<div id="gts-categoryarea" class="hide-idx gts-categoryarea gts-categoryarea-${currentUploadCategory}">
  816. 				</div>
  817. 			</div>
  818. 			<div class="gts-sidearea">
  819. 				<div class="gts-sidetopbar" tabindex="-1" style="text-align: right !important;">
  820. 					<div class="gts-checkbox-wrapper" style="text-align: right !important;">
  821. 						<input id="gts-remove-checkbox" type="checkbox" tabindex="-1"><label class="gts-label" for="gts-remove-checkbox">Remove</label>
  822. 					</div>
  823. 				</div>
  824. 				<h1>Presets</h1>
  825. 				<div id="gts-presetarea" tabindex="-1">
  826. 				</div>
  827. 				<h1>Favorites</h1>
  828. 				<div id="gts-favoritearea" tabindex="-1">
  829. 				</div>
  830. 			</div>
  831. 			<div class="gts-sidearea" style="display:flex;flex-direction:column;justify-content: start">
  832. 				<div id="gts-currenttagsarea"></div>
  833. 				<button type="button" style="display:none;font-size: smaller;" class="gts-remove-unlisted">Remove Unlisted Tags</button>
  834. 			</div>
  835. 			`
  836.  
  837.         tagBox.parentElement.style.position = 'relative'
  838.         tagBox.parentElement.appendChild(modal)
  839.         draw_categoryarea()
  840.  
  841.         removeUnlistedButton = modal.querySelector('.gts-remove-unlisted')
  842.         searchBox = document.querySelector('#gts-search')
  843.         searchBox.addEventListener('keydown', (event) => {
  844.             if (event.key === 'Enter' || (event.key === 'Tab' && foundTags.length === 1)) {
  845.                 event.preventDefault()
  846.                 event.stopPropagation()
  847.             }
  848.         })
  849.         searchBox.addEventListener('keyup', (event) => {
  850.             if (event.key === 'Tab' && foundTags.length === 1) {
  851.                 add_tag(foundTags[0])
  852.             } else if (event.key === 'Enter') {
  853.                 addTagFromSearch(event)
  854.             }
  855.             let query = event.target.value.trim()
  856.             if (query === '') {
  857.                 query = SEPERATOR
  858.             }
  859.             query = query.toLowerCase()
  860.             draw_categoryarea(query)
  861.  
  862.             if (event.code === 'Escape') {
  863.                 hide_gts()
  864.             }
  865.         })
  866.  
  867.         draw_presetarea()
  868.         draw_favoritearea()
  869.         draw_currenttagsarea()
  870.     }
  871.  
  872.     function insert_preset_button() {
  873.         presetButton = document.createElement('button')
  874.         presetButton.id = 'gts-add-preset'
  875.         presetButton.classList.add('gts-add-preset')
  876.         presetButton.type = 'button'
  877.         presetButton.setAttribute('tabindex', '-1')
  878.         presetButton.textContent = 'Add Preset'
  879.  
  880.         if (!isGroupPage) {
  881.             tagBox.after(presetButton)
  882.             if (!isUploadPage) presetButton.style.marginLeft = '5px'
  883.         } else {
  884.             const div = document.createElement('div')
  885.             const submitButton = tagBox.nextElementSibling
  886.             div.style.cssText = `
  887.             display: flex;
  888.             justify-content: end;
  889.             align-items: center;
  890.             `
  891.             tagBox.after(div)
  892.             div.append(presetButton, submitButton)
  893.         }
  894.         presetButton.addEventListener('click', () => {
  895.             const preset = tagBox.value.trim()
  896.             add_preset(preset).then(() => {
  897.                 draw_presetarea()
  898.             })
  899.         })
  900.     }
  901.  
  902.     // actions
  903.     function add_tag(tag) {
  904.         const currentValue = tagBox.value.trim()
  905.         const excludeChecked = document.getElementById('gts-exclude-checkbox')?.checked
  906.         const _tag = tag.trim().toLowerCase()
  907.         tag = excludeChecked ? '!' + _tag : _tag
  908.  
  909.         if (currentValue === "") {
  910.             tagBox.value = tag
  911.         } else {
  912.             let tags = currentValue.split(TAGSEPERATOR)
  913.             if (!tags.includes(tag)) {
  914.                 tags.push(tag)
  915.             }
  916.             tagBox.value = tags.join(TAGSEPERATOR)
  917.         }
  918.         tagBox.focus()
  919.         tagBox.setSelectionRange(-1, -1)
  920.         searchBox.focus()
  921.         searchBox.value = ''
  922.         draw_categoryarea()
  923.     }
  924.  
  925.     async function add_favorite(tag) {
  926.         const currentFavorites = currentFavoritesDict[currentUploadCategory] || []
  927.         if (currentFavorites.length < 9 && !currentFavorites.includes(tag)) {
  928.             currentFavoritesDict[currentUploadCategory] = currentFavorites.concat(tag)
  929.             return GM.setValue('gts_favorites', currentFavoritesDict)
  930.         }
  931.     }
  932.  
  933.     async function remove_favorite(tag) {
  934.         const currentFavorites = currentFavoritesDict[currentUploadCategory] || []
  935.         let _temp = []
  936.         for (const fav of currentFavorites) {
  937.             if (fav !== tag) {
  938.                 _temp.push(fav)
  939.             }
  940.         }
  941.         currentFavoritesDict[currentUploadCategory] = _temp
  942.         return GM.setValue('gts_favorites', currentFavoritesDict)
  943.     }
  944.  
  945.     function parse_text_to_tag_list(text) {
  946.         let tagList = []
  947.         for (let tag of text.split(TAGSEPERATOR.trim())) {
  948.             tag = tag.trim()
  949.             if (tag !== '') {
  950.                 tagList.push(tag)
  951.             }
  952.         }
  953.         return tagList
  954.     }
  955.  
  956.     async function add_preset(rawPreset) {
  957.         let preset = parse_text_to_tag_list(rawPreset)
  958.         const currentPresets = currentPresetsDict[currentUploadCategory] || []
  959.         preset = preset.join(TAGSEPERATOR)
  960.         if (!currentPresets.includes(preset)) {
  961.             currentPresetsDict[currentUploadCategory] = currentPresets.concat(preset)
  962.             return GM.setValue('gts_presets', currentPresetsDict)
  963.         }
  964.     }
  965.  
  966.     async function remove_preset(preset) {
  967.         let _temp = []
  968.         const currentPresets = currentPresetsDict[currentUploadCategory] || []
  969.         for (const pres of currentPresets) {
  970.             if (pres !== preset) {
  971.                 _temp.push(pres)
  972.             }
  973.         }
  974.         currentPresetsDict[currentUploadCategory] = _temp
  975.         return GM.setValue('gts_presets', currentPresetsDict)
  976.     }
  977.  
  978.     function check_favorite() {
  979.         return document.querySelector('#gts-favorite-checkbox').checked
  980.     }
  981.  
  982.     function check_remove() {
  983.         return document.querySelector('#gts-remove-checkbox').checked
  984.     }
  985.  
  986.     function check_gts_element(element) {
  987.         if (typeof element === 'undefined' || !(element instanceof HTMLElement)) {
  988.             return false
  989.         }
  990.         const _id = element.id || ''
  991.         const _class = element.getAttribute('class') || ''
  992.         return (_id === 'tags' ||
  993.             _id.includes('gts-') ||
  994.             _class.includes('gts-'))
  995.     }
  996.  
  997.     function hide_gts() {
  998.         modal.style.display = 'none'
  999.         presetButton.style.display = 'none'
  1000.     }
  1001.  
  1002.     function show_gts() {
  1003.         if (!check_gts_active()) {
  1004.             modal.style.display = 'grid'
  1005.             presetButton.style.display = 'inline'
  1006.             searchBox.focus()
  1007.             draw_currenttagsarea()
  1008.         }
  1009.     }
  1010.  
  1011.     function hide_indices() {
  1012.         document.querySelector('#gts-categoryarea').classList.add('hide-idx')
  1013.         showIndicess = false
  1014.     }
  1015.  
  1016.     function show_indices() {
  1017.         document.querySelector('#gts-categoryarea').classList.remove('hide-idx')
  1018.         showIndicess = true
  1019.     }
  1020.  
  1021.     function check_gts_active() {
  1022.         return modal.style.display === 'grid'
  1023.     }
  1024.  
  1025.     function check_query_exists() {
  1026.         // returns true if there is query
  1027.         return searchBox.value.trim() !== ''
  1028.     }
  1029.  
  1030.     function get_index_from_code(code) {
  1031.         if (code.indexOf('Digit') === 0) {
  1032.             return parseInt(code.replaceAll('Digit', ''), 10) - 1
  1033.         }
  1034.         return null
  1035.     }
  1036.  
  1037.     function get_current_upload_category(defaultCategory = 'Games') {
  1038.         if (isSearchPage || isRequestPage) {
  1039.             const list = document.querySelectorAll('input[type=checkbox][name^=filter_cat]:checked')
  1040.             if (list.length < 1) return defaultCategory
  1041.             const lastChecked = list[list.length - 1]
  1042.  
  1043.             return {
  1044.                 1: "Games",
  1045.                 2: "Applications",
  1046.                 3: "E-Books",
  1047.                 4: "OST",
  1048.             }[/\d/.exec(lastChecked.id)[0]]
  1049.         }
  1050.         let categoryElement = document.querySelector('#categories')
  1051.         if (categoryElement) {
  1052.             return categoryElement.value
  1053.         }
  1054.         categoryElement = document.querySelector('#group_nofo_bigdiv .head:first-child')
  1055.         const s = categoryElement.innerText.trim()
  1056.         if (s.indexOf('Application') !== -1) {
  1057.             return 'Applications'
  1058.         } else if (s.indexOf('OST') !== -1) {
  1059.             return 'OST'
  1060.         } else if (s.indexOf('Book') !== -1) {
  1061.             return 'E-Books'
  1062.         } else if (s.indexOf('Game') !== -1) {
  1063.             return 'Games'
  1064.         }
  1065.         return defaultCategory
  1066.     }
  1067.  
  1068.     function check_hotkey_prefix(event, type) {
  1069.         let eventModifiers = [event.shiftKey, event.altKey, event.ctrlKey, event.metaKey]
  1070.         const targetKeys = hotkeyPrefixes[type].split(' + ').map((key) => key.trim().toLowerCase())
  1071.         for (let i = 0; i < modifiers.length; i++) {
  1072.             if (targetKeys.includes(modifiers[i]) !== eventModifiers[i]) {
  1073.                 return false
  1074.             }
  1075.         }
  1076.         return true
  1077.     }
  1078.  
  1079.     function get_hotkey_target(event, type) {
  1080.         for (const [idx, hotkey] of Object.entries(hotkeys[type])) {
  1081.             let normalKeys = []
  1082.             const targetKeys = hotkey.split('+').map((s) => {
  1083.                 const key = s.toLowerCase().trim()
  1084.                 if (!modifiers.includes(key)) {
  1085.                     normalKeys.push(key)
  1086.                 }
  1087.                 return key
  1088.             })
  1089.             let modifierMismatch = false
  1090.             let eventModifiers = [event.shiftKey, event.altKey, event.ctrlKey, event.metaKey]
  1091.             for (let i = 0; i < modifiers.length; i++) {
  1092.                 if (targetKeys.includes(modifiers[i]) !== eventModifiers[i]) {
  1093.                     modifierMismatch = true
  1094.                     break
  1095.                 }
  1096.             }
  1097.             if (modifierMismatch) {
  1098.                 continue
  1099.             }
  1100.             if (normalKeys.length > 0 && (
  1101.                 !(normalKeys.includes(event.key.toLowerCase()) || normalKeys.includes(event.code.toLowerCase()))
  1102.             )) {
  1103.                 continue
  1104.             }
  1105.             return idx
  1106.         }
  1107.         return null
  1108.     }
  1109.  
  1110.     function register_hotkeys(type) {
  1111.         if (['favorite', 'preset'].includes(type) && !windowEvents.includes(`hotkey-${type}`)) {
  1112.             window.addEventListener('keydown', (event) => {
  1113.                 if (!check_gts_active()) {
  1114.                     return
  1115.                 }
  1116.                 const target = get_hotkey_target(event, type)
  1117.                 let currentList
  1118.                 if (type === 'favorite') {
  1119.                     if (check_query_exists()) {
  1120.                         return // return early if query is active
  1121.                     }
  1122.                     currentList = currentFavoritesDict[currentUploadCategory] || []
  1123.                 } else if (type === 'preset') {
  1124.                     // if we're working with presets,
  1125.                     // we proceed anyway
  1126.                     currentList = currentPresetsDict[currentUploadCategory] || []
  1127.                 }
  1128.                 if (target !== null) {
  1129.                     if (target < currentList.length) {
  1130.                         event.preventDefault()
  1131.                         if (type === 'favorite') {
  1132.                             add_tag(currentList[target])
  1133.                         } else if (type === 'preset') {
  1134.                             tagBox.value = currentList[target]
  1135.                             tagBox.focus()
  1136.                         }
  1137.                         searchBox.focus()
  1138.                     }
  1139.                 }
  1140.             }, true)
  1141.         } else if (type === 'show_indices' && !windowEvents.includes(!`hotkey-${type}`)) {
  1142.             window.addEventListener('keydown', (event) => {
  1143.                 if (!check_gts_active() || !check_query_exists()) {
  1144.                     return
  1145.                 }
  1146.                 if (check_hotkey_prefix(event, type)) {
  1147.                     show_indices()
  1148.                     const idx = get_index_from_code(event.code)
  1149.                     if (idx !== null) {
  1150.                         document.querySelector(`button.gts-tag[data-tag-idx="${idx}"]`).click()
  1151.                         event.preventDefault()
  1152.                     }
  1153.                 }
  1154.             }, true)
  1155.             window.addEventListener('keyup', () => {
  1156.                 if (showIndicess) {
  1157.                     hide_indices()
  1158.                 }
  1159.             }, true)
  1160.         }
  1161.         windowEvents.push(`hotkey-${type}`)
  1162.     }
  1163.  
  1164.     // initialiser
  1165.     function init() {
  1166.         const modal = document.querySelector('#gts-selector')
  1167.         if (modal) {
  1168.             modal.remove()
  1169.         }
  1170.         currentUploadCategory = get_current_upload_category()
  1171.         allCurrentCategoryTags = categoryKeys[currentUploadCategory].flatMap(c => categoryDict[c])
  1172.  
  1173.         tagBox = document.getElementById('tags') || document.querySelector('input[name=tags]')
  1174.         tagBox.setAttribute('onfocus', 'this.value = this.value')
  1175.         const addTagsToggle = document.getElementById('tags_add_toggle')
  1176.         insert_modal(addTagsToggle)
  1177.         insert_preset_button()
  1178.  
  1179.         if (addTagsToggle) { // on group page and has tagging priviledge (maybe)
  1180.             const groupTagEls = Array.from(document.querySelectorAll("a[href^='torrents.php?taglist=']"))
  1181.             const unlistedTagEls = groupTagEls.filter(tag => !allCurrentCategoryTags.includes(tag.textContent) && !specialTags.includes(tag.textContent))
  1182.  
  1183.             for (const groupTagEl of groupTagEls) {
  1184.                 if (unlistedTagEls.includes(groupTagEl)) {
  1185.                     groupTagEl.classList.add('gts-unlisted-tag')
  1186.                 }
  1187.             }
  1188.             addTagsToggle.style.display = 'none'
  1189.             const addTagForm = document.getElementById('tag_add_form')
  1190.             addTagForm.style.display = 'block'
  1191.             // add/remove tags replaces the whole list
  1192.             new MutationObserver(() => {
  1193.                 for (const el of document.querySelectorAll("a[href^='torrents.php?taglist=']")) {
  1194.                     if (unlistedTagEls.some(t => t.href === el.href)) {
  1195.                         el.classList.add('gts-unlisted-tag')
  1196.                     }
  1197.                 }
  1198.             }).observe(document.getElementById('tagslist'), {childList: true})
  1199.  
  1200.             tagBox.placeholder = 'Add tags'
  1201.             GM_addStyle(`#gts-search::placeholder {font-size: 0.9em;}`)
  1202.  
  1203.             searchBox.addEventListener('keydown', e => {
  1204.                 if (e.ctrlKey && e.key === 'Enter') {
  1205.                     addTagFromSearch(e)
  1206.                     addTagForm.querySelector('input[type=submit]').click()
  1207.                     hide_gts()
  1208.                 }
  1209.             })
  1210.         }
  1211.  
  1212.         if (!windowEvents.includes('click')) {
  1213.             window.addEventListener('click', (event) => {
  1214.                 if (!check_gts_element(event.target)) {
  1215.                     setTimeout(() => {
  1216.                         if (!check_gts_element(document.activeElement)) {
  1217.                             hide_gts()
  1218.                         }
  1219.                     }, 50)
  1220.                 }
  1221.             }, true)
  1222.             windowEvents.push('click')
  1223.         }
  1224.         if (!windowEvents.includes('esc')) {
  1225.             window.addEventListener('keyup', (event) => {
  1226.                 if (event.code === 'Escape') {
  1227.                     if (check_gts_active()) {
  1228.                         hide_gts()
  1229.                     }
  1230.                 }
  1231.             }, true)
  1232.             windowEvents.push('esc')
  1233.         }
  1234.         tagBox.addEventListener('focus', show_gts)
  1235.         tagBox.addEventListener('click', show_gts)
  1236.         tagBox.addEventListener('keyup', (event) => {
  1237.             if (event.code !== 'Escape') {
  1238.                 draw_currenttagsarea()
  1239.             }
  1240.         })
  1241.         register_hotkeys('favorite')
  1242.         register_hotkeys('preset')
  1243.         register_hotkeys('show_indices')
  1244.         draw_currenttagsarea()
  1245.         // watch for value change in the tagBox
  1246.         observe_element(tagBox, 'value', (_) => {
  1247.             draw_currenttagsarea()
  1248.         })
  1249.     }
  1250.  
  1251.     if (isUploadPage) {
  1252.         const observerTarget = document.querySelector('#dynamic_form')
  1253.         let observer = new MutationObserver(init)
  1254.         const observerConfig = {childList: true, attributes: false, subtree: false}
  1255.         if (document.readyState === "loading") {
  1256.             document.addEventListener("DOMContentLoaded", init)
  1257.             observer.observe(observerTarget, observerConfig)
  1258.         } else {
  1259.             init()
  1260.             observer.observe(observerTarget, observerConfig)
  1261.         }
  1262.     } else {
  1263.         init()
  1264.         if (isSearchPage || isRequestPage) {
  1265.             document.querySelector('.cat_list').addEventListener('change', e => {
  1266.                 if (e.target.checked) {
  1267.                     init()
  1268.                 }
  1269.             })
  1270.         }
  1271.         else if (isCreateRequestPage) { // it doesn't use dynamic form
  1272.             init()
  1273.             document.getElementById('categories').addEventListener('change', () => {
  1274.                 init()
  1275.             })
  1276.         }
  1277.     }
  1278. } else {
  1279.     let hotkeys = (GM_getValue('gts_hotkeys')) || defaultHotkeys
  1280.     let hotkeyPrefixes = (GM_getValue('gts_hotkey_prefixes')) || defaulthotkeyPrefixes
  1281.  
  1282.     GM_addStyle(`
  1283.                 #gts-save-settings {
  1284.                     min-width: 200px;
  1285.                 }
  1286.                 .gts-hotkey-grid {
  1287.                     display: grid;
  1288.                     column-gap: 1em;
  1289.                     grid-template-columns: repeat(2, fit-content(400px)) 1fr;
  1290.                 }
  1291.                 .gts-hotkey-grid h1 {
  1292.                     font-size: 1.1em;
  1293.                 }
  1294.                 .gts-hotkey-col div {
  1295.                     margin-bottom: 0.25em;
  1296.                 }
  1297.             `)
  1298.  
  1299.     async function init() {
  1300.         let colhead = document.createElement('tr')
  1301.         colhead.classList.add('colhead_dark')
  1302.         colhead.innerHTML = '<td colspan="2" id="ggn-tag-selector"><strong>GGn Tag Selector</strong></span>'
  1303.         const lastTr = document.querySelector('#userform > table > tbody > tr:last-child')
  1304.         lastTr.before(colhead)
  1305.         let hotkeyTr = document.createElement('tr')
  1306.         let html = `
  1307.                     <td class="label"><strong>Hotkeys</strong></td>
  1308.                     <td class="gts-hotkey-grid">
  1309.                 `
  1310.         for (const [type, cHotkeys] of Object.entries(hotkeys)) {
  1311.             html += `<div class="gts-hotkey-col"><h1>${titlecase(type)}</h1>`
  1312.             for (const [idx, hotkey] of cHotkeys.entries()) {
  1313.                 html += `<div>${idx + 1}. <input class="gts-settings" data-gts-settings="gts_hotkeys:${type}-${idx}" value="${hotkey}"></div>`
  1314.             }
  1315.             html += `</div>`
  1316.         }
  1317.         html += `<div class="gts-hotkey-col">
  1318.                     <h1>Index peeker</h1>
  1319.                     Hold <input type="text" style="width: 5em" class="gts-settings" data-gts-settings="gts_hotkey_prefixes:show_indices" value="${hotkeyPrefixes['show_indices']}"> to display indices of the filtered results (modifier keys/their combinations only). 
  1320.                     Use the key along with a digit (1-9) to add the tag according to the index.
  1321.                     Note that peeking/adding by index will not work if the filter query is empty.
  1322.                     <h1>How to set combos/keys</h1>
  1323.                     To set a combo, use the keys joined by the plus sign. For example, Ctrl + Shift + 1 is <span style="font-family: monospace">ctrl + shift + digit1</span>
  1324.                     <ul>
  1325.                         <li>Modifier keys: shift, alt, ctrl, cmd</li>
  1326.                         <li>Numbers: digit1, digit2, digit3, digit4, digit5, digit6, digit7, digit8, digit9</li>
  1327.                         <li>Alphabet: a, b, c, d, (etc.)</li>
  1328.                     </ul>
  1329.                     <div style="margin-top: 1em;">
  1330.                         Other keys should also work. If not, use the <span style="font-family: monospace">event.code</span> value from <a target="_blank" href="https://www.toptal.com/developers/keycode">the keycode tool</a>.
  1331.                     </div>
  1332.                 </div>`
  1333.         html += `</td>`
  1334.         html += `<div style="margin-left: 1em;"><input type="button" id="gts-save-settings" value="Save GGn Tag Selector settings">
  1335.                 <input type="button" id="gts-restore-settings" value="Restore Defaults"></div>`
  1336.         hotkeyTr.innerHTML = html
  1337.         colhead.after(hotkeyTr)
  1338.         document.querySelector('#gts-save-settings').addEventListener('click', (event) => {
  1339.             const originalText = event.target.value
  1340.             let newData = {
  1341.                 'gts_hotkeys': hotkeys,
  1342.                 'gts_hotkey_prefixes': hotkeyPrefixes
  1343.             }
  1344.             event.target.value = 'Saving ...'
  1345.             document.querySelectorAll('.gts-settings').forEach((el) => {
  1346.                 const meta = el.getAttribute('data-gts-settings')
  1347.                 const rawValue = el.value
  1348.                 const [settingKey, settingSubKey] = meta.split(':')
  1349.                 if (settingKey === 'gts_hotkey_prefixes') {
  1350.                     newData[settingKey][settingSubKey] = normalise_combo_string(rawValue)
  1351.                 } else if (settingKey === 'gts_hotkeys') {
  1352.                     const [type, idx] = settingSubKey.split('-')
  1353.                     // normalise the value
  1354.                     newData[settingKey][type][idx] = normalise_combo_string(rawValue)
  1355.                 }
  1356.             })
  1357.             let promises = []
  1358.             for (const [key, value] of Object.entries(newData)) {
  1359.                 promises.push(GM.setValue(key, value))
  1360.             }
  1361.             Promise.all(promises).then(() => {
  1362.                 event.target.value = 'Saved!'
  1363.                 setTimeout(() => {
  1364.                     event.target.value = originalText
  1365.                 }, 500)
  1366.             })
  1367.         })
  1368.         document.querySelector('#gts-restore-settings').addEventListener('click', () => {
  1369.             let defaults = {
  1370.                 'gts_hotkeys': defaultHotkeys,
  1371.                 'gts_hotkey_prefixes': hotkeyPrefixes
  1372.             }
  1373.             document.querySelectorAll('.gts-settings').forEach((el) => {
  1374.                 const meta = el.getAttribute('data-gts-settings')
  1375.                 const [settingKey, settingSubKey] = meta.split(':')
  1376.                 if (settingKey === 'gts_hotkey_prefixes') {
  1377.                     el.value = defaults[settingKey][settingSubKey]
  1378.                 } else if (settingKey === 'gts_hotkeys') {
  1379.                     const [type, idx] = settingSubKey.split('-')
  1380.                     el.value = defaults[settingKey][type][idx]
  1381.                 }
  1382.             })
  1383.         })
  1384.  
  1385.         if (window.location.hash.substring(1) === 'ggn-tag-selector') {
  1386.             document.querySelector('#ggn-tag-selector').scrollIntoView()
  1387.         }
  1388.     }
  1389.  
  1390.     if (document.readyState === "loading") {
  1391.         document.addEventListener("DOMContentLoaded", init)
  1392.     } else {
  1393.         init()
  1394.     }
  1395. }