Reddit CSS

New Design with new functionalities

当前为 2023-12-08 提交的版本,查看 最新版本

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