☰

Greasy Fork is available in English.

GGn Tag selector

Enhanced Tag selector for GGn

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