koyomate

したらば掲示板を実況向けにするスクリプト
换行
// ==UserScript==
// @name         koyomate
// @namespace    gunjobiyori.com
// @version      0.1.0
// @description  したらば掲示板を実況向けにするスクリプト
// @author       euro_s
// @match        https://jbbs.shitaraba.net/bbs/read.cgi/internet/*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @run-at       document-start
// @license      MIT
// ==/UserScript==
 
(function () {
    "use strict";
    function add_replied_comment_loaded(replied_elem, has_anc_elem) {
        var dl = document.createElement("dl");
        var cp_replied_dt = replied_elem.cloneNode(true);
        dl.classList.add("rep-comment");
        dl.appendChild(cp_replied_dt);
        dl.style.display = "none";
        has_anc_elem.insertBefore(dl, has_anc_elem.firstElementChild);
    }
 
    function add_replied_comment_xhr(replied_elem, has_anc_elem) {
        var dl = document.createElement("dl");
        var cp_replied_dt = replied_elem.cloneNode(true);
        var cp_replied_dd = replied_elem.nextElementSibling.cloneNode(true);
        dl.classList.add("rep-comment");
        dl.appendChild(cp_replied_dt);
        dl.appendChild(cp_replied_dd);
        dl.style.display = "none";
        has_anc_elem.insertBefore(dl, has_anc_elem.firstElementChild);
    }
 
    function getBbsUrl() {
      const url = window.location.href;
      const splitted = url.split('/');
      // URL ex: https://jbbs.shitaraba.net/bbs/read.cgi/internet/25835/1688993025/
      // splitted: ["https:", "", "jbbs.shitaraba.net", "bbs", "read.cgi", "internet", "25835", "1688993025", ""]
      return `https://${splitted[2]}/${splitted[5]}/${splitted[6]}`;
    }
 
    // Function to update max-width of .img-popup
    function updateMaxWidth() {
        // Calculate max width as 80% of window's width
        let maxWidth = window.innerWidth * 0.8;
 
        // Get all .img-popup elements and update their max-width
        let popups = document.querySelectorAll('.img-popup');
        popups.forEach(popup => {
            popup.style.maxWidth = maxWidth + 'px';
        });
    }
 
    function reStyle() {
        const thread_body = document.getElementById("thread-body");
        var dts = Array.from(document.querySelectorAll("dl#thread-body > dt"));
        var dds = Array.from(document.querySelectorAll("dl#thread-body > dd"));
        var tables = Array.from(document.querySelectorAll("table"));
 
        // Clear the original elements
        dts.forEach((dt) => dt.remove());
        dds.forEach((dd) => dd.remove());
        tables.forEach((table) => table.remove());
 
        // Combine the dt and dd contents and append them to the parent
        dts.forEach((dt, index) => {
            let outerDiv = document.createElement("div");
            outerDiv.id = dt.id;
            outerDiv.classList.add("comment");
            let meta = document.createElement("span");
            meta.innerText = dt.querySelector("a").innerText + ": ";
            let comment = document.createElement("span");
            let aTags = dds[index].querySelectorAll("a");
            let imageLinks = Array.from(aTags).filter(a => a.innerText.match(/\.(jpeg|jpg|gif|png)$/i) !== null);
            imageLinks.forEach((link) => {
              let popup = document.createElement('img');
              popup.src = link.innerText;
              popup.className = 'img-popup';
              link.appendChild(popup);
            });
            // Update the max-width of all .img-popup elements
            updateMaxWidth();
            if (dt.querySelector("a").innerText == "1") {
                comment.innerHTML = dds[index].innerHTML;
            } else {
                comment.innerHTML = dds[index].innerHTML.replace(/<br>/g, " ").trim();
            }
            outerDiv.appendChild(meta);
            outerDiv.appendChild(comment);
 
            thread_body.appendChild(outerDiv);
        });
 
        const small = document.querySelector('body > small');
        if (small) {
          const aTags = small.querySelectorAll('a');
          aTags.forEach((a) => a.remove());
          const bbsUrl = getBbsUrl();
          const a = document.createElement('a');
          a.href = bbsUrl;
          a.innerText = '掲示板に戻る';
          small.appendChild(a);
        }
    }
 
    function add_replied_comment() {
        var has_anc = document.querySelectorAll("#thread-body > div > span > span.res");
        var reg = /\/(\d+)$/;
        for (var i = 0; i < has_anc.length; i++) {
            var replied_url = has_anc[i].querySelector('a').getAttribute('href');
            var reg_result = reg.exec(replied_url);
            var replied_id;
            if (reg_result) {
                replied_id = reg_result[1];
            } else {
                continue;
            }
            var replied_elem = document.getElementById("comment_" + replied_id);
            if (replied_elem) {
                add_replied_comment_loaded(replied_elem, has_anc[i]);
                has_anc[i].addEventListener("mouseenter", function () {
                    this.firstElementChild.style.display = "";
                });
            } else {
                has_anc[i].addEventListener("mouseenter", {
                    replied_id: replied_id,
                    replied_url: replied_url,
                    has_anc_elem: has_anc[i],
                    handleEvent: function () {
                        if (this.has_anc_elem.firstElementChild.tagName === "DL") {
                            this.has_anc_elem.firstElementChild.style.display = "";
                        } else {
                            const xhr = new XMLHttpRequest();
                            xhr.responseType = "document";
                            xhr.open("get", this.replied_url, true);
                            xhr.timeout = 5 * 1000;
                            xhr.addEventListener("load", {
                                replied_id: this.replied_id,
                                has_anc_elem: this.has_anc_elem,
                                handleEvent: function (res) {
                                    if (res.target.status !== 200) {
                                        return;
                                    }
                                    replied_elem = res.target.responseXML.getElementById("comment_" + this.replied_id);
                                    console.log(replied_elem);
                                    if (replied_elem) {
                                        add_replied_comment_xhr(replied_elem, this.has_anc_elem);
                                    }
                                    this.has_anc_elem.firstElementChild.style.display = "";
                                }
                            });
                            xhr.send();
                        }
                    }
                });
 
            }
            has_anc[i].addEventListener("mouseleave", function () {
                if (this.firstElementChild.tagName === "DL") {
                    this.firstElementChild.style.display = "none";
                }
            });
        }
    }
 
    function upDownButtons() {
        // Create a new button element for scrolling to bottom
        const buttonDown = document.createElement("button");
        buttonDown.id = "scrollToBottomButton";
        buttonDown.innerHTML = `
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4KICAgIDxwYXRoIGQ9Ik0xNSAyMEw1IDEwaDIwbC0xMCAxMHoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo="/>
        `;
 
        // Create a new button element for scrolling to top
        const buttonUp = document.createElement("button");
        buttonUp.id = "scrollToTopButton";
        buttonUp.innerHTML = `
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4KICAgIDxwYXRoIGQ9Ik0xNSAxMEw1IDIwaDIwbC0xMCAtMTB6IiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K"/>
        `;
 
        // Add the buttons to the document body
        document.body.append(buttonDown, buttonUp);
 
        // Attach an event listener to the buttons to handle clicks
        buttonDown.addEventListener("click", function () {
          window.scrollTo({
            top: document.body.scrollHeight, // Scroll to the bottom of the page
            behavior: "smooth", // Animate the scroll
          });
        });
 
        buttonUp.addEventListener("click", function () {
          window.scrollTo({
            top: 0, // Scroll to the top of the page
            behavior: "smooth", // Animate the scroll
          });
        });
      }
 
      let isAutoReloading = true;
      function createProgressBar() {
        // Create the SVG element
        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute("width", "40");
        svg.setAttribute("height", "40");
        svg.style.position = "fixed";
        svg.style.right = "20px";
        svg.style.top = "120px";
        svg.style.cursor = "pointer";
 
        // Create the background circle
        const bgCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        bgCircle.setAttribute("cx", "20");
        bgCircle.setAttribute("cy", "20");
        bgCircle.setAttribute("r", "16");
        bgCircle.setAttribute("stroke", "#ddd");
        bgCircle.setAttribute("stroke-width", "4");
        bgCircle.setAttribute("fill", "none");
        svg.appendChild(bgCircle);
 
        // Create the foreground circle (progress bar)
        const fgCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        fgCircle.setAttribute("cx", "20");
        fgCircle.setAttribute("cy", "20");
        fgCircle.setAttribute("r", "16");
        fgCircle.setAttribute("stroke", "#3498db");
        fgCircle.setAttribute("stroke-width", "4");
        fgCircle.setAttribute("fill", "none");
        fgCircle.style.strokeDasharray = "113.04"; // 2 * PI * r (approx.)
        fgCircle.style.strokeDashoffset = "113.04";
        fgCircle.style.transform = "rotate(-90deg)";
        fgCircle.style.transformOrigin = "50% 50%";
        svg.addEventListener("click", function () {
          isAutoReloading = !isAutoReloading; // toggle auto reloading
          // Change the color of the progress bar based on the auto reloading status
          fgCircle.setAttribute("stroke", isAutoReloading ? "#3498db" : "#e74c3c");
        });
        svg.appendChild(fgCircle);
 
        document.body.appendChild(svg);
        return fgCircle;
      }
 
      let progressBar;
      function updateProgressBar(timeElapsed, totalTime) {
        const progress = timeElapsed / totalTime;
        const strokeLength = 113.04 * progress;
        progressBar.style.strokeDashoffset = 113.04 - strokeLength;
      }
 
      async function autoReload() {
        progressBar = createProgressBar();
 
        let elapsed = 0;
 
        async function run() {
          if (isAutoReloading) {
            elapsed += 50; // update every 50 msec
            updateProgressBar(elapsed, 5000);
 
            if (elapsed >= 5000) {
              await getMessage();
              elapsed = 0;
            }
            setTimeout(run, 50); // set the next run
          }
        }
 
        run(); // initial run
      }
 
      let toBottom = true;
      let lastScrollTop = 0;
      const FETCH_TIMEOUT = 1000;
      async function getMessage() {
        const lastMsg = document.querySelector("dl#thread-body > div.comment:last-child");
        const lastId = lastMsg.id.replace('comment_', '');
        const url = location.href + lastId + '-n';
 
        try {
          const response = await Promise.race([
            fetch(url),
            new Promise((_, reject) =>
              setTimeout(() => reject(new Error('Timeout')), FETCH_TIMEOUT)
            )
          ]);
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          } else {
            const arrayBuffer = await response.arrayBuffer();
            const html = new TextDecoder("euc-jp").decode(arrayBuffer);
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, "text/html");
            var dts = Array.from(doc.querySelectorAll("dl#thread-body > dt"));
            var dds = Array.from(doc.querySelectorAll("dl#thread-body > dd"));
            for (let i = 0; i < dts.length; i++) {
                if (dts[i].id == lastMsg.id) {
                    continue;
                }
                let outerDiv = document.createElement("div");
                outerDiv.id = dts[i].id;
                outerDiv.classList.add("comment");
                let meta = document.createElement("span");
                meta.innerText = dts[i].querySelector("a").innerText + ": ";
                let aTags = dds[i].querySelectorAll("a");
                let imageLinks = Array.from(aTags).filter(a => a.innerText.match(/\.(jpeg|jpg|gif|png)$/i) !== null);
                imageLinks.forEach((link) => {
                  let popup = document.createElement('img');
                  popup.src = link.innerText;
                  popup.className = 'img-popup';
                  link.appendChild(popup);
                });
                let comment = document.createElement("span");
                comment.innerHTML = dds[i].innerHTML.replace(/<br>/g, " ").trim();
                outerDiv.appendChild(meta);
                outerDiv.appendChild(comment);
 
                lastMsg.parentNode.appendChild(outerDiv);
            }
 
            if (toBottom) {
              window.scrollTo(0, document.body.scrollHeight);
            }
          }
        } catch (e) {
          console.error('Fetch failed!', e);
        }
      }
 
      function bottomEvent() {
        window.addEventListener("scroll", function () {
          const st = window.scrollY;
          // Check if we're at the bottom of the page
          if (st < lastScrollTop) {
            toBottom = false;
          } else if (
            window.innerHeight + window.scrollY >=
            document.body.offsetHeight
          ) {
            toBottom = true;
          }
          lastScrollTop = st <= 0 ? 0 : st;
        });
      }
 
    // Ensure the operation is performed after the DOM is fully loaded
    window.addEventListener(
        "load",
        async function () {
            new MutationObserver(add_replied_comment).observe(
                document.querySelector('#thread-body'), { childList: true }
            );
            reStyle();
            add_replied_comment();
            upDownButtons();
            createProgressBar();
            bottomEvent();
            await autoReload();
            // Scroll to the bottom of the page
            window.scrollTo({
              top: document.body.scrollHeight,
              behavior: "smooth",
            });
        },
        false
    );
 
    // Update the max-width of all .img-popup elements whenever the window is resized
    window.addEventListener('resize', updateMaxWidth, false);
 
    // ex. https://jbbs.shitaraba.net/bbs/read.cgi/internet/25835/1688993025/413-n
    const match = window.location.href.match(/(.+internet\/\d+\/\d+\/).+$/);
    if (match) {
        const url = match[1];
        window.location.href = url;
    }
 
    ////////////////////////////////////////////////////////////////////////////////
    // CSS
    ////////////////////////////////////////////////////////////////////////////////
    GM_addStyle(`
  #thread-body {
    margin-left: 30px !important;
    margin-right: 30px !important;
    line-height: 2rem !important;
  }
  .site-header {
    display: none !important;
  }
  #new_response {
    display: none !important;
  }
  #g_floating_tag_zone {
    display: none !important;
  }
  #scrollToBottomButton, #scrollToTopButton {
    position: fixed;
    right: 20px;
    z-index: 10000;
    padding: 5px;
    cursor: pointer;
    background: #ddd;
    border: none;
    border-radius: 5px;
    transition: background 0.2s;
  }
  #scrollToBottomButton {
    top: 70px;
  }
  #scrollToTopButton {
    top: 20px;
  }
  #scrollToBottomButton:hover, #scrollToTopButton:hover {
    background: #bbb;
  }
  .img-popup {
      display: none;
      position: absolute;
      z-index: 1;
      border: 1px solid #ddd;
  }
  a:hover .img-popup {
      display: block;
  }
  `);
})();