☰

kbin enhancement script

Few small changes to the kbin UI while they still develop some features

当前为 2023-06-16 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name     kbin enhancement script
  3. // @description Few small changes to the kbin UI while they still develop some features
  4. // @namespace com.sirpsychomantis
  5. // @license MIT
  6. // @version  1.7
  7. // @grant    none
  8. // @run-at document-end
  9. // @match  https://fedia.io/*
  10. // @match  https://kbin.social/*
  11. // ==/UserScript==
  12.  
  13.  
  14. (function(){
  15.   const version = "1.7";
  16.   
  17.   const style = document.createElement('style');
  18.   style.textContent = `
  19.     .entry figure {overflow: hidden}
  20.     #kes-version-dialog {position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,.3); z-index: 9999999}
  21.     .kes-version-dialog-content {background: #ddd; color: #444; position: relative; padding: 40px}
  22. 		.kes-expand {grid-gap: 0; padding-left:55px}
  23.     .kes-blur {filter: blur(4px); transition-duration: 0.5s}
  24. 		.kes-blur-large {filter: blur(15px)}
  25.     .kes-blur:hover {filter: none}
  26.   `;
  27.   document.head.appendChild(style);
  28.   
  29.   
  30.   const allSettings = [
  31.     {name: "Show domains", value:"show-domains"},
  32.     {name: "Show collapse comment", value:"show-collapse"},
  33.     {name: "Show collapse replies", value:"show-collapse-replies"},
  34.     {name: "Replies start collapsed", value:"start-collapse-replies", default: "false"},
  35.     {name: "Move comment box to top", value:"comment-box-top"},
  36.     {name: "Reply box improvements", value:"comment-cancel"},
  37.     {name: "Hide known NSFW domains", value:"nsfw-hide"},
  38.     {name: "Blur known NSFW domains", value:"nsfw-blur"}
  39.   ];
  40.   
  41.   allSettings.forEach(setting => {
  42.     if (setting.default === "false" && localStorage.getItem("setting-" + setting.value) === null) {
  43.       localStorage.setItem("setting-" + setting.value, "false");
  44.     }
  45.   });
  46.   
  47.   function getSetting(setting) {
  48.     let value = localStorage.getItem("setting-" + setting);
  49.     if (value === null)
  50.       value = "true";
  51.     return value === "true";
  52.   }
  53.   function setSetting(setting, value) {
  54.     localStorage.setItem("setting-" + setting, value);
  55.     location.reload();
  56.   }
  57.   
  58.   
  59.   function addDomain(link) {
  60.     const parts = link.title.split("@");
  61.     if (parts[2] !== location.hostname && !link.innerText.includes("@" + parts[2])) {
  62.       const linkText = link.childNodes[link.childNodes.length-1];
  63.       linkText.nodeValue += "@" + parts[2];
  64.     }
  65.   }
  66.   function addDomains() {
  67.     document.querySelectorAll(".magazine-inline, .user-inline").forEach(link => {
  68.       addDomain(link);
  69.     });
  70.   }
  71.   
  72.   
  73.   function getComments(comment, allComments) {
  74.     const id = comment.id.split('-')[2];
  75.     
  76.     allComments.push(comment);
  77.     const subComments = comment.parentElement.querySelectorAll('blockquote[data-subject-parent-value="'+id+'"]');
  78.     subComments.forEach(blockquote => { getComments(blockquote, allComments); });
  79.   }
  80.   function getCollapsos(comment, allCollapsos) {
  81.     const id = comment.id.split('-')[2];
  82.     
  83.     if (comment.classList.contains('kes-expand'))
  84.     	allCollapsos.push(comment);
  85.     
  86.     const subComments = comment.parentElement.querySelectorAll('blockquote[data-subject-parent-value="'+id+'"]');
  87.     subComments.forEach(blockquote => { getCollapsos(blockquote, allCollapsos); });
  88.   }
  89.   function removeAllCollapsos(blockquote) {
  90.     // Just remove all these for now, don't want to figure out how to do this cleanly right now.
  91.     const allCollapsos = [];
  92.     getCollapsos(blockquote, allCollapsos);
  93.     allCollapsos.forEach(comment => { comment.remove() });
  94.   }
  95.   function expandComment(blockquote) {
  96.     const allComments = [];
  97.     getComments(blockquote, allComments);
  98.     allComments.forEach(comment => { comment.style.display="" });
  99.     
  100.     removeAllCollapsos(blockquote);
  101.   }
  102.   function collapseComment(blockquote) {
  103.     const id = blockquote.id.split('-')[2];
  104.     let commentLevel = "1";
  105.     blockquote.classList.forEach(classItem => {
  106.     	if (classItem.includes("comment-level"))
  107.         commentLevel = classItem.split("--")[1];
  108.     });
  109.     
  110.     const allComments = [];
  111.     getComments(blockquote, allComments);
  112.     allComments.forEach(comment => { comment.style.display="none" });
  113.  
  114.     const username = blockquote.querySelector("header a").innerText;
  115.     const time = blockquote.querySelector("header time").innerText;
  116.  
  117.     const newBlockquote = document.createElement('blockquote');
  118.     newBlockquote.className = 'kes-expand section comment entry-comment comment-level--' + commentLevel;
  119.     newBlockquote.dataset.subjectParentValue = id;
  120.     newBlockquote.innerHTML = '<header><a href="javascript:;">' + username + ', ' + time + ' [+]</a></header>';
  121.     newBlockquote.querySelector('a').addEventListener("click", () => {expandComment(blockquote)});
  122.     blockquote.parentNode.insertBefore(newBlockquote, blockquote);
  123.   }
  124.   function getTotalReplyCount(blockquote) {
  125.     const allComments = [];
  126.     getComments(blockquote, allComments);
  127.     return allComments.length - 1;
  128.   }
  129.   
  130.   function addCollapseLinks() {
  131.     if (location.pathname.startsWith('/m')) {
  132.       const comments = document.querySelectorAll("blockquote.comment");
  133.       comments.forEach(blockquote => {
  134.       	const menu = blockquote.querySelector("header");
  135.         if (!menu.innerText.includes('[-]')) {
  136.           const newA = document.createElement('a');
  137.           newA.href = "javascript:;";
  138.           newA.className = "kes-collapse";
  139.           newA.innerHTML = '[-]';
  140.           menu.appendChild(newA);
  141.         }
  142.       });
  143.       
  144.       document.querySelectorAll(".kes-collapse").forEach(link => {link.addEventListener("click", () => {
  145.         const blockquote = link.closest("blockquote.comment");
  146.         collapseComment(blockquote);
  147.       })});
  148.     }
  149.   }
  150.   
  151.   function getAllReplies(blockquote) {
  152.     const allComments = [];
  153.     getComments(blockquote, allComments);
  154.     allComments.splice(allComments.indexOf(blockquote), 1);
  155.     return allComments;
  156.   }
  157.   
  158.   
  159.   function toggleReplies(blockquote, display) {
  160.     const id = blockquote.id.split('-')[2];
  161.     const allReplies = getAllReplies(blockquote);
  162.     
  163.     let anyHidden = false;
  164.     allReplies.forEach(reply => { 
  165.       if (reply.style.display == 'none')
  166.         anyHidden = true;
  167.     });
  168.     
  169.     allReplies.forEach(comment => { comment.style.display = anyHidden ? '' : 'none' });
  170.     
  171.     removeAllCollapsos(blockquote);
  172.   }
  173.   
  174.   function addCollapseRepliesLinks() {
  175.     if (location.pathname.startsWith('/m')) {
  176.       const comments = document.querySelectorAll("blockquote.comment-level--1");
  177.       comments.forEach(blockquote => {
  178.         const id = blockquote.id.split('-')[2];
  179.         const subComments = blockquote.parentElement.querySelectorAll('blockquote[data-subject-parent-value="'+id+'"]');
  180.         
  181.         if (subComments.length > 0) {
  182.           const menu = blockquote.querySelector("footer menu");
  183.           const newLi = document.createElement('li');
  184.           newLi.innerHTML = '<a href="javascript:;" class="kes-collapse-replies">toggle replies ('+getTotalReplyCount(blockquote)+')</a>';
  185.           menu.appendChild(newLi);
  186.         }
  187.       });
  188.       
  189.       document.querySelectorAll(".kes-collapse-replies").forEach(link => {link.addEventListener("click", () => {
  190.         const blockquote = link.closest("blockquote.comment");
  191.         
  192.         toggleReplies(blockquote);
  193.       })});
  194.     }
  195.   }
  196.   function collapseAllReplies() {
  197.     const comments = document.querySelectorAll("blockquote.comment-level--2");
  198.     comments.forEach(blockquote => {
  199.       collapseComment(blockquote);
  200.     });
  201.   }
  202.   
  203.   
  204.   function moveCommentBox() {
  205.     const commentAdd = document.querySelector('#comment-add');
  206.     if (commentAdd)
  207.     	commentAdd.parentNode.insertBefore(commentAdd, document.querySelector('#comments'));
  208.   }
  209.   
  210.   
  211.   function removeReplyBox(container) {
  212.     container.innerHTML = '';
  213.     container.style = '';
  214.   }
  215.   function addCommentCancelButton(container) {
  216.     const list = container.querySelector('div.actions ul');
  217.     
  218.     const newLi = document.createElement('li');
  219.     newLi.innerHTML = '<div><button class="btn btn__primary">Cancel</button></div>';
  220.     list.appendChild(newLi);
  221.     newLi.querySelector('button').addEventListener("click", () => { removeReplyBox(container) });
  222.   }
  223.   function fixMarkdownButtons(form) {
  224.     const formActionSplit = form.action.split('/');
  225.     const newId = 'entry_comment_body_' + formActionSplit[formActionSplit.length-1];
  226.     
  227.     form.querySelector('#entry_comment_body').id = newId;
  228.     form.querySelector('markdown-toolbar').setAttribute('for', newId);
  229.   }
  230.   function observeReplyAdded() {
  231.     const config = { childList: true };
  232.     const callback = (mutationList, observer) => {
  233.       for (const mutation of mutationList) {
  234.         const container = mutation.target;
  235.         const form = container.querySelector('form.comment-add');
  236.         
  237.         if (form !== null) {
  238.           fixMarkdownButtons(form);
  239.           addCommentCancelButton(container);
  240.         }
  241.       }
  242.     };
  243.  
  244.     const observer = new MutationObserver(callback);
  245.     document.querySelectorAll('blockquote.comment footer div.js-container').forEach(container => { observer.observe(container, config) })
  246.   }
  247.   
  248.   
  249.   // Thanks u/le__el
  250.   function addBlur(container) {
  251.     container.querySelectorAll("img").forEach(el => {
  252.         el.classList.add('kes-blur');
  253.     });
  254.     container.querySelectorAll("figure img").forEach(el => {
  255.         el.classList.add('kes-blur-large');
  256.     });
  257.   }
  258.   const nsfwDomains = [
  259.     "lemmynsfw.com",
  260.     "redgifs.com"
  261.   ];
  262.   function hideNSFW() {
  263.     document.querySelectorAll("article").forEach(article => {
  264.       if (article.querySelector("small.danger") !== null
  265.          || nsfwDomains.includes(article.querySelector(".entry__domain a").innerText)
  266.          || nsfwDomains.includes(article.querySelector(".magazine-inline").title.split('@')[2])) {
  267.         if (getSetting("nsfw-hide")) {
  268.       		article.remove();
  269.         } else {
  270.           addBlur(article);
  271.         }
  272.       }
  273.     });
  274.   }
  275.   
  276.   
  277.   
  278.   function generateSettingDiv(settingDisplay, setting) {
  279.     const settingValue = getSetting(setting);
  280.     const newDiv = document.createElement('div');
  281.     newDiv.className = "row";
  282.     newDiv.innerHTML = `<span>${settingDisplay}:</span>
  283.       <div>
  284.         <a class="kes-setting-yes link-muted ${settingValue ? 'active' : ''}" href="javascript:;" data-setting="${setting}">
  285.           Yes
  286.         </a>
  287.         |
  288.         <a class="kes-setting-no link-muted ${settingValue ? '' : 'active'}" href="javascript:;" data-setting="${setting}">
  289.           No
  290.         </a>
  291.       </div>`;
  292.     
  293.     return newDiv;
  294.   }
  295.   function addHTMLSettings() {
  296.     const settingsList = document.querySelector(".settings-list");
  297.     
  298.     const header = document.createElement('strong');
  299.     header.textContent = "kbin enhancement script";
  300.     settingsList.appendChild(header);
  301.     
  302.     allSettings.forEach(setting => { settingsList.appendChild(generateSettingDiv(setting.name, setting.value)) });
  303.                              
  304.     document.querySelectorAll(".kes-setting-yes").forEach(link => { link.addEventListener("click", () => {setSetting(link.dataset.setting, true) })});
  305.     document.querySelectorAll(".kes-setting-no").forEach(link => { link.addEventListener("click", () => {setSetting(link.dataset.setting, false) })});
  306.   }
  307.   
  308.   addHTMLSettings();
  309.   if (getSetting("show-domains"))
  310.     addDomains();
  311.   if (getSetting("show-collapse"))
  312.     addCollapseLinks();
  313.   if (getSetting("show-collapse-replies"))
  314.     addCollapseRepliesLinks();
  315.   if (getSetting("start-collapse-replies"))
  316.     collapseAllReplies();
  317.   if (getSetting("comment-box-top"))
  318.     moveCommentBox();
  319.   if (getSetting("comment-cancel"))
  320.     observeReplyAdded();
  321.   if (getSetting("nsfw-blur") || getSetting("nsfw-hide"))
  322.     hideNSFW();
  323.   
  324.   
  325.   
  326.   
  327.   if (localStorage.getItem("setting-changelog-version") != version) {
  328.     const message = `<strong>kbin enhancement script version: ${version}</strong><br>
  329. 			Thanks for downloading! You can always toggle on and off features in the kbin sidebar settings.<br>Recent changes:
  330. 			<ul>
  331.         <li>Additional NSFW protection</li>
  332. 				<li>Fixed markdown buttons and added "Cancel" when replying</li>
  333. 			</ul>
  334. 		`
  335.     
  336.     
  337.     const versionDiv = document.createElement('div');
  338.     versionDiv.id = 'kes-version-dialog';
  339.     versionDiv.innerHTML = '<div class="kes-version-dialog-content">'+message+'<br><button>Close</button></div>';
  340.     document.body.appendChild(versionDiv);
  341.     
  342.     document.querySelector('#kes-version-dialog button').addEventListener("click", () => {
  343.       document.querySelector('#kes-version-dialog').remove();
  344.       localStorage.setItem("setting-changelog-version", version);
  345.     });
  346.   }
  347. })();