Reddit CSS

New Design with new functionalities

目前為 2023-12-14 提交的版本,檢視 最新版本

// ==UserScript==
// @name         Reddit CSS
// @namespace    https://www.reddit.com
// @version      6.5
// @description  New Design with new functionalities
// @author       Agreasyforkuser
// @match        https://old.reddit.com/*
// @match        https://www.reddit.com/*
// @match        https://rapidsave.com/*
// @exclude      https://new.reddit.com/*
// @icon         https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
// @license      MIT
// @grant        GM_addStyle
// ==/UserScript==



/////////////////// sort by new ////////////////////////////////////////////////////////////////////////

'use strict';
const re = /https?:\/\/(?:www\.|old\.|new\.)?reddit\.com/i;
for (var i=0, l=document.links.length; i<l; i++) {
    if (re.test(document.links[i].href)) {
        var path = document.links[i].pathname;
        if (path === '/' || path.startsWith('/r/')) {
            var pathlen = path.split('/').length - 1 - (path.endsWith('/') ? 1 : 0);
            if ((pathlen <= 2) && (document.links[i].closest('.tabmenu') === null)) {
                document.links[i].href += path.endsWith('/') ? 'new/' : '/new/';
            }
        }
    }
}
//////////////////////////////// over 18 button ///////////////////////////////////////////////////////

const button = document.querySelector('button.c-btn.c-btn-primary[type="submit"][name="over18"][value="yes"]');
if (button) {button.click();}

//////////////////////////////// auto-click on NSFW-disclaimers ////////////////////////////////////////

(function() {
    'use strict';
    // Function to click on elements with class 'expando-gate__show-once'
    function clickExpandoGate() {
        var elements = document.querySelectorAll('.expando-gate.expando-gate--overlay, .expando-gate.expando-gate--interstitial');
        elements.forEach(function(element) {
            if (!element.dataset.expandoClicked) {
                element.click();
                element.dataset.expandoClicked = true;
            }
        });
    }
    // Create a MutationObserver to watch for changes in the DOM
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            // Check if the target node or its descendants have elements with class 'expando-gate__show-once'
            if (mutation.target.matches('.expando-gate.expando-gate--overlay') || mutation.target.querySelector('.expando-gate.expando-gate--overlay')) {clickExpandoGate();}
            // embedded youtube-videos need this
            if (mutation.target.matches('.expando-gate.expando-gate--interstitial') || mutation.target.querySelector('.expando-gate.expando-gate--interstitial')) {clickExpandoGate();}
        });
    });
    // Define the configuration for the MutationObserver
    var config = { subtree: true, childList: true };
    // Start observing the document with the specified configuration
    observer.observe(document.body, config);
    // Initial click on elements with class 'expando-gate__show-once'
    clickExpandoGate();
})();

GM_addStyle(`.expando-gate.expando-gate--overlay {display:none !important}`);

/////////////////////////////// auto-click download link after opening the rapidsave page ///////////////
const dbutton = document.querySelector('.downloadbutton');
if (dbutton) {
    dbutton.click();
}

///////////////////////////////////////////////////////////////////////////////////////////////////
(function() {
    'use strict';

    // Define the CSS to enlarge the thumbnails and modify the styling
    var customCSS = `

         /* search placeholder text */
         ::-moz-placeholder          {color:transparent !important}
         ::-webkit-input-placeholder {color:transparent !important}

         /* search page */
         /*.search-result :link {display:inline-table !important}*/
         .search-result :link:not(a.option.remove) {display: inline-table !important}
         .search-result-group {max-width: none}
         .search-header-menus {float: none}
         .search-header-label {display: none}
         .combined-search-page .raisedbox h4 {opacity: 0}


        /* Video Controls for Mobile */
        video::-webkit-media-controls-panel {background: none; opacity: 1}
        video::-webkit-media-controls-overlay-play-button {opacity: 0}

        /* Video controls for Desktop */
        .reddit-video-controller-root.playback-controls       {background: rgba(0,0,0,0.75) !important; border-radius: 50px !important}
        .reddit-video-controller-root.playback-controls:hover {background: rgba(0,0,0,0.95) !important}
        .reddit-video-controller-root.playback-controls a.permalink {display: none !important}
        .reddit-video-controller-root.ended-controls, .reddit-video-controller-root.buffering-controls {background: none !important}
        .reddit-video-controller-root.ended-controls .centered span.replay-video {display: none !important}
        .reddit-video-controller-root.playback-controls .reddit-video-seek-bar-root .seek-bar-thumb {opacity: 1 !important}
        .reddit-video-controller-root.playback-controls .time-label {font-weight: bold}
        /* hide some video control buttons unitl hover */
        .reddit-video-controller-root.playback-controls       .control-button   {display:none}
        .reddit-video-controller-root.playback-controls:hover .control-button   {display:block}
        .reddit-video-controller-root.playback-controls       .volume-container {display:block}

        /* Videoplayer Background */
        .reddit-video-player-root {background: #0000;}

        /* Video Duration Info */
        .duration-overlay {font-size: 10pt; font-weight: bold;}
        .duration-overlay {border-top-left-radius: 10px; width:auto !important; padding:5px; right:0}


        /* Flair Labels */
        .flairrichtext  {border-radius: 0px;border:none}
        .linkflairlabel {border-radius: 0px;border:none}
        .stamp      {background: white; border-radius: 0; padding:0}
        .nsfw-stamp {background: #d10023; color:white; font-weight:bold !important; border: 2px solid #d10023 !important;}



        /* Subreddit Name */
        body.with-listing-chooser #header .pagename {position:inherit; color: white}
        .pagename a {color: black !important; margin-left:4px; margin-right:4px; padding:0}
        .pagename {background-color:white !important; font-variant: normal; border-radius:0px; margin: 0 !important; padding: 0 !important}
        /* match pagename height with subreddit logo */
        .pagename   {display: inline-block !important; height: 35px !important}
        .pagename a {vertical-align: middle !important}


        /* Adjust the size of the thumbnails */

        .thumbnail, .thumbnail img, .link .thumbnail img{
            width: 200px !important;
            height: auto !important;
            position: relative;
            margin-bottom: 0;
        }

        /* Visibility of text posts */
        .expando-button.selftext {float:left}
        .expando-button.selftext {height:50px !important; width:200px !important; background-image:none !important;background-color: black !important}


        /* no margin left for expanded media */
        .entry {margin-left:0}

        /* size videos correctly */
        .no-constraints-when-pinned {min-width:0 !important; min-height: 0 !important;}

        /* OP indicator */
        .tagline .submitter, .search-result-meta .submitter {color: #228822}

        /* sort menu*/
        .menuarea {border:none}
        .dropdown.lightdrop .selected {text-decoration: none; font-weight: normal; background-image: none}

        /* Post */
        .thing .title      {font-weight: normal;color: #000; margin-bottom: 13px}
        .subreddit         {font-weight: bold;font-size: larger;color: #000;}
        .link .flat-list   {font-size:larger}
        .link.last-clicked {border: 3px solid red}

        /* Text Posts Background*/
        .link .usertext-body .md {background: none; border: 1px solid gray; border-radius: 0}

        /* Post Details */
        .entry .buttons li a     {color:#000000c7; font-weight:normal}
        .entry .buttons li       {background: #0000000d}
        .entry .buttons li:hover {opacity:1 !important} //revert graying-out function on hover

        .tagline {color: #8880;}
        .tagline .live-timestamp {color: #369}
        .domain {display: none;}
        .reportbtn {display:none}
        .post-crosspost-button {display:none}
        .post-sharing-button {display:none}
        .buttons .give-gold.gold-give-gold {display: none}
        .hide-button {display:none !important}
        .expando-button {opacity: 0.1;float:right}

         /* Crossposts */
        .crosspost-preview {border-radius: 0}

        /* hide "submitted" and "by" text from post descriptions */
        .tagline         {visibility: hidden}
        .tagline::before {content: none}
        .tagline time    {visibility: visible; margin-left: -55px}
        .tagline a       {visibility: visible}
        .tagline         {margin-bottom: 6px}

        /* Space between Posts */
        .link {margin-bottom: 0px;}

        /* Expanded Post Margins */
        .expando {margin: 0}

        /* Gallery Buttons */
        .media-gallery .gallery-nav-bar  {font-size:large; display:grid}
        .media-gallery .gallery-nav-next {border:1px solid #336699;background:#eff7ff; float:right !important}
        .media-gallery .gallery-nav-prev {border:1px solid #336699;background:#eff7ff}
        .media-gallery .gallery-nav-back {border:1px solid #336699;background:#eff7ff}
        /*.gallery-navigation {padding: 0px}*/
        .gallery-navigation   {border: none}
        .gallery-nav-disabled {opacity:0 !important}

        /* Rank / Scores */
        .link .rank {display: none}
        .arrow.up {display: none}
        .arrow.down {display: none}


        /* Header Font Size and Icon */
        #header-bottom-left {font-size: large}
        #header-bottom-left {margin-top: 0}
        .comments-page #header-img:not(:hover), .comments-page #header-img.default-header:not(:hover) {opacity: 0}
        #header-img, #header-img.default-header {vertical-align: bottom; margin: 0}
        #header-img    {max-width: 32px; max-height: 32px}
        #header-img.default-header {background-image: url(https://www.redditstatic.com/desktop2x/img/favicon/favicon-32x32.png);background-position: 0; height:32px; width:32px}

        /* Upper Bars */
        #sr-header-area:not(:hover)          {background: none !important; opacity:0.3 }
        #sr-header-area                      {border-bottom: none}
        #sr-header-area .redesign-beta-optin {display:none}
        #sr-more-link                        {background-color: #cee3f8 }
        .pref-lang {font-weight: normal}
        #header-bottom-right:not(:hover) {background: none; border-radius:0}
        #header-bottom-right {background: white; border-radius:0}
        #header-bottom-right {font-size: larger;}
        #header {border:none}
        .separator {color: transparent;}
        .tabmenu li a          {background:none;opacity:0.6;font-weight: normal}
        .tabmenu li a:hover    {background:white}
        .tabmenu li.selected a {opacity:1;font-weight: bold;font-size: x-large; background-color: white; border: none}
        .tabmenu li.selected a {text-transform: uppercase}



        /* Sidebar */
        .sidecontentbox .content {border: none; background: none}
        .sidebox .spacer         {display: none}
        .premium-banner          {display: none}
        .giftgold                {display: none}
        .titlebox .bottom {border:none}
        #searchexpando, .linkinfo, .linkinfo .shortlink input  {border: none}
        .morelink .nub  {display: none}
        .morelink       {border: none; background: #eff7ff;background-image:none}
        .toggle .option {border: none; border-radius:0}
        .c-btn-primary  {border: none; border-radius: 0;}
        .subscription-box:not(:hover) {opacity: 0}


        /* Comment Page */
        .comments-page a.choice[href*="comments"] {display:none !important}
        .panestack-title { padding-bottom: 0px; border-bottom: none;}
        .commentarea .menuarea {font-size: large;}
        .comment .author {font-size: larger;float:left}
        .comment .expand {font-size: large;float:left; opacity:1;margin: 0 !important;padding: 0 !important; opacity:0}
        .comment .expand {width:6px}
        .comment.collapsed .expand { opacity:1;width:auto}
        .comment .midcol {z-index:9999}
        .commentarea > .usertext:not(:hover) {opacity:0.2; height: 18px}
        .commentarea .entry .buttons:not(:hover) {opacity:0;}
        .comments-page #siteTable .thing {display: flex !important;border: none;}
        .comment .tagline {color: #00000069 ; margin-bottom: 15px; text-align:left}
        .comment .child {border-left: 3px solid black}
        .comment .score {font-size: larger}
        .comment .score {visibility: visible; margin-right: 65px}
        .comments-page .comment .score {margin-right: 0}
        .comments-page .arrow.up {display:block}
        .comments-page .arrow.down {display:block}
        .pinnable-content.pinned {background-color: #FFFFFFF7 !important;box-shadow: none !important}
        .reddiquette {display: none}
        .edited-timestamp {color: red}

        .comments-page   .reportbtn                         {display:block}
        .comments-page   .post-crosspost-button             {display:block}
        .comments-page   a.comments                         {display:none}
        .comments-page   .expando-button                    {opacity: 1 }
        .comments-page   .hide-button                       {display:block !important}
        .comments-page   a.embed-comment                    {display: none}
        .comments-page   .thumbnail, .thumbnail img         {width: 100px !important; height: auto !important; max-height: 100px !important}
        .comments-page   #sr-header-area {display:none}
        /* without this voting comments on mobile is impossible */
        .comments-page  .entry           {margin-left:4px}
        /* show "submitted" and "by" text in post descriptions again */
        .comments-page  .tagline         {visibility: visible}
        .comments-page  .tagline time    {margin-left: 0px}
        .comments-page  #noresults       {display: none}



        /* promoted posts/ads */
        .link.promotedlink.promoted, .link.promotedlink.external {display:none !important}

        /* submissions */
        .formtabs-content .infobar {border:none}
        .content.submit .info-notice {display: none;}
        #items-required {display: none;}


        /* Bottom Page */
        .footer {display:none}
        .footer-parent {opacity:0}
        .debuginfo {display:none}
        .bottommenu {opacity:0}

        /* Navbar */
        .nav-buttons {
         display:table;
         bottom: 0 !important;
         right: 0 !important;
         text-align: center !important;
         border: 3px solid;
         border-color: #cee3f8;
         border-top-left-radius: 15px;
         background-color: #cee3f8;
         font-size: larger;
         z-index: 9998 !important;
         }
        .nextprev a {background:none !important}

        .email-collection-banner, .email-verification-tooltip, #eu-cookie-policy {display:none !important}
        .infobar.listingsignupbar, .infobar.commentsignupbar {display: none !important;}
        .infobar, .timeout-infobar {border:none}
        .help-hoverable {display:none}
        .reddit-infobar.with-icon {
             min-height: 35px !important;
             padding: 0 0 0 55px !important;
             height: 35px !important;
             }
        .reddit-infobar.with-icon:not(:hover) {
             min-height: 0 !important;
             padding: 0 0 0 55px !important;
             margin: 0 !important;
             height: 9px !important;
             opacity:0 !important
             }

         /* Login-Popup */
         .login-modal .reddit-logo, .login-modal .skip-for-now {display: none}
         .desktop-onboarding__col_sign-up_form {width: fit-content}
         #desktop-onboarding-browse {min-height: 0 !important; height: fit-content !important}


         /* Turn off custom subreddit styles */
         #header, #header:hover   {background-image: none !important; background-color: #cee3f8}
         .link          {padding: 0}
         .thumbnail, .thumbnail img {max-width: none; max-height: none; transform: none}
         .link .entry .buttons li a.comments {color:#000000c7 !important}
         .link.odd, .link.even {padding: 0 !important; margin-right: 0px !important}
         body > .content {max-width: none !important}
         html body div#header div#header-bottom-left span.pagename a {font-size: 1.2em !important; padding: 0; padding-right: 0; height: 0}
         span.hover.pagename.redditname {font-size: 1.2em !important}
         #header-bottom-left #header-img-a {margin: 0}
         .pagename a {line-height: 0px; background: none}
         .pagename a {border: none}
         #header .pagename a {line-height: 0px}
         #header .pagename > a {color: black !important}
         .link > .thumbnail {border-radius:0 !important}
         * {text-shadow: none !important}
         .title {color:black !important}
         .thing.link .title a.title {color: black !important}
         body, body > .content {background: white}
         body {border: none}
         .thing.even, .thing.odd {background: white !important}
         .tabmenu li.selected a {opacity: 1 !important;color: #ff4500 !important;background-color: white !important;border: none !important}
         #header-bottom-left .tabmenu {left: 0 !important}
         #header {margin: 0 !important}
    `;

    // Add the custom CSS to the page
    GM_addStyle(customCSS);

////////////////////// Remove thumbnails from posts without thumbnails////////////////////////

    function removePostsWithoutImages() {
        var posts = document.querySelectorAll('.thumbnail');
        for (var i = 0; i < posts.length; i++) {
            if (!posts[i].querySelector('img')) {
                posts[i].parentNode.removeChild(posts[i]);
            }
        }
    }
    setInterval(removePostsWithoutImages, 1000);
})();


////////////////////////////////////// comments page //////////////////////////////////

var commentpage = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
if (commentpage.test(window.location.href)) {

////////////////////////////////// Download Button ////////////////////////////////////

    'use strict';

    function downloadVideo() {
        var postUrl = window.location.href;
        var baseUrl = 'https://rapidsave.com/info?url=';
        var downloadUrl = baseUrl + encodeURIComponent(postUrl);
        window.open(downloadUrl, '_blank');
    }

    function createDownloadButton() {
        var listItem = document.createElement('li');
        listItem.classList.add('reddit-video-download-button');

        var button = document.createElement('button');
        button.innerHTML = 'Download';
        button.style.color = '#000000c7'; //same as .entry .buttons li a
        button.style.background = 'none';
        button.style.border = 'none';
        button.style.fontSize = 'inherit';
        // button.style.borderRadius = '10px';
        // button.style.fontWeight = 'bold';
        button.onclick = downloadVideo;

        listItem.appendChild(button);

        var buttonsList = document.querySelector('ul.buttons');
        if (buttonsList) {
            buttonsList.appendChild(listItem);
        }
    }

    createDownloadButton();


/////////////////////add profile pictures next to comments ///////////////////////

const addAvatars = async (root = document) => {
    Array.from(root.querySelectorAll('.thing:not(.morechildren)')).forEach(async (thing) => {
        if (!thing) return;
        if (thing.hasAttribute('data-reddit-profile-picture')) return;
        const img = document.createElement('img');
        img.classList.add('reddit-profile-picture');
        img.style.height = '22px';
        img.style.width = '22px';
        img.style.float = 'left';
        img.style.margin = '0px';
        thing.insertBefore(img, thing.querySelector('.entry'));
        thing.setAttribute('data-reddit-profile-picture', 1);
        if (!thing.id) return;
        const authorElement = thing.querySelector('.author');
        if (authorElement && authorElement.href) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', `${authorElement.href}/about.json`);
            xhr.addEventListener('load', async () => {
                if (xhr.status === 200) {
                    try {
                        const profile = JSON.parse(xhr.responseText).data;
                        const ta = document.createElement('textarea');
                        ta.innerHTML = profile.icon_img;
                        img.src = ta.value;
                    } catch (error) {
                        // Error parsing JSON or extracting URL
                        console.error('Error parsing JSON or extracting URL:', error);
                        removeAvatar(img);
                    }
                } else {
                    // Non-200 status, handle error
                    console.error('Error fetching user data:', xhr.status, xhr.statusText);
                    removeAvatar(img);
                }
            });
            xhr.addEventListener('error', () => {
                // Network error
                console.error('Network error while fetching user data.');
                removeAvatar(img);
            });
            xhr.send();
        }
    });
};

const removeAvatar = (imgElement) => {
    if (imgElement && imgElement.parentNode) {
        imgElement.parentNode.removeChild(imgElement);
    }
};

addAvatars();

const mo = new MutationObserver((muts) => {
    muts.forEach((mut) => {
        Array.from(mut.addedNodes).forEach((node) => {
            if (node instanceof HTMLElement) {
                addAvatars();
            }
        });
    });
});
mo.observe(document.body, { childList: true, subtree: true });
};

////////////////////////////// userpage ///////////////////////////////////////////////////////////////////

var userpage = /https:\/\/.*\.reddit\.com\/user\/.*/;
if (userpage.test(window.location.href)) {

    GM_addStyle(`.comment, .content .details {border-bottom: 2px solid #5f99cf !important}`);

    const addProfilePictures = async (root = document) => {
        Array.from(root.querySelectorAll('.pagename')).forEach(async (pagename) => {
            if (!pagename) return;
            if (pagename.hasAttribute('data-reddit-profile-picture')) return;

            const username = pagename.textContent.trim();
            if (!username) return;

            const img = document.createElement('img');
            img.classList.add('reddit-profile-picture');
            img.style.height = '35px';
            img.style.width = '35px';
            img.style.verticalAlign = 'middle';


            pagename.parentNode.insertBefore(img, pagename.nextSibling);

            pagename.setAttribute('data-reddit-profile-picture', 1);

            const xhr = new XMLHttpRequest();
            xhr.open('GET', `https://www.reddit.com/user/${username}/about.json`);
            xhr.addEventListener('load', async () => {
                const profile = JSON.parse(xhr.responseText).data;
                const ta = document.createElement('textarea');
                ta.innerHTML = profile.icon_img;
                img.src = ta.value;
            });
            xhr.send();
        });
    };

    addProfilePictures();

    const mo = new MutationObserver((muts) => {
        muts.forEach((mut) => {
            Array.from(mut.addedNodes).forEach((node) => {
                if (node instanceof HTMLElement) {
                    addProfilePictures(node);
                }
            });
        });
    });

    mo.observe(document.body, { childList: true, subtree: true });
};


//////////////////////////////////////////// red numbers if score is less than one //////////////////////////////////////

if (userpage.test(window.location.href) || commentpage.test(window.location.href)) {
  (function() {
    'use strict';

    // Function to check if the text starts with a "-" or "0"
    function startsWithNegativeSymbolOrZero(text) {
      return text.trim().startsWith('-') || text.trim().startsWith('0');
    }

    // Get all elements with class "score likes"
    var scoreElements = document.querySelectorAll('.comment .score');

    // Iterate over each score element using forEach
    scoreElements.forEach(function(scoreElement) {
      var scoreText = scoreElement.textContent.trim();

      // Check if the score starts with a "-" or "0"
      if (startsWithNegativeSymbolOrZero(scoreText)) {
        // Change the color to red
        scoreElement.style.color = 'red';
        scoreElement.style.fontWeight = 'bold';
      } else if (parseFloat(scoreText) > 1) {
        // Change the color to green
        scoreElement.style.color = 'green';
        scoreElement.style.fontWeight = 'bold';
      }
    });
  })();
}

/////////////////////////grey out comment-buttons if no comments were written, open links in new tab /////////////////////////////////

if (!commentpage.test(window.location.href)) {

    'use strict';

    const removeCommentsCount = element => {
        const text = element.textContent.trim();
        if (!isNaN(parseInt(text.charAt(0), 10))) return;
        element.closest('.entry .buttons li a').style.opacity = '0';
    };

    const openInNewTab = element => {
        element.setAttribute('target', '_blank');
    };

    const commentElements = document.querySelectorAll('a.comments');
    const postTitleElements = document.querySelectorAll('.thing .title');
    const postauthorElements = document.querySelectorAll('.author');
    const subredditElements = document.querySelectorAll('.subreddit');
    commentElements.forEach(removeCommentsCount);
    commentElements.forEach(openInNewTab);
    postTitleElements.forEach(openInNewTab);
    postauthorElements.forEach(openInNewTab);
    subredditElements.forEach(openInNewTab);

    const observer = new MutationObserver(mutationsList => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                const newCommentElements = mutation.addedNodes;
                newCommentElements.forEach(node => {
                    if (node instanceof HTMLElement) {
                        const element = node.querySelector('a.comments');
                        const element2 = node.querySelector('.author');
                        const element3 = node.querySelector('.subreddit');
                        if (element) {
                            removeCommentsCount(element);
                            openInNewTab(element);
                        };
                        if (element2) {openInNewTab(element2)};
                        if (element3) {openInNewTab(element3)};
                    }
                });
            }
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
};


/////////////////////////////////////////////////Thumbnail Click Functionality //////////////////

// Custom CSS for the clicked thumbnail
const customCSS = `
  /* Makes Clicking Easier */
  .thumbnail {z-index:99}

  .thumbnail.clicked {
    width:  80px !important;
    height: 80px !important;
    border-radius: 15px !important;
    opacity:0.5;
  }

  .thumbnail.clicked img {
    width:  80px !important;
    height: 80px !important;
  }

  .thing.clicked .arrow.up {display: block}
  .thing.clicked .arrow.down {display:block}
`;

function expandPostOnElementClick(element) {
  const expandoButton = element.closest('.thing').querySelector('.expando-button');

  if (expandoButton) {
    expandoButton.click();
  }
}

function handleElementClick(event) {
  event.stopPropagation();
  event.preventDefault();

  const element = event.currentTarget;
  const thumbnail = element.closest('.thumbnail');
  const thing = element.closest('.thing');

  // Check if the thumbnail has the 'clicked' class
  const isClicked = thumbnail.classList.contains('clicked');

  if (isClicked) {
    // Remove the 'clicked' class to revert the changes
    thumbnail.classList.remove('clicked');
    thing.classList.remove('clicked');
  } else {
    // Add 'clicked' class to the thumbnail
    thumbnail.classList.add('clicked');
    thing.classList.add('clicked');
  }

  expandPostOnElementClick(element);
}

function attachClickListenersToElements() {
  const elements = document.querySelectorAll('.thumbnail, img[src*="external-preview.redd.it"]');

  elements.forEach((element) => {
    element.addEventListener('click', handleElementClick);
  });
}

// Add custom CSS styles
GM_addStyle(customCSS);

// Attach click listeners to elements initially
attachClickListenersToElements();

// Create a MutationObserver to monitor the page for changes
const observer = new MutationObserver(() => {
  // Attach click listeners to elements whenever new content is added to the page
  attachClickListenersToElements();
});

// Start observing the document for changes
observer.observe(document, { childList: true, subtree: true });

/////////////////////Toggle Nav-Bar On Scroll /////////////////////////////////////////////////////////////


'use strict';

var navButtons = document.getElementsByClassName('nav-buttons');
if (navButtons.length > 0) {
  var nav = navButtons[0];
  nav.style.position = 'fixed';
}

//var headerHeight = header.offsetHeight;
var lastScrollTop = 0;


window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var windowHeight = window.innerHeight;
  var documentHeight = document.documentElement.scrollHeight;

  if (scrollTop === 0) {
    // Reached the top of the page
    nav.style.opacity = '1';
    nav.style.pointerEvents = 'auto';
    } else {
      // Scrolling up
      nav.style.opacity = '.8';
      nav.style.pointerEvents = 'auto';
    }

  if (scrollTop + windowHeight + 10 >= documentHeight) {
    // Reached the end of the page
    nav.style.opacity = '1';
    nav.style.pointerEvents = 'auto';
    } else {
    if (scrollTop > lastScrollTop) {
      // Scrolling down
      nav.style.opacity = '0';
      nav.style.pointerEvents = 'none';
    } 
  }

  lastScrollTop = scrollTop;
});


////////////////////////////////////// Subreddit Icon next to Subreddit name /////////////////////////

(function() {
  'use strict';

  function setSubredditIcon() {
    const pagenameLink = document.querySelector('.pagename');
    const subredditIcon = document.createElement('img');
    subredditIcon.style.verticalAlign = 'middle';
    subredditIcon.style.width = 'auto';
    subredditIcon.style.height = '35px';
    subredditIcon.classList.add('subreddit-icon');


    const srName = getSrName();


    const srDataUrl = `https://www.reddit.com/r/${srName}/about.json`;
    fetch(srDataUrl)
      .then(response => response.json())
      .then(data => {
        const communityIcon = cleanUpCommunityIcon(data.data.community_icon);
        const iconUrl = communityIcon || data.data.icon_img || data.data.header_img;
        document.getElementById("header-img").src = "https://www.redditstatic.com/desktop2x/img/favicon/favicon-32x32.png";
        // just use the default icon if there is none
        if (!iconUrl || iconUrl.length === 0)
           {
//            const svgPath = "M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0ZM8.016 8.633a1.616 1.616 0 0 0-.2.806V13.5H5.931V6.172h1.8v.9h.039a3.009 3.009 0 0 1 1.018-.732 3.45 3.45 0 0 1 1.449-.284c.246-.003.491.02.732.068.158.024.309.08.444.164l-.759 1.832a2.09 2.09 0 0 0-1.093-.26c-.33-.01-.658.062-.954.208a1.422 1.422 0 0 0-.591.565Zm2.9 6.918H9.355L14.7 2.633c.426.272.828.58 1.2.922l-4.984 11.996Z";
//            const fillColor = "#0079D3";
//            const viewBox = "-1 -1 22 22";
//            const defaultURL = "data:image/svg+xml," + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="${viewBox}"><path d="${svgPath}" fill="${fillColor}" /></svg>`);
//            subredditIcon.src = defaultURL;
//            pagenameLink.parentNode.insertBefore(subredditIcon, pagenameLink.nextSibling);
           return;
           }
        subredditIcon.src = iconUrl;
        pagenameLink.parentNode.insertBefore(subredditIcon, pagenameLink.nextSibling);
      })

  }

  function getSrName() {
    const srNameRegex = /https:[/][/](www|old|new)[.]reddit[.]com[/]r[/](\w+)/g;
    const match = srNameRegex.exec(document.location.href);

    return match[2];
  }

  function cleanUpCommunityIcon(url) {
    if (!url || url.length === 0) {
      return url;
    }
    function htmlDecode(input) {
      const doc = new DOMParser().parseFromString(input, 'text/html');
      return doc.documentElement.textContent;
    }
    const decodedUrl = htmlDecode(url);
    return decodedUrl;
  }

  setSubredditIcon();
})();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址