☰

Reddit CSS

New Design with new functionalities

目前為 2023-12-07 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Reddit CSS
  3. // @namespace    https://www.reddit.com
  4. // @version      6.3
  5. // @description  New Design with new functionalities
  6. // @author       Agreasyforkuser
  7. // @match        https://old.reddit.com/*
  8. // @match        https://www.reddit.com/*
  9. // @match        https://rapidsave.com/*
  10. // @exclude      https://new.reddit.com/*
  11. // @icon         https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
  12. // @license      MIT
  13. // @grant        GM_addStyle
  14. // ==/UserScript==
  15.  
  16.  
  17. /////////////////// sort by new ////////////////////////////////////////////////////////////////////////
  18.  
  19. 'use strict';
  20. const re = /https?:\/\/(?:www\.|old\.|new\.)?reddit\.com/i;
  21. for (var i=0, l=document.links.length; i<l; i++) {
  22.     if (re.test(document.links[i].href)) {
  23.         var path = document.links[i].pathname;
  24.         if (path === '/' || path.startsWith('/r/')) {
  25.             var pathlen = path.split('/').length - 1 - (path.endsWith('/') ? 1 : 0);
  26.             if ((pathlen <= 2) && (document.links[i].closest('.tabmenu') === null)) {
  27.                 document.links[i].href += path.endsWith('/') ? 'new/' : '/new/';
  28.             }
  29.         }
  30.     }
  31. }
  32. //////////////////////////////// over 18 button ///////////////////////////////////////////////////////
  33.  
  34. const button = document.querySelector('button.c-btn.c-btn-primary[type="submit"][name="over18"][value="yes"]');
  35. if (button) {button.click();}
  36.  
  37.  
  38. /////////////////////////////// auto-click download link after opening the rapidsave page ///////////////
  39. const dbutton = document.querySelector('.downloadbutton');
  40. if (dbutton) {
  41.     dbutton.click();
  42. }
  43.  
  44. ///////////////////////////////////////////////////////////////////////////////////////////////////
  45. (function() {
  46.     'use strict';
  47.  
  48.     // Define the CSS to enlarge the thumbnails and modify the styling
  49.     var customCSS = `
  50.  
  51.          /* search placeholder text */
  52.          ::-moz-placeholder          {color:transparent !important}
  53.          ::-webkit-input-placeholder {color:transparent !important}
  54.  
  55.          /* View full thumbnails on search page */
  56.          .search-result :link {display:inline-table !important}
  57.  
  58.         .email-collection-banner, .email-verification-tooltip, #eu-cookie-policy {display:none !important}
  59.  
  60.         .infobar.listingsignupbar, .infobar.commentsignupbar {display: none !important;}
  61.         .infobar, .timeout-infobar {border:none}
  62.         .help-hoverable {display:none}
  63.         .reddit-infobar.with-icon {
  64.              min-height: 35px !important;
  65.              padding: 0 0 0 55px !important;
  66.              height: 35px !important;
  67.              }
  68.         .reddit-infobar.with-icon:not(:hover) {
  69.              min-height: 0 !important;
  70.              padding: 0 0 0 55px !important;
  71.              margin: 0 !important;
  72.              height: 9px !important;
  73.              opacity:0 !important
  74.              }
  75.  
  76.         /* Video Controls for Mobile */
  77.         video::-webkit-media-controls-panel {background: none; opacity: 1}
  78.         video::-webkit-media-controls-overlay-play-button {opacity: 0}
  79.  
  80.         /* Video controls for Desktop */
  81.         .reddit-video-controller-root.playback-controls       {background: rgba(0,0,0,0.75) !important; border-radius: 50px !important}
  82.         .reddit-video-controller-root.playback-controls:hover {background: rgba(0,0,0,0.95) !important}
  83.         .reddit-video-controller-root.playback-controls a.permalink {display: none !important}
  84.         .reddit-video-controller-root.ended-controls, .reddit-video-controller-root.buffering-controls {background: none !important}
  85.         .reddit-video-controller-root.ended-controls .centered span.replay-video {display: none !important}
  86.         .reddit-video-controller-root.playback-controls .reddit-video-seek-bar-root .seek-bar-thumb {opacity: 1 !important}
  87.         .reddit-video-controller-root.playback-controls .time-label {font-weight: bold}
  88.         /* hide some video control buttons unitl hover */
  89.         .reddit-video-controller-root.playback-controls       .control-button   {display:none}
  90.         .reddit-video-controller-root.playback-controls:hover .control-button   {display:block}
  91.         .reddit-video-controller-root.playback-controls       .volume-container {display:block}
  92.  
  93.  
  94.         /* Flair Labels */
  95.         .flairrichtext  {border-radius: 0px;border:none}
  96.         .linkflairlabel {border-radius: 0px;border:none}
  97.         .stamp      {background: white; border-radius: 0; padding:0}
  98.         .nsfw-stamp {background: #d10023; color:white; font-weight:bold !important; border: 2px solid #d10023 !important;}
  99.  
  100.  
  101.  
  102.         /* Buttons */
  103.         button, .preftable select, input[type="submit"] {border-radius:0}
  104.  
  105.         /* Subreddit Name */
  106.         body.with-listing-chooser #header .pagename {position:inherit; color: white}
  107.         .pagename a {color: black; margin-left:4px; margin-right:4px}
  108.         .pagename {background-color:white; font-variant: normal; border-radius:0px; margin: 0;}
  109.  
  110.  
  111.         /* Adjust the size of the thumbnails */
  112.  
  113.         .thumbnail, .thumbnail img{
  114.             width: 200px !important;
  115.             height: auto !important;
  116.             position: relative;
  117.             margin-bottom: 0;
  118.         }
  119.  
  120.         /* Visibility of text posts */
  121.         .expando-button.selftext {float:left}
  122.         .expando-button.selftext {height:50px !important; width:200px !important; background-image:none !important;background-color: black !important}
  123.  
  124.  
  125.         /* no margin left for expanded media */
  126.         .entry {margin-left:0}
  127.  
  128.         /* size videos correctly */
  129.         .no-constraints-when-pinned {min-width:0 !important; min-height: 0 !important;}
  130.  
  131.         /* Videoplayer Background */
  132.         .reddit-video-player-root {background: #0000;}
  133.  
  134.         /* Video Duration Info */
  135.         .duration-overlay {font-size: 10pt; font-weight: bold;}
  136.         .duration-overlay {border-top-left-radius: 10px; width:auto !important; padding:5px; right:0}
  137.  
  138.  
  139.         /* OP indicator */
  140.         .tagline .submitter, .search-result-meta .submitter {color: #228822}
  141.  
  142.         /* sort menu*/
  143.         .menuarea {border:none}
  144.         .dropdown.lightdrop .selected {text-decoration: none}
  145.  
  146.         /* Post */
  147.         .thing .title      {font-weight: normal;color: #000; margin-bottom: 13px}
  148.         .subreddit         {font-weight: bold;font-size: larger;color: #000;}
  149.         .link .flat-list   {font-size:larger}
  150.         .link.last-clicked {border: 3px dotted red;}
  151.  
  152.         /* Text Posts Background*/
  153.         .link .usertext-body .md {background: none; border: 1px solid gray; border-radius: 0}
  154.  
  155.         /* Post Details */
  156.         .entry .buttons li a {color:#000000c7; font-weight:normal}
  157.  
  158.         .entry .buttons li       {background: #0000000d}
  159.         .entry .buttons li:hover {opacity:1 !important} //revert graying-out function on hover
  160.  
  161.         .tagline {color: #8880;}
  162.         .tagline .live-timestamp {color: #369}
  163.         .domain {display: none;}
  164.         .reportbtn {display:none}
  165.         .post-crosspost-button {display:none}
  166.         .post-sharing-button {display:none}
  167.         .buttons .give-gold.gold-give-gold {display: none}
  168.         .hide-button {display:none !important}
  169.         .expando-button {opacity: 0.1;float:right}
  170.  
  171.         /* hide "submitted" and "by" text from post descriptions */
  172.         .tagline         {visibility: hidden}
  173.         .tagline::before {content: none}
  174.         .tagline time    {visibility: visible; margin-left: -55px}
  175.         .tagline a       {visibility: visible}
  176.         .tagline         {margin-bottom: 6px}
  177.  
  178.  
  179.         /* Header Font Size and Icon */
  180.         #header-bottom-left {font-size: large;}
  181.         #header-img.default-header:not(:hover) {opacity: 0}
  182.  
  183.         /* Upper Bars */
  184.         #sr-header-area:not(:hover)          {background: none !important; opacity:0.3 }
  185.         #sr-header-area                      {border-bottom: none}
  186.         #sr-header-area .redesign-beta-optin {display:none}
  187.         #sr-more-link                        {background-color: #cee3f8 }
  188.  
  189.         /* Hide Username */
  190.         .user a:not(:hover) {opacity: 0;}
  191.  
  192.  
  193.  
  194.         .pref-lang {font-weight: normal}
  195.         #header-bottom-right:not(:hover) {background: none; border-radius:0}
  196.         #header-bottom-right {background: white; border-radius:0}
  197.         #header-bottom-right {font-size: larger;}
  198.         #header {border:none}
  199.      
  200.  
  201.  
  202.         .separator {color: transparent;}
  203.         #header-bottom-left {margin-top: -10px;}
  204.         a[href="https://old.reddit.com/wiki/"].choice {display: none;}
  205.         .tabmenu li a          {background:none;opacity:0.6;font-weight: normal}
  206.         .tabmenu li a:hover    {background:white}
  207.         .tabmenu li.selected a {opacity:1;font-weight: bold;font-size: x-large; background-color: white; border: none}
  208.         .tabmenu li.selected a {text-transform: uppercase}
  209.  
  210.  
  211.  
  212.  
  213.         /* Sidebar */
  214.         .sidecontentbox .content {border: none; background: none}
  215.         .sidebox .spacer         {display: none}
  216.         .premium-banner          {display: none}
  217.         .giftgold                {display: none}
  218.         .titlebox .bottom {border:none}
  219.         #searchexpando, .linkinfo, .linkinfo .shortlink input  {border: none}
  220.         .morelink .nub  {display: none}
  221.         .morelink       {border: none; background: #eff7ff;background-image:none}
  222.         .toggle .option {border: none; border-radius:0}
  223.         .c-btn-primary  {border: none; border-radius: 0;}
  224.         .subscription-box:not(:hover) {opacity: 0}
  225.  
  226.  
  227.         /* Space between Posts */
  228.         .link {margin-bottom: 0px;}
  229.  
  230.         /* Expanded Post Margins */
  231.         .expando {margin: 0}
  232.  
  233.         /* Gallery Buttons */
  234.         .media-gallery .gallery-nav-bar  {font-size:large; display:grid}
  235.         .media-gallery .gallery-nav-next {border:1px solid #336699;background:#eff7ff; float:right !important}
  236.         .media-gallery .gallery-nav-prev {border:1px solid #336699;background:#eff7ff}
  237.         .media-gallery .gallery-nav-back {border:1px solid #336699;background:#eff7ff}
  238.         /*.gallery-navigation {padding: 0px}*/
  239.         .gallery-navigation   {border: none}
  240.         .gallery-nav-disabled {opacity:0 !important}
  241.  
  242.         /* Rank / Scores */
  243.         .link .rank {display: none}
  244.         .arrow.up {display: none}
  245.         .arrow.down {display: none}
  246.  
  247.         /* Comment Page */
  248.         .panestack-title { padding-bottom: 0px; border-bottom: none;}
  249.         .commentarea .menuarea {font-size: large;}
  250.         .comment .author {font-size: larger;float:left}
  251.         .comment .expand {font-size: large;float:left; opacity:1;margin: 0 !important;padding: 0 !important; opacity:0}
  252.         .comment .expand {width:6px}
  253.         .comment.collapsed .expand { opacity:1;width:auto}
  254.         .comment .midcol {z-index:9999}
  255.       
  256.  
  257.         .commentarea > .usertext:not(:hover) {opacity:0.2; height: 18px}
  258.  
  259.         .commentarea .entry .buttons:not(:hover) {opacity:0;}
  260.         .comments-page #siteTable .thing {display: flex !important;border: none;}
  261.         .comment .tagline {color: #00000069 ; margin-bottom: 15px; text-align:left}
  262.         .comment .child {border-left: dotted 3px #000000}
  263.         .comment .score {font-size: larger}
  264.         .comments-page .arrow.up {display:block}
  265.         .comments-page .arrow.down {display:block}
  266.         .pinnable-content.pinned {background-color: #FFFFFFF7 !important;box-shadow: none !important}
  267.         .reddiquette {display: none}
  268.  
  269.         /* Bottom Page */
  270.         .footer {display:none}
  271.         .footer-parent {opacity:0}
  272.         .debuginfo {display:none}
  273.         .bottommenu {opacity:0}
  274.  
  275.         /* promoted posts/ads */
  276.         .link.promotedlink.promoted, .link.promotedlink.external {display:none !important}
  277.  
  278.         /* submissions */
  279.         .formtabs-content .infobar {border:none}
  280.         .content.submit .info-notice {display: none;}
  281.         #items-required {display: none;}
  282.  
  283.  
  284.  
  285.         /* Navbar */
  286.         .nav-buttons {
  287.          display:table;
  288.          bottom: 0 !important;
  289.          right: 0 !important;
  290.          text-align: center !important;
  291.          border: 3px solid;
  292.          border-color: #cee3f8;
  293.          border-top-left-radius: 15px;
  294.          background-color: #cee3f8;
  295.          font-size: larger;
  296.          z-index: 9998 !important;
  297.          }
  298.         .nextprev a {background:none !important}
  299.  
  300.          /* Crossposts */
  301.         .crosspost-preview {border-radius: 0 !important}
  302.  
  303.     `;
  304.  
  305.     // Add the custom CSS to the page
  306.     GM_addStyle(customCSS);
  307.  
  308. ////////////////////// Remove thumbnails from posts without thumbnails////////////////////////
  309.  
  310.     function removePostsWithoutImages() {
  311.         var posts = document.querySelectorAll('.thumbnail');
  312.         for (var i = 0; i < posts.length; i++) {
  313.             if (!posts[i].querySelector('img')) {
  314.                 posts[i].parentNode.removeChild(posts[i]);
  315.             }
  316.         }
  317.     }
  318.     setInterval(removePostsWithoutImages, 1000);
  319. })();
  320.  
  321.  
  322. ////////////////////////////////////// comments page //////////////////////////////////
  323.  
  324. var commentpage = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
  325. if (commentpage.test(window.location.href)) {
  326.     GM_addStyle(`.reportbtn                         {display:block}
  327.                  .post-crosspost-button             {display:block}
  328.                  a.comments                         {display:none}
  329.             /*   .buttons .give-gold.gold-give-gold {display:block}  */
  330.                  .expando-button                    {opacity: 1 }
  331.                  .hide-button                       {display:block !important}
  332.  
  333.                  a.embed-comment                    {display: none}
  334.             /*   a.bylink                           {display: none}  */
  335.  
  336.  
  337.                  .thumbnail,.thumbnail img  {width: 100px !important;height: 100px !important;}
  338.                  #sr-header-area {display:none}
  339.  
  340.             /* without this voting comments on mobile is impossible */
  341.                  .entry {margin-left:4px}
  342.  
  343.  
  344.             /* show "submitted" and "by" text in post descriptions again */
  345.                 .tagline         {visibility: visible}
  346.                 .tagline time    {margin-left: 0px}
  347.  
  348.  
  349.                  `
  350.                  );
  351.  
  352. ////////////////////////////////// Download Button ////////////////////////////////////
  353.  
  354.  
  355.     'use strict';
  356.  
  357.     function downloadVideo() {
  358.         var postUrl = window.location.href;
  359.         var baseUrl = 'https://rapidsave.com/info?url=';
  360.         var downloadUrl = baseUrl + encodeURIComponent(postUrl);
  361.         window.open(downloadUrl, '_blank');
  362.     }
  363.  
  364.     function createDownloadButton() {
  365.         var listItem = document.createElement('li');
  366.         listItem.classList.add('reddit-video-download-button');
  367.  
  368.         var button = document.createElement('button');
  369.         button.innerHTML = 'Download';
  370.         button.style.color = '#000000c7'; //same as .entry .buttons li a
  371.         button.style.background = 'none';
  372.         button.style.border = 'none';
  373.         button.style.fontSize = 'inherit';
  374.         // button.style.borderRadius = '10px';
  375.         // button.style.fontWeight = 'bold';
  376.         button.onclick = downloadVideo;
  377.  
  378.         listItem.appendChild(button);
  379.  
  380.         var buttonsList = document.querySelector('ul.buttons');
  381.         if (buttonsList) {
  382.             buttonsList.appendChild(listItem);
  383.         }
  384.     }
  385.  
  386.     createDownloadButton();
  387.  
  388.  
  389. /////////////////////add profile pictures next to comments ///////////////////////
  390.  
  391. const addAvatars = async (root = document) => {
  392.     Array.from(root.querySelectorAll('.thing:not(.morechildren)')).forEach(async (thing) => {
  393.         if (!thing) return;
  394.         if (thing.hasAttribute('data-reddit-profile-picture')) return;
  395.         const img = document.createElement('img');
  396.         img.classList.add('reddit-profile-picture');
  397.         img.style.height = '22px';
  398.         img.style.width = '22px';
  399.         img.style.float = 'left';
  400.         img.style.margin = '0px';
  401.         thing.insertBefore(img, thing.querySelector('.entry'));
  402.         thing.setAttribute('data-reddit-profile-picture', 1);
  403.         if (!thing.id) return;
  404.         const authorElement = thing.querySelector('.author');
  405.         if (authorElement && authorElement.href) {
  406.             const xhr = new XMLHttpRequest();
  407.             xhr.open('GET', `${authorElement.href}/about.json`);
  408.             xhr.addEventListener('load', async () => {
  409.                 if (xhr.status === 200) {
  410.                     try {
  411.                         const profile = JSON.parse(xhr.responseText).data;
  412.                         const ta = document.createElement('textarea');
  413.                         ta.innerHTML = profile.icon_img;
  414.                         img.src = ta.value;
  415.                     } catch (error) {
  416.                         // Error parsing JSON or extracting URL
  417.                         console.error('Error parsing JSON or extracting URL:', error);
  418.                         removeAvatar(img);
  419.                     }
  420.                 } else {
  421.                     // Non-200 status, handle error
  422.                     console.error('Error fetching user data:', xhr.status, xhr.statusText);
  423.                     removeAvatar(img);
  424.                 }
  425.             });
  426.             xhr.addEventListener('error', () => {
  427.                 // Network error
  428.                 console.error('Network error while fetching user data.');
  429.                 removeAvatar(img);
  430.             });
  431.             xhr.send();
  432.         }
  433.     });
  434. };
  435.  
  436. const removeAvatar = (imgElement) => {
  437.     if (imgElement && imgElement.parentNode) {
  438.         imgElement.parentNode.removeChild(imgElement);
  439.     }
  440. };
  441.  
  442. addAvatars();
  443.  
  444. const mo = new MutationObserver((muts) => {
  445.     muts.forEach((mut) => {
  446.         Array.from(mut.addedNodes).forEach((node) => {
  447.             if (node instanceof HTMLElement) {
  448.                 addAvatars();
  449.             }
  450.         });
  451.     });
  452. });
  453. mo.observe(document.body, { childList: true, subtree: true });
  454. };
  455.  
  456. ////////////////////////////// userpage ///////////////////////////////////////////////////////////////////
  457.  
  458. var userpage = /https:\/\/.*\.reddit\.com\/user\/.*/;
  459. if (userpage.test(window.location.href)) {
  460.  
  461.     GM_addStyle(`.comment, .content .details {border-bottom: 2px solid #5f99cf !important}`);
  462.  
  463.     const addProfilePictures = async (root = document) => {
  464.         Array.from(root.querySelectorAll('.pagename')).forEach(async (pagename) => {
  465.             if (!pagename) return;
  466.             if (pagename.hasAttribute('data-reddit-profile-picture')) return;
  467.  
  468.             const username = pagename.textContent.trim();
  469.             if (!username) return;
  470.  
  471.             const img = document.createElement('img');
  472.             img.classList.add('reddit-profile-picture');
  473.             img.style.height = '35px';
  474.             img.style.width = '35px';
  475.             img.style.verticalAlign = 'middle';
  476.  
  477.  
  478.             pagename.parentNode.insertBefore(img, pagename.nextSibling);
  479.  
  480.             pagename.setAttribute('data-reddit-profile-picture', 1);
  481.  
  482.             const xhr = new XMLHttpRequest();
  483.             xhr.open('GET', `https://www.reddit.com/user/${username}/about.json`);
  484.             xhr.addEventListener('load', async () => {
  485.                 const profile = JSON.parse(xhr.responseText).data;
  486.                 const ta = document.createElement('textarea');
  487.                 ta.innerHTML = profile.icon_img;
  488.                 img.src = ta.value;
  489.             });
  490.             xhr.send();
  491.         });
  492.     };
  493.  
  494.     addProfilePictures();
  495.  
  496.     const mo = new MutationObserver((muts) => {
  497.         muts.forEach((mut) => {
  498.             Array.from(mut.addedNodes).forEach((node) => {
  499.                 if (node instanceof HTMLElement) {
  500.                     addProfilePictures(node);
  501.                 }
  502.             });
  503.         });
  504.     });
  505.  
  506.     mo.observe(document.body, { childList: true, subtree: true });
  507. };
  508.  
  509.  
  510. //////////////////////////////////////////// red numbers if score is less than one //////////////////////////////////////
  511.  
  512. if (userpage.test(window.location.href) || commentpage.test(window.location.href)) {
  513.   (function() {
  514.     'use strict';
  515.  
  516.     // Function to check if the text starts with a "-" or "0"
  517.     function startsWithNegativeSymbolOrZero(text) {
  518.       return text.trim().startsWith('-') || text.trim().startsWith('0');
  519.     }
  520.  
  521.     // Get all elements with class "score likes"
  522.     var scoreElements = document.querySelectorAll('.score');
  523.  
  524.     // Iterate over each score element using forEach
  525.     scoreElements.forEach(function(scoreElement) {
  526.       var scoreText = scoreElement.textContent.trim();
  527.  
  528.       // Check if the score starts with a "-" or "0"
  529.       if (startsWithNegativeSymbolOrZero(scoreText)) {
  530.         // Change the color to red
  531.         scoreElement.style.color = 'red';
  532.         scoreElement.style.fontWeight = 'bold';
  533.       } else if (parseFloat(scoreText) > 1) {
  534.         // Change the color to green
  535.         scoreElement.style.color = 'green';
  536.         scoreElement.style.fontWeight = 'bold';
  537.       }
  538.     });
  539.   })();
  540. }
  541.  
  542. /////////////////////////grey out comment-buttons if no comments were written /////////////////////////////////
  543.  
  544.  
  545. if (!commentpage.test(window.location.href)) {
  546.  
  547.     'use strict';
  548.  
  549.     const removeCommentsCount = element => {
  550.         const text = element.textContent.trim();
  551.         if (!isNaN(parseInt(text.charAt(0), 10))) return;
  552.         element.closest('.entry .buttons li').style.opacity = '0.2';
  553.     };
  554.  
  555.     const commentElements = document.querySelectorAll('a.comments');
  556.     commentElements.forEach(removeCommentsCount);
  557.  
  558.     const observer = new MutationObserver(mutationsList => {
  559.         for (const mutation of mutationsList) {
  560.             if (mutation.type === 'childList') {
  561.                 const newCommentElements = mutation.addedNodes;
  562.                 newCommentElements.forEach(node => {
  563.                     if (node instanceof HTMLElement) {
  564.                         const element = node.querySelector('a.comments');
  565.                         if (element) removeCommentsCount(element);
  566.                     }
  567.                 });
  568.             }
  569.         }
  570.  
  571.     });
  572.  
  573.     observer.observe(document.body, { childList: true, subtree: true });
  574. };
  575.  
  576. /////////////////////////////////////////////////Thumbnail Click Functionality //////////////////
  577.  
  578. // Custom CSS for the clicked thumbnail
  579. const customCSS = `
  580.   /* Makes Clicking Easier */
  581.   .thumbnail {z-index:99}
  582.  
  583.   .thumbnail.clicked {
  584.     width:  80px !important;
  585.     height: 80px !important;
  586.     border-radius: 15px;
  587.     opacity:0.5;
  588.   }
  589.  
  590.   .thumbnail.clicked img {
  591.     width:  80px !important;
  592.     height: 80px !important;
  593.   }
  594.  
  595.   .thing.clicked .arrow.up {display: block}
  596.   .thing.clicked .arrow.down {display:block}
  597. `;
  598.  
  599. function expandPostOnElementClick(element) {
  600.   const expandoButton = element.closest('.thing').querySelector('.expando-button');
  601.  
  602.   if (expandoButton) {
  603.     expandoButton.click();
  604.   }
  605. }
  606.  
  607. function handleElementClick(event) {
  608.   event.stopPropagation();
  609.   event.preventDefault();
  610.  
  611.   const element = event.currentTarget;
  612.   const thumbnail = element.closest('.thumbnail');
  613.   const thing = element.closest('.thing');
  614.  
  615.   // Check if the thumbnail has the 'clicked' class
  616.   const isClicked = thumbnail.classList.contains('clicked');
  617.  
  618.   if (isClicked) {
  619.     // Remove the 'clicked' class to revert the changes
  620.     thumbnail.classList.remove('clicked');
  621.     thing.classList.remove('clicked');
  622.   } else {
  623.     // Add 'clicked' class to the thumbnail
  624.     thumbnail.classList.add('clicked');
  625.     thing.classList.add('clicked');
  626.   }
  627.  
  628.   expandPostOnElementClick(element);
  629. }
  630.  
  631. function attachClickListenersToElements() {
  632.   const elements = document.querySelectorAll('.thumbnail, img[src*="external-preview.redd.it"]');
  633.  
  634.   elements.forEach((element) => {
  635.     element.addEventListener('click', handleElementClick);
  636.   });
  637. }
  638.  
  639. // Add custom CSS styles
  640. GM_addStyle(customCSS);
  641.  
  642. // Attach click listeners to elements initially
  643. attachClickListenersToElements();
  644.  
  645. // Create a MutationObserver to monitor the page for changes
  646. const observer = new MutationObserver(() => {
  647.   // Attach click listeners to elements whenever new content is added to the page
  648.   attachClickListenersToElements();
  649. });
  650.  
  651. // Start observing the document for changes
  652. observer.observe(document, { childList: true, subtree: true });
  653.  
  654. /////////////////////Toggle Nav-Bar On Scroll /////////////////////////////////////////////////////////////
  655.  
  656.  
  657. 'use strict';
  658.  
  659. var navButtons = document.getElementsByClassName('nav-buttons');
  660. if (navButtons.length > 0) {
  661.   var nav = navButtons[0];
  662.   nav.style.position = 'fixed';
  663. }
  664.  
  665. //var headerHeight = header.offsetHeight;
  666. var lastScrollTop = 0;
  667.  
  668.  
  669. window.addEventListener('scroll', function() {
  670.   var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  671.   var windowHeight = window.innerHeight;
  672.   var documentHeight = document.documentElement.scrollHeight;
  673.  
  674.   if (scrollTop === 0) {
  675.     // Reached the top of the page
  676.     nav.style.opacity = '1';
  677.     nav.style.pointerEvents = 'auto';
  678.     } else {
  679.       // Scrolling up
  680.       nav.style.opacity = '.8';
  681.       nav.style.pointerEvents = 'auto';
  682.     }
  683.  
  684.   if (scrollTop + windowHeight + 10 >= documentHeight) {
  685.     // Reached the end of the page
  686.     nav.style.opacity = '1';
  687.     nav.style.pointerEvents = 'auto';
  688.     } else {
  689.     if (scrollTop > lastScrollTop) {
  690.       // Scrolling down
  691.       nav.style.opacity = '0';
  692.       nav.style.pointerEvents = 'none';
  693.     } 
  694.   }
  695.  
  696.   lastScrollTop = scrollTop;
  697. });
  698.  
  699.  
  700. /////////////////////////////////////// remove some tabs /////////////////////////////////////////////////
  701.  
  702. (function() {
  703.     'use strict';
  704.  
  705.     // Function to remove the elements containing the text "gilded" or "best" from .tabmenu
  706.     function removeGildedAndBestTabs() {
  707.         const tabmenu = document.querySelector('.tabmenu');
  708.         if (!tabmenu) return;
  709.  
  710.         const tabs = tabmenu.querySelectorAll('a');
  711.         for (let i = 0; i < tabs.length; i++) {
  712.             const tab = tabs[i];
  713.             const tabText = tab.textContent.toLowerCase();
  714.             if (tabText.includes('gilded') || tabText.includes('best')) {
  715.                 tab.remove();
  716.             }
  717.         }
  718.     }
  719.  
  720.     // Call the function to remove the "gilded" and "best" tabs after the page has loaded
  721.     window.addEventListener('load', removeGildedAndBestTabs);
  722. })();
  723.  
  724. ////////////////////////////////////// Subreddit Icon next to Subreddit name /////////////////////////
  725.  
  726. (function() {
  727.   'use strict';
  728.  
  729.   function setSubredditIcon() {
  730.     const pagenameLink = document.querySelector('.pagename');
  731.     const subredditIcon = document.createElement('img');
  732.     subredditIcon.style.verticalAlign = 'middle';
  733.     subredditIcon.style.width = 'auto';
  734.     subredditIcon.style.height = '35px';
  735.  
  736.     const srName = getSrName();
  737.  
  738.  
  739.     const srDataUrl = `https://www.reddit.com/r/${srName}/about.json`;
  740.     fetch(srDataUrl)
  741.       .then(response => response.json())
  742.       .then(data => {
  743.         const communityIcon = cleanUpCommunityIcon(data.data.community_icon);
  744.         const iconUrl = communityIcon || data.data.icon_img || data.data.header_img;
  745.         if (!iconUrl || iconUrl.length === 0)
  746.            {
  747.            return;
  748.            }
  749.         subredditIcon.src = iconUrl;
  750.         pagenameLink.parentNode.insertBefore(subredditIcon, pagenameLink.nextSibling);
  751.       })
  752.  
  753.   }
  754.  
  755.   function getSrName() {
  756.     const srNameRegex = /https:[/][/](www|old|new)[.]reddit[.]com[/]r[/](\w+)/g;
  757.     const match = srNameRegex.exec(document.location.href);
  758.  
  759.     return match[2];
  760.   }
  761.  
  762.   function cleanUpCommunityIcon(url) {
  763.     if (!url || url.length === 0) {
  764.       return url;
  765.     }
  766.     function htmlDecode(input) {
  767.       const doc = new DOMParser().parseFromString(input, 'text/html');
  768.       return doc.documentElement.textContent;
  769.     }
  770.     const decodedUrl = htmlDecode(url);
  771.     return decodedUrl;
  772.   }
  773.  
  774.   setSubredditIcon();
  775. })();
  776.  
  777.