☰

BetterTeddit

Extensible convenience extension for Teddit instances while keeping general JavaScript disabled.

  1. // ==UserScript==
  2. // @name          BetterTeddit
  3. // @namespace     betterteddit
  4. // @match         https://*.teddit.net/*
  5. // @match         https://teddit.*.*/*
  6. // @exclude-match https://*.*/pics/*
  7. // @exclude-match https://*.*/vids/*
  8. // @grant         GM_setValue
  9. // @grant         GM_getValue
  10. // @grant         GM_deleteValue
  11. // @grant         GM_listValues
  12. // @grant         GM_addValueChangeListener
  13. // @grant         GM_addStyle
  14. // @run-at        document-start
  15. // @version       1.6.3
  16. // @author        Hououin Kyōma
  17. // @license       GPLv3
  18. // @description   Extensible convenience extension for Teddit instances while keeping general JavaScript disabled.
  19. // @icon          data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAgMAAABGXkYxAAAACVBMVEUAAABHcEz///+5kPJMAAAAAnRSTlP/AOW3MEoAAABySURBVBjTdc+xDYAwDATAV8qMkikYgYJQMAJTUNPT0yCFn5J34ogGXJ1lS34jtxrxhYVsIHkZZuE2aKKZsBoOgQWJl+EEDTO3oO2K+IG9IzqKA2iAo3ScQhKyVlBvqa+38gCPMQYPNkWPmpOHf9/5e/kBEFFfBfn/SWkAAAAASUVORK5CYII=
  20. // ==/UserScript==
  21.  
  22. /* TODO:
  23.  *
  24.  *  - Cookie Syncing of subs and other settings across instances. This is very trackable, but an option for people who want it regardless?
  25.  *  - Save posts in BetterTeddit instead of cookies. Could be good to backup the content as well in case post is deleted.
  26.  *  - BetterTeddit theme selector for cookie blocking theme support.
  27.  *  - Post hiding, already seen stickies specifically, probably automod replies too.
  28.  *  - Make ID's unique for each thread ID.
  29.  *
  30.  * Things I probably won't do, but someone else might write an extension for:
  31.  * - Anything that requires Reddit or Teddit API or fetching entire pages to grab information that can't be gained with the API.
  32.  *   Anything auto-reloading as well. Basically I don't want to do anything that puts extra strain on instances by making additional or repeated requests.
  33.  *   Not all instances have API enabled either and I don't want to make them incompatible or inferior for not wanting additional strain.
  34.  * - I have absolutely no interest in posting on Reddit so I won't write anything that connects to their API to allow people to DM/Post anything.
  35.  */
  36.  
  37. /* === README.md ===
  38. # BetterTeddit
  39.  
  40. Lightweight extensible userscript for Teddit instances for Reddit.
  41.  
  42. Changes to Teddit backend may break the script, please let me know if it does.
  43.  
  44. Access to javascript you can audit in advance. Turn auto-update off, audit before update.
  45.  
  46. On a Teddit instance if there were any javascript you would have no guarantee the host didn't modify any included javascript at random one day.
  47.  
  48. You have no guarantees about their backend in regards to tracking, but at least you won't be part of someone's mining botnet.
  49.  
  50. ## Features
  51.  
  52. Most features can easily be toggled on or off.
  53.  
  54. - Expand Images toggle.
  55. - Auto expand all.
  56. - Image click and drag resize.
  57. - Fixed navbar with navigation links.
  58. - Choose favorite subs for navbar.
  59. - Forced Anonymous
  60. - Colorized User ID
  61. - Hide Points
  62. - Less branding
  63. - Custom CSS import
  64.  
  65. */
  66.  
  67. /* === CHANGELOG.md ===
  68. # Changelog
  69.  
  70. ### v1.6.3 2023-01-21
  71. - Include script on any teddit subdomain.
  72. - Include version on export filename.
  73.  
  74. ### v1.6.2 2022-11-14
  75. - Exclude script on pics/vids folder when opening direct links to media.
  76. - Stop script when id topbar is not detected, probably an error page.
  77.  
  78. ### v1.6.1 2022-10-25
  79. - Fixed BT images loading even when details is closed (BT accident, not Teddit)
  80. - Expanded images now also get lazyloading.
  81.  
  82. ### v1.6.0 2022-10-24
  83. - Included IDs and Colorized IDs example extension by default.
  84. - Fixed [Prev][Next] breaking script if community has no pages. (view-more-links exist, but empty).
  85.  
  86. ### v1.5.1 2022-10-23
  87. - [Git Repository](https://codeberg.org/kazuki/betterteddit) created.
  88. - Link to git repo in config menu.
  89. - Fixed [+][-] buttons breaking until page refresh on add/remove favorite.
  90.  
  91. ### v1.5.0 2022-10-14
  92. - Import/Export/Delete storage
  93. - Version link to GreasyFork in config nav.
  94.  
  95. ### v1.4.0 2022-10-14
  96. - Importing custom CSS.
  97. - Extensible swappable tabs in config menu are now functional
  98. - Clear left on details button.
  99. - No text selection on details summary.
  100.  
  101. ### v1.3.0 2022-10-08
  102. - Favorite subs in navbar.
  103. - Toggle for [Home] and [Top][Bottom] links in header.
  104. - Fixed #bottom.
  105.  
  106. ### v1.2.0 2022-10-08
  107. - Prev/Next links always visible to preserve muscle memory consistency for anything after.
  108. - Moving topbar navigation links to the floating header.
  109. - icon added to userscript meta.
  110. - Added runtime performance timers.
  111. - Fixed content loading event not firing... Probably...
  112.  
  113. ### v1.1.0 2022-10-07
  114. - Two Image Resizing bugs have been dealt with.
  115. This changes the image containers when browsing sub feeds.
  116.  
  117. ### v1.0-Alpha Release
  118. */
  119.  
  120. /* === KNOWNBUGS.md ===
  121. # Known Bugs
  122. - https://codeberg.org/kazuki/betterteddit/issues
  123. */
  124. var start_totaltime = performance.now();
  125. var events = [];
  126. var header, header_left, header_right;
  127. var nav_home, nav_top, nav_bottom;
  128. var top_links;
  129. var expanded = false;
  130. var images_button;
  131. var pref_button;
  132. var pref_container = false;
  133. var current_sub;
  134. var fav_links;
  135. var custom_style;
  136.  
  137. // These are just defaults, change the GM values or use the new preferences button in the header.
  138. const config = {
  139.   expand_images: {
  140.     name: "Expand Images Button",
  141.     desc: "Button to toggle expand all images.",
  142.     default: true
  143.   },
  144.   auto_expand_images: {
  145.     name: "Auto Expand Images",
  146.     desc: "Expands all images automatically.",
  147.     default: false
  148.   },
  149.   image_resizer: {
  150.     name: "Image Resizer",
  151.     desc: "Click and drag to resize images.",
  152.     default: true
  153.   },
  154.   show_favorites: {
  155.     name: "Show Favorites",
  156.     desc: "Replace default / subscription links with your favorites.",
  157.     default: true
  158.   },
  159.   header_home: {
  160.     name: "Home",
  161.     desc: "Show [Home] link in the navigation bar",
  162.     default: true
  163.   },
  164.   header_topbottom: {
  165.     name: "Top/Bottom",
  166.     desc: "Show [Top][Bottom] links in the navigation bar",
  167.     default: true
  168.   },
  169.   forced_anonymous: {
  170.     name: "Forced Anonymous",
  171.     desc: "Replace names with Anonymous.",
  172.     default: true
  173.   },
  174.   user_ids: {
  175.     name: "User IDs",
  176.     desc: "Adds a hashed ID after usernames.",
  177.     default: true
  178.   },
  179.   colorized_ids: {
  180.     name: "Colorized IDs",
  181.     desc: "Gives IDs a color based on their ID.",
  182.     default: true
  183.   },
  184.   hide_points: {
  185.     name: "Hide Points",
  186.     desc: "Hides all voting points.",
  187.     default: true
  188.   },
  189.   hide_user_flair: {
  190.     name: "Hide User Flairs",
  191.     desc: "Hides all user flairs.",
  192.     default: true
  193.   },
  194.   hide_submission_flair: {
  195.     name: "Hide Submission Flairs",
  196.     desc: "Hides all submission flairs.",
  197.     default: true
  198.   },
  199.   unbranding: {
  200.     name: "Unbranding",
  201.     desc: "Remove superflous site branding.",
  202.     default: true
  203.   },
  204.   navigator: {
  205.     name: "Navigation Links",
  206.     desc: "Adds [Prev] and [Next] links to header.",
  207.     default: true
  208.   },
  209.   event_mode: {
  210.     name: "Event Mode",
  211.     desc: "Dispatches events for BetterTeddit extensions.",
  212.     default: true
  213.   },
  214.   debug_mode: {
  215.     name: "Debug Mode",
  216.     desc: "Enables console.log(), useful for developers and debugging.",
  217.     default: true
  218.   },
  219.   custom_css: {
  220.     name: "Custom CSS",
  221.     desc: "Import Custom CSS",
  222.     default: "/* Custom CSS */\n/* Careful what you paste */\n\n/* BT variables: */\n/*\nhtml {\n     --bt-header-size: 10pt;\n     --bt-header-color: rgb(117, 117, 117);\n     --bt-header-background: #252525;\n     --bt-menu-background: #252525;\n     --bt-border: 1px solid #000;\n     --bt-box-shadow: 0 0 2px 0 #000;\n     --bt-a-color: #c7c7c7;\n     --bt-a-color-hover: #fff;\n     --bt-normal-color: #cacaca;\n}\n*/"
  223.   }
  224. }
  225.  
  226. function insert_before(new_node, existing_node) {
  227.   existing_node.parentNode.insertBefore(new_node, existing_node);
  228. }
  229.  
  230. function log(message) {
  231.   if (GM_getValue("debug_mode") == true) {
  232.     if (typeof message == "string") {
  233.       console.log("BetterTeddit: " + message);
  234.     } else {
  235.       console.log(message);
  236.     }
  237.   }
  238. }
  239.  
  240. function dispatch_event(event_name) {
  241.   if (GM_getValue("event_mode") != true) {
  242.     return false;
  243.   }
  244.   if (events[""+event_name+""] == undefined) {
  245.     events.push(""+event_name+"");
  246.     events[""+event_name+""] = new CustomEvent(""+event_name+"", {
  247.       detail: {
  248.         event_name: ""+event_name+""
  249.       }
  250.     });
  251.     window.addEventListener(""+event_name+"", (event) => {
  252.       log("Dispatched Event: "+event_name+".");
  253.     });
  254.   }
  255.   window.dispatchEvent(events[""+event_name+""]);
  256. }
  257.  
  258. log("Start of Script");
  259. dispatch_event("before_startup");
  260.  
  261. function init_values() {
  262.   dispatch_event("before_init_values");
  263.   function check_value(key, value) {
  264.     if (GM_getValue(key) == undefined) {
  265.       GM_setValue(key, value);
  266.       log("Undefined, Setting default: [" + key + "]");
  267.       log(value);
  268.     } else {
  269.       log("Value found, Getting value: [" + key + "]");
  270.       log(GM_getValue(key));
  271.     }
  272.   }
  273.   Object.entries(config).forEach( (key, value) => {
  274.     check_value(key[0], key[1]["default"]);
  275.   });
  276.   dispatch_event("after_init_values");
  277. } init_values();
  278.  
  279. function add_style() {
  280.   dispatch_event("before_add_style");
  281.  
  282.   style = `
  283.     html {
  284.      --bt-header-size: 10pt;
  285.      --bt-header-color: rgb(117, 117, 117);
  286.      --bt-header-background: #252525;
  287.      --bt-menu-background: #252525;
  288.      --bt-border: 1px solid #000;
  289.      --bt-box-shadow: 0 0 2px 0 #000;
  290.      --bt-a-color: #c7c7c7;
  291.      --bt-a-color-hover: #fff;
  292.      --bt-normal-color: #cacaca;
  293.     }
  294.  
  295.     body {
  296.       margin: calc(var(--bt-header-size) + 6px) 0 0 0!important;
  297.       padding: 0;
  298.       font-family: sans-serif;
  299.     }
  300.  
  301.     a.noclick {
  302.       text-decoration: none !important;
  303.       color: inherit !important;
  304.       font-size: inherit!important;
  305.     }
  306.  
  307.     details {
  308.       clear: left;
  309.     }
  310.     details summary {
  311.       -webkit-user-select: none;
  312.               user-select: none;
  313.     }
  314.  
  315.     a.bt_external {
  316.       text-decoration: underline!important;
  317.       text-decoration-thickness: 1px!important;
  318.     }
  319.  
  320.     div#bt_header {
  321.       line-height: 1.1;
  322.       font-size: var(--bt-header-size);
  323.       color: var(--bt-header-color);
  324.       display: flex;
  325.       justify-content: space-between;
  326.       width: 100%;
  327.       position: fixed;
  328.       top: 0;
  329.       background: var(--bt-header-background);
  330.       z-index: 1000;
  331.       padding: 2px 4px;
  332.       border-bottom: var(--bt-border);
  333.       box-shadow: var(--bt-box-shadow);
  334.     }
  335.     div#bt_header a, div#bt_header a:visited, div#pref_preferences a, div#pref_preferences a:visited {
  336.       cursor: pointer;
  337.       color: var(--bt-a-color);
  338.       text-decoration: none;
  339.     }
  340.     div#bt_header a:hover, div#pref_preferences a:hover {
  341.       color: var(--bt-a-color-hover);
  342.     }
  343.     div#bt_header span {
  344.       display: inline-flex;
  345.     }
  346.     span.header_bracket {
  347.       display: inline-flex;
  348.       margin: 0 2px;
  349.       -webkit-user-select:none;
  350.       user-select: none;
  351.     }
  352.     span#bt_header_right {
  353.       padding-right: 1em;
  354.     }
  355.  
  356.     #pref_container {
  357.       z-index: 100;
  358.       position: fixed;
  359.       top: 0;
  360.       right: 0;
  361.       bottom: 0;
  362.       left: 0;
  363.     }
  364.     #pref_backdrop {
  365.       z-index: 100;
  366.       position: fixed;
  367.       top: 0;
  368.       right: 0;
  369.       bottom: 0;
  370.       left: 0;
  371.       background: rgba(0, 0, 0, 0.5);
  372.     }
  373.     #pref_preferences {
  374.       z-index: 1000;
  375.       position: fixed;
  376.       top: calc( var(--bt-header-size) + 10px);
  377.       left: 0;
  378.       right: 0;
  379.       max-width: 500px;
  380.       min-width: 500px;
  381.       min-height: 500px;
  382.       margin: auto;
  383.       color: var(--bt-normal-color);
  384.       background: var(--bt-menu-background);
  385.       border: var(--bt-border);
  386.       box-shadow: var(--bt-box-shadow);
  387.     }
  388.     #pref_nav_container {
  389.       display: flex;
  390.       margin: 10px;
  391.       border-bottom: var(--bt-border);
  392.       padding-bottom: 2px;
  393.       font-size: 10pt;
  394.     }
  395.     #pref_nav, #pref_nav_right {
  396.       display:flex;
  397.     }
  398.     #pref_nav > span, #pref_nav_right > span {
  399.       margin: 0 4px;
  400.     }
  401.     #pref_nav a[selected], #pref_nav_right a[selected] {
  402.       font-weight:bold;
  403.     }
  404.     #pref_nav_right {
  405.       margin: 0 1em 0 auto;
  406.     }
  407.     #pref_close {
  408.       font-size: 1.5em;
  409.       font-weight: bold;
  410.       line-height: 0.5;
  411.     }
  412.     #pref_content {
  413.       margin: 1em;
  414.       max-height: 500px;
  415.       padding-bottom: 1em;
  416.       overflow-y: scroll;
  417.     }
  418.     #pref_content > div {
  419.       display: none;
  420.     }
  421.     #pref_content > div[selected] {
  422.       display: block;
  423.     }
  424.     #pref_content fieldset {
  425.       border: var(--bt-border);
  426.       font-size: 0.8em;
  427.       margin-bottom: 0.5em;
  428.     }
  429.     #pref_content a {
  430.       text-decoration: underline!important;
  431.     }
  432.     #pref_content fieldset legend {
  433.       margin-left: 0.5em;
  434.       font-weight: bold;
  435.     }
  436.     #pref_content ul {
  437.       list-style: none;
  438.       margin-left: 1em;
  439.     }
  440.     #pref_content li input, #pref_content li label, #pref_content li span {
  441.       margin: 0 0.1em;
  442.     }
  443.     #pref_preferences label {
  444.       -webkit-user-select: none;
  445.               user-select: none;
  446.     }
  447.     #pref_preferences label::after {
  448.       content: ':'
  449.     }
  450.     #pref_preferences textarea {
  451.       padding: 2px 4px;
  452.       height: 5em;
  453.       max-width: 400px;
  454.       resize: vertical;
  455.       font-size: 0.9em;
  456.       max-height: 200px;
  457.       margin: 1em;
  458.       width: 100%;
  459.     }
  460.  
  461.     .bt_image_container {
  462.       cursor: default;
  463.     }
  464.     .bt_image {
  465.       cursor: pointer;
  466.     }
  467.  
  468.     .bt_top_links {
  469.       width: 100%;
  470.       float: left;
  471.       overflow: hidden;
  472.       position: relative;
  473.     }
  474.     .bt_top_links a {
  475.       text-transform: uppercase;
  476.       margin: 0 0.15em;
  477.     }
  478.     .bt_top_links a#sr-more-link {
  479.       background: var(--bt-header-background);
  480.       padding: 0 1em;
  481.       margin: 0;
  482.       box-shadow: none;
  483.     }
  484.  
  485.   `;
  486.   GM_addStyle(style);
  487.  
  488.   dispatch_event("after_add_style");
  489. }
  490.  
  491. function custom_style() {
  492.   dispatch_event("before_custom_style");
  493.  
  494.   // Dropdown style selection
  495.  
  496.   // Import Custom CSS
  497.   custom_style = document.createElement("style");
  498.   custom_style.id = "bt_custom_style";
  499.   document.head.appendChild(custom_style);
  500.   custom_style.textContent = GM_getValue("custom_css");
  501.  
  502.   dispatch_event("after_custom_style");
  503. }
  504.  
  505. function create_header() {
  506.   dispatch_event("before_create_header");
  507.   header = document.createElement("div");
  508.   header.id = "bt_header";
  509.  
  510.   header_left = document.createElement("span");
  511.   header_left.id = "bt_header_left";
  512.   header.appendChild(header_left);
  513.   header_right = document.createElement("span");
  514.   header_right.id = "bt_header_right";
  515.   header.appendChild(header_right);
  516.  
  517.   if (GM_getValue("header_home") == true) {
  518.     nav_home = document.createElement("span");
  519.     nav_home.id = "header_home";
  520.     nav_home.classList.add("header_bracket");
  521.     nav_home.innerHTML = `[<a href="/">Home</a>]`;
  522.     header_left.appendChild(nav_home);
  523.   }
  524.  
  525.   if (GM_getValue("header_topbottom") == true) {
  526.     nav_top = document.createElement("span");
  527.     nav_top.id = "header_top";
  528.     nav_top.classList.add("header_bracket");
  529.     nav_top.innerHTML = `[<a href="#top">Top</a>]`;
  530.     nav_bottom = document.createElement("span");
  531.     nav_bottom.id = "header_bottom";
  532.     nav_bottom.classList.add("header_bracket");
  533.     nav_bottom.innerHTML = `[<a href="#bottom">Bottom</a>]`;
  534.     header_left.appendChild(nav_top);
  535.     header_left.appendChild(nav_bottom);
  536.   }
  537.  
  538.   dispatch_event("during_create_header"); // After fully defined, but before placed on page.
  539.   document.body.prepend(header);
  540.   dispatch_event("after_create_header");
  541.  
  542. }
  543.  
  544. function user_tag() {
  545.   dispatch_event("before_user_tag");
  546.   var users = document.querySelectorAll("div.link p.submitted a,div.title p.submitted a,div.comment p.author a:not([title='submitter'])");
  547.   [...users].forEach( (user) => {
  548.     if (user.textContent == "[deleted]") {
  549.       return false;
  550.     }
  551.     user.setAttribute("user", user.getAttribute("href"));
  552.   });
  553.   dispatch_event("after_user_tag");
  554. }
  555.  
  556. function move_links() {
  557.   dispatch_event("before_move_links");
  558.   var threads = document.querySelectorAll("div.entry");
  559.   [...threads].forEach( (thread) => {
  560.     var links_container = document.createElement("div");
  561.     links_container.classList.add("links_container");
  562.     var links = thread.querySelectorAll("div.links > a, div.links > span.tag");
  563.     [...links].forEach( (link) => {
  564.       links_container.appendChild(link);
  565.     });
  566.     thread.querySelector("div.links").prepend(links_container);
  567.   });
  568.   dispatch_event("after_move_links");
  569. }
  570.  
  571. function move_topbar_links() {
  572.   dispatch_event("before_move_topbar_links");
  573.   top_links = document.querySelector("#topbar .top-links");
  574.   if (top_links != null) {
  575.     insert_before(top_links, header_right);
  576.     top_links.classList.add("bt_top_links");
  577.     top_links.classList.remove("top-links");
  578.   }
  579.   dispatch_event("after_move_topbar_links");
  580. }
  581.  
  582. function move_details() {
  583.   dispatch_event("before_move_details");
  584.   var threads = document.querySelectorAll("div.entry");
  585.   [...threads].forEach( (thread) => {
  586.     var details_container = document.createElement("div");
  587.     details_container.classList.add("details_container");
  588.     var details = thread.querySelectorAll("div.links > details, div.links > style");
  589.     [...details].forEach( (detail) => {
  590.       details_container.appendChild(detail);
  591.     });
  592.     thread.querySelector("div.links").appendChild(details_container);
  593.   });
  594.   dispatch_event("after_move_details");
  595. }
  596.  
  597. function forced_anonymous() {
  598.   if (GM_getValue("forced_anonymous") != true) {
  599.     return false;
  600.   }
  601.   dispatch_event("before_forced_anonyous");
  602.   var users = document.querySelectorAll("a[user]");
  603.   [...users].forEach( (user) => {
  604.     if (user.textContent == "[deleted]") {
  605.       return false;
  606.     }
  607.     user.removeAttribute("href");
  608.     user.textContent = "Anonymous";
  609.     user.classList.add("noclick");
  610.   });
  611.   dispatch_event("after_forced_anonymous");
  612. }
  613.  
  614. function user_ids() {
  615.   if (GM_getValue("user_ids") != true) {
  616.     return false;
  617.   }
  618.   var style = `
  619.   .id_container {
  620.     margin-left: 0.5em;
  621.     font-weight: normal;
  622.     color: inherit;
  623.     overflow: auto;
  624.   }
  625.  
  626.   .entry span.id_container {
  627.     margin-right: 4px;
  628.   }
  629.   span.id_tag {
  630.     margin-left: 0!important;
  631.   }
  632.   .id_tag.colorized_id {
  633.     padding: 2px;
  634.     color: #000;
  635.     border-radius: 1px;
  636.   }
  637.  
  638.   `;
  639.   GM_addStyle(style);
  640.  
  641.   function generate_id(name) {
  642.     const cyrb53 = (str, seed = 0) => {
  643.       // https://stackoverflow.com/a/52171480
  644.       let h1 = 0xdeadbeef ^ seed,
  645.         h2 = 0x41c6ce57 ^ seed;
  646.       for (let i = 0, ch; i < str.length; i++) {
  647.         ch = str.charCodeAt(i);
  648.         h1 = Math.imul(h1 ^ ch, 2654435761);
  649.         h2 = Math.imul(h2 ^ ch, 1597334677);
  650.       }
  651.       h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
  652.       h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
  653.       return 4294967296 * (2097151 & h2) + (h1 >>> 0);
  654.     };
  655.     return cyrb53(name).toString(36).padStart(8,0).substr(0, 8);
  656.   }
  657.  
  658.   var users = document.querySelectorAll("a[user]");
  659.   [...users].forEach( (user) => {
  660.     var name = user.getAttribute("user");
  661.     var user_id = generate_id(name)
  662.     user.setAttribute("user_id", user_id );
  663.     var id_container = document.createElement("span");
  664.     id_container.classList.add("id_container");
  665.     id_container.textContent = "ID: ";
  666.     user.insertAdjacentElement("afterend", id_container);
  667.     var id_tag = document.createElement("span");
  668.     id_tag.classList.add("id_tag");
  669.     id_tag.setAttribute("user_id", user_id);
  670.     id_tag.textContent = user_id;
  671.     id_container.appendChild(id_tag);
  672.  
  673.     if (GM_getValue("colorized_ids") == true) {
  674.       function stringToHslColor(str, s, l) {
  675.         // https://scribe.bus-hit.me/@pppped/compute-an-arbitrary-color-for-user-avatar-starting-from-his-username-with-javascript-cd0675943b66
  676.         var hash = 0;
  677.         for (var i = 0; i < str.length; i++) {
  678.           hash = str.charCodeAt(i) + ((hash << 5) - hash);
  679.         }
  680.         var h = hash % 360;
  681.         return 'hsl('+h+', '+s+'%, '+l+'%)';
  682.       }
  683.       id_tag.classList.add("colorized_id");
  684.       id_tag.style.backgroundColor = stringToHslColor(user_id, 50, 50);
  685.     }
  686.   });
  687.  
  688. }
  689.  
  690. function hide_points() {
  691.   if (GM_getValue("hide_points") != true) {
  692.     return false;
  693.   }
  694.   dispatch_event("before_hide_points");
  695.   var style = document.createElement("style");
  696.   style.innerHTML = ".score, .upvotes {visibility: hidden}.ups {display: none!important;}";
  697.   style.id = "bt_hide_points";
  698.   document.head.appendChild(style);
  699.   GM_addValueChangeListener("hide_points", function() {
  700.     if (arguments[2] == true) {
  701.       style.innerHTML = ".score, .upvotes {visibility: hidden}.ups {display: none!important;}";
  702.     } else {
  703.       style.innerHTML = "/* hide_points disabled */";
  704.     }
  705.   });
  706.   dispatch_event("after_hide_points");
  707. }
  708.  
  709. function hide_user_flair() {
  710.   if (GM_getValue("hide_user_flair") != true) {
  711.     return false;
  712.   }
  713.   dispatch_event("before_hide_user_flair");
  714.   var style = document.createElement("style");
  715.   style.innerHTML = "p.submitted .flair, .meta p .flair { display: none!important; }";
  716.   style.id = "bt_hide_user_flair";
  717.   document.head.appendChild(style);
  718.   GM_addValueChangeListener("hide_user_flair", function() {
  719.     if (arguments[2] == true) {
  720.       style.innerHTML = "p.submitted .flair, .meta p .flair { display: none!important; }";
  721.     } else {
  722.       style.innerHTML = "/* hide_user_flair disabled */";
  723.     }
  724.   });
  725.   dispatch_event("after_hide_user_flair");
  726. }
  727.  
  728. function hide_submission_flair() {
  729.   if (GM_getValue("hide_submission_flair") != true) {
  730.     return false;
  731.   }
  732.   dispatch_event("before_hide_submission_flair");
  733.   var style = document.createElement("style");
  734.   style.innerHTML = ".title .flair { display: none!important; }";
  735.   style.id = "bt_hide_submission_flair";
  736.   document.head.appendChild(style);
  737.   GM_addValueChangeListener("hide_submission_flair", function() {
  738.     if (arguments[2] == true) {
  739.       style.innerHTML = ".title .flair { display: none!important; }";
  740.     } else {
  741.       style.innerHTML = "/* hide_submission_flair disabled */";
  742.     }
  743.   });
  744.   dispatch_event("after_hide_submission_flair");
  745. }
  746.  
  747. function unbranding() {
  748.   if (GM_getValue("unbranding") != true) {
  749.     return false;
  750.   }
  751.   dispatch_event("before_unbranding");
  752.  
  753.   var teddit_text = document.querySelector("header a.main");
  754.   if (teddit_text != null) { teddit_text.remove(); }
  755.  
  756.   var subreddit_text = document.querySelector("header div p");
  757.   if (subreddit_text != null) { subreddit_text.remove(); }
  758.  
  759.   var sub_link = document.querySelector("header div a p");
  760.   if (sub_link != null) { sub_link.textContent = sub_link.textContent.substring(3); }
  761.  
  762.   var sub_title = document.querySelector("div#sidebar div.content div.heading p.title");
  763.   if (sub_title != null) { document.title = sub_title.textContent; }
  764.  
  765.   var teddit_intro = document.getElementById("intro");
  766.   if (teddit_intro != null) { teddit_intro.remove(); }
  767.  
  768.   GM_addValueChangeListener("unbranding", function() {
  769.     if (arguments[2] == true) {
  770.  
  771.     } else {
  772.  
  773.     }
  774.   });
  775.   dispatch_event("after_unbranding");
  776. }
  777.  
  778. function expand_images() {
  779.   dispatch_event("before_expand_images")
  780.  
  781.   //var images = document.querySelectorAll("div.links details.preview-container"); //images only
  782.   var images = document.querySelectorAll("div.links details"); //text too
  783.   log("Found "+images.length+" images.");
  784.   [...images].forEach( (image) => {
  785.     if (expanded != true) {
  786.       image.setAttribute("open", "open");
  787.     } else {
  788.       image.setAttribute("open", "");
  789.       image.removeAttribute("open");
  790.     }
  791.   });
  792.   expanded = expanded?false:true;
  793.  
  794.   dispatch_event("after_expand_images");
  795. }
  796.  
  797. function expand_images_button() {
  798.   if (GM_getValue("expand_images") != true) {
  799.     return false;
  800.   }
  801.   dispatch_event("before_expand_images_button");
  802.  
  803.   images_button = document.createElement("span");
  804.   images_button.id = "header_images_button";
  805.   images_button.classList.add("header_bracket");
  806.   images_button.innerHTML = `
  807.     [<a>Expand</a>]
  808.   `;
  809.   images_button.addEventListener("click", expand_images);
  810.  
  811.   header_left.appendChild(images_button);
  812.  
  813.   GM_addValueChangeListener("expand_images", function() {
  814.     if (arguments[2] == true) {
  815.       images_button.style.display = "unset";
  816.     } else {
  817.       images_button.style.display = "none";
  818.     }
  819.   });
  820.  
  821.   dispatch_event("after_expand_images_button");
  822. }
  823.  
  824. function auto_expand_images() {
  825.   if (GM_getValue("auto_expand_images") != true) {
  826.     return false;
  827.   }
  828.   dispatch_event("before_auto_expand_images");
  829.   expand_images(true);
  830.   dispatch_event("after_auto_expand_images");
  831. }
  832.  
  833. function image_resizer() {
  834.   if (GM_getValue("image_resizer") != true) {
  835.     return false;
  836.   }
  837.   dispatch_event("before_image_resizer");
  838.  
  839.   function resize(image, event) {
  840.     log("Image Resize: Mouse Down");
  841.     event.preventDefault();
  842.     var mousedown = true;
  843.     var imageX, imageY, posX, posY, newposX, newposY, diffX, diffY, newimageX, newimageY;
  844.  
  845.     image.style.minWidth = "25px";
  846.     image.style.minHeight = "25px";
  847.     imageX = image.offsetWidth;
  848.     imageY = image.offsetHeight;
  849.     posX = event.clientX;
  850.     posY = event.clientY;
  851.     //log(imageX); log(imageY);
  852.     //log(posX);   log(posY);
  853.     image.style.width = imageX + "px";
  854.     image.style.height = imageY + "px";
  855.     image.style.maxWidth = "unset";
  856.     image.style.maxHeight = "unset";
  857.  
  858.     function mousemove(e) {
  859.       if (mousedown == false) {
  860.         log("Image Resize: Mouse Down is false.");
  861.       }
  862.       log("Image Resize: Mouse Move");
  863.       newposX = e.clientX;
  864.       newposY = e.clientY;
  865.       diffX = newposX - posX;
  866.       diffY = newposY - posY;
  867.       newimageX = imageX + diffX + diffY;
  868.       newimageY = imageY + diffX + diffY;
  869.       image.style.width = newimageX + "px";
  870.       image.style.height = "auto";
  871.     }
  872.     window.addEventListener("mousemove", mousemove);
  873.  
  874.     function mouseup() {
  875.       mousedown = false;
  876.       log("Image Resize: Mouse Up");
  877.       window.removeEventListener("mouseup", mouseup);
  878.       window.removeEventListener("mousemove", mousemove);
  879.     }
  880.     window.addEventListener("mouseup", mouseup );
  881.  
  882.   }
  883.   // Sub images
  884.   var sub_images = document.querySelectorAll("details.preview-container");
  885.   [...sub_images].forEach( (details) => {
  886.     details.querySelector("div.preview").remove();
  887.     details.style.zIndex = 2;
  888.     details.style.position = "relative";
  889.     details.classList.remove("preview-container");
  890.     details.classList.add("bt_image_container");
  891.     var image_div = document.createElement("div");
  892.     image_div.classList.add("bt_image_container");
  893.     var image = document.createElement("img");
  894.     image.classList.add("bt_image");
  895.     image.setAttribute("img-src", details.getAttribute("data-url"));
  896.  
  897.     // mutate observe open attribute to add src, activates automatically on manual details open or expand all button
  898.     var mutate_config = { attributes: true, childList: false, subtree: false };
  899.     var callback = (mutationList, observer) => {
  900.       for (var mutation of mutationList) {
  901.         if (mutation.type === "attributes") {
  902.           if (mutation.attributeName == "open") {
  903.             image.loading = "lazy";
  904.             image.src = image.getAttribute("img-src");
  905.             observer.disconnect();
  906.           }
  907.         }
  908.       }
  909.     };
  910.     var mutate_observer = new MutationObserver(callback);
  911.     mutate_observer.observe(details, mutate_config);
  912.  
  913.     image.style.opacity = 1;
  914.     image_div.appendChild(image);
  915.     details.appendChild(image_div);
  916.     image.style.maxWidth = "100%";
  917.     image.style.maxHeight = "600px";
  918.     image.style.width = "auto";
  919.     image.style.height = "100%";
  920.     image.addEventListener("mousedown", (event) => {
  921.       if (event.which != "1") {
  922.         return; // no right click
  923.       }
  924.       resize(image, event); //set size first
  925.       image.classList.add("image_resized");
  926.     });
  927.   });
  928.  
  929.   //Thread images
  930.   var thread_images = document.querySelectorAll("div#post div.image");
  931.   [...thread_images].forEach( (image) => {
  932.     var a = image.querySelector("a");
  933.     a.addEventListener("click", (event) => {
  934.       event.preventDefault();
  935.     });
  936.     var img = image.querySelector("a img");
  937.     img.addEventListener("mousedown", (event) => {
  938.       if (event.which != "1") {
  939.         return; // no right click
  940.       }
  941.       resize(img, event);
  942.       img.classList.add("image_draggable");
  943.     });
  944.   });
  945.  
  946.   dispatch_event("after_image_resizer");
  947. }
  948.  
  949. function navigator() {
  950.   if (GM_getValue("navigator") != true) {
  951.     return false;
  952.   }
  953.   dispatch_event("before_navigator");
  954.   var morelinks = document.querySelector(".view-more-links");
  955.  
  956.   var navigator_container = document.createElement("span");
  957.   navigator_container.id = "header_navigator_container";
  958.  
  959.   if (morelinks != null) {
  960.     var links = document.querySelectorAll(".view-more-links a");
  961.     var prev = document.createElement("span");
  962.     prev.classList.add("header_bracket");
  963.     var next = document.createElement("span");
  964.     next.classList.add("header_bracket");
  965.     if (links.length == 2) {
  966.       prev.innerHTML = "[<a href='"+links[0].getAttribute('href')+"'>Prev</a>]";
  967.       next.innerHTML = "[<a href='"+links[1].getAttribute('href')+"'>Next</a>]";
  968.     } else if (links.length == 1) {
  969.       prev.innerHTML = "[Prev]";
  970.       next.innerHTML = "[<a href='"+links[0].getAttribute('href')+"'>Next</a>]";
  971.     } else {
  972.       prev.innerHTML = "[Prev]";
  973.       next.innerHTML = "[Next]";
  974.     }
  975.     navigator_container.appendChild(prev);
  976.     navigator_container.appendChild(next);
  977.   } else {
  978.     var prev = document.createElement("span");
  979.     prev.classList.add("header_bracket");
  980.     prev.innerHTML = "[Prev]";
  981.     var next = document.createElement("span");
  982.     next.classList.add("header_bracket");
  983.     next.innerHTML = "[Next]";
  984.     navigator_container.appendChild(prev);
  985.     navigator_container.appendChild(next);
  986.   }
  987.   header_left.appendChild(navigator_container);
  988.   dispatch_event("during_navigator");
  989. }
  990.  
  991. function bottom_link() { // Run after document_loaded
  992.   dispatch_event("before_bottom_link");
  993.   var bottom = document.querySelector("footer");
  994.   if (bottom != null) {
  995.     bottom.id = "bottom";
  996.   } else {
  997.     log("No footer found.");
  998.   }
  999.   dispatch_event("after_bottom_link");
  1000. }
  1001.  
  1002. function get_current_sub() {
  1003.   if (window.location.pathname.split('/')[1].toLowerCase() == "r") {
  1004.     current_sub = window.location.pathname.split('/')[2].toLowerCase();
  1005.     log("Current sub: "+current_sub+".");
  1006.   }
  1007. }
  1008.  
  1009. function show_favorites() {
  1010.   dispatch_event("before_show_favorites");
  1011.   if (GM_getValue("show_favorites") != true ) {
  1012.     return false;
  1013.   }
  1014.  
  1015.   if (GM_getValue("list_favorites") == null) {
  1016.     GM_setValue("list_favorites", []);
  1017.   }
  1018.  
  1019.   function is_favorite_sub(subname) {
  1020.     var subs = GM_getValue("list_favorites");
  1021.     var _subname = subname.toLowerCase()
  1022.     if ( Array.from(subs).includes(_subname) ) {
  1023.       return true;
  1024.     } else {
  1025.       return false;
  1026.     }
  1027.   }
  1028.  
  1029.   if (current_sub) {
  1030.     var is_current_fav = is_favorite_sub(current_sub);
  1031.   }
  1032.  
  1033.   function toggle_favorite_sub(subname) {
  1034.     dispatch_event("before_toggle_favorite_sub");
  1035.     var subs = GM_getValue("list_favorites");
  1036.     var _subname = subname.toLowerCase()
  1037.     var newsubs;
  1038.     log(Array.from(subs));
  1039.     if ( !Array.from(subs).includes(_subname) ) {
  1040.       newsubs = Array.from(subs);
  1041.       newsubs.push(_subname);
  1042.       GM_setValue("list_favorites", newsubs);
  1043.       log("Added "+_subname+" to favorites.");
  1044.     } else {
  1045.       newsubs = Array.from(subs).filter( (sub) => {
  1046.         return sub != _subname;
  1047.       });
  1048.       GM_setValue("list_favorites", newsubs);
  1049.       log("Removed "+_subname+" from favorites.");
  1050.     }
  1051.     log(Array.from(GM_getValue("list_favorites")));
  1052.     dispatch_event("after_toggle_favorite_sub");
  1053.   }
  1054.  
  1055.   function favorite_sub_link() {
  1056.     dispatch_event("before_favorite_sub_link");
  1057.  
  1058.     var fav_style = `
  1059.       a#bt_toggle_favorite {
  1060.         text-decoration: none;
  1061.         cursor: pointer;
  1062.         font-size: 16pt;
  1063.         vertical-align: middle;
  1064.         line-height: 1;
  1065.         -webkit-user-select: none;
  1066.                 user-select: none;
  1067.       }
  1068.       span.toggle_list {
  1069.         display: inline!important;
  1070.       }
  1071.       a.toggle_list {
  1072.         margin: 0!important;
  1073.         font-weight: bold;
  1074.       }
  1075.       `;
  1076.     GM_addStyle(fav_style);
  1077.  
  1078.     var subscribe_container = document.querySelector("#sidebar .subscribe.content");
  1079.     if (subscribe_container != null) {
  1080.       var favorite_link = document.createElement("a");
  1081.       favorite_link.id = "bt_toggle_favorite";
  1082.  
  1083.       function change_fav_link() {
  1084.         if (is_current_fav == false) {
  1085.           favorite_link.classList.add("is_not_favorite");
  1086.           favorite_link.classList.remove("is_favorite");
  1087.           favorite_link.innerHTML = "♡";
  1088.           favorite_link.title = "Add "+current_sub+" to favorites.";
  1089.         } else {
  1090.           favorite_link.classList.add("is_favorite");
  1091.           favorite_link.classList.remove("is_not_favorite");
  1092.           favorite_link.innerHTML = "♥";
  1093.           favorite_link.title = "Remove "+current_sub+" from favorites.";
  1094.         }
  1095.       }
  1096.       change_fav_link();
  1097.  
  1098.       favorite_link.addEventListener("click", () => {
  1099.         toggle_favorite_sub(current_sub);
  1100.         is_current_fav = is_current_fav?false:true;
  1101.         change_fav_link();
  1102.         update_fav_nav_links();
  1103.       });
  1104.  
  1105.       subscribe_container.appendChild(favorite_link);
  1106.     }
  1107.     dispatch_event("after_favorite_sub_link");
  1108.   }
  1109.  
  1110.   function create_fav_nav_links() {
  1111.     fav_links = document.createElement("div");
  1112.     fav_links.id = "bt_fav_nav_links";
  1113.     fav_links.classList.add("bt_top_links");
  1114.     update_fav_nav_links();
  1115.     insert_before(fav_links, header_right);
  1116.     top_links.style.display = "none";
  1117.   }
  1118.  
  1119.   function make_show_favs() {
  1120.     var show_favs = document.createElement("span");
  1121.     show_favs.classList.add("header_bracket");
  1122.     show_favs.classList.add("toggle_list");
  1123.     show_favs.innerHTML = `[<a class="toggle_list show_favs">―</a>]`; //Fullwidth Hyphen-Minus, &#65293;
  1124.     show_favs.title = "Show Favorites";
  1125.     show_favs.addEventListener("click", () => {
  1126.       top_links.style.display = "none";
  1127.       fav_links.style.display = "block";
  1128.       log("Toggle Show Favorites");
  1129.     });
  1130.     top_links.prepend(show_favs);
  1131.   }
  1132.  
  1133.   function make_show_subs() {
  1134.     var show_subs = document.createElement("span");
  1135.     show_subs.classList.add("header_bracket");
  1136.     show_subs.classList.add("toggle_list");
  1137.     show_subs.innerHTML = `[<a class="toggle_list show_subs">＋</a>]`; // Fullwidth Plus &#65291;
  1138.     show_subs.title = "Show Subscriptions";
  1139.     show_subs.addEventListener("click", () => {
  1140.       top_links.style.display = "block";
  1141.       fav_links.style.display = "none";
  1142.       log("Toggle Show Subscriptions");
  1143.     });
  1144.     fav_links.prepend(show_subs);
  1145.   }
  1146.  
  1147.   function update_fav_nav_links() {
  1148.     var html = `<a href="/r/popular">Popular</a><a href="/r/all">All</a>`;
  1149.     var subs = GM_getValue("list_favorites");
  1150.     Array.from(subs).forEach((sub) => {
  1151.       html = html + `<a href="/r/${sub}">${sub}</a>`;
  1152.     });
  1153.     fav_links.innerHTML = html;
  1154.     make_show_subs();
  1155.   }
  1156.  
  1157.   favorite_sub_link();
  1158.   create_fav_nav_links();
  1159.   make_show_favs();
  1160.   dispatch_event("after_show_favorites");
  1161. }
  1162.  
  1163. function create_toggle(config_name) {
  1164.   var _toggle = config[config_name];
  1165.  
  1166.   var _li = document.createElement("li");
  1167.   _li.id = "pref_li_"+config_name+"";
  1168.  
  1169.   var _checkbox = document.createElement("input");
  1170.   _checkbox.id = "pref_check_"+config_name+"";
  1171.   _checkbox.setAttribute("type", "checkbox");
  1172.   _li.appendChild(_checkbox);
  1173.  
  1174.   if (GM_getValue(config_name) == true) {
  1175.     _checkbox.checked = true;
  1176.   }
  1177.  
  1178.   GM_addValueChangeListener(""+config_name+"", function(key, old_val, new_val, remote) {
  1179.     if (arguments[2] == true) {
  1180.       _checkbox.checked = true;
  1181.     } else {
  1182.       _checkbox.checked = false;
  1183.     }
  1184.     log("Set GM Value "+config_name+" to "+arguments[2]+".");
  1185.   });
  1186.  
  1187.   _checkbox.addEventListener("change", (event) => {
  1188.     if (_checkbox.checked == true) {
  1189.       GM_setValue(""+config_name+"", true);
  1190.     } else {
  1191.       GM_setValue(""+config_name+"", false);
  1192.     }
  1193.     log("Set "+config_name+" config checkbox to "+_checkbox.checked+".");
  1194.   });
  1195.  
  1196.   var _label = document.createElement("label");
  1197.   _label.id = "pref_label_"+config_name+"";
  1198.   _label.setAttribute("for", _checkbox.id);
  1199.   var _a = document.createElement("a");
  1200.   _a.textContent = _toggle["name"];
  1201.   _label.appendChild(_a);
  1202.   _li.appendChild(_label);
  1203.  
  1204.   var _desc = document.createElement("span");
  1205.   _desc.id = "pref_desc_"+config_name+"";
  1206.   _desc.textContent = _toggle["desc"];
  1207.   _li.appendChild(_desc);
  1208.  
  1209.   return _li;
  1210. }
  1211.  
  1212. function create_input() {
  1213.   // lets create input fields to use in style tab, toggle for textarea
  1214. }
  1215.  
  1216. function open_preferences() {
  1217.  
  1218.   if (pref_container != false) {
  1219.     if (pref_container.style.display != "block") {
  1220.       dispatch_event("before_show_preferences");
  1221.       pref_container.style.display = "block";
  1222.       dispatch_event("after_show_preferences");
  1223.     } else {
  1224.       hide_preferences();
  1225.     }
  1226.     return false;
  1227.   }
  1228.  
  1229.   dispatch_event("before_open_preferences");
  1230.   pref_container = document.createElement("div");
  1231.   pref_container.id = "pref_container";
  1232.   pref_container.style.display = "block";
  1233.  
  1234.   var pref_backdrop = document.createElement("div");
  1235.   pref_backdrop.id = "pref_backdrop";
  1236.   pref_backdrop.addEventListener("click", hide_preferences);
  1237.   pref_container.appendChild(pref_backdrop);
  1238.  
  1239.   var pref_preferences = document.createElement("div");
  1240.   pref_preferences.id = "pref_preferences";
  1241.  
  1242.   var pref_nav_container = document.createElement("div");
  1243.   pref_nav_container.id = "pref_nav_container";
  1244.  
  1245.   var pref_nav = document.createElement("span");
  1246.   pref_nav.id = "pref_nav";
  1247.   pref_nav.innerHTML = `
  1248.     <span tab="general"><a tab="general" selected="">General</a></span>
  1249.     <span tab="style"><a tab="style">Style</a></span>
  1250.   `;
  1251.   pref_nav_container.appendChild(pref_nav);
  1252.  
  1253.   var pref_nav_right = document.createElement("span");
  1254.   pref_nav_right.id = "pref_nav_right";
  1255.   pref_nav_right.innerHTML = `
  1256.     <span tab="storage"><a tab="storage">Storage</a></span>
  1257.     <span><a class="bt_external" href="https://greasyfork.org/en/scripts/452560-betterteddit/versions" target="_blank">${GM_info.script.version}</a></span>
  1258.     <span><a class="bt_external" href="https://codeberg.org/kazuki/betterteddit" target="_blank">Git</a></span>
  1259.   `;
  1260.   pref_nav_container.appendChild(pref_nav_right);
  1261.  
  1262.   var pref_close = document.createElement("span");
  1263.   pref_close.id = "pref_close";
  1264.   pref_close.innerHTML = `<a aria-label="Close Preferences">×</a>`;
  1265.   pref_close.addEventListener("click", hide_preferences);
  1266.   pref_nav_container.appendChild(pref_close);
  1267.  
  1268.   pref_preferences.appendChild(pref_nav_container);
  1269.  
  1270.   var pref_content = document.createElement("div");
  1271.   pref_content.id = "pref_content";
  1272.   // TABS IN HERE
  1273.  
  1274.   var general_tab = document.createElement("div");
  1275.   general_tab.id = "pref_general_content";
  1276.   general_tab.setAttribute("tab", "general");
  1277.   general_tab.setAttribute("selected", "selected");
  1278.   pref_content.appendChild(general_tab);
  1279.  
  1280.     //IMAGES
  1281.   var pref_images_fieldset = document.createElement("fieldset");
  1282.   pref_images_fieldset.id = "pref_images_fieldset";
  1283.   general_tab.appendChild(pref_images_fieldset);
  1284.   var pref_images_legend = document.createElement("legend");
  1285.   pref_images_legend.textContent = "Images";
  1286.   pref_images_fieldset.appendChild(pref_images_legend);
  1287.   var pref_images_ul = document.createElement("ul");
  1288.   pref_images_fieldset.appendChild(pref_images_ul);
  1289.   pref_images_ul.appendChild( create_toggle("expand_images") );
  1290.   pref_images_ul.appendChild( create_toggle("auto_expand_images") );
  1291.   pref_images_ul.appendChild( create_toggle("image_resizer") );
  1292.     //NAVIGATION
  1293.   var pref_navigation_fieldset = document.createElement("fieldset");
  1294.   pref_navigation_fieldset.id = "pref_navigation_fieldset";
  1295.   general_tab.appendChild(pref_navigation_fieldset);
  1296.   var pref_navigation_legend = document.createElement("legend");
  1297.   pref_navigation_legend.textContent = "Navigation";
  1298.   pref_navigation_fieldset.appendChild(pref_navigation_legend);
  1299.   var pref_navigation_ul = document.createElement("ul");
  1300.   pref_navigation_fieldset.appendChild(pref_navigation_ul);
  1301.   pref_navigation_ul.appendChild( create_toggle("header_home") );
  1302.   pref_navigation_ul.appendChild( create_toggle("header_topbottom") );
  1303.   pref_navigation_ul.appendChild( create_toggle("navigator") );
  1304.   pref_navigation_ul.appendChild( create_toggle("show_favorites") );
  1305.     //MISCELLANEOUS
  1306.   var pref_misc_fieldset = document.createElement("fieldset");
  1307.   pref_misc_fieldset.id = "pref_misc_fieldset";
  1308.   general_tab.appendChild(pref_misc_fieldset);
  1309.   var pref_misc_legend = document.createElement("legend");
  1310.   pref_misc_legend.textContent = "Miscellaneous";
  1311.   pref_misc_fieldset.appendChild(pref_misc_legend);
  1312.   var pref_misc_ul = document.createElement("ul");
  1313.   pref_misc_fieldset.appendChild(pref_misc_ul);
  1314.   pref_misc_ul.appendChild( create_toggle("forced_anonymous") );
  1315.   pref_misc_ul.appendChild( create_toggle("user_ids") );
  1316.   pref_misc_ul.appendChild( create_toggle("colorized_ids") );
  1317.   pref_misc_ul.appendChild( create_toggle("hide_points") );
  1318.   pref_misc_ul.appendChild( create_toggle("hide_user_flair") );
  1319.   pref_misc_ul.appendChild( create_toggle("hide_submission_flair") );
  1320.   pref_misc_ul.appendChild( create_toggle("unbranding") );
  1321.   pref_misc_ul.appendChild( create_toggle("event_mode") );
  1322.   pref_misc_ul.appendChild( create_toggle("debug_mode") );
  1323.  
  1324.   // STYLE TAB
  1325.   var style_tab = document.createElement("div");
  1326.   style_tab.id = "pref_style_content";
  1327.   style_tab.setAttribute("tab", "style");
  1328.  
  1329.   var fieldset_customcss = document.createElement("fieldset");
  1330.   fieldset_customcss.id = "fieldset_customcss";
  1331.   style_tab.appendChild(fieldset_customcss);
  1332.   var legend_customcss = document.createElement("legend");
  1333.   legend_customcss.innerHTML = "Custom CSS";
  1334.   fieldset_customcss.appendChild(legend_customcss);
  1335.   var ul_customcss = document.createElement("ul");
  1336.   fieldset_customcss.appendChild(ul_customcss);
  1337.   var li_customcss = document.createElement("li");
  1338.   var textarea_customcss = document.createElement("textarea");
  1339.   textarea_customcss.textContent = GM_getValue("custom_css");
  1340.   var btn_update_customcss = document.createElement("button");
  1341.   btn_update_customcss.innerHTML = "Update CSS";
  1342.   btn_update_customcss.addEventListener("click", () => {
  1343.     textarea_customcss.textContent = textarea_customcss.value;
  1344.     textarea_customcss.value = textarea_customcss.textContent;
  1345.     var newcss = textarea_customcss.textContent;
  1346.     custom_style.textContent = newcss;
  1347.     GM_setValue("custom_css", newcss);
  1348.   });
  1349.   li_customcss.appendChild(btn_update_customcss);
  1350.   li_customcss.appendChild(textarea_customcss);
  1351.  
  1352.   ul_customcss.appendChild(li_customcss);
  1353.  
  1354.   pref_content.appendChild(style_tab);
  1355.   // END STYLE TAB
  1356.  
  1357.   // STORAGE TAB
  1358.   var storage_tab = document.createElement("div");
  1359.   storage_tab.id = "pref_storage_content";
  1360.   storage_tab.setAttribute("tab", "storage");
  1361.  
  1362.     // Import Settings
  1363.   var fieldset_storageimport = document.createElement("fieldset");
  1364.   fieldset_storageimport.id = "fieldset_storageimport";
  1365.   storage_tab.appendChild(fieldset_storageimport);
  1366.   var legend_storageimport = document.createElement("legend");
  1367.   legend_storageimport.innerHTML = "Import Settings";
  1368.   fieldset_storageimport.appendChild(legend_storageimport);
  1369.   var ul_storageimport = document.createElement("ul");
  1370.   fieldset_storageimport.appendChild(ul_storageimport);
  1371.   var li_storageimport = document.createElement("li");
  1372.   ul_storageimport.appendChild(li_storageimport);
  1373.  
  1374.   var input_storageimport = document.createElement("input");
  1375.   input_storageimport.id = "storageimport";
  1376.   input_storageimport.type = "file";
  1377.   input_storageimport.accept = ".json";
  1378.   input_storageimport.style.display = "none";
  1379.   li_storageimport.appendChild(input_storageimport);
  1380.   var btn_storageimport = document.createElement("button");
  1381.   btn_storageimport.innerHTML = "Select File";
  1382.   btn_storageimport.addEventListener("click", () => {
  1383.     input_storageimport.click();
  1384.   });
  1385.   li_storageimport.appendChild(btn_storageimport);
  1386.  
  1387.   input_storageimport.addEventListener("change", (event) => {
  1388.     var file = event.target.files[0];
  1389.     let reader = new FileReader();
  1390.     reader.readAsText(file);
  1391.     reader.onerror = function() {
  1392.       alert(reader.error);
  1393.     };
  1394.     reader.onload = function() {
  1395.       try {
  1396.         var imported = JSON.parse(reader.result);
  1397.         log(imported);
  1398.         var _count = 0;
  1399.         [...imported].forEach( (value) => {
  1400.           GM_setValue(value[0], value[1]);
  1401.           _count++;
  1402.         });
  1403.         alert("Successfully imported "+_count+" keys, reloading to apply changes.");
  1404.         document.location.reload();
  1405.       } catch(e) {
  1406.         alert(e);
  1407.       }
  1408.     };
  1409.   });
  1410.  
  1411.     // Export Settings
  1412.   var fieldset_storageexport = document.createElement("fieldset");
  1413.   fieldset_storageexport.id = "fieldset_storageexport";
  1414.   storage_tab.appendChild(fieldset_storageexport);
  1415.   var legend_storageexport = document.createElement("legend");
  1416.   legend_storageexport.innerHTML = "Export Settings";
  1417.   fieldset_storageexport.appendChild(legend_storageexport);
  1418.   var ul_storageexport = document.createElement("ul");
  1419.   fieldset_storageexport.appendChild(ul_storageexport);
  1420.   var li_storageexport = document.createElement("li");
  1421.   ul_storageexport.appendChild(li_storageexport);
  1422.   var btn_storageexport = document.createElement("button");
  1423.   btn_storageexport.innerHTML = "Export File";
  1424.   var a_download_storageexport = document.createElement("a");
  1425.   a_download_storageexport.style.display = "none";
  1426.   li_storageexport.appendChild(a_download_storageexport);
  1427.  
  1428.   btn_storageexport.addEventListener("click", () => {
  1429.     var export_result = [];
  1430.     [...GM_listValues()].forEach( (value) => {
  1431.       export_result.push([value, GM_getValue(value)]);
  1432.     });
  1433.     export_result = JSON.stringify(export_result, null, 2);
  1434.     log(export_result);
  1435.     var export_blob = new Blob([export_result], {type: "application/json"});
  1436.     var export_url = window.URL.createObjectURL(export_blob);
  1437.     var _date = new Date();
  1438.     var _name = "BetterTeddit_Storage_"+GM_info.script.version+"_"+_date.getFullYear()+"-"+_date.getMonth()+"-"+_date.getDate()+"_"+_date.getHours()+"-"+_date.getMinutes()+".json";
  1439.     console.log(_name);
  1440.     a_download_storageexport.download = _name;
  1441.     a_download_storageexport.href = export_url;
  1442.     a_download_storageexport.click();
  1443.  
  1444.   });
  1445.   li_storageexport.appendChild(btn_storageexport);
  1446.  
  1447.     // Delete Settings
  1448.   var fieldset_storagedelete = document.createElement("fieldset");
  1449.   fieldset_storagedelete.id = "fieldset_storagedelete";
  1450.   storage_tab.appendChild(fieldset_storagedelete);
  1451.   var legend_storagedelete = document.createElement("legend");
  1452.   legend_storagedelete.innerHTML = "Reset/Delete Settings";
  1453.   fieldset_storagedelete.appendChild(legend_storagedelete);
  1454.   var ul_storagedelete = document.createElement("ul");
  1455.   fieldset_storagedelete.appendChild(ul_storagedelete);
  1456.   var li_storagedelete = document.createElement("li");
  1457.   ul_storagedelete.appendChild(li_storagedelete);
  1458.  
  1459.   var details_delete_storage = document.createElement("details");
  1460.   li_storagedelete.appendChild(details_delete_storage);
  1461.   details_delete_storage.innerHTML = "<summary>Delete Storage</summary>";
  1462.   var btn_delete_storage = document.createElement("button");
  1463.   btn_delete_storage.innerHTML = "Delete";
  1464.   btn_delete_storage.addEventListener("click", () => {
  1465.     if (window.confirm("Are you sure you want to delete all storage? Including, but not limited to, custom css and favorite subs. Non-recoverable without backups. This does NOT include extensions or cookies.")) {
  1466.       [...GM_listValues()].forEach( (value) => {
  1467.         GM_deleteValue(value);
  1468.       });
  1469.  
  1470.       alert("Storage deleted.");
  1471.       document.location.reload();
  1472.     } else {
  1473.       details_delete_storage.removeAttribute("open");
  1474.     }
  1475.   });
  1476.   details_delete_storage.appendChild(btn_delete_storage);
  1477.  
  1478.   /*[...GM_listValues()].forEach( (value) => {
  1479.     var _div = document.createElement("div");
  1480.     _div.textContent = "Key: "+value+", Value:"+GM_getValue(value)+"";
  1481.     storage_tab.appendChild(_div);
  1482.   });*/
  1483.  
  1484.   pref_content.appendChild(storage_tab);
  1485.   // END STORAGE TAB
  1486.  
  1487.   pref_preferences.appendChild(pref_content);
  1488.   pref_container.appendChild(pref_preferences);
  1489.  
  1490.   // Click tabs
  1491.  
  1492.   function click_tabs(event) {
  1493.     if (event.target.tagName != "A") {
  1494.       return;
  1495.     }
  1496.     if (!event.target.hasAttribute("tab")) {
  1497.         return;
  1498.     }
  1499.     var sel_tab = event.target.getAttribute("tab");
  1500.     var sel_link = event.target;
  1501.     log("Preferences Tab: "+sel_tab+".");
  1502.     var nav_links = pref_nav_container.querySelectorAll("a[tab]");
  1503.     var content_tabs = pref_content.querySelectorAll("div");
  1504.     [...content_tabs].forEach((tab) => {
  1505.       if (tab.getAttribute("tab") == sel_tab) {
  1506.         tab.setAttribute("selected", "selected");
  1507.       } else {
  1508.         tab.removeAttribute("selected");
  1509.       }
  1510.     });
  1511.     [...nav_links].forEach((link) => {
  1512.       if (link.getAttribute("tab") == sel_tab) {
  1513.         link.setAttribute("selected", "selected");
  1514.       } else {
  1515.         link.removeAttribute("selected");
  1516.       }
  1517.     });
  1518.  
  1519.   }
  1520.  
  1521.   pref_nav_container.addEventListener("click", (event) => {
  1522.     click_tabs(event);
  1523.   }, true);
  1524.  
  1525.   dispatch_event("during_open_preferences");
  1526.   document.body.appendChild(pref_container);
  1527.   dispatch_event("after_open_preferences");
  1528. }
  1529.  
  1530. function hide_preferences() {
  1531.   dispatch_event("before_hide_preferences")
  1532.   pref_container.style.display = "none";
  1533.   dispatch_event("after_hide_preferences");
  1534. }
  1535.  
  1536. function preferences_button() {
  1537.   dispatch_event("before_preferences_button");
  1538.   pref_button = document.createElement("span");
  1539.   pref_button.id = "pref_button";
  1540.   pref_button.classList.add("header_bracket");
  1541.   pref_button.innerHTML = `
  1542.     [<a>Config</a>]
  1543.   `;
  1544.   pref_button.addEventListener("click", () => {
  1545.     open_preferences();
  1546.   });
  1547.   header_right.appendChild(pref_button);
  1548.   dispatch_event("after_preferences_button");
  1549. }
  1550.  
  1551. dispatch_event("before_document_loaded");
  1552.  
  1553. function DOMContentLoaded() {
  1554.   if (document.getElementById("topbar") == null) {
  1555.     log("BetterTeddit believes this is an error page. If this is wrong please report a bug.");
  1556.     return; // Why bother
  1557.   }
  1558.   dispatch_event("during_document_loaded");
  1559.   var end_totaltime = performance.now();
  1560.   var start_runtime = performance.now();
  1561.   // START NATIVE ONDOMLOAD FUNCTIONS
  1562.   add_style();
  1563.   get_current_sub();
  1564.   create_header();
  1565.   open_preferences();
  1566.   hide_preferences();
  1567.   preferences_button();
  1568.   bottom_link();
  1569.   user_tag();
  1570.   move_links();
  1571.   move_details();
  1572.   move_topbar_links();
  1573.   custom_style();
  1574.  
  1575.   expand_images_button();
  1576.   auto_expand_images();
  1577.   image_resizer();
  1578.   navigator();
  1579.   forced_anonymous();
  1580.   user_ids();
  1581.   hide_points();
  1582.   hide_user_flair();
  1583.   hide_submission_flair();
  1584.   unbranding();
  1585.   show_favorites();
  1586.   // ENDOF NATIVE ONDOMLOAD FUNCTIONS
  1587.  
  1588.   dispatch_event("after_document_loaded");
  1589.   dispatch_event("after_startup");
  1590.  
  1591.   log("BetterTeddit: "+runtype+". If loading, added eventlistener for complete, else run. Probably cache speed is difference."); //
  1592.   var end_runtime = performance.now();
  1593.   var totaltime = end_totaltime - start_totaltime;
  1594.   var runtime = end_runtime - start_runtime;
  1595.  
  1596.   log("BetterTeddit: Wait for DOMContentLoaded: "+totaltime+"ms."); // Parsing of native Teddit HTML is included.
  1597.   log("BetterTeddit: After DOMContentLoaded: "+runtime+"ms."); //BetterTeddit modifying runtime performance.
  1598.   log("End of Script");
  1599. }
  1600. var runtype = 0;
  1601. if (document.readyState != "loading") {
  1602.   runtype = document.readyState;
  1603.   //alert(runtype);  //for testing purposes on rare load type interactive/complete.
  1604.   DOMContentLoaded();
  1605. } else {
  1606.   runtype = document.readyState;
  1607.   document.addEventListener("DOMContentLoaded", DOMContentLoaded);
  1608. }