☰

Greasy Fork is available in English.

kbin enhancement script

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

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