☰

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