☰

2ch tree post fork

делает треды древовидными, добавляет сворачивание веток и подсветку новых

当前为 2025-03-03 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         2ch tree post fork
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  делает треды древовидными, добавляет сворачивание веток и подсветку новых
  6. // @author       You
  7. // @match        http://2ch.hk/*/res/*
  8. // @match        https://2ch.hk/*/res/*
  9. // @match        http://2ch.life/*/res/*
  10. // @match        https://2ch.life/*/res/*
  11. // @grant        none
  12. // @grant        GM_addStyle
  13. // @grant        GM_getValue
  14. // @grant        GM_setValue
  15. // @license MIT
  16. // ==/UserScript==
  17.  
  18. (function () {
  19.   "use strict";
  20.   console.time("tree script");
  21.  
  22.   // Вспомогательные функции
  23.  
  24.   // Добавляет CSS стили
  25.   function addStyle(css) {
  26.     const style = document.createElement('style');
  27.     style.type = 'text/css';
  28.     style.textContent = css;
  29.     document.head.appendChild(style);
  30.   }
  31.  
  32.   // Получает номер поста из элемента
  33.   function getPostNumber(postElement) {
  34.       if (!postElement) return null;
  35.       const id = postElement.id; // "post-123456"
  36.       return parseInt(id.replace("post-", ""));
  37.   }
  38.   
  39.   // Перемещает пост и применяет стили
  40.   function postMove(linkPost, isNewPost = false) {
  41.     const nodePostCurr = linkPost.parentNode.parentNode;  // Текущий пост (обертка .post)
  42.     const postNumber = linkPost.innerText.match(/\d+/);
  43.  
  44.     if (!postNumber) return; // Если не удалось извлечь номер, выходим
  45.  
  46.     const targetPostNumber = postNumber[0];
  47.  
  48.     // Проверяем, ссылка на OP, другой тред или несуществующий пост
  49.     if (/OP|→/.test(linkPost.innerText)) {
  50.       return;
  51.     }
  52.       
  53.     const nodePostReply = document.querySelector(`#post-${targetPostNumber}`);
  54.     if (!nodePostReply) {
  55.         //console.warn(`Target post #${targetPostNumber} not found.`); // отладка, если пост не найден
  56.         return;
  57.     }
  58.  
  59.       // Добавляем класс, помечающий что в посте есть ответы (для сворачивания)
  60.       if (!nodePostReply.classList.contains('has-replies')) {
  61.           nodePostReply.classList.add('has-replies');
  62.  
  63.           // Добавляем кнопку сворачивания
  64.           const collapseButton = document.createElement('span');
  65.           collapseButton.classList.add('collapse-button');
  66.           collapseButton.textContent = '[-]';
  67.           collapseButton.title = "Свернуть/Развернуть ветку";
  68.           
  69.           // Добавляем обработчик сворачивания/разворачивания
  70.           collapseButton.addEventListener('click', (event) => {
  71.               event.stopPropagation(); // Предотвращаем всплытие, чтобы клик по кнопке не выделял пост
  72.               const replies = nodePostReply.querySelectorAll(':scope > .post'); // :scope - только непосредственные дочерние .post
  73.               replies.forEach(reply => {
  74.                   reply.classList.toggle('collapsed');
  75.               });
  76.               collapseButton.textContent = collapseButton.textContent === '[-]' ? '[+]' : '[-]'; // Меняем текст кнопки
  77.           });
  78.  
  79.           // Вставляем кнопку сворачивания перед .post__details
  80.           const postDetails = nodePostReply.querySelector('.post__details');
  81.           if (postDetails) {
  82.              postDetails.parentNode.insertBefore(collapseButton, postDetails);
  83.           }
  84.           
  85.       }
  86.  
  87.     nodePostReply.append(nodePostCurr); // Перемещаем
  88.  
  89.  
  90.       // Подсветка новых постов
  91.     if (isNewPost) {
  92.       nodePostCurr.classList.add('new-post'); // Добавляем класс для новых
  93.         // Убираем подсветку при клике (однократно)
  94.       nodePostCurr.addEventListener("click", () => {
  95.         nodePostCurr.classList.remove('new-post');
  96.         nodePostCurr.style["border-left"] = "2px dashed"; // Добавляем dashed border при клике
  97.       }, { once: true });
  98.     }
  99.  
  100.   }
  101.     
  102.  
  103.   // --- Основная логика ---
  104.  
  105.   // 1. Обработка существующих постов
  106.   const initialLinks = document.querySelectorAll(`.post__message > :nth-child(1)[data-num]`);
  107.   initialLinks.forEach(postMove);
  108.  
  109.   // 2. Наблюдение за новыми постами
  110.   const threadContainer = document.querySelector(".thread");
  111.  
  112.   const observer = new MutationObserver((mutations) => {
  113.     mutations.forEach((mutation) => {
  114.       if (mutation.addedNodes.length > 0) {
  115.         mutation.addedNodes.forEach(addedNode => {
  116.             // Проверяем, что добавленный узел - это пост (у него есть класс .post)
  117.           if (addedNode.classList && addedNode.classList.contains('post')) {
  118.               const newLink = addedNode.querySelector(`.post__message > :nth-child(1)[data-num]`);
  119.               if (newLink) {
  120.                   postMove(newLink, true);
  121.               }
  122.           }
  123.  
  124.         });
  125.       }
  126.     });
  127.   });
  128.  
  129.     // 3. Запускаем наблюдение
  130.   observer.observe(threadContainer, { childList: true });
  131.  
  132.  
  133.     // 4. Стили
  134.   addStyle(`
  135.     .post .post_type_reply {
  136.       border-left: 2px solid white; /* Исходный цвет границы */
  137.       margin-left: 5px; /* небольшой отступ */
  138.        padding-left: 5px;
  139.     }
  140.     .new-post {
  141.       border-left-color: yellow !important; /* Подсветка новых постов */
  142.     }
  143.  
  144.      .post.collapsed {
  145.         display: none;
  146.      }
  147.      .collapse-button{
  148.         cursor: pointer;
  149.         margin-right: 5px;
  150.         color: #888; /* Серый цвет */
  151.      }
  152.      .has-replies{
  153.         position: relative; /* Для позиционирования кнопки */
  154.      }
  155.  
  156.  
  157.   `);
  158.  
  159.  
  160.   console.timeEnd("tree script");
  161. })();