kbin enhancement script

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

当前为 2023-06-15 提交的版本,查看 最新版本

  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.4
  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.4";
  16. const allSettings = [
  17. {name: "Show domains", value:"show-domains"},
  18. {name: "Show collapse comment", value:"show-collapse"},
  19. {name: "Move comment box to top", value:"comment-box-top"}
  20. ];
  21. function getSetting(setting) {
  22. let value = localStorage.getItem("setting-" + setting);
  23. if (value === null)
  24. value = "true";
  25. return value === "true";
  26. }
  27. function setSetting(setting, value) {
  28. localStorage.setItem("setting-" + setting, value);
  29. location.reload();
  30. }
  31. function addDomain(link) {
  32. const parts = link.title.split("@");
  33. if (parts[2] !== location.hostname && !link.innerText.includes("@" + parts[2])) {
  34. const linkText = link.childNodes[link.childNodes.length-1];
  35. linkText.nodeValue += "@" + parts[2];
  36. }
  37. }
  38. function addDomains() {
  39. document.querySelectorAll(".magazine-inline, .user-inline").forEach(link => {
  40. addDomain(link);
  41. });
  42. }
  43. function getComments(comment, allComments) {
  44. const id = comment.id.split('-')[2];
  45. allComments.push(comment);
  46. const subComments = comment.parentElement.querySelectorAll('blockquote[data-subject-parent-value="'+id+'"]');
  47. subComments.forEach(blockquote => { getComments(blockquote, allComments); });
  48. }
  49. function getCollapsos(comment, allCollapsos) {
  50. const id = comment.id.split('-')[2];
  51. if (comment.classList.contains('kes-expand'))
  52. allCollapsos.push(comment);
  53. const subComments = comment.parentElement.querySelectorAll('blockquote[data-subject-parent-value="'+id+'"]');
  54. subComments.forEach(blockquote => { getCollapsos(blockquote, allCollapsos); });
  55. }
  56. function expandComment(blockquote) {
  57. const allComments = [];
  58. getComments(blockquote, allComments);
  59. allComments.forEach(comment => { comment.style.display="" });
  60. // Just remove all these for now, don't want to figure out how to do this cleanly right now.
  61. const allCollapsos = [];
  62. getCollapsos(blockquote, allCollapsos);
  63. allCollapsos.forEach(comment => { comment.remove() });
  64. }
  65. function collapseComment(blockquote) {
  66. const id = blockquote.id.split('-')[2];
  67. let commentLevel = "1";
  68. blockquote.classList.forEach(classItem => {
  69. if (classItem.includes("comment-level"))
  70. commentLevel = classItem.split("--")[1];
  71. });
  72. const allComments = [];
  73. getComments(blockquote, allComments);
  74. allComments.forEach(comment => { comment.style.display="none" });
  75.  
  76. const username = blockquote.querySelector("header a").innerText;
  77.  
  78. const newBlockquote = document.createElement('blockquote');
  79. newBlockquote.className = 'kes-expand section comment entry-comment comment-level--' + commentLevel;
  80. newBlockquote.dataset.subjectParentValue = id;
  81. newBlockquote.innerHTML = '<header>' + username + ' <a href="javascript:;">expand</a></header>';
  82. newBlockquote.querySelector('a').addEventListener("click", () => {expandComment(blockquote)});
  83. blockquote.parentNode.insertBefore(newBlockquote, blockquote);
  84. }
  85. function addCollapseLinks() {
  86. if (location.pathname.startsWith('/m')) {
  87. const comments = document.querySelectorAll("blockquote.comment");
  88. comments.forEach(blockquote => {
  89. const menu = blockquote.querySelector("footer menu");
  90. const newLi = document.createElement('li');
  91. newLi.innerHTML = '<a href="javascript:;" class="kes-collapse">collapse</a>';
  92. menu.appendChild(newLi);
  93. });
  94. document.querySelectorAll(".kes-collapse").forEach(link => {link.addEventListener("click", () => {
  95. const blockquote = link.closest("blockquote.comment");
  96. collapseComment(blockquote);
  97. })});
  98. }
  99. }
  100. function moveCommentBox() {
  101. const commentAdd = document.querySelector('#comment-add');
  102. if (commentAdd)
  103. commentAdd.parentNode.insertBefore(commentAdd, document.querySelector('#comments'));
  104. }
  105. function generateSettingDiv(settingDisplay, setting) {
  106. const settingValue = getSetting(setting);
  107. const newDiv = document.createElement('div');
  108. newDiv.className = "row";
  109. newDiv.innerHTML = `<span>${settingDisplay}:</span>
  110. <div>
  111. <a class="kes-setting-yes link-muted ${settingValue ? 'active' : ''}" href="javascript:;" data-setting="${setting}">
  112. Yes
  113. </a>
  114. |
  115. <a class="kes-setting-no link-muted ${settingValue ? '' : 'active'}" href="javascript:;" data-setting="${setting}">
  116. No
  117. </a>
  118. </div>`;
  119. return newDiv;
  120. }
  121. function addHTMLSettings() {
  122. const settingsList = document.querySelector(".settings-list");
  123. const header = document.createElement('strong');
  124. header.textContent = "kbin enhancement script";
  125. settingsList.appendChild(header);
  126. allSettings.forEach(setting => { settingsList.appendChild(generateSettingDiv(setting.name, setting.value)) });
  127. document.querySelectorAll(".kes-setting-yes").forEach(link => { link.addEventListener("click", () => {setSetting(link.dataset.setting, true) })});
  128. document.querySelectorAll(".kes-setting-no").forEach(link => { link.addEventListener("click", () => {setSetting(link.dataset.setting, false) })});
  129. }
  130. addHTMLSettings();
  131. if (getSetting("show-domains"))
  132. addDomains();
  133. if (getSetting("show-collapse"))
  134. addCollapseLinks();
  135. if (getSetting("comment-box-top"))
  136. moveCommentBox();
  137. if (localStorage.getItem("setting-changelog-version") != version) {
  138. const message = `Thanks for downloading kbin enhancement script, you can always toggle on and off features in the kbin sidebar settings.<br>Recent changes:
  139. <ul>
  140. <li>Added move comment box to top</li>
  141. <li>Fixed bugs</li>
  142. </ul>
  143. `
  144. const versionDiv = document.createElement('div');
  145. versionDiv.id = 'kes-version-dialog';
  146. 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';
  147. versionDiv.innerHTML = '<div style="background: #ddd; color: #444; position: relative; padding: 40px">'+message+'<br><button>Close</button></div>';
  148. document.body.appendChild(versionDiv);
  149. document.querySelector('#kes-version-dialog button').addEventListener("click", () => {
  150. document.querySelector('#kes-version-dialog').remove();
  151. localStorage.setItem("setting-changelog-version", version);
  152. });
  153. }
  154. })();