☰

SankakuAddon

Adds a few quality of life improvements on Sankaku Channel: Automatic image scaling, scrolling to image, thumbnail icons for loud/animated posts, muting/pausing videos, + - tag search buttons, a tag menu which allows for tagging by clicking, 'Choose/Set Parent' modes, easier duplicate tagging/flagging. Fully configurable through the Addon config.

  1. // ==UserScript==
  2. // @name        SankakuAddon
  3. // @namespace   SankakuAddon
  4. // @description Adds a few quality of life improvements on Sankaku Channel: Automatic image scaling, scrolling to image, thumbnail icons for loud/animated posts, muting/pausing videos, + - tag search buttons, a tag menu which allows for tagging by clicking, 'Choose/Set Parent' modes, easier duplicate tagging/flagging. Fully configurable through the Addon config.
  5. // @author      sanchan
  6. // @version     1.0.14
  7. // @icon        data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABbmlDQ1BpY2MAACiRdZHPKwRhGMc/dolYbeIgOewBOeyWKDlqFZflsFZZXGZmZ3fVzphmZpNclYuDchAXvw7+A67KlVKKlOTgL/DrIo3n3VUr8U7vPJ++7/t9et/vC6FUybC8+gGwbN9NTyRjs9m5WOMTETpoox00w3Mmp8cz/Dveb6hT9Tqhev2/78/RkjM9A+qahIcNx/WFR4VTy76jeEO4wyhqOeF94bgrBxS+ULpe5UfFhSq/KnYz6TEIqZ6xwg/Wf7BRdC3hfuEeq1Q2vs+jbhIx7ZlpqV0yu/FIM0GSGDplFinhk5BqS2Z/+wYqvimWxGPI32EFVxwFiuKNi1qWrqbUvOimfCVWVO6/8/TyQ4PV7pEkNDwEwUsvNG7B52YQfBwEwechhO/hzK75lySnkTfRN2tazx5E1+DkvKbp23C6Dp13juZqFSksM5TPw/MxtGah/Qqa56tZfa9zdAuZVXmiS9jZhT7ZH134ArhcZ+m/WStSAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeElEQVQ4y2NgoCX4Xyb7H4TxqWHCo7keG5toA4CgAQebsAHYbMTlCiYibMfrCiZibcIlx0SE3/GGBRM+Gxi7HjeCMD41TESGPE5XMOGzHRsbnxcIxbsDDAMts4cbjmR7A4kpvQHkMiZCKY1QSmXBZTKedNBA1RwLAFCeNCTVhz2FAAAAAElFTkSuQmCC
  8. // @match       https://chan.sankakucomplex.com/*
  9. // @match       https://idol.sankakucomplex.com/*
  10. // @match       https://legacy.sankakucomplex.com/*
  11. // @run-at      document-start
  12. // @noframes
  13. // @grant       GM.registerMenuCommand
  14. // @grant       GM.addStyle
  15. // @grant       GM.openInTab
  16. // @grant       GM.setValue
  17. // @grant       GM.getValue
  18. // @grant       GM.deleteValue
  19. // @grant       GM.addValueChangeListener
  20. // @grant       GM_addValueChangeListener
  21. // @grant       GM.setClipboard
  22. // @grant       unsafeWindow
  23. // ==/UserScript==
  24.  
  25. (async function(unsafeWindow) {
  26.   'use strict';
  27.  
  28.   const VERSION = 'v1.0.14';
  29.  
  30.   const SVG_SIZE = 20;
  31.   const SPEAKER_SVG = `<svg class="speaker_icon" width="${SVG_SIZE}" height="${SVG_SIZE}" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  32.  <rect x="2" y="2" width="28" height="28" fill-opacity=".67" fill-rule="evenodd" stroke-width=".22631"/>
  33.  <g fill="#fff" fill-opacity=".33" fill-rule="evenodd">
  34.   <rect width="32" height="2" stroke-width=".074927"/>
  35.   <rect x="30" y="2" width="2" height="28" stroke-width=".075839"/>
  36.   <rect y="2" width="2" height="28" stroke-width=".075839"/>
  37.   <rect y="30" width="32" height="2" stroke-width=".07698"/>
  38.  </g>
  39.  <path d="m19 11c6 5 0 10 0 10" fill="none" stroke="#1cd9ff" stroke-width="2"/>
  40.  <path d="m23 9c8 7 0 14 0 14" fill="none" stroke="#1cd9ff" stroke-width="2"/>
  41.  <path d="m16 23h-3l-3-3h-5v-8h5l3-3h3" fill="#ff761c"/>
  42. </svg>`;
  43.  
  44.   const ANIMATED_SVG = `<svg class="animated_icon" width="${SVG_SIZE}" height="${SVG_SIZE}" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  45.  <rect x="2" y="2" width="28" height="28" fill-opacity=".67" fill-rule="evenodd" stroke-width=".22631"/>
  46.  <g fill="#fff" fill-opacity=".33" fill-rule="evenodd">
  47.   <rect width="32" height="2" stroke-width=".074927"/>
  48.   <rect x="30" y="2" width="2" height="28" stroke-width=".075839"/>
  49.   <rect y="2" width="2" height="28" stroke-width=".075839"/>
  50.   <rect y="30" width="32" height="2" stroke-width=".07698"/>
  51.  </g>
  52.  <path d="m18 16-10 6v-12" fill="#ff761c"/>
  53.  <path d="m26 16-9 6v-12" fill="#ff761c"/>
  54. </svg>`;
  55.  
  56.   const EXPLICIT_SVG = `<svg width="${SVG_SIZE}" height="${SVG_SIZE}" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  57.  <g>
  58.   <rect x="2" y="2" width="28" height="28" fill-opacity=".67" fill-rule="evenodd" stroke-width=".22631"/>
  59.   <g fill="#fff" fill-opacity=".33" fill-rule="evenodd">
  60.    <rect x="-6.0956e-8" y="-1.3512e-9" width="32" height="2" stroke-width=".074927"/>
  61.    <rect x="30" y="2" width="2" height="28" stroke-width=".075839"/>
  62.    <rect x="-6.0956e-8" y="2" width="2" height="28" stroke-width=".075839"/>
  63.    <rect x="-6.0956e-8" y="30" width="32" height="2" stroke-width=".07698"/>
  64.   </g>
  65.   <g transform="scale(.9953 1.0047)" fill="#f99" aria-label="S">
  66.    <rect x="12.057" y="5.9718" width="11.052" height="2.9859" stroke-width="1.0856"/>
  67.    <rect x="12.057" y="22.892" width="11.052" height="2.9859" stroke-width="1.0856"/>
  68.    <rect x="12.057" y="14.432" width="9.0425" height="2.9859" stroke-width=".98198"/>
  69.    <rect x="9.0425" y="5.9718" width="3.0142" height="19.906" stroke-width="1.0541"/>
  70.   </g>
  71.  </g>
  72. </svg>`;
  73.  
  74.   const QUESTIONABLE_SVG = `<svg width="${SVG_SIZE}" height="${SVG_SIZE}" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  75.  <g>
  76.   <rect x="2" y="2" width="28" height="28" fill-opacity=".67" fill-rule="evenodd" stroke-width=".22631"/>
  77.   <g fill="#fff" fill-opacity=".33" fill-rule="evenodd">
  78.    <rect x="-6.0956e-8" y="-1.3512e-9" width="32" height="2" stroke-width=".074927"/>
  79.    <rect x="30" y="2" width="2" height="28" stroke-width=".075839"/>
  80.    <rect x="-6.0956e-8" y="2" width="2" height="28" stroke-width=".075839"/>
  81.    <rect x="-6.0956e-8" y="30" width="32" height="2" stroke-width=".07698"/>
  82.   </g>
  83.   <g transform="translate(6.9551 5.0704)" fill="#999" aria-label="S">
  84.    <path d="m11.545 14.93 5 4-2 2-5-4" fill="#999"/>
  85.   </g>
  86.   <text x="-13" y="4" font-family="'Andika New Basic'" font-size="40px" style="line-height:1.25" xml:space="preserve"><tspan x="-13" y="4"/></text>
  87.   <path d="m16 6.5a7 9.5 0 0 0-7 9.5 7 9.5 0 0 0 7 9.5 7 9.5 0 0 0 7-9.5 7 9.5 0 0 0-7-9.5zm0 1.5a5 8 0 0 1 5 8 5 8 0 0 1-5 8 5 8 0 0 1-5-8 5 8 0 0 1 5-8z" fill="#999"/>
  88.  </g>
  89. </svg>`;
  90.  
  91.   const SAFE_SVG = `<svg width="${SVG_SIZE}" height="${SVG_SIZE}" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  92.  <g>
  93.   <rect x="2" y="2" width="28" height="28" fill-opacity=".67" fill-rule="evenodd" stroke-width=".22631"/>
  94.   <g fill="#fff" fill-opacity=".33" fill-rule="evenodd">
  95.    <rect x="-6.0956e-8" y="-1.3512e-9" width="32" height="2" stroke-width=".074927"/>
  96.    <rect x="30" y="2" width="2" height="28" stroke-width=".075839"/>
  97.    <rect x="-6.0956e-8" y="2" width="2" height="28" stroke-width=".075839"/>
  98.    <rect x="-6.0956e-8" y="30" width="32" height="2" stroke-width=".07698"/>
  99.   </g>
  100.   <g transform="scale(.9953 1.0047)" fill="#9f9" aria-label="S">
  101.    <path d="m21.586 9.7289q-0.78306-0.39548-1.4501-0.65914-0.65255-0.27684-1.2761-0.44822-0.62355-0.18456-1.2471-0.26366-0.62355-0.079096-1.3196-0.079096-0.87006 0-1.5951 0.23729-0.71055 0.23729-1.2326 0.63277-0.52204 0.39548-0.81206 0.90961-0.27552 0.51413-0.27552 1.0546 0 0.5405 0.15951 0.98871 0.17401 0.43503 0.68155 0.83052 0.50754 0.3823 1.4501 0.7646 0.94257 0.36912 2.4942 0.77779 1.4356 0.3823 2.5377 0.89643 1.1166 0.50095 1.8706 1.1601t1.1456 1.5028q0.39153 0.8437 0.39153 1.9115 0 1.3315-0.58004 2.4256-0.56554 1.081-1.5661 1.872-0.98607 0.77779-2.3057 1.2128-1.3196 0.42185-2.7987 0.42185-1.0441 0-2.0447-0.13183-0.98607-0.13183-1.8706-0.36912-0.87006-0.23729-1.6096-0.55368-0.73955-0.32957-1.2906-0.72506l0.65255-2.7025q1.4501 1.1469 2.9872 1.661 1.5516 0.51413 3.1757 0.51413 0.87006 0 1.6821-0.22411t1.4356-0.64596q0.62355-0.43503 1.0006-1.0546 0.37703-0.63278 0.37703-1.4369 0-0.51413-0.18851-0.97553-0.17401-0.47458-0.72505-0.9228-0.55104-0.44822-1.5806-0.88325-1.0296-0.44822-2.7262-0.90961-1.6966-0.4614-2.7697-1.0151-1.0731-0.55368-1.6821-1.1996-0.60904-0.65914-0.84106-1.3974-0.21752-0.75142-0.21752-1.5951 0-0.8437 0.37703-1.7797 0.39153-0.93598 1.2181-1.7269 0.82656-0.79097 2.1172-1.3051 1.2906-0.52731 3.1032-0.52731 0.84106 0 1.5661 0.065914 0.73956 0.065914 1.4211 0.21092 0.69605 0.14501 1.3631 0.36912 0.66705 0.22411 1.3776 0.5405z" fill="#9f9"/>
  102.   </g>
  103.  </g>
  104. </svg>`;
  105.  
  106.   const RATING_SVG = {
  107.     'r18+': EXPLICIT_SVG,
  108.     'r15+': QUESTIONABLE_SVG,
  109.     'g': SAFE_SVG,
  110.   };
  111.  
  112.   // based on the Tag Checklist in the wiki
  113.   const DEFAULT_TAGLIST =
  114.     `[
  115.   {
  116.     "name": "People & Gender",
  117.     "tags": [
  118.       [
  119.         ["female female_only 1girl 2girls 3girls 4girls 5girls 6+girls"],
  120.         ["male male_only 1boy 2boys 3boys 4boys 5boys 6+boys"],
  121.         ["futanari futanari_only 1_futanari 2_futanari 3_futanari 4_futanari 5_futanari 6+_futanari"],
  122.         ["newhalf newhalf_only 1_newhalf 2_newhalf 3_newhalf 4_newhalf 5_newhalf 6+_newhalf"]
  123.       ],
  124.       "no_humans"
  125.     ]
  126.   },
  127.   {
  128.     "name": "Young Age",
  129.     "tags": [
  130.       "child loli shota toddlercon young"
  131.     ]
  132.   },
  133.   {
  134.     "name": "Androgynous",
  135.     "tags": [
  136.       "androgynous crossdressing genderswap trap reverse_trap"
  137.     ]
  138.   },
  139.   {
  140.     "name": "Group",
  141.     "tags": [
  142.       "solo duo trio quartet quintet sextet group"
  143.     ]
  144.   },
  145.   {
  146.     "name": "Relationship",
  147.     "tags": [
  148.       "couple siblings sisters brothers brother_and_sister twins triplets"
  149.     ]
  150.   },
  151.   {
  152.     "name": "Who/Other",
  153.     "tags": [
  154.       "anthropomorphization multiple_persona elf mecha monster monster_girl magical_girl fairy"
  155.     ]
  156.   },
  157.   {
  158.     "name": "Face",
  159.     "tags": [
  160.       "face ears eyes nose lips teeth facial_mark facial_hair beard"
  161.     ]
  162.   },
  163.   {
  164.     "name": "Upper Body",
  165.     "tags": [
  166.       "arms armpits armpit_crease armpit_peek back bare_shoulders breasts bust clavicle midriff navel stomach hands fingers"
  167.     ]
  168.   },
  169.   {
  170.     "name": "Lower Body",
  171.     "tags": [
  172.       "anus ass mound_of_venus vagina penis thighs knees feet barefoot legs bare_legs bare_thighs zettai_ryouiki toes"
  173.     ]
  174.   },
  175.   {
  176.     "name": "Breasts",
  177.     "tags": [
  178.       "cleavage breasts nipples areolae puffy_areolae areola_slip breasts_out_of_clothes breasts_apart underboob sideboob"
  179.     ]
  180.   },
  181.   {
  182.     "name": "Breast Size",
  183.     "tags": [
  184.       "pettanko small_breasts medium_breasts large_breasts huge_breasts gigantic_breasts alternate_bust_size"
  185.     ]
  186.   },
  187.   {
  188.     "name": "Skin Color",
  189.     "tags": [
  190.       "pale_skin dark_skin tanned shiny_skin albino",
  191.       ["red_skin orange_skin yellow_skin green_skin blue_skin purple_skin pink_skin white_skin grey_skin black_skin"]
  192.     ]
  193.   },
  194.   {
  195.     "name": "Hairstyle",
  196.     "tags": [
  197.       "ahoge bangs blunt_bangs bob_cut double_bun drill_hair hair_over_one_eye peek-a-boo_bang ponytail side_pony_tail single_braid spiky_hair twinbraids twintails alternate_hairstyle two_side_up"
  198.     ]
  199.   },
  200.   {
  201.     "name": "Hair Length",
  202.     "tags": [
  203.       "very_short_hair short_hair medium_hair long_hair very_long_hair absurdly_long_hair"
  204.     ]
  205.   },
  206.   {
  207.     "name": "Hair/Eye Color",
  208.     "tags": [
  209.       [
  210.         ["blonde_hair black_hair blue_hair brown_hair green_hair grey_hair orange_hair pink_hair purple_hair red_hair silver_hair white_hair"],
  211.         ["golden_eyes black_eyes blue_eyes brown_eyes green_eyes grey_eyes orange_eyes pink_eyes purple_eyes red_eyes silver_eyes white_eyes"]
  212.       ]
  213.     ]
  214.   },
  215.   {
  216.     "name": "Animal Parts",
  217.     "tags": [
  218.       "animal_ears bat_wings bunny_ears cat_tail wolf_ears fang horns kitsunemimi nekomimi tail inumimi wings angel_wings"
  219.     ]
  220.   },
  221.   {
  222.     "name": "Look/Other",
  223.     "tags": [
  224.       "chibi mole muscle pointed_ears pregnant scar curvy animal_ear_fluff fluffy_tail"
  225.     ]
  226.   },
  227.   {
  228.     "name": "Swimwear",
  229.     "tags": [
  230.       "bikini one-piece_swimsuit swimsuit competition_swimsuit sukumizu"
  231.     ]
  232.   },
  233.   {
  234.     "name": "Facewear",
  235.     "tags": [
  236.       "megane sunglasses eyewear_on_head red-framed_eyewear"
  237.     ]
  238.   },
  239.   {
  240.     "name": "Upper Body",
  241.     "tags": [
  242.       "sailor_collar choker shirt crop_top camisole dress bra babydoll"
  243.     ]
  244.   },
  245.   {
  246.     "name": "Lower Body",
  247.     "tags": [
  248.       "skirt pleated_skirt pantsu thighhighs shoes sandals socks pants shorts short_shorts"
  249.     ]
  250.   },
  251.   {
  252.     "name": "Traditional\u00A0Clothes",
  253.     "tags": [
  254.       "serafuku kimono kindergarten_uniform chinese_clothes"
  255.     ]
  256.   },
  257.   {
  258.     "name": "Wear/Other",
  259.     "tags": [
  260.       "armor suit uniform school_uniform underwear_only nude completely_nude"
  261.     ]
  262.   },
  263.   {
  264.     "name": "Actions",
  265.     "tags": [
  266.       "battle fighting jumping running princess_carry stretch sleeping lying flying squatting"
  267.     ]
  268.   },
  269.   {
  270.     "name": "Posture",
  271.     "tags": [
  272.       "all_fours arched_back back-to-back bent-over fighting_stance leaning leaning_back leaning_forward squat top-down_bottom-up"
  273.     ]
  274.   },
  275.   {
  276.     "name": "Arms",
  277.     "tags": [
  278.       "arms_behind_back arms_crossed arm_support arm_up arms_up arms_behind_head chin_rest outstretched_arm outstretched_arms spread_arms v_arms"
  279.     ]
  280.   },
  281.   {
  282.     "name": "Hands",
  283.     "tags": [
  284.       "hands_clasped hand_in_pocket hands_in_pocket hand_on_cheek hand_on_hat hand_on_head hand_on_hip hands_on_hip hand_on_shoulder holding_hands interlocked_fingers outstretched_hand"
  285.     ]
  286.   },
  287.   {
  288.     "name": "Legs",
  289.     "tags": [
  290.       "knees_on_chest leg_lift leg_up legs_up outstretched_leg pigeon_toed spread_legs"
  291.     ]
  292.   },
  293.   {
  294.     "name": "Sitting",
  295.     "tags": [
  296.       "sitting crossed_legs indian_style leg_hug seiza sitting_on_lap sitting_on_person wariza yokozuwari straddling"
  297.     ]
  298.   },
  299.   {
  300.     "name": "Standing",
  301.     "tags": [
  302.       "standing crossed_legs_(standing) standing_on_one_leg"
  303.     ]
  304.   },
  305.   {
  306.     "name": "Lying",
  307.     "tags": [
  308.       "lying on_back on_side on_stomach"
  309.     ]
  310.   },
  311.   {
  312.     "name": "Viewing Direction",
  313.     "tags": [
  314.       "eye_contact looking_at_viewer looking_back looking_away"
  315.     ]
  316.   },
  317.   {
  318.     "name": "Gesture",
  319.     "tags": [
  320.       "clenched_hand clenched_hands double_v heart_hands pinky_out pointing shushing thumbs_up \\\\m\\/ reaching salute waving cat_pose paw_pose v claw_pose double_\\\\m\\/"
  321.     ]
  322.   },
  323.   {
  324.     "name": "Facial Expressions",
  325.     "tags": [
  326.       "expressions expressionless ahegao anger_vein blush blush_stickers clenched_teeth closed_eyes evil naughty_face nosebleed open_mouth parted_lips pout rolleyes frown tears scream"
  327.     ]
  328.   },
  329.   {
  330.     "name": "Emotions",
  331.     "tags": [
  332.       "angry annoyed embarrassed happy sad scared surprised worried disappointed drunk trembling"
  333.     ]
  334.   },
  335.   {
  336.     "name": "Sex",
  337.     "tags": [
  338.       "sex anal clothed_sex happy_sex vaginal yaoi yuri tribadism oral"
  339.     ]
  340.   },
  341.   {
  342.     "name": "Positions",
  343.     "tags": [
  344.       "69 doggystyle girl_on_top cowgirl_position reverse_cowgirl_position upright_straddle missionary"
  345.     ]
  346.   },
  347.   {
  348.     "name": "Stimulation",
  349.     "tags": [
  350.       "buttjob footjob grinding thigh_sex tekoki caressing_testicles double_handjob masturbation crotch_rub paizuri naizuri"
  351.     ]
  352.   },
  353.   {
  354.     "name": "Oral",
  355.     "tags": [
  356.       "oral breast_sucking cunnilingus facesitting fellatio deepthroat :>="
  357.     ]
  358.   },
  359.   {
  360.     "name": "Groping",
  361.     "tags": [
  362.       "groping ass_grab breast_grab nipple_tweak self_fondle torso_grab"
  363.     ]
  364.   },
  365.   {
  366.     "name": "Group Sex",
  367.     "tags": [
  368.       "group_sex gangbang double_penetration orgy spitroast teamwork threesome"
  369.     ]
  370.   },
  371.   {
  372.     "name": "Insertion",
  373.     "tags": [
  374.       "insertion anal_insertion large_insertion stomach_bulge multiple_insertions urethral_insertion penetration nipple_penetration fingering anal_fingering"
  375.     ]
  376.   },
  377.   {
  378.     "name": "Fetishes",
  379.     "tags": [
  380.       "milf giantess minigirl plump fat skinny public public_nudity zenra exhibitionism voyeurism futa_on_female futa_on_male incest twincest rape about_to_be_raped molestation bestiality impregnation tentacles virgin vore"
  381.     ]
  382.   },
  383.   {
  384.     "name": "Bondage",
  385.     "tags": [
  386.       "bondage bdsm asphyxiation breast_bondage shibari spreader_bar suspension femdom humiliation body_writing slave spanked torture bound_arms bound_legs bound_wrists suspension"
  387.     ]
  388.   },
  389.   {
  390.     "name": "Semen",
  391.     "tags": [
  392.       "semen bukkake dripping_semen semen_splatter semen_pool nakadashi semen_in_anus semen_in_mouth semen_on_tongue semen_on_body semen_on_hair semen_on_lower_body semen_on_ass semen_on_vagina semen_on_upper_body semen_on_breasts semen_on_clothes ejaculation ejaculating_while_penetrated facial"
  393.     ]
  394.   },
  395.   {
  396.     "name": "Objects",
  397.     "tags": [
  398.       "condom used_condom sex_toy dildo vibrator"
  399.     ]
  400.   },
  401.   {
  402.     "name": "Bodily Fluids",
  403.     "tags": [
  404.       "blood lactation urinating saliva sweat female_ejaculation vaginal_juices"
  405.     ]
  406.   },
  407.   {
  408.     "name": "View",
  409.     "tags": [
  410.       "cross-section internal_cumshot x-ray"
  411.     ]
  412.   },
  413.   {
  414.     "name": "Background",
  415.     "tags": [
  416.       "simple_background gradient_background two-tone_background ambiguous_background blurry_background",
  417.       ["white_background grey_background black_background red_background brown_background orange_background yellow_background green_background blue_background purple_background pink_background"]      
  418.     ]
  419.   },
  420.   {
  421.     "name": "Placement",
  422.     "tags": [
  423.       "indoors outdoors rooftop city pool beach cave bedroom hallway"
  424.     ]
  425.   },
  426.   {
  427.     "name": "Nature",
  428.     "tags": [
  429.       "ocean river tree palm_tree wisteria lilac grass sand water",
  430.       ["white_flower red_flower yellow_flower blue_flower purple_flower pink_flower"]
  431.     ]
  432.   },
  433.   {
  434.     "name": "Indoors",
  435.     "tags": [
  436.       "pillow bed door bed_sheet counter window curtains bathtub"
  437.     ]
  438.   },
  439.   {
  440.     "name": "Work Type",
  441.     "tags": [
  442.       "scan watercolor_(medium) papercraft non-web_source photoshop_(medium) sketch work_in_progress lineart"
  443.     ]
  444.   }
  445. ]`;
  446.  
  447.   const POST_MODE_DESCRIPTIONS = {
  448.     'view': 'View',
  449.     'add-fav': 'Add to favorites',
  450.     'remove-fav': 'Remove from favorites',
  451.     'rating-s': 'Rate G',
  452.     'rating-q': 'Rate 15+',
  453.     'rating-e': 'Rate R18+',
  454.     'approve': 'Approve post',
  455.     'flag': 'Flag',
  456.     'edit-tag-script': 'Edit tag script',
  457.     'apply-tag-script': 'Apply tag script',
  458.     'choose-parent': 'Choose Parent',
  459.     'set-parent': 'Set Parent',
  460.     'edit-tags': 'Edit Tags',
  461.     'find-similar': 'Find Similar',
  462.     'delete': 'Delete Post',
  463.   };
  464.  
  465.   const TAG_CATEGORIES = [
  466.     'copyright',
  467.     'studio',
  468.     'character',
  469.     'artist',
  470.     'medium',
  471.     'meta',
  472.     'genre'
  473.   ];
  474.  
  475.   /*****************/
  476.   /* compatibility */
  477.   /*****************/
  478.  
  479.   let IS_MONKEY = false; // Tampermonkey, Violentmonkey, Greasemonkey (all at least partially support 'GM.' functions)
  480.  
  481.   if (typeof GM === 'object' && typeof GM.info === 'object') {
  482.     IS_MONKEY = true;
  483.  
  484.     // Greasemonkey:
  485.     // doesn't have addStyle and addValueChangeListener
  486.     // fetch() doesn't work with relative URLs (https://github.com/greasemonkey/greasemonkey/issues/2647), workaround: new URL('/relative/path', document.location)
  487.  
  488.     // polyfill for ViolentMonkey
  489.     if (!GM.addValueChangeListener && typeof GM_addValueChangeListener !== 'undefined') GM.addValueChangeListener = GM_addValueChangeListener;
  490.   }
  491.  
  492.   const HAS_MONKEY_STORAGE = IS_MONKEY;
  493.   const HAS_MONKEY_STORAGE_LISTENER = IS_MONKEY && GM.addValueChangeListener;
  494.   const HAS_MONKEY_ADD_STYLE = IS_MONKEY && GM.addStyle;
  495.  
  496.   let HAS_LOCAL_STORAGE;
  497.   try {
  498.     HAS_LOCAL_STORAGE = !!localStorage.getItem;
  499.   } catch (error) { // DOMException
  500.     HAS_LOCAL_STORAGE = false;
  501.   }
  502.  
  503.   function add_storage_change_listener() {
  504.     if (HAS_MONKEY_STORAGE_LISTENER) for (const key of Object.keys(config)) GM.addValueChangeListener(key, storage_changed);
  505.     else if (HAS_LOCAL_STORAGE) window.addEventListener('storage', local_storage_changed);
  506.     else show_notice(console.error, '[addon error] couldn\'t add storage change listener! No cross-tab communication possible.');
  507.   }
  508.  
  509.   function open_in_tab(url) {
  510.     if (IS_MONKEY) GM.openInTab(url, false);
  511.     else           window.open(url); // requires popup permission
  512.   }
  513.  
  514.   function add_style(css) {
  515.     if (HAS_MONKEY_ADD_STYLE) {
  516.       return Promise.resolve(GM.addStyle(css));  // Violentmonkey returns a style element whereas Tampermonkey returns a Promise
  517.     } else {
  518.       const sheet = document.createElement('STYLE');
  519.       sheet.innerText = css;
  520.       document.head.appendChild(sheet);
  521.       return Promise.resolve(sheet);
  522.     }
  523.   }
  524.  
  525.   function set_clipboard(text) {
  526.     if (IS_MONKEY) {
  527.       GM.setClipboard(text);
  528.     } else {
  529.       navigator.clipboard.writeText(text).catch((err) => {
  530.         show_notice(console.error, '[addon error]: Couldn\'t copy text to clipboard', err);
  531.       });
  532.     }
  533.   }
  534.  
  535.   // the site uses a ton of ancient, non-standard polyfills/prototype overrides, e.g.
  536.   // Array.from(new Set([1])) returns [] instead of [1]
  537.   // JSON.parse(JSON.stringify([1])) returns "[1]" instead of [1]
  538.   // Array.from(s) can be replaced by [...s]
  539.   // to use proper JSON we need to temporarily unbind the site's toJSON functions
  540.   const toJSON_OBJECTS = [Object, Array.prototype, Number.prototype, String.prototype];
  541.  
  542.   function delete_toJSONs() {
  543.     const toJSON_originals = [];
  544.     for (const obj of toJSON_OBJECTS) {
  545.       if (obj.hasOwnProperty('toJSON')) {
  546.         toJSON_originals.push({ obj, func: obj.toJSON });
  547.         delete obj.toJSON;
  548.       }
  549.     }
  550.     return toJSON_originals;
  551.   }
  552.  
  553.   function restore_toJSONs(toJSON_originals) {
  554.     for (const { obj, func } of toJSON_originals)
  555.       obj.toJSON = func;
  556.   }
  557.  
  558.   function JSON_stringify(obj, replacer, space) {
  559.     let toJSON_originals;
  560.     try {
  561.       toJSON_originals = delete_toJSONs();
  562.       return JSON.stringify(obj, replacer, space);
  563.     } finally {
  564.       restore_toJSONs(toJSON_originals);
  565.     }
  566.   }
  567.  
  568.   // enables JSON to stringify Sets and Hotkeys
  569.   function json_replacer(key, value) {
  570.     if (typeof value === 'object') {
  571.       if (value instanceof Set)  return { t: 'Set', v: [...value] };
  572.       if (value instanceof Map)  return { t: 'Map', v: [...value] };
  573.       if (value instanceof Hotkey) {
  574.         return { t: 'Hotkey', v: {
  575.             key: value.key,
  576.             modifiers: value.modifiers,
  577.             action: value.action_name,
  578.           } };
  579.       }
  580.     }
  581.  
  582.     return value;
  583.   }
  584.  
  585.   // enables JSON to parse Sets and Hotkeys
  586.   function json_reviver(key, value) {
  587.     if (typeof value === 'object' && value !== null) {
  588.       switch (value.t) {
  589.         case 'Set':
  590.           return new Set(value.v);
  591.         case 'Map':
  592.           return new Map(value.v);
  593.         case 'Hotkey':
  594.           return new Hotkey(value.v.action, value.v.key, value.v.modifiers);
  595.       }
  596.     }
  597.  
  598.     return value;
  599.   }
  600.  
  601.   function adjust_tag_color_css() {
  602.     for (const category of TAG_CATEGORIES) {
  603.       if (!config.tag_category_colors.has(category)) continue;
  604.  
  605.       add_style(`
  606.         .tag_button.tag-type-${category}:not(.tag_nonexistent) {
  607.           color: ${config.tag_category_colors.get(category)};
  608.         }
  609.       `);
  610.     }
  611.   }
  612.  
  613.   let css_vars = null;
  614.   async function update_css_vars() {
  615.     const style = await add_style(`
  616.       :root {
  617.         --thumbnail-size: ${config.thumbnail_size}px;
  618.       }
  619.     `);
  620.     css_vars?.remove();
  621.     css_vars = style;
  622.   }
  623.  
  624.   let applied_css = false;
  625.   function adjust_css() {
  626.     if (applied_css) return;
  627.     applied_css = true;
  628.  
  629.     // change priority of post borders (by redefining their colors after their original definition)
  630.     // original: flagged < has-children < has-parent < pending < deleted
  631.     // default:  deleted < has-children < has-parent < pending < flagged
  632.     // variants: pending < deleted < has-children < has-parent < flagged
  633.     // note: pending, flagged and deleted are mutually exclusive, so this is only about their relation to has-children/parent
  634.     // also note: deleted posts only show through explicit search so they don't really need a border
  635.     add_style(`
  636.       img.has-children { border-color: #A7DF38; }
  637.       img.has-parent   { border-color: #CCCC00; }
  638.     ${config.post_border_style === 0 ? `
  639.       img.pending      { border-color: #4B4BA3; }
  640.     ` : config.post_border_style === 2 ? `
  641.       img.pending:is(.has-children,.has-parent) { outline: #4B4BA3 solid 2px; }
  642.     ` : ''}
  643.       img.flagged      { border-color: #F00; }
  644.     `);
  645.  
  646.     /* allow enlarging tag edit box */
  647.     add_style(`
  648.     form#edit-form textarea#post_tags {
  649.       max-width: unset;
  650.       height: 255px;
  651.     }`);
  652.  
  653.     /* style edit box buttons */
  654.     add_style(`
  655.     form#edit-form button {
  656.       min-width: 7em;
  657.       padding-left: 0.5em;
  658.       padding-right: 0.5em;
  659.       margin-top: 0.5em;
  660.       margin-bottom: 0.5em;
  661.     }`
  662.     );
  663.  
  664.     /* sitefix: there can appear a small gap between the navbar <li>s and the <ul>s which partially breaks hovering */
  665.     /* this issue seems to be font-dependent and is worsened by the unicode config gear icon, no matter it's size (...?!) */
  666.     add_style(`
  667.       div#header ul#navbar {
  668.         margin-bottom: 0;
  669.         padding-top: 2px;
  670.         padding-bottom: 0;
  671.       }
  672.       div#header ul#navbar li {
  673.         padding-bottom: 3px;
  674.       }
  675.       div#header ul#navbar li:hover > ul {
  676.         height: 2.1em;
  677.       }
  678.     `);
  679.  
  680.     /* sitefix for broken deletion page layout */
  681.     add_style(`
  682.       /* comparison box */
  683.       #content > .deleting-post {
  684.           clear: left;    /* clearfix: ensure box starts below first thumbnail */
  685.           overflow: auto; /* fit its content */
  686.       }
  687.  
  688.       /* balance margins */
  689.       #content > .deleting-post {
  690.           padding-top: 1em;
  691.           padding-bottom: 1em;
  692.       }
  693.       #content > .deleting-post > div {
  694.           margin-top: unset !important; /* important due to inline style */
  695.           margin-bottom: unset !important;
  696.       }
  697.       #content > .deleting-post > ul {
  698.           margin-bottom: unset;
  699.       }
  700.  
  701.       /* align first thumbnail with comparison box */
  702.       #content > .thumb {
  703.           margin-left: calc(4em + 4px);
  704.       }
  705.  
  706.       /* center warn tags / edit gear below thumbnails */
  707.       #content .deleting-post .thumb > * {
  708.           margin: auto;
  709.       }
  710.     `);
  711.  
  712.     /* custom style for tag menu */
  713.     add_style(`
  714.       .tag_button {
  715.         display: inline-block;
  716.         border-style: solid;
  717.         border-width: 1px;
  718.         padding-left: 5px;
  719.         padding-right: 5px;
  720.       }
  721.  
  722.       .tag_list, .tag_group {
  723.         display: flex;
  724.         flex-wrap: wrap;
  725.         align-content: flex-start;
  726.         align-items: flex-start;
  727.         column-gap: 6px;
  728.         row-gap: 3px;
  729.       }
  730.  
  731.       .tag_list {
  732.         padding-left: 3px;
  733.         padding-top: 3px;
  734.         padding-bottom: 1px;
  735.       }
  736.  
  737.       .tag_group {
  738.         padding: 2px;
  739.       }
  740.  
  741.       .tag_list table {
  742.         margin: 0;
  743.       }
  744.  
  745.       .tag_group, .tag_list table {
  746.         margin-left: -3px;
  747.         margin-top: -2px;
  748.       }
  749.  
  750.       a.tag_nonexistent {
  751.         color: #E00;
  752.       }
  753.     `);
  754.  
  755.     adjust_tag_color_css();
  756.  
  757.     // disable site icons when using own icons
  758.     if (config.show_speaker_icon || config.show_animated_icon) {
  759.       add_style(`
  760.         .sound-icon, .video-icon {
  761.           display: none;
  762.         }
  763.       `);
  764.     }
  765.  
  766.     update_css_vars();
  767.  
  768.     if (config.custom_style) {
  769.       add_style(`
  770.         :root {
  771.             /* 1920px - 230px sidebar - scrollbar = ~1670px */
  772.             --thumbnail-image-size: calc(var(--thumbnail-size) - 30px);
  773.         }
  774.  
  775.         /* simple left-aligned grid */
  776.         .post-gallery.post-gallery-grid .posts-container {
  777.             grid-template-columns: repeat(auto-fill, var(--thumbnail-size));
  778.         }
  779.  
  780.         .posts-container.gap-2 {
  781.             gap: 0
  782.         }
  783.         .post-gallery-grid .posts-container {
  784.             margin-bottom: 0;
  785.         }
  786.  
  787.         /* center thumbnails */
  788.         #popular-preview .post-preview-container {
  789.             display: grid;
  790.             place-items: center;
  791.         }
  792.         .post-gallery-grid .post-preview-container {
  793.             place-items: center;
  794.         }
  795.  
  796.         .post-gallery${General.page === Page.Index ? ':not(.post-gallery-inline)' : ''} .post-preview {
  797.             /* add outline */
  798.             outline: #84848463 dashed 1px;
  799.  
  800.             /* slight transparent background */
  801.             background-color: #c4c4c421;
  802.     
  803.             /* set size */
  804.             width: var(--thumbnail-size);
  805.         }
  806.  
  807.         /* set/override size */
  808.         #post-list .posts-container .post-preview .post-preview-container {
  809.             height: var(--thumbnail-size);
  810.         }
  811.  
  812.         /* fix thumbnail icons for post page parent/children */
  813.         #post-view .post-preview .post-preview-link {
  814.             display: inline-block;
  815.         }
  816.  
  817.         /* scale thumbnail images */
  818.         .posts-container img.post-preview-image {
  819.             /*
  820.              * using object-fit: contain; instead will cause the borders to not fit the image
  821.              * but this way will make the crossed out eyes appear tiny...
  822.              */
  823.             width: auto;
  824.             height: auto;
  825.             max-width: var(--thumbnail-image-size);
  826.             max-height: var(--thumbnail-image-size);
  827.         }
  828.       `);
  829.     }
  830.  
  831.     if (config.enlarge_navbar) {
  832.       add_style(`
  833.         :root {
  834.             --navbar-size: 4em;
  835.             --subnav-size: 4em;
  836.         }
  837.  
  838.         /* Grow navbar size to match hover area and equalize the latter for darkmode */
  839.         div#header ul#subnavbar {
  840.           height: calc(var(--navbar-size) - 1em + 1px);
  841.         }
  842.         div#header ul#navbar li:hover > ul {
  843.           height: var(--subnav-size);
  844.         }
  845.     `);
  846.     }
  847.   }
  848.  
  849.  
  850.   /***************************/
  851.   /* configuration functions */
  852.   /***************************/
  853.  
  854.   const IS_IDOL = (window.location.hostname === 'idol.sankakucomplex.com' ? 1 : 0);
  855.   const HISTORY_KEY = (IS_IDOL ? 'view_history_idol' : 'view_history');
  856.   const COMMON_TAGS_KEYS = ['common_tags_json', 'common_tags_json_idol'];
  857.   const COMMON_TAGS_KEY = COMMON_TAGS_KEYS[IS_IDOL];
  858.   const OTHER_COMMON_TAGS_KEY = COMMON_TAGS_KEYS[1 - IS_IDOL];
  859.  
  860.   const HOTKEY_ACTIONS = { // actions need unique names (for serialization)
  861.     postpage: {
  862.       reset_size: () => {
  863.         scale_image(SCALE_MODES.RESET, true);
  864.         scroll_to_image();
  865.       },
  866.       fit_size: () => {
  867.         scale_image(SCALE_MODES.FIT, true);
  868.         scroll_to_image();
  869.       },
  870.       fit_horizontal: () => {
  871.         scale_image(SCALE_MODES.HORIZONTAL, true);
  872.         scroll_to_image();
  873.       },
  874.       fit_vertical: () => {
  875.         scale_image(SCALE_MODES.VERTICAL, true);
  876.         scroll_to_image();
  877.       },
  878.       open_similar: () => {
  879.         if (PostPage.post_id === null) {
  880.           show_notice(console.error, 'addon error: no post id, report to author!');
  881.           return;
  882.         }
  883.         open_in_tab(window.location.origin + '/posts/similar?id=' + PostPage.post_id);
  884.       },
  885.       open_delete: () => {
  886.         if (!found_delete_action) {
  887.           show_notice(console.error, 'addon error: Delete action not found, no permission?');
  888.         } else {
  889.           if (PostPage.post_id === null) {
  890.             show_notice(console.error, 'addon error: no post id, report to author!');
  891.             return;
  892.           }
  893.           open_in_tab(window.location.origin + '/posts/delete/' + PostPage.post_id);
  894.         }
  895.       },
  896.       add_translation: () => {
  897.         unsafeWindow.Note.create();
  898.       },
  899.       copy_translations: () => {
  900.         copy_translations();
  901.       },
  902.       paste_translations: () => {
  903.         paste_translations();
  904.       },
  905.     },
  906.     indexpage: {}
  907.   };
  908.  
  909.   for (const mode of Object.keys(POST_MODE_DESCRIPTIONS)) {
  910.     HOTKEY_ACTIONS.indexpage[`${mode}_mode`] = () => select_mode(mode);
  911.   }
  912.  
  913.   for (let i = 1; i <= 10; i++) {
  914.     HOTKEY_ACTIONS.indexpage[`select_tagscript_preset${i}`] = () => {
  915.       const dropdown = document.getElementById('tagscript_presets_dropdown');
  916.       dropdown.selectedIndex = i;
  917.       dropdown.dispatchEvent(new Event('change'));
  918.     };
  919.   }
  920.  
  921.   function get_hotkey_action(action_name) {
  922.     for (const actions of Object.values(HOTKEY_ACTIONS)) {
  923.       const action = actions[action_name];
  924.       if (action) {
  925.         return action;
  926.       }
  927.     }
  928.  
  929.     throw new Error(`Hotkey ${action_name} not found`);
  930.   }
  931.  
  932.   class Hotkey {
  933.     constructor(action_name, key, modifiers) {
  934.       this.key = key;
  935.       this.modifiers = modifiers ?? new Set();
  936.       this.action_name = action_name;
  937.       this.action = get_hotkey_action(action_name);
  938.     }
  939.  
  940.     call(e) {
  941.       if (e.key.toLowerCase() === this.key
  942.         && this.modifiers.has('ctrl') === e.ctrlKey
  943.         && this.modifiers.has('alt') === e.altKey
  944.         && this.modifiers.has('shift') === e.shiftKey) {
  945.         this.action();
  946.       }
  947.     }
  948.   }
  949.  
  950.   const DEFAULT_CONFIG = {
  951.     scroll_to_image: true,
  952.     scale_image: true, // and video
  953.     scale_only_downscale: false,
  954.     scale_flash: false,
  955.     scale_mode: 0,
  956.     scale_on_resize: false,
  957.     scroll_to_image_center: true,
  958.     load_highres: false,
  959.     highres_limit: 4000000, // bytes
  960.     video_pause: false,
  961.     video_mute: true,
  962.     set_video_volume: false,
  963.     video_volume: 50,
  964.     video_controls: true,
  965.     redirect_v_to_s_server: false,
  966.     show_speaker_icon: false,
  967.     show_animated_icon: false,
  968.     show_ratings_icon: false,
  969.     post_border_style: 0,
  970.     custom_style: true,
  971.     thumbnail_size: 208,
  972.     enlarge_navbar: false,
  973.     setparent_deletepotentialduplicate: false,
  974.     editform_deleteuselesstags: false,
  975.     hide_headerlogo: false,
  976.     tag_search_buttons: true,
  977.     tag_post_counts: true,
  978.     or_tag_search_button: false,
  979.     tag_menu: true,
  980.     tag_menu_scale: '30%',
  981.     tag_menu_layout: 1,
  982.     common_tags_json: DEFAULT_TAGLIST,
  983.     common_tags_json_idol: '[ {"name":"test tags", "tags":["tag1 tag2", ["grouped_tag1 grouped_tag2"], "tag3 tag4"] }, { "tags":[ "next_line tag5 tag6", ["grouped_tag3 grouped_tag4"] , "tag7 tag8"] }, {"name":"another\u00A0category", "tags":["t1 t2 t3"]} ]',
  984.     view_history_enabled: false,
  985.     view_history: new Set(),
  986.     view_history_idol: new Set(),
  987.     wiki_template: '',
  988.     record_template:
  989.       `[
  990.   [
  991.     "Poor Tagging - neutral",
  992.     "Hello.\\n\\nPlease comply with our [[uploading rules]] when making new posts. [##]% of your posts do not have enough tags to get rid of their tagme status.\\n\\nIf you need help figuring out what tags to add, there's a great [[tag checklist]] that will give you lots of tags to add.\\n\\nUntil you correct this issue, I'll have to request that you not upload anything else. A failure to comply with our tagging standards can result in further staff action against your account.\\n\\nAs an extra bit of information, we require 13 general tags on color posts and 7 general tags on [[monochrome]] posts to avoid records such as this one.",
  993.     "neutral"
  994.   ]
  995. ]`,
  996.     tagscript_presets:
  997.       `[
  998.   [
  999.     "Remove potential_duplicate",
  1000.     "-potential_duplicate"
  1001.   ],
  1002.   [
  1003.     "futanari -> newhalf",
  1004.     "newhalf -futanari -full-package_futanari"
  1005.   ]
  1006. ]`,
  1007.     tag_category_collapser: false,
  1008.     tag_category_collapser_style: 1,
  1009.     collapsed_tag_categories: new Set(),
  1010.     move_stats_to_edit_form: false,
  1011.     postpage_hotkeys: [
  1012.       new Hotkey('reset_size', 'h'),
  1013.       new Hotkey('fit_size', 'g'),
  1014.       new Hotkey('fit_horizontal', 'g', new Set(['shift'])),
  1015.       new Hotkey('fit_vertical', 'g', new Set(['alt'])),
  1016.       //new Hotkey('open_similar', 's'),
  1017.       //new Hotkey('open_delete', 'd'), // site: shift+d
  1018.       //new Hotkey('add_translation', 't'), // site: n
  1019.       new Hotkey('copy_translations', 'c'),
  1020.       new Hotkey('paste_translations', 'v'),
  1021.     ],
  1022.     indexpage_hotkeys: [
  1023.       new Hotkey('set-parent_mode', 'v'),
  1024.       new Hotkey('choose-parent_mode', 'c'),
  1025.       new Hotkey('rating-s_mode', 's'),
  1026.       new Hotkey('rating-q_mode', 'q'),
  1027.       new Hotkey('rating-e_mode', 'e'),
  1028.     ],
  1029.     notes: [],
  1030.     save_tag_categories: true,
  1031.     tag_categories: new Map(),
  1032.     tag_category_colors: new Map(),
  1033.     use_old_wiki: false,
  1034.     use_old_pools: false,
  1035.     use_old_tags_index: false,
  1036.   };
  1037.  
  1038.   for (let i = 1; i <= 10; i++) {
  1039.     const key = i < 10 ? String(i) : '0';
  1040.     DEFAULT_CONFIG.indexpage_hotkeys.push(new Hotkey(`select_tagscript_preset${i}`, key));
  1041.   }
  1042.  
  1043.   const KEY_PREFIX = 'config.'; // used to avoid conflicts in localStorage and config element ids
  1044.  
  1045.   const config = Object_clone(DEFAULT_CONFIG); // load default
  1046.  
  1047.   // applied to loaded/set config entries (to e.g. fix config elements returning strings when we need numbers)
  1048.   const CONFIG_FIXER = {
  1049.     scale_mode: Number,
  1050.     tag_menu_layout: Number,
  1051.     tag_category_collapser_style: Number,
  1052.     highres_limit: Number,
  1053.     post_border_style: Number,
  1054.     thumbnail_size: Number,
  1055.   };
  1056.  
  1057.   function fix_config_entry(key, value) {
  1058.     const fixer = CONFIG_FIXER[key];
  1059.     return (fixer !== undefined ? fixer(value) : value);
  1060.   }
  1061.  
  1062.   // permanently save setting (and broadcast to other tabs)
  1063.   function save_setting(key, value) {
  1064.     value = fix_config_entry(key, value);
  1065.  
  1066.     if (HAS_MONKEY_STORAGE) {
  1067.       GM.setValue(key, JSON_stringify(value, json_replacer)).catch((reason) => {
  1068.         show_notice(console.error, `addon error: couldn't save setting "${key}", check console`, reason);
  1069.       });
  1070.  
  1071.       // use localStorage too if we don't have a change listener
  1072.       if (GM.addValueChangeListener) return;
  1073.     }
  1074.  
  1075.     if (!HAS_LOCAL_STORAGE) {
  1076.       show_notice(console.warn, `[addon] couldn't save setting "${KEY_PREFIX + key}" to localStorage. check permissions`);
  1077.       return;
  1078.     }
  1079.  
  1080.     try {
  1081.       localStorage.setItem(KEY_PREFIX + key, JSON_stringify(value, json_replacer));
  1082.     } catch (error) {
  1083.       show_notice(console.error, `[addon error] couldn't save setting "${KEY_PREFIX + key}" to localStorage, check console`, error);
  1084.     }
  1085.   }
  1086.  
  1087.   async function load_config() {
  1088.     const monkey_values = {};
  1089.  
  1090.     if (HAS_MONKEY_STORAGE) {
  1091.       const promises = [];
  1092.       for (const key of Object.keys(config)) {
  1093.         promises.push(GM.getValue(key).then((value) => {
  1094.           monkey_values[key] = value;
  1095.         }));
  1096.       }
  1097.  
  1098.       await Promise.all(promises);
  1099.     }
  1100.  
  1101.     for (const key of Object.keys(config)) {
  1102.       let value = config[key]; // default already loaded
  1103.  
  1104.       let stored_value = monkey_values[key];
  1105.  
  1106.       if (stored_value === undefined && HAS_LOCAL_STORAGE)
  1107.         stored_value = localStorage.getItem(KEY_PREFIX + key);
  1108.  
  1109.       if (stored_value !== undefined && stored_value !== null) {
  1110.         try {
  1111.           value = JSON.parse(stored_value, json_reviver);
  1112.  
  1113.           // "migrate" from old hotkey format by resetting to default
  1114.           if ((key === 'postpage_hotkeys' || key === 'indexpage_hotkeys') && !Array.isArray(value)) {
  1115.             reset_setting(key);
  1116.             continue;
  1117.           }
  1118.         } catch (error) {
  1119.           show_notice(console.error, `[addon error] couldn't load setting "${key}"`, error);
  1120.         }
  1121.       }
  1122.  
  1123.       update_setting(key, value); // fire regardless
  1124.     }
  1125.   }
  1126.  
  1127.   function storage_changed(key, old_value, new_value, remote) {
  1128.     try {
  1129.       if (!remote) return; // only listen to other tabs
  1130.  
  1131.       if (new_value === undefined || new_value === null) {
  1132.         // entry was removed, reset setting to default
  1133.         update_setting(key, Object_clone(DEFAULT_CONFIG[key]));
  1134.       } else {
  1135.         // entry was added or changed
  1136.         const value = JSON.parse(new_value, json_reviver);
  1137.  
  1138.         // workaround for post view history race condition
  1139.         if (key === HISTORY_KEY) {
  1140.           const new_ids = Set_difference(value, config[key]);
  1141.           if (new_ids.size === 0) return;
  1142.  
  1143.           // integrate newly received post ids into view history
  1144.           config[key] = Set_union(value, config[key]);
  1145.  
  1146.           // save new view history and broadcast it to other tabs,
  1147.           // which in turn might broadcast their ids back to us
  1148.           save_setting(key, value);
  1149.  
  1150.           // live update thumbnails
  1151.           if (!is_personal_post_page()) {
  1152.             for (const id of new_ids) {
  1153.               const thumbs = General.thumbnail_cache.get(id);
  1154.               if (thumbs === undefined) continue;
  1155.  
  1156.               for (const thumb of thumbs)
  1157.                 fadeout_post(thumb);
  1158.             }
  1159.           }
  1160.  
  1161.           return; // don't call update_setting()
  1162.         }
  1163.  
  1164.         update_setting(key, value);
  1165.       }
  1166.     } catch (error) {
  1167.       show_notice(console.error, 'storage_changed() failed, check console', error);
  1168.     }
  1169.   }
  1170.  
  1171.   // localStorage from other tabs changed
  1172.   function local_storage_changed(e) {
  1173.     if (e.storageArea !== localStorage) return;
  1174.     if (e.key === null) return; // ignore external localStorage.clear() for now
  1175.  
  1176.     // only look at SankakuAddon specific changes
  1177.     if (!e.key.startsWith(KEY_PREFIX)) return;
  1178.     const key = e.key.substring(KEY_PREFIX.length);
  1179.  
  1180.     storage_changed(key, e.oldValue, e.newValue, true);
  1181.   }
  1182.  
  1183.   function update_setting(key, value) {
  1184.     config[key] = fix_config_entry(key, value);
  1185.  
  1186.     if (key === 'thumbnail_size') {
  1187.       update_css_vars();
  1188.     } else if (key === 'scale_on_resize') {
  1189.       if (value) add_scale_on_resize_listener();
  1190.       else       remove_scale_on_resize_listener();
  1191.     }
  1192.  
  1193.     update_config_dialog_by_key(key);
  1194.  
  1195.     if (key === 'hide_headerlogo') {
  1196.       update_headerlogo();
  1197.     } else if (key === 'collapsed_tag_categories') {
  1198.       for (const category of collapser_map.keys())
  1199.         collapse_tag_category(category, config.collapsed_tag_categories.has(category), false);
  1200.     }
  1201.   }
  1202.  
  1203.   function reset_setting(key) {
  1204.     if (HAS_MONKEY_STORAGE) GM.deleteValue(key);
  1205.     if (HAS_LOCAL_STORAGE) localStorage.removeItem(KEY_PREFIX + key); // also delete if USE_MONKEY_STORAGE
  1206.     update_setting(key, Object_clone(DEFAULT_CONFIG[key]));
  1207.   }
  1208.  
  1209.   function reset_config() {
  1210.     for (const key of Object.keys(config)) {
  1211.       // don't clear the history so the clear history button makes more sense
  1212.       if (key === 'view_history' || key === 'view_history_idol') continue;
  1213.       // don't reset the common tags list of the other site
  1214.       if (key === OTHER_COMMON_TAGS_KEY) continue;
  1215.  
  1216.       reset_setting(key);
  1217.     }
  1218.   }
  1219.  
  1220.  
  1221.   // templates for the config dialog
  1222.   const CONFIG_TABS_TEMPLATE = {
  1223.     general: {
  1224.       name: 'General',
  1225.       categories: ['post', 'general'],
  1226.     },
  1227.     editing: {
  1228.       name: 'Editing',
  1229.       categories: ['editing'],
  1230.     },
  1231.     hotkeys: {
  1232.       name: 'Hotkeys',
  1233.       categories: ['postpage_hotkeys', 'indexpage_hotkeys'],
  1234.     },
  1235.   };
  1236.  
  1237.   const CONFIG_CATEGORY_TEMPLATE = {
  1238.     post: {
  1239.       name: 'Image/Video',
  1240.       entries: [
  1241.         'scroll_to_image',
  1242.         'scroll_to_image_center',
  1243.         'scale_image',
  1244.         'scale_only_downscale',
  1245.         'scale_flash',
  1246.         'scale_on_resize',
  1247.         'scale_mode',
  1248.         'load_highres',
  1249.         'video_pause',
  1250.         'video_mute',
  1251.         'set_video_volume',
  1252.         'video_controls',
  1253.         'redirect_v_to_s_server',
  1254.       ],
  1255.     },
  1256.     general: {
  1257.       name: 'General',
  1258.       entries: [
  1259.         'tag_search_buttons',
  1260.         'or_tag_search_button',
  1261.         'tag_post_counts',
  1262.         'tag_category_collapser',
  1263.         'tag_category_collapser_style',
  1264.         'show_speaker_icon',
  1265.         'show_animated_icon',
  1266.         'show_ratings_icon',
  1267.         'view_history_enabled',
  1268.         'post_border_style',
  1269.         'custom_style',
  1270.         'thumbnail_size',
  1271.         'enlarge_navbar',
  1272.         'hide_headerlogo',
  1273.       ],
  1274.     },
  1275.     editing: {
  1276.       name: 'Editing',
  1277.       entries: [
  1278.         'use_old_wiki',
  1279.         'use_old_pools',
  1280.         'use_old_tags_index',
  1281.         'move_stats_to_edit_form',
  1282.         'setparent_deletepotentialduplicate',
  1283.         'editform_deleteuselesstags',
  1284.         'tag_menu',
  1285.         COMMON_TAGS_KEY,
  1286.         'tag_menu_layout',
  1287.         'save_tag_categories',
  1288.         'wiki_template',
  1289.         'record_template',
  1290.         'tagscript_presets',
  1291.       ],
  1292.     },
  1293.     postpage_hotkeys: {
  1294.       name: 'Post Page Hotkeys',
  1295.       entries: [],
  1296.     },
  1297.     indexpage_hotkeys: {
  1298.       name: 'Index Page Hotkeys',
  1299.       entries: [],
  1300.     },
  1301.   };
  1302.  
  1303.   // expand hotkeys
  1304.   for (const [page, actions] of Object.entries(HOTKEY_ACTIONS)) {
  1305.     for (const name of Object.keys(actions)) {
  1306.       CONFIG_CATEGORY_TEMPLATE[`${page}_hotkeys`].entries.push(`${page}_hotkeys.${name}`);
  1307.     }
  1308.   }
  1309.  
  1310.   const SETTINGS_TEMPLATE = {
  1311.     scroll_to_image:                    {type: 'checkbox', desc: 'Scroll to image/video when opening post'},
  1312.     scroll_to_image_center:             {type: 'checkbox', desc: 'Scroll to center of image/video, else scroll to top'},
  1313.     scale_image:                        {type: 'checkbox', desc: 'Scale image/video when opening post'},
  1314.     scale_only_downscale:               {type: 'checkbox', desc: 'Only downscale'},
  1315.     scale_flash:                        {type: 'checkbox', desc: 'Also scale flash videos'},
  1316.     scale_on_resize:                    {type: 'checkbox', desc: 'Scale image on window resize', title: 'This uses the \'scale image mode\' setting, so it doesn\'t work well when using the manual scaling actions.'},
  1317.     scale_mode:                         {type: 'select',   desc: 'Scale image/video mode: ', options: {0: 'Fit to window', 1: 'Fit horizontally', 2: 'Fit vertically'}},
  1318.     load_highres:                       {type: 'checkbox', desc: 'Load original image if smaller than ', title: 'Set to 0 bytes to always load'},
  1319.     video_pause:                        {type: 'checkbox', desc: 'Pause (non-flash) videos'},
  1320.     video_mute:                         {type: 'checkbox', desc: 'Mute (non-flash) videos'},
  1321.     set_video_volume:                   {type: 'checkbox', desc: 'Set (non-flash) video volume to: '},
  1322.     video_controls:                     {type: 'checkbox', desc: 'Show video controls'},
  1323.     redirect_v_to_s_server:             {type: 'checkbox', desc: 'Redirect v.sankakucomplex.com to s.sankakucomplex.com'},
  1324.     tag_post_counts:                    {type: 'checkbox', desc: 'Add old style post tag counts'},
  1325.     tag_search_buttons:                 {type: 'checkbox', desc: 'Enable + - tag search buttons'},
  1326.     or_tag_search_button:               {type: 'checkbox', desc: 'Also add ~ tag search button'},
  1327.     show_speaker_icon:                  {type: 'checkbox', desc: `Show ${SPEAKER_SVG} icon on thumbnail if it has audio`},
  1328.     show_animated_icon:                 {type: 'checkbox', desc: `Show ${ANIMATED_SVG} icon on thumbnail if it is animated (${SPEAKER_SVG}  overrides ${ANIMATED_SVG} )`},
  1329.     show_ratings_icon:                  {type: 'checkbox', desc: `Show ratings icon (${SAFE_SVG}, ${QUESTIONABLE_SVG}, ${EXPLICIT_SVG}) on post thumbnails`},
  1330.     view_history_enabled:               {type: 'checkbox', desc: 'Fade out thumbnails of viewed posts (enables post view history)'},
  1331.     post_border_style:                  {type: 'select',   desc: 'Post border style: ', options: {0: 'Prioritize blue \'unapproved\' border', 1: 'Priorizite yellow/green \'has parent / children\' borders', 2: 'Show both borders'}},
  1332.     custom_style:                       {type: 'checkbox', desc: 'Custom thumbnail grid style', title: 'Previously known as \'Sankaku...Something\' userstyle'},
  1333.     thumbnail_size:                     {type: 'range',    desc: 'Thumbnail size for custom style: ', min: 30, max: 330},
  1334.     setparent_deletepotentialduplicate: {type: 'checkbox', desc: 'Delete potential_duplicate tag when using "Set Parent"'},
  1335.     enlarge_navbar:                     {type: 'checkbox', desc: 'Enlarge navbar', title: 'Makes it easier to reach far options without accidentally closing the subnav.'},
  1336.     editform_deleteuselesstags:         {type: 'checkbox', desc: '"Save changes" button deletes useless_tags tag'},
  1337.     tag_category_collapser:             {type: 'checkbox', desc: 'Enable tag category collapsers on post pages'},
  1338.     tag_category_collapser_style:       {type: 'select',   desc: 'Tag category collapser style: ', options: {0: 'Compact', 1: 'Compact category name', 2: 'Default category name'}},
  1339.     hide_headerlogo:                    {type: 'checkbox', desc: 'Hide header logo'},
  1340.     tag_menu:                           {type: 'checkbox', desc: 'Activate tag menu'},
  1341.     [COMMON_TAGS_KEY]:                  {type: 'text',     desc: 'Common tags list (JSON format):'},
  1342.     tag_menu_layout:                    {type: 'select',   desc: 'Tag menu layout: ', options: {0: 'Normal', 1: 'Vertically compact'}},
  1343.     save_tag_categories:                {type: 'checkbox', desc: 'Save tag color information for use in tag menu'},
  1344.     wiki_template:                      {type: 'text',     desc: 'Wiki template:', title: 'Text that will be be shown in a separate textarea on wiki add/edit pages so it can easily be copied.'},
  1345.     record_template:                    {type: 'text',     desc: 'Record templates (JSON format):', title: 'A list of templates to be chosen from a dropdown menu on the record add page, each entry has a title followed by the actual content.'},
  1346.     tagscript_presets:                  {type: 'text',     desc: 'Tag script presets (JSON format):', title: 'A list of tag scripts to be chosen from a dropdown menu below "Mode" (put [] to disable).'},
  1347.     move_stats_to_edit_form:            {type: 'checkbox', desc: 'Move post "Details" to the right of the edit form'},
  1348.     use_old_wiki:                       {type: 'checkbox', desc: 'Use old wiki where possible'},
  1349.     use_old_pools:                      {type: 'checkbox', desc: 'Use old pools instead of books (read-only)'},
  1350.     use_old_tags_index:                 {type: 'checkbox', desc: 'Use old tags index'},
  1351.     // TODO this is a mess
  1352.     'postpage_hotkeys.reset_size':      {type: 'hotkey',   desc: 'Reset Image Size'},
  1353.     'postpage_hotkeys.fit_size':        {type: 'hotkey',   desc: 'Fit Image'},
  1354.     'postpage_hotkeys.fit_horizontal':  {type: 'hotkey',   desc: 'Fit Image (Horizontal)'},
  1355.     'postpage_hotkeys.fit_vertical':    {type: 'hotkey',   desc: 'Fit Image (Vertical)'},
  1356.     'postpage_hotkeys.open_similar':    {type: 'hotkey',   desc: 'Find Similar'},
  1357.     'postpage_hotkeys.open_delete':     {type: 'hotkey',   desc: 'Delete Post'},
  1358.     'postpage_hotkeys.add_translation': {type: 'hotkey',   desc: 'Add Translation'},
  1359.     'postpage_hotkeys.copy_translations':  {type: 'hotkey',   desc: 'Copy Translations'},
  1360.     'postpage_hotkeys.paste_translations': {type: 'hotkey',   desc: 'Paste Translations'},
  1361.   };
  1362.  
  1363.   for (const [mode, desc] of Object.entries(POST_MODE_DESCRIPTIONS)) {
  1364.     SETTINGS_TEMPLATE[`indexpage_hotkeys.${mode}_mode`] = {type: 'hotkey', desc: desc + ' mode'};
  1365.   }
  1366.  
  1367.   for (let i = 1; i <= 10; i++) {
  1368.     SETTINGS_TEMPLATE[`indexpage_hotkeys.select_tagscript_preset${i}`] = {type: 'hotkey', desc: `Select Tag Script Template #${i}`};
  1369.   }
  1370.  
  1371.   // whether a config element's value are accessed via '.value' (or otherwise '.checked')
  1372.   function is_value_element(key) {
  1373.     // hardcoded elements
  1374.     if (key === 'video_volume')   return true;
  1375.     if (key === 'highres_limit')  return true;
  1376.     if (key === 'tag_menu_scale') return true; // doesn't exist as an element, but it would be '.value' type
  1377.  
  1378.     const type = SETTINGS_TEMPLATE[key].type;
  1379.     return (type === 'select' || type === 'range' || type === 'text');
  1380.   }
  1381.  
  1382.   // calls f(cfg_elem, key, get_value) for each existing config element
  1383.   function foreach_config_element(f) {
  1384.     for (const key of Object.keys(config)) {
  1385.       const cfg_elem = document.getElementById(KEY_PREFIX + key);
  1386.       if (cfg_elem === null) continue;
  1387.  
  1388.       if (is_value_element(key)) f(cfg_elem, key, () => cfg_elem.value);
  1389.       else                       f(cfg_elem, key, () => cfg_elem.checked);
  1390.     }
  1391.   }
  1392.  
  1393.   function update_config_dialog_by_key(key) {
  1394.     if (key.endsWith('_hotkeys')) {
  1395.       update_hotkeys(key.slice(0, -'_hotkeys'.length));
  1396.       return;
  1397.     }
  1398.  
  1399.     const cfg_elem = document.getElementById(KEY_PREFIX + key);
  1400.     if (cfg_elem !== null) {
  1401.       if (is_value_element(key)) cfg_elem.value   = config[key];
  1402.       else                       cfg_elem.checked = config[key];
  1403.     }
  1404.   }
  1405.  
  1406.   function update_config_dialog() {
  1407.     for (const key of Object.keys(config)) update_config_dialog_by_key(key);
  1408.   }
  1409.  
  1410.   function update_headerlogo() {
  1411.     hide_headerlogo(config.hide_headerlogo);
  1412.   }
  1413.  
  1414.   function is_config_dialog_visible() {
  1415.     return document.getElementById('cfg_dialog').style.display !== 'none';
  1416.   }
  1417.  
  1418.   function show_config_dialog(bool) {
  1419.     document.getElementById('cfg_dialog').style.display = (bool ? 'block' : 'none');
  1420.   }
  1421.  
  1422.  
  1423.   /********************/
  1424.   /* helper functions */
  1425.   /********************/
  1426.  
  1427.   const EMPTY_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
  1428.  
  1429.   class Tags { // thin wrapper around Set
  1430.     tags;
  1431.  
  1432.     constructor(tag_str) {
  1433.       tag_str ??= '';
  1434.       this.tags = new Set(tag_str.trim().split(/\s+/).filter(t => t.length !== 0));
  1435.     }
  1436.  
  1437.     static invert(tag) {
  1438.       const minus = tag.startsWith('-');
  1439.       return minus ? tag.substring(1) : `-${tag}`;
  1440.     }
  1441.  
  1442.     has(tag) {
  1443.       return this.tags.has(tag);
  1444.     }
  1445.  
  1446.     add(tag) {
  1447.       this.tags.add(tag);
  1448.       this.tags.delete(Tags.invert(tag));
  1449.     }
  1450.  
  1451.     remove(tag) {
  1452.       this.tags.delete(tag);
  1453.     }
  1454.  
  1455.     toggle(tag) {
  1456.       if (this.has(tag)) {
  1457.         this.remove(tag);
  1458.       } else {
  1459.         this.add(tag);
  1460.       }
  1461.     }
  1462.  
  1463.     filter(pred) {
  1464.       this.tags = new Set([...this.tags].filter(pred));
  1465.       return this;
  1466.     }
  1467.  
  1468.     [Symbol.iterator]() {
  1469.       return this.tags.values();
  1470.     }
  1471.  
  1472.     toArray() {
  1473.       return [...this.tags];
  1474.     }
  1475.  
  1476.     toString() {
  1477.       return [...this.tags].join(' ');
  1478.     }
  1479.   }
  1480.  
  1481.   function set_cookie(name, value, valid_for_days = 365) {
  1482.     const date = new Date();
  1483.     date.setTime(date.getTime() + (valid_for_days * 24 * 60 * 60 * 1000));
  1484.     document.cookie = `${name}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; path=/; SameSite=Lax`;
  1485.   }
  1486.  
  1487.   function get_cookie(name) {
  1488.     const cookies = document.cookie.split(';');
  1489.     for (const cookie of cookies) {
  1490.       const kv = cookie.split('=');
  1491.       if (kv.length === 2 && kv[0].trim() === name) {
  1492.         return decodeURIComponent(kv[1]);
  1493.       }
  1494.     }
  1495.     return '';
  1496.   }
  1497.  
  1498.   function sleep(ms) {
  1499.     return new Promise((resolve) => setTimeout(resolve, ms));
  1500.   }
  1501.  
  1502.   // helper function to modify nodes on creation
  1503.   function modify_nodes(node_selector, node_modifier, root_selector) {
  1504.     // MutationObserver (with childList: true, subtree: true) will observe every single node from the HTML as "added",
  1505.     // but for script-inserted node trees, only the root node is counted.
  1506.     // As a workaround, all subnodes of nodes matching root_selector will be checked manually
  1507.  
  1508.     const observer = new MutationObserver(mutations => {
  1509.       // for each added element
  1510.       for (const mutation of mutations) {
  1511.         for (const node of mutation.addedNodes) {
  1512.           if (node.nodeType !== Node.ELEMENT_NODE) continue;
  1513.  
  1514.           // check for match
  1515.           if (node.matches(node_selector) && node_modifier(node, observer)) { // are we done?
  1516.             observer.disconnect();
  1517.             return;
  1518.           }
  1519.  
  1520.           // check all subnodes of nodes matching root_selector
  1521.           if (root_selector && node.matches(root_selector)) {
  1522.             for (const subnode of node.getElementsByTagName('*')) {
  1523.               if (subnode.matches(node_selector) && node_modifier(subnode, observer)) {
  1524.                 observer.disconnect();
  1525.                 return;
  1526.               }
  1527.             }
  1528.           }
  1529.         }
  1530.       }
  1531.     });
  1532.  
  1533.     observer.observe(document, { childList: true, subtree: true });
  1534.  
  1535.     // it's possible we are too late to observe the element's construction, so look for it afterwards immediately
  1536.     for (const node of document.querySelectorAll(node_selector)) {
  1537.       if (node_modifier(node, observer)) {
  1538.         observer.disconnect();
  1539.         break;
  1540.       }
  1541.     }
  1542.   }
  1543.  
  1544.   // call adjust_css() as early as possible
  1545.   function modify_css() {
  1546.     const try_adjust_css = () => {
  1547.       if (document.body !== null) { // wait for body to guarantee head was loaded
  1548.         observer.disconnect();
  1549.         adjust_css();
  1550.       }
  1551.     };
  1552.  
  1553.     const observer = new MutationObserver(try_adjust_css);
  1554.     observer.observe(document, { childList: true, subtree: true });
  1555.     try_adjust_css();
  1556.   }
  1557.  
  1558.   function get_scrollbar_width() {
  1559.     const div = document.createElement('DIV');
  1560.     div.style.overflow = 'scroll';
  1561.     document.body.appendChild(div);
  1562.     const scrollbar_width = div.offsetWidth - div.clientWidth;
  1563.     div.remove();
  1564.     return scrollbar_width;
  1565.   }
  1566.  
  1567.   // (almost) deepclone an object
  1568.   function Object_clone(obj) {
  1569.     if (typeof obj === 'object') {
  1570.       // shallow clone containers
  1571.       if (obj instanceof Array) return [...obj];
  1572.       if (obj instanceof Set) return new Set(obj);
  1573.       if (obj instanceof Map) return new Map(obj);
  1574.       if (obj instanceof Hotkey) return new Hotkey(obj.action_name, obj.key, new Set(obj.modifiers));
  1575.  
  1576.       const new_obj = {};
  1577.       for (const [key, value] of Object.entries(obj))
  1578.         new_obj[key] = Object_clone(value);
  1579.       return new_obj;
  1580.     }
  1581.  
  1582.     return obj;
  1583.   }
  1584.  
  1585.   function Set_difference(a, b) {
  1586.     return new Set([...a].filter((x) => !b.has(x)));
  1587.   }
  1588.  
  1589.   function Set_union(a, b) {
  1590.     return new Set([...a, ...b]);
  1591.   }
  1592.  
  1593.   function insert_node_after(node, ref_node) {
  1594.     ref_node.parentNode.insertBefore(node, ref_node.nextSibling);
  1595.   }
  1596.  
  1597.   function get_resolution(obj) {
  1598.     if (obj.src === 'about:blank') return null;
  1599.  
  1600.     // natural size only for images, can be 0 when not yet loaded
  1601.     // note: when src is changed, this can read the old size
  1602.     if (obj.naturalWidth && obj.naturalHeight) {
  1603.       return [obj.naturalWidth, obj.naturalHeight];
  1604.     }
  1605.  
  1606.     if (obj.videoWidth && obj.videoHeight) {
  1607.       return [obj.videoWidth, obj.videoHeight];
  1608.     }
  1609.  
  1610.     return null;
  1611.   }
  1612.  
  1613.   function show_notice(logFunc, ...msg) {
  1614.     unsafeWindow.notice?.(msg[0]);
  1615.     logFunc?.(...msg);
  1616.   }
  1617.  
  1618.   function get_original_background_color() {
  1619.     // the background-color style gets changed through the (site)script, but we need the original one
  1620.     // there has to be a better way than this, right?
  1621.     const current = window.getComputedStyle(document.body).getPropertyValue('background-color');
  1622.     document.body.style.removeProperty('background-color');
  1623.     const original = window.getComputedStyle(document.body).getPropertyValue('background-color');
  1624.     document.body.style.backgroundColor = current;
  1625.     return original;
  1626.   }
  1627.  
  1628.   // "rgb(r,g,b)" -> [int(r), int(g), int(b)]
  1629.   function rgb_to_array(rgb) {
  1630.     const arr = rgb.substring(rgb.indexOf('(') + 1, rgb.lastIndexOf(')')).split(/,\s*/);
  1631.     for (let i = 0; i < arr.length; i++)
  1632.       arr[i] = parseInt(arr[i], 10);
  1633.     return arr;
  1634.   }
  1635.  
  1636.   function rgb_array_is_dark(rgb_array) {
  1637.     let avg = 0;
  1638.     for (let i = 0; i < rgb_array.length; i++)
  1639.       avg += rgb_array[i];
  1640.     avg /= rgb_array.length;
  1641.  
  1642.     return (avg <= 128);
  1643.   }
  1644.  
  1645.   function rgb_array_shift(rgb, shift) {
  1646.     const shifted = [];
  1647.     for (let i = 0; i < 3; i++)
  1648.       shifted.push(Math.min(Math.max(rgb[i] + shift, 0), 255));
  1649.  
  1650.     return shifted;
  1651.   }
  1652.  
  1653.   // [r, g, b] -> "rgb(r,g,b)"
  1654.   function rgb_array_to_rgb(rgb) {
  1655.     if (rgb.length === 3)
  1656.       return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  1657.     return 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + rgb[3] + ')';
  1658.   }
  1659.  
  1660.   function is_darkmode() {
  1661.     const theme = get_cookie('theme');
  1662.     if (theme !== '' && Number(theme) !== 0)
  1663.       return true;
  1664.  
  1665.     // fallback
  1666.     const rgb = rgb_to_array(get_original_background_color());
  1667.     return rgb_array_is_dark(rgb);
  1668.   }
  1669.  
  1670.   // helper function to adjust background colors based on light or dark mode
  1671.   function shifted_backgroundColor(shift) {
  1672.     const rgb = rgb_to_array(get_original_background_color());
  1673.     const shifted_rgb = rgb_array_shift(rgb, (is_darkmode() ? 1 : -1) * shift);
  1674.     return rgb_array_to_rgb(shifted_rgb);
  1675.   }
  1676.  
  1677.   function create_popup_menu() {
  1678.     const popup = document.createElement('DIV');
  1679.     popup.style.display = 'none';
  1680.     popup.style.padding = '6px 12px 6px 12px';
  1681.     popup.style.border = '1px solid ' + shifted_backgroundColor(32);
  1682.     popup.style.backgroundColor = get_original_background_color();
  1683.     // fixed, centered div
  1684.     popup.style.top  = '50%';
  1685.     popup.style.left = '50%';
  1686.     popup.style.transform = 'translate(-50%, -50%)';
  1687.     popup.style.position = 'fixed';
  1688.     popup.style.zIndex = '10002';
  1689.     // scroll bars if too large (resizing textareas behaves a bit weirdly on Chrome because it sets margins)
  1690.     popup.style.minWidth  = '30vw';
  1691.     popup.style.maxWidth  = '90vw';
  1692.     popup.style.maxHeight = '90vh';
  1693.     popup.style.overflow = 'auto';
  1694.     return popup;
  1695.   }
  1696.  
  1697.  
  1698.   /**************************/
  1699.   /* general site functions */
  1700.   /**************************/
  1701.  
  1702.   class Page {
  1703.     static Index     = Symbol('index/similar');
  1704.     static Upload    = Symbol('upload');
  1705.     static Post      = Symbol('post');
  1706.     static Pool      = Symbol('pool');
  1707.     static WikiNew   = Symbol('wiki new');
  1708.     static WikiEdit  = Symbol('wiki edit');
  1709.     static WikiShow  = Symbol('wiki show');
  1710.     static Tag       = Symbol('tag edit');
  1711.     static TagIndex  = Symbol('tag index');
  1712.     static Moderate  = Symbol('moderate');
  1713.     static Delete    = Symbol('delete');
  1714.     static User      = Symbol('user');
  1715.     static AddRecord = Symbol('add user record');
  1716.   }
  1717.  
  1718.   class General {
  1719.     static page;
  1720.     static thumbnail_cache = new Map(); // id -> array of thumbnail elements
  1721.   }
  1722.  
  1723.   class IndexPage {
  1724.     static has_tag_scripts;
  1725.  
  1726.     static init() {
  1727.       if (General.page !== Page.Index) return;
  1728.  
  1729.       IndexPage.has_tag_scripts = (document.querySelector('#mode > option[value=apply-tag-script]') !== null);
  1730.     }
  1731.   }
  1732.  
  1733.   class PostPage {
  1734.     static post_id = null;
  1735.     static parent_id = null;
  1736.  
  1737.     static init() {
  1738.       if (General.page !== Page.Post) return;
  1739.  
  1740.       PostPage.post_id = document.getElementById('hidden_post_id')?.innerText;
  1741.       PostPage.parent_id = document.getElementById('post_parent_id')?.value;
  1742.     }
  1743.   }
  1744.  
  1745.   class WikiPage {
  1746.     static tag = null;
  1747.  
  1748.     static init() {
  1749.       if (![Page.WikiNew, Page.WikiEdit, Page.WikiShow].includes(General.page)) return;
  1750.  
  1751.       // /wiki/edit?title=<tag>
  1752.       const params = new URL(window.location.href).searchParams;
  1753.       const title = params.get('title');
  1754.       if (title) {
  1755.         WikiPage.tag = title;
  1756.       } else {
  1757.         // /wiki/<tag> or potentially /wiki/<tag>/edit
  1758.         const pathname = window.location.pathname;
  1759.         const a = pathname.lastIndexOf('/wiki/') + 6;
  1760.         let b = pathname.indexOf('/', a + 1);
  1761.         if (b === -1) b = pathname.length;
  1762.         WikiPage.tag = decodeURIComponent(pathname.substring(a, b));
  1763.       }
  1764.     }
  1765.   }
  1766.  
  1767.   class PoolPage {
  1768.     static pool_id = null;
  1769.  
  1770.     static init() {
  1771.       if (General.page !== Page.Pool) return;
  1772.  
  1773.       PoolPage.pool_id = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
  1774.     }
  1775.   }
  1776.  
  1777.  
  1778.   function get_search_url(tags) {
  1779.     const url = new URL(window.location.origin);
  1780.     const params = new URLSearchParams();
  1781.     params.append('tags', tags);
  1782.     url.search = params.toString();
  1783.     return url.href;
  1784.   }
  1785.  
  1786.   function get_search_tags(location) {
  1787.     location ??= window.location;
  1788.     return new Tags(new URL(location.href).searchParams.get('tags'));
  1789.   }
  1790.  
  1791.   function get_username() { // won't work on every page
  1792.     // read from the 'My Favorites' button (in one of the subnavs) in the navbar
  1793.     for (const a of document.querySelectorAll('#navbar a')) {
  1794.       if (typeof a.href !== 'string') continue;
  1795.  
  1796.       for (const tag of new Tags(new URL(a.href).searchParams.get('tags'))) {
  1797.         if (tag.startsWith('fav:')) {
  1798.           return tag.substring('fav:'.length);
  1799.         }
  1800.       }
  1801.     }
  1802.  
  1803.     return null;
  1804.   }
  1805.  
  1806.   // is own uploads or favorites page
  1807.   let personal_cache = null;
  1808.   function is_personal_post_page() {
  1809.     if (personal_cache !== null) return personal_cache;
  1810.  
  1811.     const username = get_username();
  1812.     if (username === null) {
  1813.       personal_cache = false;
  1814.       return false;
  1815.     }
  1816.  
  1817.     const tags = get_search_tags();
  1818.     personal_cache = tags.has('fav:' + username) || tags.has('user:' + username);
  1819.     return personal_cache;
  1820.   }
  1821.  
  1822.   function hide_headerlogo(hide) {
  1823.     const logo = document.querySelector('#header .top-bar');
  1824.     const news = document.querySelector('#header .carousel');
  1825.     if (hide) {
  1826.       if (logo) logo.style.display = 'none';
  1827.       if (news) news.style.display = 'none';
  1828.     } else {
  1829.       if (logo) logo.style.removeProperty('display');
  1830.       if (news) news.style.removeProperty('display');
  1831.     }
  1832.   }
  1833.  
  1834.   function add_config_dialog() {
  1835.     const cfg_dialog = create_popup_menu();
  1836.     cfg_dialog.style.zIndex = '10010';
  1837.     cfg_dialog.id = 'cfg_dialog';
  1838.  
  1839.     // generate the content of the config menu
  1840.     let innerDivHTML = `<div style='font-weight: bold; margin-bottom: 6px;'>SankakuAddon ${VERSION}</div>`;
  1841.     // + `<hr style='margin-top: 0; margin-bottom: 2px; border:1px solid ${shifted_backgroundColor(32)};'>`;
  1842.  
  1843.     // add tabs, TODO: they're ugly especially in dark mode
  1844.     innerDivHTML += '<div id="cfg_tabs" style="display: flex; white-space: nowrap;">';
  1845.     for (const [key, value] of Object.entries(CONFIG_TABS_TEMPLATE))
  1846.       innerDivHTML += `<button id="cfg_tab_${key}" style="border-style: solid; padding: 0 2px 0 2px; margin: 0 2px 0 2px; background-color: transparent; border-bottom-width: 0; cursor: pointer">${value.name}</button>`;
  1847.     innerDivHTML += '</div>';
  1848.  
  1849.     // add bodies
  1850.     for (const [body_key, body] of Object.entries(CONFIG_CATEGORY_TEMPLATE)) {
  1851.       innerDivHTML += `<div id="cfg_body_${body_key}" style="background-color: rgba(128, 128, 128, 0.1); margin-bottom: 4px; padding: 0 4px 2px 4px;">`
  1852.         + `<h5>${body.name}</h5>`;
  1853.  
  1854.       // add config elements for each body
  1855.       for (const key of body.entries) {
  1856.         const value = SETTINGS_TEMPLATE[key];
  1857.  
  1858.         if (value === undefined) {
  1859.           console.error(`couldn't find SETTINGS_TEMPLATE[${key}]`);
  1860.           continue;
  1861.         }
  1862.  
  1863.         const generate_span = () => `<span style="vertical-align: middle; ${value.title ? 'cursor:help; text-decoration: underline dashed; ' : ''}" `
  1864.           + `${value.title ? `title="${value.title}"` : ''} >${value.desc}</span>`;
  1865.  
  1866.         innerDivHTML += '<div>';
  1867.         switch (value.type) {
  1868.           case 'checkbox':
  1869.             innerDivHTML += `<input id='${KEY_PREFIX}${key}' type='checkbox' style='vertical-align: middle; margin: 3px 4px 3px 4px;'>`;
  1870.             innerDivHTML += generate_span();
  1871.             // hardcoded elements:
  1872.             innerDivHTML += (key === 'set_video_volume' ? `<input id="${KEY_PREFIX}video_volume" type="number" min="0" max="100" size="4">%` : '');
  1873.             innerDivHTML += (key === 'load_highres' ? `<input id="${KEY_PREFIX}highres_limit" type="number" min="0" max="4000000" size="10"> bytes` : '');
  1874.             break;
  1875.           case 'select':
  1876.             innerDivHTML += generate_span();
  1877.             innerDivHTML += `<select id="${KEY_PREFIX}${key}">`;
  1878.             for (const [k, v] of Object.entries(value.options))
  1879.               innerDivHTML += `<option value="${k}">${v}</option>`;
  1880.             innerDivHTML += '</select>';
  1881.             break;
  1882.           case 'range':
  1883.             innerDivHTML += generate_span();
  1884.             innerDivHTML += `<input id="${KEY_PREFIX}${key}" type="range" min="${value.min}" max="${value.max}" style="vertical-align: middle;">`;
  1885.             break;
  1886.           case 'text':
  1887.             innerDivHTML += generate_span();
  1888.             innerDivHTML += `<textarea id="${KEY_PREFIX}${key}" rows=8 style='width: 100%; box-sizing: border-box; max-width: unset; margin-top: 0;'></textarea>`;
  1889.             break;
  1890.           case 'hotkey':
  1891.             innerDivHTML += `<input id='${KEY_PREFIX}${key}_ctrl' type='checkbox' style='vertical-align: middle; margin: 3px 4px 3px 4px;'>`;
  1892.             innerDivHTML += '<span style="vertical-align: middle;">ctrl</span>';
  1893.             innerDivHTML += `<input id='${KEY_PREFIX}${key}_alt' type='checkbox' style='vertical-align: middle; margin: 3px 4px 3px 4px;'>`;
  1894.             innerDivHTML += '<span style="vertical-align: middle;">alt</span>';
  1895.             innerDivHTML += `<input id='${KEY_PREFIX}${key}_shift' type='checkbox' style='vertical-align: middle; margin: 3px 4px 3px 4px;'>`;
  1896.             innerDivHTML += '<span style="vertical-align: middle;">shift</span>';
  1897.             innerDivHTML += `<input id='${KEY_PREFIX}${key}_key' type='text' maxLength='1' size='1' style='vertical-align: middle; margin: 3px 4px 3px 4px;'>`;
  1898.             innerDivHTML += generate_span();
  1899.             break;
  1900.           default:
  1901.             show_notice(console.error, '[addon error] CONFIG_TEMPLATE is defective!', value.type);
  1902.             continue;
  1903.         }
  1904.         innerDivHTML += '</div>';
  1905.       }
  1906.  
  1907.       innerDivHTML += '</div>';
  1908.     }
  1909.  
  1910.     innerDivHTML += '<div style="padding: 2px">';
  1911.     innerDivHTML +=  '<button id="config_close" style="cursor: pointer; margin-right: 6px">Close</button>';
  1912.     innerDivHTML +=  '<button id="config_reset" style="cursor: pointer;" title="Resets all settings to default (but doesn\'t clear post history)">Reset settings</button>';
  1913.     innerDivHTML +=  '<button id="history_clear" style="cursor: pointer;" title="Clears the post view history for the current site (chan or idol)">Clear post view history</button>';
  1914.     innerDivHTML += '</div>';
  1915.     innerDivHTML += '<div style="padding: 2px">&nbsp;Most settings require a page reload.</div>';
  1916.  
  1917.     cfg_dialog.innerHTML = innerDivHTML;
  1918.  
  1919.     // adjust inline SVG icons
  1920.     for (const svg of cfg_dialog.querySelectorAll('svg')) {
  1921.       svg.style.width = '1rem';
  1922.       svg.style.verticalAlign = 'middle';
  1923.     }
  1924.  
  1925.     document.body.appendChild(cfg_dialog);
  1926.  
  1927.     // hide non-default categories
  1928.     for (const [other_tab_name, other_tab] of Object.entries(CONFIG_TABS_TEMPLATE)) {
  1929.       if (other_tab_name !== 'general') {
  1930.         for (const category of other_tab.categories)
  1931.           document.getElementById(`cfg_body_${category}`).style.display = 'none';
  1932.       }
  1933.     }
  1934.  
  1935.     // add events
  1936.     document.getElementById('config_close').onclick = () => { show_config_dialog(false); return false; };
  1937.     document.getElementById('config_reset').onclick = () => {
  1938.       if (window.confirm('Are you sure?\nThis will reset ALL settings, including templates and the tag menu tags!')) {
  1939.         reset_config();
  1940.         show_notice(console.log, '[addon] reset all settings');
  1941.       }
  1942.       return false;
  1943.     };
  1944.     document.getElementById('history_clear').onclick = () => {
  1945.       if (window.confirm('Are you sure you want to clear the post view history?')) {
  1946.         reset_setting(HISTORY_KEY);
  1947.         show_notice(console.log, '[addon] reset post view history');
  1948.       }
  1949.       return false;
  1950.     };
  1951.  
  1952.     // tab events
  1953.     for (const [tab_name, tab] of Object.entries(CONFIG_TABS_TEMPLATE)) {
  1954.       document.getElementById(`cfg_tab_${tab_name}`).onclick = () => {
  1955.         // hide categories of other tabs
  1956.         for (const [other_tab_name, other_tab] of Object.entries(CONFIG_TABS_TEMPLATE)) {
  1957.           if (other_tab_name !== tab_name) {
  1958.             for (const category of other_tab.categories) {
  1959.               document.getElementById(`cfg_body_${category}`).style.display = 'none';
  1960.             }
  1961.           }
  1962.         }
  1963.  
  1964.         // show categories for given tab
  1965.         for (const category of tab.categories) {
  1966.           document.getElementById(`cfg_body_${category}`).style.display = 'block';
  1967.         }
  1968.       };
  1969.     }
  1970.  
  1971.     foreach_config_element((cfg_elem, key, get_value) => {
  1972.       cfg_elem.addEventListener('change', () => {
  1973.         update_setting(key, get_value());
  1974.         save_setting(key, get_value());
  1975.       });
  1976.     });
  1977.  
  1978.     // configure hotkey elements
  1979.     for (const [page, actions] of Object.entries(HOTKEY_ACTIONS)) {
  1980.       for (const name of Object.keys(actions)) {
  1981.         for (const suffix of ['ctrl', 'alt', 'shift', 'key']) {
  1982.           const cfg_elem = document.getElementById(`${KEY_PREFIX}${page}_hotkeys.${name}_${suffix}`);
  1983.           cfg_elem.addEventListener('change', () => {
  1984.             const hotkeys = get_hotkeys(page);
  1985.             update_setting(`${page}_hotkeys`, hotkeys);
  1986.             save_setting(`${page}_hotkeys`, hotkeys);
  1987.           });
  1988.         }
  1989.       }
  1990.     }
  1991.   }
  1992.  
  1993.   function get_hotkeys(page) { // get from config dialog
  1994.     const hotkeys = [];
  1995.  
  1996.     for (const [name, action] of Object.entries(HOTKEY_ACTIONS[page])) {
  1997.       const modifiers = new Set();
  1998.       for (const mod of ['ctrl', 'alt', 'shift']) {
  1999.         if (document.getElementById(`${KEY_PREFIX}${page}_hotkeys.${name}_${mod}`).checked) {
  2000.           modifiers.add(mod);
  2001.         }
  2002.       }
  2003.  
  2004.       const key = document.getElementById(`${KEY_PREFIX}${page}_hotkeys.${name}_key`).value;
  2005.       if (key.length !== 0) {
  2006.         hotkeys.push(new Hotkey(name, key, modifiers));
  2007.       }
  2008.     }
  2009.  
  2010.     return hotkeys;
  2011.   }
  2012.  
  2013.   function update_hotkeys(page) {
  2014.     // reset all hotkey config elements
  2015.     for (const name of Object.keys(HOTKEY_ACTIONS[page])) {
  2016.       for (const mod of ['ctrl', 'alt', 'shift']) {
  2017.         const el = document.getElementById(`${KEY_PREFIX}${page}_hotkeys.${name}_${mod}`);
  2018.         if (el !== null)
  2019.           el.checked = false;
  2020.       }
  2021.       const el = document.getElementById(`${KEY_PREFIX}${page}_hotkeys.${name}_key`);
  2022.       if (el !== null)
  2023.         el.value = '';
  2024.     }
  2025.  
  2026.     // update hotkey config elements
  2027.     for (const hotkey of config[`${page}_hotkeys`]) {
  2028.       const key_el = document.getElementById(`${KEY_PREFIX}${page}_hotkeys.${hotkey.action_name}_key`);
  2029.       if (key_el !== null)
  2030.         key_el.value = hotkey.key;
  2031.  
  2032.       for (const mod of ['ctrl', 'alt', 'shift']) {
  2033.         const mod_el = document.getElementById(`${KEY_PREFIX}${page}_hotkeys.${hotkey.action_name}_${mod}`);
  2034.         if (mod_el !== null)
  2035.           mod_el.checked = hotkey.modifiers.has(mod);
  2036.       }
  2037.     }
  2038.   }
  2039.  
  2040.   function add_config_button() {
  2041.     const navbar = document.getElementById('navbar');
  2042.     if (navbar === null) return;
  2043.  
  2044.     navbar.style.whiteSpace = 'nowrap'; // hack to fit config button
  2045.  
  2046.     const a = document.createElement('A');
  2047.     a.href = '#';
  2048.     a.onclick = () => { show_config_dialog(true); return false; };
  2049.     a.innerHTML = '<span style="font-size: 110%;">⚙</span> Addon config';
  2050.  
  2051.     // close when clicking outside
  2052.     document.addEventListener('click', (e) => {
  2053.       if (is_config_dialog_visible()) {
  2054.         if (e.target.closest('#cfg_dialog') !== null)
  2055.           return; // clicked inside
  2056.  
  2057.         show_config_dialog(false);
  2058.         e.preventDefault();
  2059.       }
  2060.     }, true);
  2061.  
  2062.     const li = document.createElement('LI');
  2063.     li.className = 'lang-select'; // match style of top bar
  2064.     li.appendChild(a);
  2065.     navbar.appendChild(document.createTextNode('\u00A0')); // add nbsp
  2066.     navbar.appendChild(li);
  2067.   }
  2068.  
  2069.   function add_tag_search_buttons() {
  2070.     for (const item of document.querySelectorAll('#tag-sidebar li')) {
  2071.       const taglink = item.querySelector('a');
  2072.       if (taglink === null) continue;
  2073.  
  2074.       const tagname = get_search_tags(taglink).toString();
  2075.  
  2076.       const get_click_listener = (tag) => {
  2077.         return () => {
  2078.           const search_field = document.getElementById('tags');
  2079.           const search_tags = new Tags(search_field.value);
  2080.  
  2081.           search_tags.toggle(tag);
  2082.  
  2083.           search_field.value = search_tags.toString() + ' ';
  2084.  
  2085.           search_field.setSelectionRange(search_field.value.length, search_field.value.length);
  2086.           search_field.focus({ preventScroll: true });
  2087.  
  2088.           return false;
  2089.         };
  2090.       };
  2091.  
  2092.       const add_search_button = (tag_prefix) => {
  2093.         const a = document.createElement('A');
  2094.         a.href = '#';
  2095.         a.innerText = tag_prefix;
  2096.         a.onclick = get_click_listener((tag_prefix === '+' ? '' : tag_prefix) + tagname);
  2097.  
  2098.         taglink.parentNode.insertBefore(a, taglink);
  2099.         taglink.parentNode.insertBefore(document.createTextNode(' '), taglink);
  2100.       };
  2101.  
  2102.       add_search_button('+');
  2103.       add_search_button('-');
  2104.       if (config.or_tag_search_button)
  2105.         add_search_button('~');
  2106.     }
  2107.   }
  2108.  
  2109.   function add_tag_post_counts() {
  2110.     for (const item of document.querySelectorAll('#tag-sidebar li')) {
  2111.       const post_count = item.querySelector('.tag-link')?.dataset?.count;
  2112.       if (!post_count) continue;
  2113.  
  2114.       const span = document.createElement('span');
  2115.       span.style.color = 'grey';
  2116.       span.innerText = post_count;
  2117.       item.appendChild(span);
  2118.     }
  2119.   }
  2120.  
  2121.   // needs to run before add_tag_search_buttons
  2122.   function collect_tag_categories() {
  2123.     for (const category of TAG_CATEGORIES) {
  2124.       for (const li of document.querySelectorAll(`.tag-type-${category}`)) {
  2125.         const taglink = li.querySelector('a');
  2126.         if (taglink === null) continue;
  2127.  
  2128.         const tag = get_search_tags(taglink).toString();
  2129.         config.tag_categories.set(tag, category);
  2130.         config.tag_category_colors.set(category, window.getComputedStyle(taglink, null).getPropertyValue('color'));
  2131.       }
  2132.     }
  2133.  
  2134.     adjust_tag_color_css(); // add another copy to reflect newly learned colors
  2135.  
  2136.     if (config.save_tag_categories) {
  2137.       // TODO this has the same storage race condition issue as the view history and the solution is way too complex and inefficient to implement here...
  2138.       save_setting('tag_categories', config.tag_categories);
  2139.       save_setting('tag_category_colors', config.tag_category_colors);
  2140.     }
  2141.   }
  2142.  
  2143.   const collapser_map = new Map(); // category -> [collapser, tags]
  2144.   const collapser_color_map = new Map(); // category -> font color
  2145.  
  2146.   function collapse_tag_category(category, collapse, save = true) {
  2147.     const [collapser, tags] = collapser_map.get(category);
  2148.  
  2149.     const a = collapser.children[0];
  2150.     const middle_div = a.children[1];
  2151.  
  2152.     // collapse/expand category
  2153.     if (collapse) {
  2154.       for (const tag of tags)
  2155.         tag.style.display = 'none';
  2156.     } else {
  2157.       for (const tag of tags)
  2158.         tag.style.removeProperty('display');
  2159.     }
  2160.  
  2161.     // change collapser visuals
  2162.     if ([0, 2].includes(config.tag_category_collapser_style)) { // compact style
  2163.       if (collapse) {
  2164.         middle_div.style.height = '0';
  2165.         middle_div.style.borderTopWidth = '3px';
  2166.         middle_div.style.borderBottomWidth = '3px';
  2167.         middle_div.style.marginTop = '3px';
  2168.         middle_div.style.marginBottom = '3px';
  2169.       } else {
  2170.         middle_div.style.height = '4px';
  2171.         middle_div.style.borderTopWidth = '2px';
  2172.         middle_div.style.borderBottomWidth = '2px';
  2173.         middle_div.style.marginTop = '2px';
  2174.         middle_div.style.marginBottom = '2px';
  2175.       }
  2176.     } else if (config.tag_category_collapser_style === 1) { // with category name
  2177.       if (collapse) {
  2178.         // swap border and font color
  2179.         middle_div.style.color = get_original_background_color();
  2180.         middle_div.style.backgroundColor = collapser_color_map.get(category);
  2181.       } else {
  2182.         middle_div.style.removeProperty('color');
  2183.         middle_div.style.removeProperty('background-color');
  2184.       }
  2185.     }
  2186.  
  2187.     // retain collapse state
  2188.     if (collapse) config.collapsed_tag_categories.add(category);
  2189.     else          config.collapsed_tag_categories.delete(category);
  2190.  
  2191.     if (save) save_setting('collapsed_tag_categories', config.collapsed_tag_categories);
  2192.   }
  2193.  
  2194.   let drag_collapse = false;
  2195.   let drag_collapse_categories;
  2196.  
  2197.   function drag_collapse_down(e) {
  2198.     e.preventDefault();
  2199.     drag_collapse = true;
  2200.  
  2201.     const category = e.currentTarget.className;
  2202.     drag_collapse_categories = !config.collapsed_tag_categories.has(category);
  2203.  
  2204.     collapse_tag_category(category, drag_collapse_categories);
  2205.   }
  2206.  
  2207.   function drag_collapse_move(e) {
  2208.     if (!drag_collapse) return;
  2209.  
  2210.     const category = e.currentTarget.className;
  2211.  
  2212.     if (drag_collapse_categories !== config.collapsed_tag_categories.has(category))
  2213.       collapse_tag_category(category, drag_collapse_categories);
  2214.   }
  2215.  
  2216.   function drag_collapse_up() {
  2217.     drag_collapse = false;
  2218.   }
  2219.  
  2220.   function add_tag_category_collapser() {
  2221.     const tagsidebar = document.getElementById('tag-sidebar');
  2222.     if (tagsidebar === null) return;
  2223.  
  2224.     // remove default category names for compact styles
  2225.     if (config.tag_category_collapser_style < 2) {
  2226.       for (const title of document.querySelectorAll('#tag-sidebar > h6, #tag-sidebar > br')) {
  2227.         title.remove();
  2228.       }
  2229.     }
  2230.  
  2231.     const items = tagsidebar.getElementsByTagName('LI');
  2232.  
  2233.     window.addEventListener('mouseup', drag_collapse_up);
  2234.  
  2235.     const setup_collapser = (collapser, category, tags) => {
  2236.       collapser_map.set(category, [collapser, tags]);
  2237.  
  2238.       collapser.addEventListener('mousedown', drag_collapse_down);
  2239.       collapser.addEventListener('mousemove', drag_collapse_move);
  2240.       for (const tag of tags)
  2241.         tag.addEventListener('mousemove', drag_collapse_move);
  2242.     };
  2243.  
  2244.     let curr_category = null;
  2245.     let curr_category_tags = [];
  2246.     let prev_category_collapser = null;
  2247.     const categories = [];
  2248.  
  2249.     for (const item of items) {
  2250.       if (item.className === curr_category) {
  2251.         curr_category_tags.push(item);
  2252.       } else { // reached new category
  2253.         if (prev_category_collapser !== null)
  2254.           setup_collapser(prev_category_collapser, curr_category, [...curr_category_tags]);
  2255.  
  2256.         // remember category color, workaround for color changing on hover
  2257.         for (const a of item.getElementsByTagName('A')) {
  2258.           collapser_color_map.set(item.className, window.getComputedStyle(a).getPropertyValue('color'));
  2259.           break;
  2260.         }
  2261.  
  2262.         curr_category = item.className;
  2263.         curr_category_tags = []; // item will be pushed in the next iteration, see warning below
  2264.         categories.push(curr_category);
  2265.  
  2266.         const a = document.createElement('A');
  2267.         a.href = '#';
  2268.         a.addEventListener('click', (e) => e.preventDefault());
  2269.  
  2270.         // collapser visuals
  2271.         a.style.display = 'flex';
  2272.         a.style.justifyContent = 'center';
  2273.         a.style.alignItems = 'center';
  2274.  
  2275.         if ([0, 2].includes(config.tag_category_collapser_style)) { // compact style
  2276.           a.innerHTML =
  2277.             '<div style="width:40%; height: 0; border-top-width: 1px; border-bottom-width: 1px; border-style: solid;"></div>' +
  2278.             '<div style="width:5%;  height: 4px; border-width: 2px; margin: 2px 2px 2px 2px; border-style: solid"></div>' +
  2279.             '<div style="width:40%; height: 0; border-top-width: 1px; border-bottom-width: 1px; border-style: solid;"></div>';
  2280.         } else { // with category name
  2281.           const category_name = curr_category.substring('tag-type-'.length);
  2282.  
  2283.           a.style.paddingLeft = '2.5%';
  2284.           a.style.paddingRight = '2.5%';
  2285.           a.innerHTML =
  2286.             '<div style="width:50%; height: 0; border-top-width: 1px; border-bottom-width: 1px; border-style: solid;"></div>' +
  2287.             `<div style="border-width: 2px; margin: 2px 2px 2px 2px; padding-left: 4px; padding-right: 4px; border-style: solid">${category_name}</div>` +
  2288.             '<div style="width:50%; height: 0; border-top-width: 1px; border-bottom-width: 1px; border-style: solid;"></div>';
  2289.         }
  2290.  
  2291.         const collapser = document.createElement('LI');
  2292.         collapser.className = item.className;
  2293.         collapser.appendChild(a);
  2294.         prev_category_collapser = collapser;
  2295.  
  2296.         // warning: modifies iterating list, current item will be processed twice
  2297.         item.insertAdjacentElement('beforebegin', collapser);
  2298.       }
  2299.     }
  2300.  
  2301.     // setup last collapser
  2302.     if (prev_category_collapser !== null)
  2303.       setup_collapser(prev_category_collapser, curr_category, [...curr_category_tags]);
  2304.  
  2305.     for (const category of categories)
  2306.       if (config.collapsed_tag_categories.has(category))
  2307.         collapse_tag_category(category, true, false);
  2308.   }
  2309.  
  2310.   function get_thumbnail_post_id(thumb) {
  2311.     return thumb.dataset.id ?? null;
  2312.   }
  2313.  
  2314.   const post_cache = new Map(); // returns object with tags array and rating
  2315.   function get_post(post_id) {
  2316.     // might not be loaded yet or exist at all (e.g on deletion page)
  2317.     const internalPost = unsafeWindow.Post?.posts[post_id];
  2318.     if (internalPost !== undefined) {
  2319.       const post = { ...internalPost };
  2320.  
  2321.       const fix_rating = (rating) => {
  2322.         const rating_translation = { 's': 'g', 'q': 'r15+', 'e': 'r18+' };
  2323.         if (rating_translation.hasOwnProperty(rating)) return rating_translation[rating];
  2324.         return rating;
  2325.       };
  2326.  
  2327.       post.rating = fix_rating(post.rating);
  2328.  
  2329.       return post;
  2330.     }
  2331.  
  2332.     const post = post_cache.get(post_id);
  2333.     if (post !== undefined) return post;
  2334.  
  2335.     return null;
  2336.   }
  2337.  
  2338.   function get_post_from_thumb(thumb) {
  2339.     const img = thumb.querySelector('img.post-preview-image');
  2340.     if (img === null) {
  2341.       show_notice(console.error, '[addon error] thumbnail has no preview image');
  2342.       return null;
  2343.     }
  2344.  
  2345.     const post_id = get_thumbnail_post_id(thumb);
  2346.     let post = get_post(post_id);
  2347.  
  2348.     if (post !== null) return post;
  2349.  
  2350.     let tags = new Tags(img.dataset['auto_page']).toArray();
  2351.  
  2352.     // find rating
  2353.     let rating = null;
  2354.     for (const tag of tags) {
  2355.       if (tag.startsWith('Rating:')) {
  2356.         rating = tag.substring('Rating:'.length).toLowerCase();
  2357.         break;
  2358.       }
  2359.     }
  2360.  
  2361.     // remove "match tags"
  2362.     tags = tags.filter((tag) => {
  2363.       return !(tag.startsWith('Rating:') || tag.startsWith('Score:') || tag.startsWith('Size:') || tag.startsWith('User:'));
  2364.     });
  2365.  
  2366.     post = {
  2367.       tags,
  2368.       rating,
  2369.     };
  2370.  
  2371.     post_cache.set(post_id, post);
  2372.  
  2373.     return post;
  2374.   }
  2375.  
  2376.   function modify_thumbnail(preview_image) {
  2377.     // expected layout:
  2378.     // article.post-preview > div.post-preview-container > a.post-preview-link > picture > img.post-preview-image
  2379.     // MutationObserver is waiting for innermost .post-preview-image to ensure all the necessary data is there
  2380.  
  2381.     const thumb_a = preview_image?.closest('a.post-preview-link');
  2382.     const thumb = preview_image?.closest('.post-preview');
  2383.  
  2384.     if (!thumb_a) {
  2385.       show_notice(console.error, '[addon error] couldn\'t find thumbnail link');
  2386.       return;
  2387.     } else if (!thumb) {
  2388.       show_notice(console.error, '[addon error] couldn\'t find outer thumbnail');
  2389.       return;
  2390.     }
  2391.  
  2392.     const post_id = get_thumbnail_post_id(thumb);
  2393.     if (post_id === null) return;
  2394.  
  2395.     // use and update thumbnail_cache
  2396.     const thumbs = General.thumbnail_cache.get(post_id) ?? [];
  2397.  
  2398.     const is_new = !thumbs.includes(thumb);
  2399.  
  2400.     if (is_new) thumbs.push(thumb);
  2401.     General.thumbnail_cache.set(post_id, thumbs);
  2402.  
  2403.     if (is_new) {
  2404.       override_thumbnail_click_event(thumb_a);
  2405.       add_thumbnail_icons(thumb);
  2406.  
  2407.       if (!is_personal_post_page() && General.page !== Page.Delete)
  2408.         fadeout_viewed_post(thumb, post_id);
  2409.     }
  2410.   }
  2411.  
  2412.   function add_thumbnail_icons(thumb) {
  2413.     if (!(config.show_speaker_icon || config.show_animated_icon || config.show_ratings_icon)) return;
  2414.  
  2415.     const post = get_post_from_thumb(thumb);
  2416.     if (post == null) return;
  2417.  
  2418.     const icons = document.createElement('SPAN');
  2419.     icons.style.whiteSpace = 'nowrap';
  2420.  
  2421.     if (config.show_ratings_icon) {
  2422.       icons.insertAdjacentHTML('beforeend', RATING_SVG[post.rating]);
  2423.     }
  2424.  
  2425.     if (config.show_speaker_icon && (post.tags.includes('has_audio'))) {
  2426.       icons.insertAdjacentHTML('beforeend', SPEAKER_SVG);
  2427.     } else if (config.show_animated_icon && (post.tags.includes('animated') || post.tags.includes('video') || post.tags.includes('slideshow'))) {
  2428.       icons.insertAdjacentHTML('beforeend', ANIMATED_SVG);
  2429.     }
  2430.  
  2431.     icons.className = 'thumbnail_icons';
  2432.     icons.style.position = 'absolute';
  2433.     icons.style.top   = '2px'; // account for border
  2434.     icons.style.right = '2px';
  2435.     icons.style.transform = `translateX(${SVG_SIZE / 2}px) translateY(-${SVG_SIZE / 2}px)`;
  2436.  
  2437.     thumb.querySelector('a').appendChild(icons);
  2438.   }
  2439.  
  2440.   function fadeout_post(thumb) {
  2441.     if (!config.view_history_enabled) return;
  2442.  
  2443.     const a = thumb.querySelector('a');
  2444.     const img = thumb.querySelector('img');
  2445.  
  2446.     // move box shadow from image to link, so opacity doesn't affect it
  2447.     a.style.display = 'inline-block';
  2448.     a.style.boxShadow = window.getComputedStyle(img).getPropertyValue('box-shadow');
  2449.     img.style.removeProperty('box-shadow');
  2450.  
  2451.     img.style.opacity = '20%';
  2452.     for (const thumbnail_icons of thumb.getElementsByClassName('thumbnail_icons'))
  2453.       thumbnail_icons.style.opacity = '20%';
  2454.   }
  2455.  
  2456.   function fadeout_viewed_post(thumb, id) {
  2457.     if (config[HISTORY_KEY].has(id))
  2458.       fadeout_post(thumb);
  2459.   }
  2460.  
  2461.   function configure_video(node) {
  2462.     if (config.video_pause)      node.pause();
  2463.     if (config.set_video_volume) node.volume = config.video_volume / 100.0;
  2464.     if (config.video_mute)       node.muted = true;
  2465.     node.controls = config.video_controls;
  2466.   }
  2467.  
  2468.   function useful_beta_link() { // idea and some code donated by Octopus Hugger
  2469.     const betaLink = new URL('https://beta.sankakucomplex.com/');
  2470.  
  2471.     if (General.page === Page.Index) {
  2472.       betaLink.search = window.location.search;
  2473.  
  2474.     } else if (General.page === Page.Post) {
  2475.         betaLink.pathname = `/post/show/${PostPage.post_id}`;
  2476.  
  2477.     } else if (General.page === Page.User) {
  2478.       const username = document.querySelector('.user-show-heading > h2')?.innerText.replaceAll(' ', '_');
  2479.  
  2480.       betaLink.pathname = '/user/show';
  2481.       betaLink.searchParams.set('name', username);
  2482.  
  2483.     } else if (General.page === Page.WikiNew) {
  2484.       betaLink.pathname = '/wiki/create_article';
  2485.       betaLink.searchParams.set('tagName', WikiPage.tag);
  2486.  
  2487.     } else if (General.page === Page.WikiEdit) {
  2488.       betaLink.pathname = '/wiki/edit_article';
  2489.       betaLink.searchParams.set('tagName', WikiPage.tag);
  2490.  
  2491.     } else if (General.page === Page.WikiShow) {
  2492.       betaLink.pathname = '/tag/en';
  2493.       betaLink.searchParams.set('tagName', WikiPage.tag);
  2494.  
  2495.     } else if (General.page === Page.Pool) {
  2496.       betaLink.pathname = '/books/' + PoolPage.pool_id;
  2497.     }
  2498.  
  2499.     // update beta link
  2500.     for (const a of document.querySelectorAll('#navbar a[href="https://beta.sankakucomplex.com/"]')) {
  2501.       a.href = betaLink.href;
  2502.     }
  2503.   }
  2504.  
  2505.  
  2506.   /***********************************************/
  2507.   /* main page / visually similar page functions */
  2508.   /***********************************************/
  2509.  
  2510.   function select_mode(mode) {
  2511.     const mode_dropdown = document.getElementById('mode');
  2512.  
  2513.     const old_mode = mode_dropdown.value;
  2514.     mode_dropdown.value = mode;
  2515.     if (!mode_dropdown.value) mode_dropdown.value = old_mode; // couldn't set mode (option doesn't exist)
  2516.  
  2517.     PostModeMenu_change_override();
  2518.   }
  2519.  
  2520.   function add_mode_options() {
  2521.     const mode_dropdown = document.getElementById('mode');
  2522.     if (mode_dropdown === null) return; // not logged in
  2523.  
  2524.     const add_mode_option = (text, value) => {
  2525.       const option = document.createElement('option');
  2526.       option.text  = text;
  2527.       option.value = value;
  2528.       mode_dropdown.add(option);
  2529.     };
  2530.  
  2531.     if (IndexPage.has_tag_scripts) {
  2532.       add_mode_option('Choose Parent', 'choose-parent');
  2533.       add_mode_option('Set Parent', 'set-parent');
  2534.     }
  2535.     // add_mode_option('Edit Tags', 'edit-tags'); // TODO: currently broken due to requiring an authenticity token
  2536.     add_mode_option('Find Similar', 'find-similar');
  2537.     if (IndexPage.has_tag_scripts) add_mode_option('Delete Post', 'delete'); // rough estimate of user permissions
  2538.  
  2539.     override_mode_change_event(mode_dropdown);
  2540.  
  2541.     PostModeMenu_init_workaround(); // guarantee that 'mode' correctly changes to new modes when loading page
  2542.   }
  2543.  
  2544.   function add_post_edit_dialog() {
  2545.     const dialog = create_popup_menu();
  2546.     dialog.id = 'post_edit_dialog';
  2547.     dialog.style.borderWidth = '4px';
  2548.  
  2549.     // edit box, modified from the post page
  2550.     dialog.innerHTML =
  2551.       `<div id="SA-edit" style="display: flex; align-items: center;">
  2552. <div style="width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; margin-right: 12px">
  2553. <img id="SA-edit-image" src="${EMPTY_IMAGE}">
  2554. </div>
  2555. <div>
  2556. <h5><a id="post-link" href="" target="_blank"></a></h5>
  2557. <form id="SA-edit-form" method="post" style="width: fit-content">
  2558. <input id="SA-post_old_tags" name="post[old_tags]" type="hidden" value="">
  2559. <table class="form">
  2560. <tfoot>
  2561. <tr>
  2562. <td colspan="2" style="white-space: nowrap"><input accesskey="s" name="commit" tabindex="11" type="submit" value="Save changes" style="min-width: 13.5em;">
  2563. </td>
  2564. </tr>
  2565. </tfoot>
  2566. <tbody>
  2567. <tr>
  2568. <th style="width: 10%">
  2569. <label class="block" for="SA-post_rating_questionable">Rating</label>
  2570. </th>
  2571. <td style="width: 90%">
  2572. <input id="SA-post_rating_explicit" name="post[rating]" tabindex="1" type="radio" value="explicit">
  2573. <label for="SA-post_rating_explicit">R18+</label>
  2574. <input id="SA-post_rating_questionable" name="post[rating]" tabindex="2" type="radio" value="questionable">
  2575. <label for="SA-post_rating_questionable">R15+</label>
  2576. <input checked="" id="SA-post_rating_safe" name="post[rating]" tabindex="3" type="radio" value="safe">
  2577. <label for="SA-post_rating_safe">G</label>
  2578. </td>
  2579. </tr>
  2580. <tr>
  2581. <th>
  2582. <label class="block" for="SA-post_tags">Tags</label>
  2583. </th>
  2584. <td>
  2585. <textarea cols="83" id="SA-post_tags" name="post[tags]" rows="9" spellcheck="false" tabindex="10" autocomplete="off" style="margin-top: 0.5em;" ></textarea>
  2586. </td>
  2587. </tr>
  2588. </tbody>
  2589. </table>
  2590. </form>
  2591. </div>
  2592. </div>`;
  2593.  
  2594.     document.body.appendChild(dialog);
  2595.     add_tag_buttons('SA-edit-form');
  2596.  
  2597.     // hide when clicking outside
  2598.     document.addEventListener('click', (e) => {
  2599.       if (is_post_edit_dialog_visible()) {
  2600.         if (e.target.closest('#post_edit_dialog, #autosuggest') !== null)
  2601.           return; // clicked inside
  2602.  
  2603.         show_post_edit_dialog(false);
  2604.         e.preventDefault();
  2605.       }
  2606.     }, true);
  2607.  
  2608.     enable_auto_suggest();
  2609.   }
  2610.  
  2611.   async function enable_auto_suggest() {
  2612.     while (unsafeWindow.AutoSuggest === undefined)
  2613.       await sleep(250);
  2614.  
  2615.     unsafeWindow.AutoSuggest.add('#SA-post_tags');
  2616.   }
  2617.  
  2618.   function show_post_edit_dialog(bool) {
  2619.     const dialog = document.getElementById('post_edit_dialog');
  2620.     if (dialog !== null) dialog.style.display = (bool ? 'block' : 'none');
  2621.   }
  2622.  
  2623.   function is_post_edit_dialog_visible() {
  2624.     const dialog = document.getElementById('post_edit_dialog');
  2625.     return dialog?.style.display === 'block';
  2626.   }
  2627.  
  2628.   function open_post_edit_dialog(thumb) {
  2629.     const dialog = document.getElementById('post_edit_dialog');
  2630.     if (dialog === null) {
  2631.       show_notice(console.error, '[addon error] tag edit popup is missing?!');
  2632.       return;
  2633.     }
  2634.  
  2635.     const post_id = get_thumbnail_post_id(thumb);
  2636.     if (post_id === null) return;
  2637.  
  2638.     const a = thumb.querySelector('a');
  2639.     if (a === null) return;
  2640.  
  2641.     const edit_image = document.getElementById('SA-edit-image');
  2642.     const post_old_tags = document.getElementById('SA-post_old_tags');
  2643.     const post_tags = document.getElementById('SA-post_tags');
  2644.     const form = document.getElementById('SA-edit-form');
  2645.     const post_link = document.getElementById('post-link');
  2646.  
  2647.     // set thumbnail image and post link
  2648.     edit_image.src = EMPTY_IMAGE;
  2649.     edit_image.src = thumb.querySelector('.preview').src;
  2650.     post_link.href = a.href;
  2651.     post_link.innerText = 'Post ' + post_id;
  2652.  
  2653.     const full_rating = (rating) => ({ 'g': 'safe', 'r15+': 'questionable', 'r18+': 'explicit' }[rating]);
  2654.  
  2655.     // get tags and rating
  2656.     const post = get_post_from_thumb(thumb);
  2657.     const tags = post.tags.join(' ');
  2658.     const rating = full_rating(post.rating);
  2659.  
  2660.     // set edit box contents
  2661.     post_old_tags.value = tags;
  2662.     post_tags.value = tags;
  2663.  
  2664.     if (rating !== null) {
  2665.       document.getElementById('SA-post_rating_' + rating).checked = true;
  2666.     }
  2667.  
  2668.     update_tag_elements();
  2669.  
  2670.     form.onsubmit = async (event) => {
  2671.       event.preventDefault(); // block reloading page
  2672.  
  2673.       delete_useless_tags_tag();
  2674.  
  2675.       const submitted_tags = new Tags(post_tags.value).toArray();
  2676.       show_notice(console.log, '[addon] saving...');
  2677.  
  2678.       // manually submit data
  2679.       try {
  2680.         const response = await fetch(new URL(`/post/update/${post_id}`, document.location.origin), {
  2681.           method: 'POST',
  2682.           body: new FormData(form),
  2683.           redirect: 'manual', // this will otherwise err because of a https -> http redirect
  2684.         });
  2685.  
  2686.         // we assume success on redirect
  2687.         if (response.type === 'opaqueredirect' || response.ok) {
  2688.           // update local tags
  2689.           post.tags = submitted_tags;
  2690.           deletion_sanity_checks();
  2691.  
  2692.           show_notice(console.log, '[addon] saved tags!');
  2693.         } else {
  2694.           show_notice(console.error, '[addon error] couldn\'t save tags!');
  2695.         }
  2696.       } catch (error) {
  2697.         show_notice(console.error, '[addon error] network error while saving tags!', error);
  2698.       }
  2699.     };
  2700.  
  2701.     show_post_edit_dialog(true);
  2702.   }
  2703.  
  2704.   function add_postmode_hotkeys() {
  2705.     document.addEventListener('keydown', (e) => {
  2706.       const mode_dropdown = document.getElementById('mode');
  2707.       const script_presets = document.getElementById('tagscript_presets_dropdown');
  2708.       if (mode_dropdown === null) return;
  2709.       if (e.ctrlKey || e.altKey || e.shiftKey) return;
  2710.  
  2711.       if (e.target === mode_dropdown || (script_presets !== null && e.target === script_presets)) {
  2712.         e.preventDefault(); // e.g. 'v' would otherwise change to 'View Posts'
  2713.       } else if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) {
  2714.         return;
  2715.       }
  2716.  
  2717.       for (const hotkey of config.indexpage_hotkeys) {
  2718.         hotkey.call(e);
  2719.       }
  2720.     }, true);
  2721.   }
  2722.  
  2723.   function PostModeMenu_init_workaround() {
  2724.     // issue: new post modes can reset on page load if they were added too late
  2725.     // reason: on page load, PostModeMenu.init reads the "mode" cookie, tries to set mode_dropdown.value, then
  2726.     // calls PostModeMenu.change, which sets the cookie to mode_dropdown.value.
  2727.     // so if the new modes aren't added yet, mode_dropdown.value and the "mode" cookie will both reset
  2728.     // solution: safe mode in a separate 'backup' cookie and set the "mode" cookie and mode_dropdown after new modes were added
  2729.     const mode = get_cookie('addon_mode');
  2730.     if (mode !== '') {
  2731.       set_cookie('mode', mode, 7);
  2732.       document.getElementById('mode').value = mode;
  2733.     }
  2734.  
  2735.     PostModeMenu_change_override();
  2736.   }
  2737.  
  2738.   async function PostModeMenu_change_override() {
  2739.     const mode_dropdown = document.getElementById('mode');
  2740.     if (mode_dropdown === null) {
  2741.       show_notice(console.error, '[addon error] PostModeMenu_change_override() couldn\'t find mode dropdown?!');
  2742.       return;
  2743.     }
  2744.  
  2745.     // setting mode failed, possible when changing to account with lower permissions
  2746.     if (!mode_dropdown.value) {
  2747.       show_notice(console.error, '[addon error] invalid mode, resetting to \'view\'');
  2748.       mode_dropdown.value = 'view';
  2749.       set_cookie('mode', 'view', 7);
  2750.     }
  2751.  
  2752.     // try to guarantee sitescript has loaded TODO: future note: potential infinite loop
  2753.     while (unsafeWindow.PostModeMenu === undefined || unsafeWindow.Cookie === undefined || unsafeWindow.$ === undefined)
  2754.       await sleep(100);
  2755.  
  2756.     unsafeWindow.PostModeMenu.change();
  2757.  
  2758.     const s = mode_dropdown.value;
  2759.  
  2760.     set_cookie('addon_mode', s, 7); // set 'backup' cookie
  2761.  
  2762.     const darkmode = is_darkmode();
  2763.     if (s === 'add-fav') {
  2764.       // FFFFAA, original. darkmode: luminance 40
  2765.       document.body.style.backgroundColor = (darkmode ? '#505000' : '#FFA');
  2766.     } else if (s === 'remove-fav') {
  2767.       // FFFFAA -> FFEEAA, slightly more orange. darkmode: luminance 40
  2768.       document.body.style.backgroundColor = (darkmode ? '#504000' : '#FEA');
  2769.     } else if (s === 'apply-tag-script') {
  2770.       // AA33AA -> FFDDFF, weaken color intensity. darkmode: luminance 40
  2771.       document.body.style.backgroundColor = (darkmode ? '#500050' : '#FDF');
  2772.     } else if (s === 'approve') {
  2773.       // 2266AA -> FFDDFF, increase contrast to unapproved posts. darkmode: luminance 40
  2774.       document.body.style.backgroundColor = (darkmode ? '#500050' : '#FDF');
  2775.     } else if (s === 'choose-parent') {
  2776.       document.body.style.backgroundColor = (darkmode ? '#464600' : '#FFD');
  2777.     } else if (s === 'set-parent') {
  2778.       if (get_cookie('chosen-parent') === '') {
  2779.         show_notice(console.warn, '[addon] Choose parent first!');
  2780.         select_mode('choose-parent');
  2781.       } else {
  2782.         document.body.style.backgroundColor = (darkmode ? '#005050' : '#DFF');
  2783.       }
  2784.     } else if (s === 'edit-tags') {
  2785.       document.body.style.backgroundColor = (darkmode ? '#006400' : '#3A3');
  2786.     } else if (s === 'find-similar') {
  2787.       document.body.style.removeProperty('background-color');
  2788.     } else if (s === 'delete') {
  2789.       document.body.style.backgroundColor = 'rgba(147, 0, 0, 0.7)';
  2790.     }
  2791.   }
  2792.  
  2793.   function PostModeMenu_click_override(event) {
  2794.     const thumb_a = event.currentTarget;
  2795.     const thumb = thumb_a.closest('.post-preview');
  2796.     const post_id = get_thumbnail_post_id(thumb);
  2797.  
  2798.     if (unsafeWindow.PostModeMenu.click(post_id))
  2799.       return true; // view mode, let it click
  2800.  
  2801.     const mode_dropdown = document.getElementById('mode');
  2802.     const s = mode_dropdown.value;
  2803.  
  2804.     if (s === 'choose-parent') {
  2805.       set_cookie('chosen-parent', post_id);
  2806.       mode_dropdown.value = 'set-parent';
  2807.       PostModeMenu_change_override();
  2808.     } else if (s === 'set-parent') {
  2809.       const parent_id = get_cookie('chosen-parent');
  2810.       unsafeWindow.TagScript.run(post_id, 'parent:' + parent_id + (config.setparent_deletepotentialduplicate ? ' -potential_duplicate' : ''));
  2811.     } else if (s === 'edit-tags') {
  2812.       open_post_edit_dialog(thumb);
  2813.     } else if (s === 'find-similar') {
  2814.       open_in_tab(window.location.origin + '/posts/similar?id=' + post_id);
  2815.     } else if (s === 'delete') {
  2816.       open_in_tab(window.location.origin + `/posts/${post_id}/delete`);
  2817.     }
  2818.  
  2819.     return false;
  2820.   }
  2821.  
  2822.   function override_mode_change_event(mode_dropdown) {
  2823.     mode_dropdown.removeAttribute('onchange');
  2824.     mode_dropdown.onchange = PostModeMenu_change_override;
  2825.   }
  2826.  
  2827.   function override_thumbnail_click_event(thumb_a) {
  2828.     thumb_a.removeAttribute('onclick');
  2829.     thumb_a.onclick = PostModeMenu_click_override;
  2830.   }
  2831.  
  2832.   /***********************/
  2833.   /* post page functions */
  2834.   /***********************/
  2835.  
  2836.   // TODO put in PostPage
  2837.   // original post/parent ids
  2838.   let image_data = null;
  2839.   let resize_timer;
  2840.   let tag_update_timer;
  2841.   // set by find_actions_list():
  2842.   let found_delete_action = false;
  2843.  
  2844.   let done_scrolling = false;
  2845.   function is_done_scrolling() {
  2846.     return !config.scroll_to_image || done_scrolling;
  2847.   }
  2848.  
  2849.   class TagMenuScaler {
  2850.     static #mouse_moved = false;
  2851.  
  2852.     static mousedown(e) {
  2853.       e.preventDefault();
  2854.       TagMenuScaler.#mouse_moved = false;
  2855.       window.addEventListener('mousemove', TagMenuScaler.mousemove);
  2856.       window.addEventListener('mouseup',   TagMenuScaler.mouseup);
  2857.     }
  2858.  
  2859.     static mousemove(e) {
  2860.       e.preventDefault();
  2861.       TagMenuScaler.#mouse_moved = true;
  2862.       TagMenuScaler.set_scale(e, false);
  2863.     }
  2864.  
  2865.     static mouseup(e) {
  2866.       e.preventDefault();
  2867.       if (TagMenuScaler.#mouse_moved) TagMenuScaler.set_scale(e, true);
  2868.  
  2869.       window.removeEventListener('mousemove', TagMenuScaler.mousemove);
  2870.       window.removeEventListener('mouseup',   TagMenuScaler.mouseup);
  2871.     }
  2872.  
  2873.     static set_scale(e, save) {
  2874.       const tag_menu = document.getElementById('tag_menu');
  2875.       if (tag_menu === null) return;
  2876.  
  2877.       const yFromBottom = window.innerHeight - e.clientY;
  2878.       let yPercentfromBottom = (100.0 * (yFromBottom / window.innerHeight));
  2879.       yPercentfromBottom = Math.min(Math.max(yPercentfromBottom, 5), 95) + '%';
  2880.  
  2881.       tag_menu.style.height = yPercentfromBottom;
  2882.  
  2883.       if (save) save_setting('tag_menu_scale', yPercentfromBottom);
  2884.     }
  2885.   }
  2886.  
  2887.   function add_tag_menu() {
  2888.     if (document.getElementById('post_tags') === null) return; // not logged in
  2889.  
  2890.     const tag_menu = document.createElement('DIV');
  2891.     tag_menu.id = 'tag_menu';
  2892.     tag_menu.style.display = 'none';
  2893.     tag_menu.style.width = '100%';
  2894.     tag_menu.style.height = config.tag_menu_scale;
  2895.     tag_menu.style.position = 'fixed';
  2896.     tag_menu.style.bottom = '0';
  2897.     tag_menu.style.overflow = 'auto';
  2898.     tag_menu.style.backgroundColor = get_original_background_color();
  2899.     tag_menu.style.zIndex = '10001';
  2900.     document.body.appendChild(tag_menu);
  2901.  
  2902.     // the inner div ensures tag_menu_close button doesn't scroll with the content
  2903.     tag_menu.innerHTML = '<div style="width: calc(100% - 2px); height: 100%; overflow: auto;"><span id="common_tags"></span>Current Tags:<span id="current_tags"></span></div>';
  2904.  
  2905.     const tag_menu_scaler = document.createElement('DIV');
  2906.     tag_menu_scaler.id = 'tag_menu_scaler';
  2907.     tag_menu_scaler.style.width = '100%';
  2908.     tag_menu_scaler.style.height = '6px';
  2909.     tag_menu_scaler.style.backgroundColor = shifted_backgroundColor(32);
  2910.     tag_menu_scaler.style.position = 'absolute';
  2911.     tag_menu_scaler.style.top = '0';
  2912.     tag_menu_scaler.style.cursor = 'ns-resize';
  2913.     tag_menu_scaler.style.zIndex = '10000';
  2914.     tag_menu_scaler.addEventListener('mousedown', TagMenuScaler.mousedown);
  2915.     tag_menu.appendChild(tag_menu_scaler);
  2916.     tag_menu.style.paddingTop = tag_menu_scaler.style.height; // since tag_menu_scaler floats above the tags
  2917.  
  2918.     const create_tag_menu_button = function(id, text) {
  2919.       const button = document.createElement('DIV');
  2920.       button.id = id;
  2921.       button.style.border = '1px solid ' + shifted_backgroundColor(32);
  2922.       button.style.width  = '24px';
  2923.       button.style.height = '24px';
  2924.       button.style.position = 'absolute';
  2925.       button.style.textAlign = 'center';
  2926.       button.style.cursor = 'pointer';
  2927.       button.style.backgroundColor = shifted_backgroundColor(16);
  2928.       button.innerHTML = `<span style="width: 100%; display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">${text}</span>`;
  2929.       button.style.zIndex = '10001';
  2930.       return button;
  2931.     };
  2932.  
  2933.     const tag_menu_close = create_tag_menu_button('tag_menu_close', 'X');
  2934.     tag_menu_close.style.top   = '0';
  2935.     tag_menu_close.style.right = '0';
  2936.     tag_menu_close.onclick = () => { show_tag_menu(false); return false; };
  2937.     tag_menu.appendChild(tag_menu_close);
  2938.  
  2939.     const tag_menu_open = create_tag_menu_button('tag_menu_open', '«');
  2940.     tag_menu_open.style.position = 'fixed';
  2941.     tag_menu_open.style.right  = '0';
  2942.     tag_menu_open.style.bottom = '0';
  2943.     tag_menu_open.onclick = () => { show_tag_menu(true); update_tag_menu(); return false; };
  2944.     document.body.appendChild(tag_menu_open);
  2945.  
  2946.     const tag_menu_save = create_tag_menu_button('tag_menu_save', 'Save changes');
  2947.     tag_menu_save.style.top   = '0';
  2948.     tag_menu_save.style.right = '36px';
  2949.     tag_menu_save.style.width = '140px';
  2950.     tag_menu_save.style.fontWeight = 'bold';
  2951.     tag_menu_save.addEventListener('click', (e) => {
  2952.       e.preventDefault();
  2953.       delete_useless_tags_tag();
  2954.       document.getElementById('edit-form').submit();
  2955.     });
  2956.     tag_menu.appendChild(tag_menu_save);
  2957.   }
  2958.  
  2959.   function update_tag_menu(skip_common_tags = false) {
  2960.     if (document.getElementById('post_tags') === null) return; // not logged in
  2961.  
  2962.     const common_tags_elem  = document.getElementById('common_tags');
  2963.     const current_tags_elem = document.getElementById('current_tags');
  2964.  
  2965.     // tag menu disabled
  2966.     if (common_tags_elem === null || current_tags_elem === null)
  2967.       return;
  2968.  
  2969.     if (config.tag_menu_layout === 1) {
  2970.       common_tags_elem.style.display = 'grid';
  2971.       common_tags_elem.style.gridTemplateColumns = 'fit-content(5%) auto';
  2972.     } else {
  2973.       common_tags_elem.style.removeProperty('display');
  2974.     }
  2975.  
  2976.     const create_tag_button = function(tag, skip_common_tags_update = false) {
  2977.       const a = document.createElement('A');
  2978.       a.href = '#';
  2979.       a.style.backgroundColor = (is_darkmode() ? '#000' : '#FFF'); // more contrast for tag buttons
  2980.       a.classList.add('tag_button');
  2981.       if (config.tag_categories.has(tag)) a.classList.add(`tag-type-${config.tag_categories.get(tag)}`);
  2982.       if (!get_post_tags().has(tag)) a.classList.add('tag_nonexistent');
  2983.  
  2984.       a.onclick = function(e) {
  2985.         if (e.ctrlKey) {
  2986.           open_in_tab(window.location.origin + '/wiki/' + tag);
  2987.           return false;
  2988.         }
  2989.  
  2990.         if (get_post_tags().has(tag)) {
  2991.           remove_post_tag(tag, skip_common_tags_update);
  2992.           a.classList.add('tag_nonexistent');
  2993.         } else {
  2994.           add_post_tag(tag, skip_common_tags_update);
  2995.           a.classList.remove('tag_nonexistent');
  2996.         }
  2997.         return false;
  2998.       };
  2999.       a.innerText = tag;
  3000.       return a;
  3001.     };
  3002.  
  3003.     const create_tag_list = function() {
  3004.       const div = document.createElement('DIV');
  3005.       div.className = 'tag_list';
  3006.       return div;
  3007.     };
  3008.  
  3009.     // generate tag button list for current tags
  3010.     const current_tags_flex = create_tag_list();
  3011.     current_tags_flex.style.marginBottom = '3px';
  3012.     for (const current_tag of get_post_tags()) {
  3013.       current_tags_flex.appendChild(create_tag_button(current_tag, false));
  3014.     }
  3015.  
  3016.     // replace current list with new one
  3017.     while (current_tags_elem.hasChildNodes())
  3018.       current_tags_elem.removeChild(current_tags_elem.lastChild);
  3019.     current_tags_elem.appendChild(current_tags_flex);
  3020.  
  3021.     // don't rebuild the common tags list when common tags buttons are pressed
  3022.     if (skip_common_tags) return;
  3023.  
  3024.     // now add common tags
  3025.     // common_tags_json(_idol) should be an array of objects with an optional string "name" field and an array "tags" field,
  3026.     // where the "tags" array can contain strings (space separated tags), arrays containing one string (representing a group)
  3027.     // or arrays of array containing one string (representing a table)
  3028.     // ex. [ { "name":"common tags", "tags":[ "tag1 tag2", ["grouped_tag1 grouped_tag2"] , "tag3 tag4"] }, { "name":"uncommon tags", "tags":[ "t1 t2 t3" ]} ]
  3029.     let tag_data;
  3030.     try {
  3031.       tag_data = JSON.parse(config[COMMON_TAGS_KEY]);
  3032.     } catch (error) {
  3033.       show_notice(console.error, '[addon error] "common tags" JSON syntax error', error);
  3034.       return;
  3035.     }
  3036.  
  3037.     if (!Array.isArray(tag_data)) {
  3038.       show_notice(console.error, '[addon error] "common tags" needs to be an array of objects');
  3039.       return;
  3040.     }
  3041.  
  3042.     while (common_tags_elem.hasChildNodes())
  3043.       common_tags_elem.removeChild(common_tags_elem.lastChild);
  3044.  
  3045.     for (let k = 0; k < tag_data.length; k++) {
  3046.       const list_flex = create_tag_list();
  3047.       const list_name = tag_data[k].name;
  3048.       const list_tags = tag_data[k].tags;
  3049.  
  3050.       if (!Array.isArray(list_tags)) {
  3051.         show_notice(console.error, '[addon error] a "common tags" object needs to have a "tags" array');
  3052.         return;
  3053.       }
  3054.  
  3055.       const TAGS_TYPES = {
  3056.         LIST:  'list',  // e.g. "tag1 tag2"
  3057.         GROUP: 'group', // e.g. ["tag1 tag2"]
  3058.         TABLE: 'table'  // e.g. [["tag1 tag2"], ["tag3 tag4"]]
  3059.       };
  3060.  
  3061.       const group_style = function(el) {
  3062.         // red in darkmode needs more contrast
  3063.         const rgb = rgb_to_array(get_original_background_color());
  3064.         if (is_darkmode()) {
  3065.           el.style.border = '1px solid ' + rgb_array_to_rgb(rgb_array_shift(rgb, 96));
  3066.           el.style.backgroundColor = rgb_array_to_rgb(rgb_array_shift(rgb, 64));
  3067.         } else {
  3068.           el.style.border = '1px solid ' + rgb_array_to_rgb(rgb_array_shift(rgb, -64));
  3069.           el.style.backgroundColor = rgb_array_to_rgb(rgb_array_shift(rgb, -32));
  3070.         }
  3071.       };
  3072.  
  3073.       for (const list_tag of list_tags) {
  3074.         const is_array = Array.isArray(list_tag);
  3075.  
  3076.         // find tags_type
  3077.         let tags_type;
  3078.         if (is_array) {
  3079.           if (list_tag.length === 0) {
  3080.             show_notice(console.error, '[addon error] "common tags" "tags" array contains an empty array');
  3081.             return;
  3082.           }
  3083.  
  3084.           // check what the array consists of
  3085.           let all_arrays = true;
  3086.           let no_arrays = true;
  3087.           for (let i = 0; i < list_tag.length; i++) {
  3088.             if (!Array.isArray(list_tag[i])) {
  3089.               all_arrays = false;
  3090.             } else {
  3091.               no_arrays = false;
  3092.             }
  3093.           }
  3094.  
  3095.           if (all_arrays) {
  3096.             tags_type = TAGS_TYPES.TABLE;
  3097.           } else if (no_arrays) {
  3098.             tags_type = TAGS_TYPES.GROUP;
  3099.           } else {
  3100.             show_notice(console.error, '[addon error] "common tags" "tags" array contains an array which is neither a group nor a table');
  3101.             return;
  3102.           }
  3103.         } else {
  3104.           tags_type = TAGS_TYPES.LIST;
  3105.         }
  3106.  
  3107.         if (tags_type === TAGS_TYPES.TABLE) {
  3108.           const tags_table = [];
  3109.           for (let j = 0; j < list_tag.length; j++) {
  3110.             if (list_tag[j].length !== 1) {
  3111.               show_notice(console.error, '[addon error] "common tags" "tags" array contains a table entry with not exactly 1 tags string');
  3112.               return;
  3113.             }
  3114.  
  3115.             tags_table.push(new Tags(list_tag[j][0]).toArray());
  3116.           }
  3117.  
  3118.           const table_height = tags_table.length;
  3119.           let table_width = 0;
  3120.           for (let row = 0; row < tags_table.length; row++)
  3121.             table_width = Math.max(table_width, tags_table[row].length);
  3122.  
  3123.           // div (flexbox)><table><tr><td><div (button)>
  3124.           // TODO maybe replace with grid
  3125.           const table = document.createElement('TABLE');
  3126.           table.style.display = 'inline-block';
  3127.           group_style(table);
  3128.           for (let row = 0; row < table_height; row++) {
  3129.             const tr = document.createElement('TR');
  3130.             for (let col = 0; col < table_width; col++) {
  3131.               const td = document.createElement('TD');
  3132.               td.style.border = 'none';
  3133.               td.style.padding = '0';
  3134.               if (tags_table[row][col])
  3135.                 td.appendChild(create_tag_button(tags_table[row][col], true));
  3136.               tr.appendChild(td);
  3137.             }
  3138.             table.appendChild(tr);
  3139.           }
  3140.  
  3141.           list_flex.appendChild(table);
  3142.         } else if (tags_type === TAGS_TYPES.GROUP) {
  3143.           if (list_tag.length !== 1) {
  3144.             show_notice(console.error, '[addon error] "common tags" "tags" array contains a group with not exactly 1 tags string');
  3145.             return;
  3146.           }
  3147.  
  3148.           const tags = list_tag[0].trim().split(/\s+/);
  3149.  
  3150.           // <div (flexbox)><div (flexbox)><div (button)>
  3151.           const group_div = document.createElement('DIV');
  3152.           group_div.className = 'tag_group';
  3153.           group_style(group_div);
  3154.  
  3155.           for (const tag of tags)
  3156.             group_div.appendChild(create_tag_button(tag, true));
  3157.  
  3158.           list_flex.appendChild(group_div);
  3159.         } else /* if (tags_type === tag_types.LIST) */ {
  3160.           // <div (flexbox)><div (button)>
  3161.           const tags = new Tags(list_tag);
  3162.           for (const tag of tags) {
  3163.             list_flex.appendChild(create_tag_button(tag, true));
  3164.           }
  3165.         }
  3166.       }
  3167.  
  3168.       const span = document.createElement('SPAN');
  3169.       span.innerText = (list_name ? `${list_name}:` : '');
  3170.       span.style.paddingTop = '2px';
  3171.       if (list_name) span.style.marginLeft = '2px';
  3172.  
  3173.       if (list_name && config.tag_menu_layout === 1) {
  3174.         const add_top_border = function(el) {
  3175.           el.style.borderTopWidth = '1px';
  3176.           el.style.borderTopStyle = 'solid';
  3177.           el.style.borderTopColor = shifted_backgroundColor(32);
  3178.         };
  3179.         add_top_border(span);
  3180.         add_top_border(list_flex);
  3181.       }
  3182.  
  3183.       common_tags_elem.appendChild(span);
  3184.       common_tags_elem.appendChild(list_flex);
  3185.     }
  3186.   }
  3187.  
  3188.   function show_tag_menu(bool) {
  3189.     document.getElementById('tag_menu').style.display = (bool ? '' : 'none');
  3190.     document.getElementById('tag_menu_open').style.display = (!bool ? '' : 'none');
  3191.   }
  3192.  
  3193.   function add_tags_change_listener() {
  3194.     const post_tags = get_post_tags_el();
  3195.     if (post_tags === null) return; // not logged in
  3196.  
  3197.     const delayed_update = () => {
  3198.       clearTimeout(tag_update_timer);
  3199.       tag_update_timer = setTimeout(update_tag_elements, 400);
  3200.     };
  3201.  
  3202.     post_tags.addEventListener('change', delayed_update);
  3203.     post_tags.addEventListener('input',  delayed_update);
  3204.   }
  3205.  
  3206.  
  3207.   function add_tags_submit_listener() {
  3208.     document.getElementById('edit-form')?.addEventListener('submit', () => {
  3209.       delete_useless_tags_tag();
  3210.     });
  3211.   }
  3212.  
  3213.   function find_actions_list() {
  3214.     let actions_ul;
  3215.  
  3216.     for (const a of document.querySelectorAll('.sidebar > div > ul:not(#tag-sidebar) > li > a')) {
  3217.       try {
  3218.         const pathname = new URL(a.href).pathname;
  3219.         if (pathname.startsWith('/posts/similar') || pathname.startsWith('/post/similar')) {
  3220.           actions_ul = a.parentElement.parentElement;
  3221.         } else if (pathname.startsWith('/posts/delete/') || pathname.startsWith('/post/delete/')) {
  3222.           found_delete_action = true;
  3223.         }
  3224.       } catch (ignored) {}
  3225.     }
  3226.  
  3227.     return actions_ul;
  3228.   }
  3229.  
  3230.   function copy_translations() {
  3231.     config.notes = [];
  3232.  
  3233.     for (const note of unsafeWindow.Note.all) {
  3234.       config.notes.push({
  3235.         text: note.old.raw_body,
  3236.         fullsize: note.fullsize,
  3237.       });
  3238.     }
  3239.  
  3240.     save_setting('notes', config.notes);
  3241.     show_notice(console.log, '[addon] copied notes');
  3242.   }
  3243.  
  3244.   function paste_translations() {
  3245.     show_notice(console.log, '[addon] pasted notes');
  3246.  
  3247.     // TODO check https://chan.sankakucomplex.com/wiki/show?title=about%3Anote_formatting
  3248.     // TODO save all notes
  3249.  
  3250.     for (const note of config.notes) {
  3251.       unsafeWindow.Note.create();
  3252.       const new_note = unsafeWindow.Note.all.at(-1);
  3253.  
  3254.       const box = new_note.elements.box;
  3255.       const image = new_note.elements.image;
  3256.       const ratio = new_note.ratio();
  3257.  
  3258.       // set text
  3259.       new_note.elements.body.innerText = note.text;
  3260.       new_note.old.raw_body = note.text;
  3261.  
  3262.       // set size
  3263.       const width  = note.fullsize.width  * ratio;
  3264.       const height = note.fullsize.height * ratio;
  3265.       box.style.width  = width  + 'px';
  3266.       box.style.height = height + 'px';
  3267.  
  3268.       // set position
  3269.       const clipX = (x) => Math.max(5, Math.min(x, image.clientWidth  - box.clientWidth  - 5));
  3270.       const clipY = (y) => Math.max(5, Math.min(y, image.clientHeight - box.clientHeight - 5));
  3271.       const top  = clipY(note.fullsize.top  * ratio);
  3272.       const left = clipX(note.fullsize.left * ratio);
  3273.       box.style.top  = top  + 'px';
  3274.       box.style.left = left + 'px';
  3275.     }
  3276.   }
  3277.  
  3278.   function add_addon_actions(actions_ul) {
  3279.     if (actions_ul == null) {
  3280.       show_notice(console.error, '[addon error] couldn\'t find actions list! Disabled addon actions.');
  3281.       return;
  3282.     }
  3283.  
  3284.     const separator = document.createElement('H5');
  3285.     separator.innerText = 'Addon actions';
  3286.     const newli = document.createElement('LI');
  3287.     newli.appendChild(separator);
  3288.     actions_ul.appendChild(newli);
  3289.  
  3290.     const add_action = function(func, name, id) {
  3291.       const a = document.createElement('A');
  3292.       a.href = '#';
  3293.       a.onclick = () => { func(); return false; };
  3294.       a.innerText = name;
  3295.  
  3296.       const li = document.createElement('LI');
  3297.       li.id = id;
  3298.       li.appendChild(a);
  3299.       actions_ul.appendChild(li);
  3300.     };
  3301.  
  3302.     add_action(() => { scale_image(SCALE_MODES.FIT,        true); scroll_to_image(); }, 'Fit image',              'scale-image-fit');
  3303.     add_action(() => { scale_image(SCALE_MODES.HORIZONTAL, true); scroll_to_image(); }, 'Fit image (Horizontal)', 'scale-image-hor');
  3304.     add_action(() => { scale_image(SCALE_MODES.VERTICAL,   true); scroll_to_image(); }, 'Fit image (Vertical)',   'scale-image-ver');
  3305.     add_action(() => { scale_image(SCALE_MODES.RESET,      true); scroll_to_image(); }, 'Reset image size',       'reset-image');
  3306.  
  3307.     if (PostPage.parent_id === null) return; // not logged in
  3308.  
  3309.     add_action(() => { flag_duplicate(PostPage.post_id, '');                       }, 'Flag duplicate',              'flag-duplicate');
  3310.     add_action(() => { flag_duplicate(PostPage.post_id, ', visually identical');   }, 'Flag duplicate (identical)',  'flag-duplicate-identical');
  3311.     add_action(() => { flag_duplicate(PostPage.post_id, ' with worse quality');    }, 'Flag duplicate (quality)',    'flag-duplicate-quality');
  3312.     add_action(() => { flag_duplicate(PostPage.post_id, ' with worse resolution'); }, 'Flag duplicate (resolution)', 'flag-duplicate-resolution');
  3313.  
  3314.     add_action(copy_translations,  'Copy Notes',  'copy-notes');
  3315.     add_action(paste_translations, 'Paste Notes', 'paste-notes');
  3316.   }
  3317.  
  3318.   function add_flagger_links() {
  3319.     for (const a of document.querySelectorAll('.flag-and-reason-count > a')) {
  3320.       const username = a.innerText;
  3321.  
  3322.       const flagged = document.createElement('A');
  3323.       flagged.innerText = 'flagged';
  3324.       flagged.href = get_search_url(`flagger:${username}`);
  3325.  
  3326.       a.insertAdjacentText('afterend', ')');
  3327.       a.insertAdjacentElement('afterend', flagged);
  3328.       a.insertAdjacentText('afterend', ' (');
  3329.     }
  3330.   }
  3331.  
  3332.   function link_to_post_tag_history() {
  3333.     if (PostPage.post_id === null) return;
  3334.  
  3335.     for (const a of document.querySelectorAll('#subnavbar > li > a')) {
  3336.       try {
  3337.         const url = new URL(a.href);
  3338.  
  3339.         if (url.pathname.startsWith('/post_tag_history/index')) {
  3340.           url.search = 'post_id=' + PostPage.post_id;
  3341.           a.href = url;
  3342.         }
  3343.  
  3344.       } catch (ignored) {}
  3345.     }
  3346.   }
  3347.  
  3348.   function move_stats_to_edit_form() {
  3349.     try {
  3350.  
  3351.       // form display: flex
  3352.       // stats insertafter table
  3353.       // stats white-space: nowrap
  3354.       // #edit-form width: max-content
  3355.       // margin-left: 8px;
  3356.  
  3357.       const stats = document.getElementById('stats');
  3358.  
  3359.       const edit_form = document.getElementById('edit-form');
  3360.       if (edit_form === null) return;
  3361.  
  3362.       const table = edit_form.querySelector('table');
  3363.  
  3364.       edit_form.style.display = 'flex'; // add to the right
  3365.  
  3366.       insert_node_after(stats, table);
  3367.       stats.style.whiteSpace = 'nowrap';
  3368.       edit_form.style.width = 'max-content';
  3369.       stats.style.marginLeft = '8px';
  3370.     } catch (error) {
  3371.       console.error('[addon error] move_stats_to_edit_form failed with', error);
  3372.     }
  3373.   }
  3374.  
  3375.   function add_tag_buttons(form_id) {
  3376.     const edit_form = document.getElementById(form_id);
  3377.     if (edit_form === null) return; // not logged in
  3378.  
  3379.     const tags_div = document.getElementById('post-tags-container');
  3380.     if (tags_div) {
  3381.       // remove block display, let's div fit the text area
  3382.       tags_div.style.removeProperty('display');
  3383.     }
  3384.  
  3385.     const parent_el = document.getElementById('post_parent_id');
  3386.  
  3387.     {
  3388.       const el = document.createElement('BUTTON');
  3389.       el.id = 'clear_parent_id_button';
  3390.       el.innerText = 'Clear';
  3391.       el.onclick = () => { parent_el.value = ''; return false; };
  3392.       parent_el?.parentNode?.appendChild(el);
  3393.     }
  3394.  
  3395.     {
  3396.       const el = document.createElement('BUTTON');
  3397.       el.id = 'reset_parent_id_button';
  3398.       el.innerText = 'Reset';
  3399.       el.onclick = () => { reset_parent_id(); return false; };
  3400.       parent_el?.parentNode?.appendChild(el);
  3401.     }
  3402.  
  3403.     const tag_button_place = document.querySelector('#edit-post-submit')?.parentElement;
  3404.     if (!tag_button_place) {
  3405.       show_notice(console.error, '[addon error] couldn\'t find tags submit button');
  3406.       return;
  3407.     }
  3408.  
  3409.     if (tag_button_place.align === 'right') {
  3410.       tag_button_place.align = 'left';
  3411.     }
  3412.  
  3413.     {
  3414.       const el = document.createElement('BUTTON');
  3415.       el.id = 'tag_reset_button';
  3416.       el.innerText = 'Reset';
  3417.       el.onclick = () => { reset_tags(); return false; };
  3418.       tag_button_place?.appendChild(el);
  3419.     }
  3420.  
  3421.     const append_tag_button = (id, tag) => {
  3422.       const el = document.createElement('BUTTON');
  3423.       el.id = id;
  3424.       el.className = 'SA-tag-button';
  3425.       el.dataset['tag'] = tag;
  3426.       el.onclick = () => { toggle_post_tag(tag); return false; };
  3427.       tag_button_place?.appendChild(el);
  3428.     };
  3429.  
  3430.     append_tag_button('tag_dup_button',     'duplicate');
  3431.     append_tag_button('tag_var_button',     'legitimate_variation');
  3432.     append_tag_button('tag_rev_button',     'revision');
  3433.     append_tag_button('tag_has_rev_button', 'has_revised_version');
  3434.     append_tag_button('tag_pot_button',     'potential_duplicate');
  3435.   }
  3436.  
  3437.   function update_tag_buttons() {
  3438.     const taglist = get_post_tags_el();
  3439.     if (taglist === null)
  3440.       return;
  3441.  
  3442.     const tags = get_post_tags();
  3443.  
  3444.     for (const button of document.querySelectorAll('.SA-tag-button')) {
  3445.       const tag = button.dataset['tag'];
  3446.  
  3447.       if (tag === 'potential_duplicate') {
  3448.         if (tags.has(tag)) {
  3449.           button.disabled = false;
  3450.           button.style.removeProperty('cursor');
  3451.         } else {
  3452.           button.disabled = true;
  3453.           button.style.cursor = 'not-allowed';
  3454.         }
  3455.       }
  3456.  
  3457.       button.innerText = (tags?.has(tag) ? '-' : '+') + tag;
  3458.     }
  3459.   }
  3460.  
  3461.   function reset_parent_id() {
  3462.     document.getElementById('post_parent_id').value = PostPage.parent_id;
  3463.   }
  3464.  
  3465.   function get_post_old_tags_el() {
  3466.     return document.querySelector('#post_old_tags, #SA-post_old_tags');
  3467.   }
  3468.  
  3469.   function get_post_tags_el() {
  3470.     return document.querySelector('#post_tags, #SA-post_tags');
  3471.   }
  3472.  
  3473.   function get_post_old_tags() {
  3474.     return new Tags(get_post_old_tags_el()?.value);
  3475.   }
  3476.  
  3477.   function get_post_tags() {
  3478.     return new Tags(get_post_tags_el()?.value);
  3479.   }
  3480.  
  3481.   function toggle_post_tag(tag, skip_common_tags_update = false) {
  3482.     if (get_post_tags().has(tag)) {
  3483.       remove_post_tag(tag, skip_common_tags_update);
  3484.     } else {
  3485.       add_post_tag(tag, skip_common_tags_update);
  3486.     }
  3487.   }
  3488.  
  3489.   function add_post_tag(tag, skip_common_tags_update = false) {
  3490.     const tags_el = get_post_tags_el();
  3491.     const tags = get_post_tags();
  3492.  
  3493.     if ((tag === 'duplicate' && tags.has('legitimate_variation')) || (tag === 'legitimate_variation' && tags.has('duplicate'))) {
  3494.       show_notice(console.warn, '[addon] cannot tag as duplicate and legitimate_variation at the same time.');
  3495.       return;
  3496.     }
  3497.  
  3498.     tags.add(tag);
  3499.     tags_el.value = tags.toString() + ' ';
  3500.  
  3501.     update_tag_elements(skip_common_tags_update);
  3502.   }
  3503.  
  3504.   function remove_post_tag(tag, skip_common_tags_update = false) {
  3505.     const tags = get_post_tags();
  3506.  
  3507.     tags.remove(tag);
  3508.     get_post_tags_el().value = tags.toString() + ' ';
  3509.  
  3510.     update_tag_elements(skip_common_tags_update);
  3511.   }
  3512.  
  3513.   function delete_useless_tags_tag() {
  3514.     if (config.editform_deleteuselesstags) remove_post_tag('useless_tags');
  3515.   }
  3516.  
  3517.   function reset_tags() {
  3518.     get_post_tags_el().value = get_post_old_tags_el().value;
  3519.     update_tag_elements();
  3520.   }
  3521.  
  3522.   function update_tag_elements(skip_common_tags = false) {
  3523.     update_tag_buttons();
  3524.  
  3525.     const tag_menu = document.getElementById('tag_menu');
  3526.     if (tag_menu !== null && tag_menu.style.display !== 'none') {
  3527.       update_tag_menu(skip_common_tags);
  3528.     }
  3529.   }
  3530.  
  3531.  
  3532.  
  3533.   // flag option with default text
  3534.   function flag_duplicate(post_id, reason_suffix) {
  3535.     if (post_id === null) {
  3536.       show_notice(console.error, '[addon] no post id, report to author!');
  3537.       return;
  3538.     }
  3539.     if (PostPage.parent_id === null) {
  3540.       show_notice(console.warn, '[addon] parent id not found, not logged in?');
  3541.       return;
  3542.     }
  3543.  
  3544.     const current_parent_id = document.getElementById('post_parent_id')?.value;
  3545.     if (current_parent_id !== PostPage.parent_id) {
  3546.       show_notice(console.warn, '[addon] parent id was changed but not saved!');
  3547.       return;
  3548.     }
  3549.  
  3550.     if (!current_parent_id || current_parent_id.length === 0) {
  3551.       show_notice(console.warn, '[addon] no parent id set!');
  3552.       return;
  3553.     }
  3554.  
  3555.     const tags = get_post_tags();
  3556.     const old_tags = get_post_old_tags();
  3557.     if (tags.has('duplicate') && !old_tags.has('duplicate')) {
  3558.       show_notice(console.warn, '[addon] duplicate tag set but not saved!');
  3559.       return;
  3560.     }
  3561.     if (!old_tags.has('duplicate')) {
  3562.       show_notice(console.warn, '[addon] not tagged as duplicate!');
  3563.       return;
  3564.     }
  3565.  
  3566.     if (old_tags.has('legitimate_variation') || old_tags.has('revision'))
  3567.       if (!window.confirm('Post is tagged as a legitimate_variation or revision, it may not be a duplicate!\n\nFlag it anyway?'))
  3568.         return;
  3569.  
  3570.     const reason = window.prompt('Why should this post be reconsidered for moderation?', `duplicate of ${PostPage.parent_id}${reason_suffix}`);
  3571.     if (reason === null)
  3572.       return;
  3573.  
  3574.     const flag_reason = document.getElementById('other_reason');
  3575.     const flag_confirm = document.getElementById('confirm');
  3576.     const flag_form = flag_reason?.parentElement;
  3577.     if (flag_reason === null || flag_confirm === null) {
  3578.       show_notice(console.error, '[addon error] couldn\'t find flag form');
  3579.       return;
  3580.     }
  3581.  
  3582.     flag_reason.value = reason;
  3583.     flag_confirm.checked = true;
  3584.  
  3585.     (async function() {
  3586.       try {
  3587.         const response = await fetch(new URL(flag_form.action, document.location.origin), {
  3588.           method: 'POST',
  3589.           body: new FormData(flag_form),
  3590.         });
  3591.  
  3592.         if (!response.ok) {
  3593.           show_notice(console.error, `[addon error] non-OK status code ${response.status}`);
  3594.           return;
  3595.         }
  3596.  
  3597.         show_notice(console.log, 'Post was resent to moderation queue');
  3598.       } catch (error) {
  3599.         show_notice(console.error, '[addon error] error flagging post!', error);
  3600.       }
  3601.     })();
  3602.   }
  3603.  
  3604.   // writes to image_data once finished
  3605.   async function read_image_data() {
  3606.     const data = {
  3607.       img_elem: null, // <img>, <video> or <object> (in case of flash)
  3608.       emb_elem: null, non_img_div: null, // flash is <object><embed>, we need the <div> it's in as well
  3609.       is_flash: false,
  3610.       width: null,
  3611.       height: null,
  3612.       aspect_ratio: null,
  3613.     };
  3614.  
  3615.     // image or video
  3616.     const img = document.getElementById('image');
  3617.     if (img !== null) {
  3618.       data.img_elem = img;
  3619.  
  3620.       // the href of this element is removed when the original image is loaded
  3621.       const sample_link = document.querySelector('a#image-link.sample');
  3622.       const is_sample = sample_link !== null && sample_link.hasAttribute('href');
  3623.  
  3624.       let res = null;
  3625.       if (is_sample) {
  3626.         const lowres = document.getElementById('lowres');
  3627.         if (lowres !== null) {
  3628.           res = lowres.innerText.split('x'); // parse "<width>x<height>"
  3629.         }
  3630.       } else {
  3631.         const highres = document.getElementById('highres');
  3632.         if (highres !== null) {
  3633.           res = highres.innerText.split(' ')[0].split('x'); // parse "<width>x<height> (<file size>)"
  3634.         }
  3635.  
  3636.         if (res === null) {
  3637.           if (img.hasAttribute('orig_width') && img.hasAttribute('orig_height')) {
  3638.             res = [img.getAttribute('orig_width'), img.getAttribute('orig_height')];
  3639.           }
  3640.         }
  3641.       }
  3642.  
  3643.       if (res === null) {
  3644.         console.log('[addon] Couldn\'t read resolution from details section, waiting for image size...');
  3645.  
  3646.         // last resort: try to read natural size
  3647.         // when loading the original image, this can read the old preview size instead, which shouldn't be a huge deal since
  3648.         // this happens after image scrolling (see is_done_scrolling()) and the aspect ratio is approximately correct
  3649.         // TODO: this will however break the manual image scrolling
  3650.  
  3651.         // TODO: should abort when content failed loading
  3652.         while ((res = get_resolution(img)) === null)
  3653.           await sleep(20);
  3654.       }
  3655.  
  3656.       data.width  = Number(res[0]);
  3657.       data.height = Number(res[1]);
  3658.       console.log('[addon] Read image or video resolution ', data.width, 'x', data.height);
  3659.  
  3660.       data.aspect_ratio = data.width / data.height;
  3661.       image_data = data;
  3662.       return;
  3663.     }
  3664.  
  3665.     // flash or unknown
  3666.     const non_img = document.getElementById('non-image-content');
  3667.     if (non_img !== null) {
  3668.       data.non_img_div = non_img;
  3669.  
  3670.       const objs = non_img.getElementsByTagName('OBJECT');
  3671.       const embs = non_img.getElementsByTagName('EMBED');
  3672.       data.is_flash = (objs.length === 1 && embs.length === 1); // <object><embed>
  3673.  
  3674.       if (!data.is_flash) {
  3675.         show_notice(console.error, '[addon error] unknown post content! Can\'t read width/height.');
  3676.         return;
  3677.       }
  3678.  
  3679.       data.img_elem = objs[0];
  3680.       data.emb_elem = embs[0];
  3681.       // <object> contains width/height in both Firefox and Chrome
  3682.       data.width  = data.img_elem.width;
  3683.       data.height = data.img_elem.height;
  3684.       console.log('[addon] Read resolution ', data.width, 'x', data.height);
  3685.  
  3686.       data.aspect_ratio = data.width / data.height;
  3687.       image_data = data;
  3688.     }
  3689.   }
  3690.  
  3691.   const SCALE_MODES = { RESET: -1, FIT: 0, HORIZONTAL: 1, VERTICAL: 2 };
  3692.  
  3693.   // stretch image/video/flash, requires data from read_image_data()
  3694.   function scale_image(mode, always_scale) {
  3695.     if (image_data === null) return; // read_image_data() failed
  3696.  
  3697.     if (!always_scale && (!config.scale_flash && image_data.is_flash))
  3698.       return;
  3699.  
  3700.     // We can't use transform scale because it doesn't change the DOM size (so the image could be covered up by other elements)
  3701.     // We also can't use style.width/height because translation notes rely on .width/.height
  3702.     const set_dimensions = (obj, dim) => {
  3703.       obj.width  = dim.width;
  3704.       obj.height = dim.height;
  3705.     };
  3706.  
  3707.     // reset image size
  3708.     if (mode === SCALE_MODES.RESET) {
  3709.       if (!image_data.is_flash) {
  3710.         set_dimensions(image_data.img_elem, image_data);
  3711.         image_data.img_elem.classList.add('fit-width');
  3712.         image_data.img_elem.classList.add('fit-height');
  3713.         adjust_notes();
  3714.       } else {
  3715.         set_dimensions(image_data.img_elem, image_data);
  3716.         set_dimensions(image_data.emb_elem, image_data);
  3717.       }
  3718.  
  3719.       return;
  3720.     }
  3721.  
  3722.     const left_side = image_data.img_elem.getBoundingClientRect().left + window.scrollX;
  3723.     const target_w = Math.max(window.innerWidth - Math.ceil(left_side) - get_scrollbar_width(), 1);
  3724.     const target_h = Math.max(window.innerHeight, 1);
  3725.     const target_aspect_ratio = target_w / target_h;
  3726.  
  3727.     if (mode === SCALE_MODES.FIT)
  3728.       mode = (image_data.aspect_ratio > target_aspect_ratio ? SCALE_MODES.HORIZONTAL : SCALE_MODES.VERTICAL);
  3729.  
  3730.     const scaled = {};
  3731.     if (mode === SCALE_MODES.HORIZONTAL) {
  3732.       scaled.width  = Math.floor(target_w);
  3733.       scaled.height = Math.floor(target_w / image_data.aspect_ratio);
  3734.     } else if (mode === SCALE_MODES.VERTICAL) {
  3735.       scaled.width  = Math.floor(target_h * image_data.aspect_ratio);
  3736.       scaled.height = Math.floor(target_h);
  3737.     }
  3738.  
  3739.     if (!always_scale && (config.scale_only_downscale && (scaled.width > image_data.width || scaled.height > image_data.height)))
  3740.       return;
  3741.  
  3742.     if (!image_data.is_flash) {
  3743.       set_dimensions(image_data.img_elem, scaled);
  3744.       image_data.img_elem.classList.remove('fit-width');
  3745.       image_data.img_elem.classList.remove('fit-height');
  3746.       adjust_notes();
  3747.     } else {
  3748.       set_dimensions(image_data.img_elem, scaled);
  3749.       set_dimensions(image_data.emb_elem, scaled);
  3750.     }
  3751.   }
  3752.  
  3753.   function adjust_notes() {
  3754.     for (const note of unsafeWindow.Note?.all ?? []) {
  3755.       note.adjustScale(); // this relies on the image's .width and .height
  3756.     }
  3757.   }
  3758.  
  3759.   function scale_on_resize_helper() {
  3760.     clearTimeout(resize_timer);
  3761.     resize_timer = setTimeout(() => {
  3762.       if (config.scale_on_resize) scale_image(config.scale_mode, false);
  3763.     }, 100);
  3764.   }
  3765.  
  3766.   function add_scale_on_resize_listener() {
  3767.     window.addEventListener('resize', scale_on_resize_helper);
  3768.   }
  3769.  
  3770.   function remove_scale_on_resize_listener() {
  3771.     window.removeEventListener('resize', scale_on_resize_helper);
  3772.   }
  3773.  
  3774.   function scroll_to_image() {
  3775.     window.requestAnimationFrame(() => {
  3776.       if (image_data === null) return;
  3777.       const img_rect = (image_data.is_flash ? image_data.non_img_div : image_data.img_elem).getBoundingClientRect();
  3778.       const absolute_img_top = Math.round(img_rect.top) + window.scrollY;
  3779.       if (config.scroll_to_image_center && img_rect.height !== 0) { // TODO height may or may not be 0, needs more testing
  3780.         const top_of_centered_rect = absolute_img_top - (window.innerHeight - img_rect.height) / 2;
  3781.         window.scrollTo(0, top_of_centered_rect);
  3782.       } else {
  3783.         window.scrollTo(0, absolute_img_top);
  3784.       }
  3785.       done_scrolling = true;
  3786.     });
  3787.   }
  3788.  
  3789.   // when resize notice is hidden (e.g. original image is loaded), scroll to make up the difference
  3790.   function add_resize_notice_listener() {
  3791.     const resized_notice = document.getElementById('resized_notice');
  3792.     if (image_data === null || resized_notice === null) return;
  3793.  
  3794.     const notice_y_diff = image_data.img_elem.getBoundingClientRect().top - resized_notice.getBoundingClientRect().top;
  3795.  
  3796.     const observer = new MutationObserver(() => {
  3797.       observer.disconnect();
  3798.       window.scrollBy(0, -notice_y_diff);
  3799.     });
  3800.     observer.observe(resized_notice, { attributeFilter: ['style'] });
  3801.   }
  3802.  
  3803.   function add_highres_listener() {
  3804.     const img = document.getElementById('image');
  3805.     if (img === null) return;
  3806.  
  3807.     const observer = new MutationObserver(() => {
  3808.       // image is cleared before highres image is loaded
  3809.       if (img.src === 'about:blank') return;
  3810.       observer.disconnect();
  3811.  
  3812.       // re-read image size in case get_resolution() had to be used
  3813.       read_image_data().then(() => {
  3814.         if (config.scale_image) scale_image(config.scale_mode, false);
  3815.       });
  3816.     });
  3817.  
  3818.     observer.observe(img, { attributeFilter: ['src'] });
  3819.   }
  3820.  
  3821.   async function load_highres() {
  3822.     if (!config.load_highres) return;
  3823.  
  3824.     if (config.highres_limit > 0) {
  3825.       const highres = document.getElementById('highres');
  3826.       if (highres !== null) {
  3827.         let size = highres.title; // e.g. "1,738,253 bytes"
  3828.         size = size.replaceAll(',', '');
  3829.         size = parseInt(size, 10);
  3830.  
  3831.         if (size > config.highres_limit) {
  3832.           return;
  3833.         }
  3834.       }
  3835.     }
  3836.  
  3837.     while (!is_done_scrolling() || unsafeWindow.Post?.highres === undefined)
  3838.       await sleep(20);
  3839.  
  3840.     // mimic sitescript
  3841.     unsafeWindow.jQuery('a#image-link.sample').unbind('click').removeAttr('href');
  3842.     unsafeWindow.Post.highres();
  3843.   }
  3844.  
  3845.   function redirect_v_to_s_server() {
  3846.     const img = document.getElementById('image');
  3847.     if (img === null) return;
  3848.  
  3849.     const url = new URL(img.src);
  3850.     if (url.host === 'v.sankakucomplex.com') {
  3851.       url.host = 's.sankakucomplex.com';
  3852.       img.src = url;
  3853.     }
  3854.   }
  3855.  
  3856.   function add_postpage_hotkeys() {
  3857.     document.addEventListener('keydown', (e) => {
  3858.       if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;
  3859.  
  3860.       for (const hotkey of config.postpage_hotkeys) {
  3861.         hotkey.call(e);
  3862.       }
  3863.     }, true);
  3864.   }
  3865.  
  3866.   // sitefix: fix pixiv source links under 'Details'
  3867.   // issue: source links of the form https://www.pixiv.net/artworks/<id> turn into
  3868.   // https://www.pixiv.net/artworks/https://www.pixiv.net/artworks/<id>
  3869.   // doesn't happen for https://www.pixiv.net/en/artworks/<id>
  3870.   // or the old format https://www.pixiv.net/member_illust.php?mode=medium&illust_id=<id>
  3871.   function fix_source_link() {
  3872.     const stats = document.getElementById('stats');
  3873.     if (stats === null) return;
  3874.  
  3875.     for (const link of stats.getElementsByTagName('A')) {
  3876.       if (!link.href) continue;
  3877.       if (link.href.startsWith('https://www.pixiv.net/artworks/')) {
  3878.         const id = link.href.substring('https://www.pixiv.net/artworks/'.length);
  3879.         try {
  3880.           new URL(id); // throws if not a valid URL
  3881.           link.href = id;
  3882.         } catch (ignore) { }
  3883.       } else {
  3884.         const match = /https:\/\/pictures.hentai-foundry.com\/[^/]\/([^/]+)\/(\d+)\//.exec(link.href);
  3885.         if (match) {
  3886.           const [,user, post_id] = match;
  3887.           link.href = `https://www.hentai-foundry.com/pictures/user/${user}/${post_id}`;
  3888.         }
  3889.       }
  3890.     }
  3891.   }
  3892.  
  3893.   /***********************/
  3894.   /* wiki page functions */
  3895.   /***********************/
  3896.  
  3897.   function add_wiki_template() {
  3898.     if (config.wiki_template.length === 0) return;
  3899.  
  3900.     const wiki_form = document.getElementById('wiki-form');
  3901.     const wiki_body = document.getElementById('wiki_page_body');
  3902.  
  3903.     if (wiki_form === null || wiki_body === null) {
  3904.       show_notice(console.error, '[addon error] couldn\'t find "wiki-form" or "wiki_page_body", wiki template disabled');
  3905.       return;
  3906.     }
  3907.  
  3908.     wiki_form.style.display = 'flex'; // add template to the right
  3909.  
  3910.     const div = document.createElement('DIV');
  3911.     div.style.marginLeft = '1em';
  3912.  
  3913.     const template_label = document.createElement('LABEL');
  3914.     template_label.innerText = 'Wiki Template';
  3915.     template_label.style.cursor = 'help';
  3916.     template_label.style.textDecoration = 'underline dashed';
  3917.     template_label.title = 'Selected text can be appended to the page body. Clicking or using arrow keys selects a whole line, pressing \'c\' or the button below copies the selection over';
  3918.  
  3919.     const template_text = document.createElement('TEXTAREA');
  3920.     template_text.id = 'wiki_template_text';
  3921.     template_text.cols = wiki_body.cols;
  3922.     template_text.rows = wiki_body.rows;
  3923.     template_text.style.width = '33em';
  3924.     template_text.style.marginTop = '0';
  3925.     template_text.value = config.wiki_template;
  3926.  
  3927.     const insert_template_selection = () => {
  3928.       const text = template_text.value;
  3929.       const a = template_text.selectionStart;
  3930.       const b = template_text.selectionEnd;
  3931.  
  3932.       const selection = text.substring(a, b);
  3933.       const add_newline = wiki_body.value && !wiki_body.value.endsWith('\n');
  3934.       wiki_body.value += (add_newline ? '\n' : '') + selection;
  3935.     };
  3936.  
  3937.     const extend_selection = () => {
  3938.       // extend empty selection to newlines (or text start/end)
  3939.       const text = template_text.value;
  3940.       let a = template_text.selectionStart;
  3941.       let b = template_text.selectionEnd;
  3942.  
  3943.       if (a === b) {
  3944.         const ext_a = text.lastIndexOf('\n', a - 1);
  3945.         a = (ext_a !== -1 ? ext_a + 1 : 0);
  3946.  
  3947.         if (text.charAt(b) !== '\n') {
  3948.           const ext_b = text.indexOf('\n', b + 1);
  3949.           b = (ext_b !== -1 ? ext_b - 1 : text.length - 1) + 1;
  3950.         }
  3951.  
  3952.         template_text.setSelectionRange(a, b);
  3953.       }
  3954.     };
  3955.  
  3956.     template_text.readOnly = true; // hides the caret and there's no easy workaround
  3957.     template_text.addEventListener('click', extend_selection);
  3958.     template_text.addEventListener('keyup', extend_selection);
  3959.     template_text.addEventListener('keydown', (e) => {
  3960.       if (e.ctrlKey || e.altKey || e.shiftKey) return;
  3961.       if (e.key === 'c') insert_template_selection();
  3962.     });
  3963.  
  3964.     const btn = document.createElement('BUTTON');
  3965.     btn.innerText = 'Copy selection over';
  3966.     btn.style.fontWeight = 'bold';
  3967.     btn.style.padding = '0.2em 2em';
  3968.     btn.style.margin = '0.1em';
  3969.     btn.onclick = () => { insert_template_selection(); template_text.focus(); return false; };
  3970.  
  3971.     div.appendChild(template_label);
  3972.     div.appendChild(document.createElement('BR'));
  3973.     div.appendChild(template_text);
  3974.     div.appendChild(document.createElement('BR'));
  3975.     div.appendChild(btn);
  3976.     wiki_form.appendChild(div);
  3977.  
  3978.     div.style.marginTop = (wiki_body.getBoundingClientRect().top - wiki_form.getBoundingClientRect().top - template_label.getBoundingClientRect().height - 1) + 'px';
  3979.   }
  3980.  
  3981.   function add_status_post_links() {
  3982.     const random_posts = [...document.querySelectorAll('.highlightable a')].find(a => a.href.endsWith('%20order%3Arandom'));
  3983.     if (!random_posts) return;
  3984.     const user_posts = random_posts.parentElement.children[0].href;
  3985.     const username = new URL(user_posts).searchParams.get('tags').substring('user:'.length);
  3986.  
  3987.     const status_post_link = (name, search) => {
  3988.       const a = document.createElement('A');
  3989.       a.href = get_search_url(search);
  3990.       a.innerText = name;
  3991.       return a;
  3992.     };
  3993.  
  3994.     let dateSearch = '';
  3995.     if (get_username() !== username) { // not your own profile
  3996.       // Thanks to Evaera
  3997.       // add leeway of 3 days to tag count searches (should be 2 days but date search goes by server time, which can differ from local UTC by up to 14 hours)
  3998.       const threeDaysAgo = new Date();
  3999.       threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
  4000.       const dd = String(threeDaysAgo.getUTCDate()).padStart(2, '0');
  4001.       const mm = String(threeDaysAgo.getUTCMonth() + 1).padStart(2, '0');
  4002.       const yyyy = threeDaysAgo.getUTCFullYear();
  4003.       dateSearch = ` date:<${yyyy}-${mm}-${dd}`;
  4004.     }
  4005.  
  4006.     insert_node_after(status_post_link('approver', `approver:${username}`), random_posts);
  4007.     insert_node_after(document.createTextNode(', '), random_posts);
  4008.     insert_node_after(status_post_link('flagger', `flagger:${username}`), random_posts);
  4009.     insert_node_after(document.createTextNode(', '), random_posts);
  4010.     insert_node_after(status_post_link('artist_tag_count:0', `user:${username} artist_tag_count:0${dateSearch}`), random_posts);
  4011.     insert_node_after(document.createTextNode(', '), random_posts);
  4012.     insert_node_after(status_post_link('general_tag_count:<13', `user:${username} general_tag_count:<13${dateSearch}`), random_posts);
  4013.     insert_node_after(document.createTextNode(', '), random_posts);
  4014.     insert_node_after(status_post_link('tagme', `user:${username} tagme${dateSearch}`), random_posts);
  4015.     insert_node_after(document.createTextNode(', '), random_posts);
  4016.     insert_node_after(status_post_link('flagged', `user:${username} status:flagged`), random_posts);
  4017.     insert_node_after(document.createTextNode(', '), random_posts);
  4018.     insert_node_after(status_post_link('unapproved', `user:${username} status:pending`), random_posts);
  4019.     insert_node_after(document.createTextNode(', '), random_posts);
  4020.   }
  4021.  
  4022.   function add_record_template() {
  4023.     const record_body = document.getElementById('user_record_body');
  4024.     const record_score = document.getElementById('user_record_score');
  4025.  
  4026.     if (record_body === null || record_score === null) {
  4027.       show_notice(console.error, 'couldn\'t find record elements, disabled template');
  4028.       return;
  4029.     }
  4030.  
  4031.     const label = document.createElement('SPAN');
  4032.     label.innerText = 'Template:';
  4033.     label.style.marginLeft = '0.5em';
  4034.     label.style.marginRight = '0.5em';
  4035.     insert_node_after(label, record_score);
  4036.  
  4037.     // the JSON is supposed to be an array of 2-or-3-entry-arrays, which converts to Map
  4038.     const raw_templates = JSON.parse(config.record_template);
  4039.  
  4040.     const templates = new Map();
  4041.     for (const [title, content, raw_score] of raw_templates) {
  4042.       let score = null;
  4043.       if (typeof raw_score !== 'undefined') {
  4044.         score = raw_score.toLowerCase();
  4045.  
  4046.         if (score === 'neutral') score = 0;
  4047.         else if (score === 'positive') score = 1;
  4048.         else if (score === 'negative') score = -1;
  4049.         else score = null;
  4050.       }
  4051.  
  4052.       if (score === null) {
  4053.         show_notice(console.error, '[addon error] record template has invalid score, see console for details', [title, content, raw_score]);
  4054.       }
  4055.  
  4056.       templates.set(title, { content, score });
  4057.     }
  4058.  
  4059.     const apply_template = (template) => {
  4060.       record_body.value = template.content;
  4061.       if (template.score !== null) record_score.value = template.score;
  4062.     };
  4063.  
  4064.     const dropdown = create_template_dropdown(templates, apply_template);
  4065.     dropdown.id = 'template_dropdown';
  4066.     insert_node_after(dropdown, label);
  4067.   }
  4068.  
  4069.   function add_tagscript_presets() {
  4070.     if (!IndexPage.has_tag_scripts) return;
  4071.  
  4072.     const mode_menu = document.getElementById('mode-menu');
  4073.     if (mode_menu === null) {
  4074.       show_notice(console.error, '[addon error] couldn\'t find "Mode" menu, disabled tagscript presets');
  4075.       return;
  4076.     }
  4077.  
  4078.     // the JSON is supposed to be an array of 2-entry-arrays, which converts to Map
  4079.     const presets = new Map(JSON.parse(config.tagscript_presets));
  4080.  
  4081.     if (presets.size === 0)
  4082.       return;
  4083.  
  4084.     mode_menu.appendChild(document.createElement('P'));
  4085.  
  4086.     const label = document.createElement('H5');
  4087.     label.innerText = 'Tag Script Presets';
  4088.     mode_menu.appendChild(label);
  4089.  
  4090.     const set_tag_script = (script) => {
  4091.       set_cookie('tag-script', script);
  4092.       select_mode('apply-tag-script');
  4093.     };
  4094.  
  4095.     const dropdown = create_template_dropdown(presets, set_tag_script);
  4096.     dropdown.id = 'tagscript_presets_dropdown';
  4097.     mode_menu.appendChild(dropdown);
  4098.   }
  4099.  
  4100.   function create_template_dropdown(templates, change_event) {
  4101.     const dropdown = document.createElement('SELECT');
  4102.  
  4103.     const empty_option = document.createElement('OPTION');
  4104.     empty_option.disabled = true;
  4105.     empty_option.selected = true;
  4106.     empty_option.style.display = 'none';
  4107.     dropdown.appendChild(empty_option);
  4108.  
  4109.     for (const [title, value] of templates.entries()) {
  4110.       const option = document.createElement('OPTION');
  4111.       option.innerText = title;
  4112.  
  4113.       // somewhat redundant to the change event but allows to "reset" the text to an already selected template
  4114.       option.addEventListener('click', (e) => {
  4115.         change_event(value);
  4116.         e.preventDefault();
  4117.       });
  4118.  
  4119.       dropdown.appendChild(option);
  4120.     }
  4121.  
  4122.     dropdown.addEventListener('change', (e) => {
  4123.       change_event(templates.get(dropdown.value));
  4124.       e.preventDefault();
  4125.     });
  4126.  
  4127.     return dropdown;
  4128.   }
  4129.  
  4130.   function add_tag_edit_gear() { // add a "⚙" link to the tag edit page
  4131.     try {
  4132.       const h2 = document.querySelector('.title');
  4133.  
  4134.       if (WikiPage.tag === 'recent_changes') return;
  4135.  
  4136.       const a = document.createElement('A');
  4137.       const url = new URL(`${get_lang_path()}/tag_histories`, document.location.origin);
  4138.       url.searchParams.set('tag_name', WikiPage.tag);
  4139.       a.href = url.href;
  4140.       a.innerText = '⚙';
  4141.       a.title = 'Tag History (with edit link)';
  4142.  
  4143.       h2.appendChild(a);
  4144.     } catch (error) {
  4145.       show_notice(console.error, '[addon error] couldn\'t add "⚙" tag page link, check console', error);
  4146.     }
  4147.   }
  4148.  
  4149.   function add_tag_history_link() { // add a "History »" link to the tag history page
  4150.     try {
  4151.       const info = document.querySelector('.tag-information');
  4152.       const related = document.querySelector('.related-tags');
  4153.  
  4154.       // use the hidden form field because url can either be e.g. /tags/edit?name=high_resolution or /tags/edit/464292
  4155.       const tag = document.getElementById('tag_name').value;
  4156.  
  4157.       const div = document.createElement('DIV');
  4158.       const h4 = document.createElement('H4');
  4159.       const a = document.createElement('A');
  4160.       a.href = '/tag_histories?tag_name=' + tag;
  4161.       a.innerText = 'History »';
  4162.  
  4163.       div.appendChild(h4);
  4164.       h4.appendChild(a);
  4165.  
  4166.       if (related !== null) {
  4167.         related.insertAdjacentElement('afterend', div);
  4168.       } else {
  4169.         info.prepend(div);
  4170.       }
  4171.     } catch (error) {
  4172.       show_notice(console.error, '[addon error] couldn\'t add tag history page link, check console', error);
  4173.     }
  4174.   }
  4175.  
  4176.   function deletion_sanity_checks() { // for duplicates
  4177.     const thumbs = [...document.querySelectorAll('#content > .deleting-post .thumb')];
  4178.     if (thumbs.length !== 2)
  4179.       return; // no parent
  4180.  
  4181.     const WARNING_TEXT = '<b style="color: crimson">Warning: </b>';
  4182.     const CHECKED_TAGS = ['upscaled', 'legitimate_variation', 'revision', 'third-party_edit', 'decensored', 'potential_upscale', 'md5_mismatch', 'resolution_mismatch'];
  4183.     const CHECKED_COMBINATIONS = [['censored', 'uncensored']];
  4184.  
  4185.     // remove old warnings before re-evaluating
  4186.     document.querySelectorAll('.SA-warning').forEach((el) => el.remove());
  4187.  
  4188.     const posts = thumbs.map(get_post_from_thumb);
  4189.  
  4190.     const warn_tags = posts.map(post => post.tags.filter(tag => CHECKED_TAGS.includes(tag)));
  4191.  
  4192.     for (const [tag1, tag2] of CHECKED_COMBINATIONS) {
  4193.       for (let i = 0; i < 2; i++) {
  4194.         if (posts[i].tags.includes(tag1) && posts[1 - i].tags.includes(tag2)) {
  4195.           warn_tags[i].push(tag1);
  4196.           warn_tags[1 - i].push(tag2);
  4197.         }
  4198.       }
  4199.     }
  4200.  
  4201.     const convert_to_margin = (thumb) => {
  4202.       const a = thumb.querySelector('a');
  4203.       const y_diff = a.getBoundingClientRect().top - thumb.getBoundingClientRect().top;
  4204.  
  4205.       // the thumbnail image is centered in a grid (see adjust_css()), which will move it up when something is added below it
  4206.       // to fix this we replace the vertical centering with a margin (and allow the thumbnail to scale vertically too)
  4207.  
  4208.       // fix thumbnail in place vertically
  4209.       a.style.marginTop = `${y_diff}px`;
  4210.       thumb.style.alignContent = 'start';
  4211.       // make thumbnail scale vertically
  4212.       thumb.style.minHeight = window.getComputedStyle(thumb).height;
  4213.       thumb.style.height = 'auto';
  4214.     };
  4215.  
  4216.     thumbs.forEach(convert_to_margin);
  4217.  
  4218.     const add_tags_below_thumb = (thumb, tags, missing) => {
  4219.       for (const tag of tags) {
  4220.         const span = document.createElement('SPAN');
  4221.         span.className = 'SA-warning';
  4222.         span.style.color = 'crimson';
  4223.         span.style.fontWeight = 'bold';
  4224.         if (missing) span.style.textDecoration = 'line-through';
  4225.         span.innerText = tag;
  4226.  
  4227.         thumb.appendChild(span);
  4228.       }
  4229.     };
  4230.  
  4231.     for (let i = 0; i < thumbs.length; i++) {
  4232.       add_tags_below_thumb(thumbs[i], warn_tags[i]);
  4233.     }
  4234.  
  4235.     if (!posts[0].tags.includes('duplicate')) {
  4236.       add_tags_below_thumb(thumbs[0], ['duplicate'], true);
  4237.     }
  4238.  
  4239.     const integer_multiple = (a, b) => {
  4240.       if (a < b) return integer_multiple(b, a);
  4241.       if (a > b && a % b === 0) {
  4242.         return a / b;
  4243.       }
  4244.       return NaN;
  4245.     };
  4246.  
  4247.     const widths = [];
  4248.     const heights = [];
  4249.  
  4250.     // read resolutions
  4251.     const res = document.querySelector('#content > .deleting-post > ul > li:nth-child(2)');
  4252.     for (const b of res.getElementsByTagName('B')) {
  4253.       const match = /([\d]+)x([\d]+)/.exec(b.innerText);
  4254.       if (match) {
  4255.         const [, width, height] = match;
  4256.         widths.push(Number(width));
  4257.         heights.push(Number(height));
  4258.       }
  4259.     }
  4260.  
  4261.     // add potential upscale warning
  4262.     const multiple = integer_multiple(...widths);
  4263.     if (multiple === integer_multiple(...heights)) {
  4264.       const span = document.createElement('SPAN');
  4265.       span.className = 'SA-warning';
  4266.       span.innerHTML = ` ${WARNING_TEXT} potential ${multiple}x upscale`;
  4267.       res.insertAdjacentElement('beforeend', span);
  4268.     }
  4269.   }
  4270.  
  4271.   function add_custom_duplicate_delete_reason() {
  4272.     const reason = document.getElementById('reason');
  4273.     const custom_reason = document.getElementById('custom_reason');
  4274.  
  4275.     const thumbs = [...document.querySelectorAll('#content > .deleting-post .thumb')];
  4276.     if (thumbs.length !== 2)
  4277.       return; // no parent
  4278.  
  4279.     const parent_id = thumbs[1].id.substring(1);
  4280.  
  4281.     const custom_dupe_option = document.createElement('OPTION');
  4282.     custom_dupe_option.innerText = `duplicate of ${parent_id} (custom reason)`;
  4283.     reason.appendChild(custom_dupe_option);
  4284.  
  4285.     reason.addEventListener('change', () => {
  4286.       const i = reason.selectedIndex;
  4287.       if (i === 0) return;
  4288.  
  4289.       const is_custom_dupe = reason.options[i] === custom_dupe_option;
  4290.  
  4291.       if (is_custom_dupe) {
  4292.         reason.selectedIndex = 0;
  4293.         custom_reason.value = `duplicate of ${parent_id} (...)`;
  4294.         custom_reason.focus();
  4295.         custom_reason.setSelectionRange(custom_reason.value.length - 4, custom_reason.value.length - 1);
  4296.       }
  4297.     });
  4298.   }
  4299.  
  4300.   function add_tags_copy_button() {
  4301.     const tags_not_present = document.querySelector('#content > .deleting-post > ul > li:nth-child(7)');
  4302.     if (tags_not_present === null) return;
  4303.  
  4304.     let tags_diff = ' ';
  4305.     for (const a of tags_not_present.getElementsByTagName('A')) {
  4306.       const tag = a.innerText.replaceAll(' ', '_');
  4307.       if (['duplicate', 'potential_duplicate'].includes(tag)) continue; // TODO: ignore all meta tags?
  4308.       tags_diff += tag + ' ';
  4309.     }
  4310.  
  4311.     const button = document.createElement('BUTTON');
  4312.     button.type = 'button';
  4313.     button.innerText = 'Copy Tags';
  4314.     button.onclick = () => set_clipboard(tags_diff);
  4315.  
  4316.     tags_not_present.appendChild(button);
  4317.   }
  4318.  
  4319.   function add_post_edit_buttons() {
  4320.     // cache thumbnail tags
  4321.     for (const thumb of document.querySelectorAll('.thumb'))
  4322.       get_post_from_thumb(thumb);
  4323.  
  4324.     const thumbs = [...document.querySelectorAll('.deleting-post .thumb')];
  4325.     for (const thumb of thumbs) {
  4326.       const a = document.createElement('A');
  4327.       a.innerText = '⚙';
  4328.       a.style.fontSize = '120%';
  4329.       a.href = '#';
  4330.       a.onclick = () => {
  4331.         open_post_edit_dialog(thumb);
  4332.         return false;
  4333.       };
  4334.       thumb.appendChild(a);
  4335.     }
  4336.   }
  4337.  
  4338.   function add_moderation_search_template() {
  4339.     const query = document.getElementById('query');
  4340.     const select = create_template_dropdown(new Map([
  4341.       ['Pending Posts', {add: ['status:pending'], remove: ['order:recently_flagged']}],
  4342.       ['Flagged Posts', {add: ['order:recently_flagged', '-status:pending'], remove: []}]
  4343.     ]), (value) => {
  4344.       select.selectedIndex = 0;
  4345.  
  4346.       const search_tags = new Tags(query.value);
  4347.       for (const tag of value.remove) {
  4348.         search_tags.remove(tag);
  4349.       }
  4350.       for (const tag of value.add) {
  4351.         search_tags.add(tag);
  4352.       }
  4353.  
  4354.       query.value = search_tags.toString() + ' ';
  4355.       query.focus();
  4356.     });
  4357.  
  4358.     const search_button = document.querySelector('#content > form > button');
  4359.     search_button.insertAdjacentElement('afterend', select);
  4360.     search_button.insertAdjacentText('afterend', ' ');
  4361.   }
  4362.  
  4363.   function get_lang_path() {
  4364.     const lang = get_cookie('locale');
  4365.     return lang && lang !== 'en' ? '/' + lang : '';
  4366.   }
  4367.  
  4368.   function old_wiki_tag_links() {
  4369.     if (!config.use_old_wiki) return;
  4370.  
  4371.     const lang = get_lang_path();
  4372.  
  4373.     const revert_beta_link = (a, is_tag_edit_link) => {
  4374.       try {
  4375.         const url = new URL(a.href);
  4376.         if (url.hostname !== 'beta.sankakucomplex.com') return;
  4377.         const tag = url.searchParams.get('tagName');
  4378.  
  4379.         if (url.pathname.startsWith('/tag/history')) {
  4380.           a.href = new URL(`${lang}/tag_histories?tag_name=${tag}`, document.location.origin).href;
  4381.         } else if (url.pathname.startsWith('/tag/')) {
  4382.           // tag index "Edit" link
  4383.           if (is_tag_edit_link) {
  4384.             // tag edit page still exists but needs id: /tags/<id>/edit, tag history has working edit link
  4385.             a.href = new URL(`${lang}/tag_histories?tag_name=${tag}`, document.location.origin).href;
  4386.           } else {
  4387.             a.href = new URL(`${lang}/wiki/${tag}`, document.location.origin).href;
  4388.           }
  4389.         } else if (url.pathname === '/') {
  4390.           const tags = url.searchParams.get('tags');
  4391.           a.href = new URL(`${lang}/?tags=${tags}`, document.location.origin).href;
  4392.         }
  4393.       } catch (e) { console.error('[addon error] failed reverting beta link', a.href, e); }
  4394.     };
  4395.  
  4396.     if (General.page === Page.TagIndex) {
  4397.       document.querySelectorAll('tbody td:nth-child(6) a').forEach(a => revert_beta_link(a, true));
  4398.       document.querySelectorAll('tbody a').forEach(a => revert_beta_link(a));
  4399.     } else {
  4400.       document.querySelectorAll('.tooltip a').forEach(a => revert_beta_link(a));
  4401.     }
  4402.   }
  4403.  
  4404.   function old_wiki_subnav_links() {
  4405.     if (!config.use_old_wiki) return;
  4406.  
  4407.     const lang = get_lang_path();
  4408.  
  4409.     for (const a of document.querySelectorAll('#subnavbar a')) {
  4410.       const url = new URL(a.href);
  4411.       if (url.hostname !== 'beta.sankakucomplex.com') continue;
  4412.  
  4413.       if (a.pathname === '/wiki/edit_article') {
  4414.         const tag = url.searchParams.get('tagName');
  4415.         a.href = new URL(`${lang}/wiki/edit?title=${tag}`, document.location.origin).href;
  4416.       } else if (a.pathname === '/wiki/article_history') {
  4417.         // TODO this currently points to the history tag wiki
  4418.         //a.href = new URL(`${lang}/wiki/history?title=${tag}`, document.location.origin).href;
  4419.         a.style.color = 'red';
  4420.       } else if (a.pathname === '/wiki/create_article') {
  4421.         a.href = new URL(`${lang}/wiki/new`, document.location.origin).href;
  4422.       } else if (a.pathname === '/') {
  4423.         const tag = url.searchParams.get('tags');
  4424.         a.href = new URL(`${lang}/?tags=${tag}`, document.location.origin).href;
  4425.       }
  4426.     }
  4427.   }
  4428.  
  4429.   function old_pools_post_link() {
  4430.     if (!config.use_old_pools) return;
  4431.  
  4432.     for (const el of document.querySelectorAll('.status-notice')) {
  4433.       if (el.id.startsWith('pool')) {
  4434.         const pool_id = el.id.substring(4);
  4435.  
  4436.         for (const a of el.querySelectorAll('a')) {
  4437.           const url = new URL(a.href);
  4438.           if (url.hostname !== 'beta.sankakucomplex.com') continue;
  4439.  
  4440.           a.href = new URL(`${get_lang_path()}/pools/${pool_id}`, document.location.origin).href;
  4441.           break;
  4442.         }
  4443.       }
  4444.     }
  4445.   }
  4446.  
  4447.   function old_nav_links() {
  4448.     for (const a of document.querySelectorAll('#navbar a')) {
  4449.       const url = new URL(a.href);
  4450.       if (url.hostname !== 'beta.sankakucomplex.com') continue;
  4451.  
  4452.       let reset_color = false;
  4453.  
  4454.       if (config.use_old_pools && a.pathname === '/books') {
  4455.         a.href = new URL(`${get_lang_path()}/pools`, document.location.origin).href;
  4456.         reset_color = true;
  4457.       } else if (config.use_old_tags_index && a.pathname === '/tags') {
  4458.         a.href = new URL(`${get_lang_path()}/tags`, document.location.origin).href;
  4459.         reset_color = true;
  4460.       }
  4461.  
  4462.       if (reset_color) {
  4463.         const font = a.querySelector('font');
  4464.         if (font) font.style.color = 'unset';
  4465.       }
  4466.     }
  4467.   }
  4468.  
  4469.  
  4470.   /******************/
  4471.   /* document-start */
  4472.   /******************/
  4473.  
  4474.   await load_config();
  4475.  
  4476.   let pathname = window.location.pathname;
  4477.  
  4478.   // strip language codes in pathnames like "/ja/post/show"
  4479.   if (pathname.indexOf('/', 1) === 3) pathname = pathname.substring(3);
  4480.  
  4481.   // normalize old singulars to plurals
  4482.   for (const path of ['post', 'user', 'user_record', 'tag']) {
  4483.     if (pathname.startsWith(`/${path}/`) || pathname === '/' + path)
  4484.       pathname = `/${path}s` + pathname.slice(5);
  4485.   }
  4486.  
  4487.   // normalize post index
  4488.   if (pathname.startsWith('/posts/index') || pathname === '/posts')
  4489.     pathname = '/';
  4490.  
  4491.   const segments = pathname.split('/').filter(Boolean);
  4492.  
  4493.   // match_segments('posts', 'delete') will match 'posts/[.../.../]delete[/...]'
  4494.   function match_segments(...ordered) {
  4495.     let i = 0;
  4496.  
  4497.     return ordered.every(m => {
  4498.       // search next segment
  4499.       while (i < segments.length) {
  4500.         if (segments[i++] === m) {
  4501.           return true;
  4502.         }
  4503.       }
  4504.  
  4505.       return false;
  4506.     });
  4507.   }
  4508.  
  4509.   // detect page
  4510.   if (pathname === '/' || (match_segments('posts') && segments.length === 1)
  4511.       || match_segments('posts', 'similar'))                  General.page = Page.Index;
  4512.   else if (match_segments('posts', 'delete'))                 General.page = Page.Delete;
  4513.   else if (match_segments('posts', 'moderate'))               General.page = Page.Moderate;
  4514.   else if (match_segments('posts', 'upload'))                 General.page = Page.Upload;
  4515.   else if (match_segments('posts'))                           General.page = Page.Post;
  4516.   else if (match_segments('pools'))                           General.page = Page.Pool;
  4517.   else if (match_segments('wiki', 'new'))                     General.page = Page.WikiNew;
  4518.   else if (match_segments('wiki', 'edit'))                    General.page = Page.WikiEdit;
  4519.   else if (match_segments('wiki') && segments.length !== 1)   General.page = Page.WikiShow;
  4520.   else if (match_segments('tags', 'edit'))                    General.page = Page.Tag;
  4521.   else if (match_segments('tags'))                            General.page = Page.TagIndex;
  4522.   else if (match_segments('users'))                           General.page = Page.User;
  4523.   else if (match_segments('user_records', 'new'))             General.page = Page.AddRecord;
  4524.  
  4525.   // listen for config changes in other windows
  4526.   add_storage_change_listener();
  4527.  
  4528.   modify_css();
  4529.  
  4530.   // add thumbnail icons and fade out thumbnails
  4531.   modify_nodes('img.post-preview-image', modify_thumbnail, '.content-page, #recommendations');
  4532.  
  4533.   switch (General.page) {
  4534.     case Page.Post:
  4535.  
  4536.       // mute/pause video
  4537.       modify_nodes('video#image', node => { configure_video(node); return true; });
  4538.  
  4539.       break;
  4540.   }
  4541.  
  4542.  
  4543.  
  4544.  
  4545.   /******************/
  4546.   /* content-loaded */
  4547.   /******************/
  4548.  
  4549.   async function init() {
  4550.     IndexPage.init();
  4551.     PostPage.init();
  4552.     WikiPage.init();
  4553.     PoolPage.init();
  4554.  
  4555.     add_config_dialog();
  4556.     if (IS_MONKEY) GM.registerMenuCommand('Open Addon Config', () => show_config_dialog(true), 'C');
  4557.     add_config_button();
  4558.     update_config_dialog();
  4559.  
  4560.     update_headerlogo();
  4561.     useful_beta_link();
  4562.     old_wiki_tag_links();
  4563.     old_wiki_subnav_links();
  4564.     old_nav_links();
  4565.  
  4566.     switch (General.page) {
  4567.       case Page.Index:
  4568.         add_mode_options();
  4569.         add_tagscript_presets();
  4570.  
  4571.         collect_tag_categories();
  4572.         if (config.tag_search_buttons) add_tag_search_buttons();
  4573.         if (config.tag_post_counts) add_tag_post_counts();
  4574.         add_postmode_hotkeys();
  4575.  
  4576.         // TODO Edit Tags mode currently broken
  4577.         // add_post_edit_dialog();
  4578.         // update_tag_elements(); // initialize tag menu/buttons
  4579.         // add_tags_change_listener();
  4580.  
  4581.         break;
  4582.  
  4583.       case Page.Post:
  4584.         // reading the post id can fail when rate limited (or when the website changes)
  4585.         if (config.view_history_enabled && PostPage.post_id !== null) {
  4586.           config[HISTORY_KEY].add(PostPage.post_id);
  4587.           save_setting(HISTORY_KEY, config[HISTORY_KEY]); // save and broadcast view history
  4588.         }
  4589.  
  4590.         collect_tag_categories();
  4591.         if (config.tag_search_buttons) add_tag_search_buttons();
  4592.         if (config.tag_post_counts) add_tag_post_counts();
  4593.         if (config.tag_category_collapser) add_tag_category_collapser();
  4594.         add_addon_actions(find_actions_list());
  4595.  
  4596.         add_flagger_links();
  4597.         link_to_post_tag_history();
  4598.  
  4599.         fix_source_link();
  4600.         if (config.move_stats_to_edit_form) move_stats_to_edit_form();
  4601.  
  4602.         add_tag_buttons('edit-form');
  4603.         if (config.tag_menu) add_tag_menu();
  4604.         update_tag_elements(); // initialize tag menu/buttons
  4605.         add_tags_change_listener();
  4606.         add_tags_submit_listener(); // specifically for edit-form
  4607.  
  4608.         add_postpage_hotkeys();
  4609.         if (config.scale_on_resize) add_scale_on_resize_listener();
  4610.  
  4611.         if (config.redirect_v_to_s_server) redirect_v_to_s_server();
  4612.         read_image_data().then(() => {
  4613.           if (config.scale_image) scale_image(config.scale_mode, false);
  4614.           if (config.scroll_to_image) scroll_to_image();
  4615.           add_resize_notice_listener();
  4616.           add_highres_listener();
  4617.           load_highres();
  4618.         });
  4619.  
  4620.         old_pools_post_link();
  4621.  
  4622.         break;
  4623.  
  4624.       case Page.WikiNew:
  4625.       case Page.WikiEdit:
  4626.         add_wiki_template();
  4627.  
  4628.         break;
  4629.  
  4630.       case Page.WikiShow:
  4631.         add_tag_edit_gear();
  4632.  
  4633.         break;
  4634.  
  4635.       case Page.Tag:
  4636.         add_tag_history_link();
  4637.  
  4638.         break;
  4639.  
  4640.       case Page.User:
  4641.         add_status_post_links();
  4642.  
  4643.         break;
  4644.  
  4645.       case Page.AddRecord:
  4646.         add_record_template();
  4647.  
  4648.         break;
  4649.  
  4650.       case Page.Delete:
  4651.         // TODO pretty much all of this is broken
  4652.         document.getElementById('custom_reason').style.minWidth = '25%';
  4653.         //add_custom_duplicate_delete_reason();
  4654.         //add_tags_copy_button();
  4655.  
  4656.         //add_post_edit_dialog();
  4657.         //add_post_edit_buttons();
  4658.         //update_tag_elements(); // initialize tag menu/buttons
  4659.         //add_tags_change_listener();
  4660.  
  4661.         //deletion_sanity_checks();
  4662.  
  4663.         break;
  4664.  
  4665.       case Page.Moderate:
  4666.         add_moderation_search_template();
  4667.  
  4668.         break;
  4669.     }
  4670.   }
  4671.  
  4672.   if (document.readyState === 'complete' || document.readyState === 'loaded' || document.readyState === 'interactive') {
  4673.     init().catch((reason) => {
  4674.       show_notice(console.error, '[addon error] init() failed, check console', reason);
  4675.     });
  4676.   } else {
  4677.     document.addEventListener('DOMContentLoaded', init, false);
  4678.   }
  4679. })(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window);