您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
New Design with new functionalities
当前为
- // ==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: -53px}
- .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; text-align: right !important}
- .media-gallery .gallery-nav-prev {border:1px solid #336699;background:#eff7ff; text-align: left !important}
- .media-gallery .gallery-nav-back {border:1px solid #336699;background:#eff7ff; text-align: center !important}
- .media-gallery .gallery-nav-next:after {content:"▶"}
- .media-gallery .gallery-nav-prev:before {content:"◀"}
- /*.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;opacity:1 !important}
- .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 .tabmenu 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, .comments-page .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}
- #header .tabmenu li a {color: #369; background-color: #cee3f8 !important;border: none}
- #header .tabmenu li.selected a {background: white !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.1';
- };
- 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();
- })();