DLSite RJ code preview

Make RJ code great again!

À partir de 2022-09-22. Voir la dernière version.

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

// ==UserScript==
// @name        DLSite RJ code preview
// @namespace   SettingDust
// @description Make RJ code great again!
// @include     *://*/*
// @version     2.1.3
// @license     MIT
// @grant       GM.xmlHttpRequest
// @grant       GM_xmlhttpRequest
// @run-at      document-start
// ==/UserScript==

"use strict";
const RJ_REGEX = new RegExp("R[JE][0-9]{6}", "gi");
const VOICELINK_CLASS = "voicelink";
const RJCODE_ATTRIBUTE = "rjcode";
const css = `
.voicepopup {
  z-index: 50000;
  max-width: 80%;
  max-height: 80%;
  position: fixed;
  box-shadow: 0 0 0 2.5px rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  background-color: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.voicepopup img {
  width: 100%;
  height: auto;
  max-width: 360px;
}

.voicelink {
  text-shadow: 1px 1px 1px #333;
  color: #333;
}

.voicelink: hover {
  text-decoration: none;
}

.voicepopup > .voice-info {
  padding: 12px 16px;
  font-size: 0.88rem;
  line-height: 1.2;
  max-width: 360px;
  display: grid;
  grid-gap: 6px;
  box-sizing: border-box;
}

.voicepopup > .voice-info > p {
  margin: 0;
  font-weight: bold;
}

.voicepopup > .voice-info > p > span {
  font-weight: normal;
}

.voicepopup .voice-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1;
}

.voicepopup .error {
  height: 210px;
  line-height: 210px;
  text-align: center;
}

.voicepopup.discord-dark {
  background-color: #36393f;
  color: #dcddde;
  font-size: 0.9375rem;
}`;

function getAdditionalPopupClasses() {
  const hostname = document.location.hostname;
  switch (hostname) {
    case "boards.4chan.org":
      return "post reply";
    case "discordapp.com":
      return "discord-dark";
    default:
      return null;
  }
}

function getXmlHttpRequest() {
  return typeof GM !== "undefined" && GM !== null
    ? GM.xmlHttpRequest
    : GM_xmlhttpRequest;
}

const Parser = {
  walkNodes: function (elem) {
    const rjNodeTreeWalker = document.createTreeWalker(
      elem,
      NodeFilter.SHOW_TEXT,
      {
        acceptNode: function (node) {
          if (node.parentElement.classList.contains(VOICELINK_CLASS))
            return NodeFilter.FILTER_ACCEPT;
          if (node.nodeValue.match(RJ_REGEX)) return NodeFilter.FILTER_ACCEPT;
        },
      },
      false
    );
    while (rjNodeTreeWalker.nextNode()) {
      const node = rjNodeTreeWalker.currentNode;
      if (node.parentElement.classList.contains(VOICELINK_CLASS))
        Parser.rebindEvents(node.parentElement);
      else {
        Parser.linkify(node);
      }
    }
  },

  wrapRJCode: function (rjCode) {
    var e;
    e = document.createElement("a");
    e.classList = VOICELINK_CLASS;
    e.href = `https://www.dlsite.com/maniax/work/=/product_id/${rjCode}.html`;
    e.innerHTML = rjCode;
    e.target = "_blank";
    e.rel = "noreferrer";
    e.classList.add(rjCode);
    e.setAttribute(RJCODE_ATTRIBUTE, rjCode.toUpperCase());
    e.addEventListener("mouseover", Popup.over);
    e.addEventListener("mouseout", Popup.out);
    e.addEventListener("mousemove", Popup.move);
    return e;
  },

  linkify: function (textNode) {
    const nodeOriginalText = textNode.nodeValue;
    const matches = [];

    let match;
    while ((match = RJ_REGEX.exec(nodeOriginalText))) {
      matches.push({
        index: match.index,
        value: match[0],
      });
    }

    // Keep text in text node until first RJ code
    textNode.nodeValue = nodeOriginalText.substring(0, matches[0].index);

    // Insert rest of text while linkifying RJ codes
    let prevNode = null;
    for (let i = 0; i < matches.length; ++i) {
      // Insert linkified RJ code
      const rjLinkNode = Parser.wrapRJCode(matches[i].value);
      textNode.parentNode.insertBefore(
        rjLinkNode,
        prevNode ? prevNode.nextSibling : textNode.nextSibling
      );

      // Insert text after if there is any
      let upper;
      if (i === matches.length - 1) upper = undefined;
      else upper = matches[i + 1].index;
      let substring;
      if (
        (substring = nodeOriginalText.substring(matches[i].index + 8, upper))
      ) {
        const subtextNode = document.createTextNode(substring);
        textNode.parentNode.insertBefore(
          subtextNode,
          rjLinkNode.nextElementSibling
        );
        prevNode = subtextNode;
      } else {
        prevNode = rjLinkNode;
      }
    }
  },

  rebindEvents: function (elem) {
    if (elem.nodeName === "A") {
      elem.addEventListener("mouseover", Popup.over);
      elem.addEventListener("mouseout", Popup.out);
      elem.addEventListener("mousemove", Popup.move);
    } else {
      const voicelinks = elem.querySelectorAll("." + VOICELINK_CLASS);
      for (var i = 0, ii = voicelinks.length; i < ii; i++) {
        const voicelink = voicelinks[i];
        voicelink.addEventListener("mouseover", Popup.over);
        voicelink.addEventListener("mouseout", Popup.out);
        voicelink.addEventListener("mousemove", Popup.move);
      }
    }
  },
};

var globalCodes = [];

const Popup = {
  makePopup: function (e, rjCode) {
    const popup = document.createElement("div");
    popup.className = "voicepopup " + (getAdditionalPopupClasses() || "");
    popup.id = "voice-" + rjCode;
    popup.style = "display: flex";
    document.body.appendChild(popup);
    DLsite.request(rjCode, function (workInfo) {
      if (workInfo === null)
        popup.innerHTML = "<div class='error'>Work not found.</span>";
      else {
        const img = document.createElement("img");
        img.src = workInfo.img;

        let html = `
                      <div class='voice-info'>
                          <h4 class='voice-title'>${workInfo.title.trim()}</h4>
                          <p>社团名:<span>${workInfo.circle.trim()}</span></p>
                  `;
        if (workInfo.date)
          html += `<p>贩卖日:<span>${workInfo.date}</span></p>`;
        else if (workInfo.dateAnnounce)
          html += `<p>发布日期:<span>${workInfo.dateAnnounce}</span></p>`;

        html += `<p>年龄指定:<span>${workInfo.rating.trim()}</span></p>`;

        if (workInfo.cv) html += `<p>声优:<span>${workInfo.cv}</span></p>`;
        if (workInfo.tags) {
          html += `<p>分类:<span>`;
          workInfo.tags.forEach((tag) => {
            html += tag + "\u3000";
          });
          html += "</span></p>";
        }

        if (workInfo.filesize)
          html += `<p>文件容量:<span>${workInfo.filesize}</span></p>`;

        html += "</div>";
        popup.innerHTML = html;
        popup.insertBefore(img, popup.childNodes[0]);
      }

      Popup.move(e);
    });
  },
  humanFileSize: function (size) {
    if (!size) return "";
    var i = Math.floor(Math.log(size) / Math.log(1024));
    return (
      (size / Math.pow(1024, i)).toFixed(2) * 1 +
      " " +
      ["B", "kB", "MB", "GB", "TB"][i]
    );
  },

  over: function (e) {
    const rjCode = e.target.getAttribute(RJCODE_ATTRIBUTE);
    const popup = document.querySelector("div#voice-" + rjCode);
    if (popup) {
      const style = popup.getAttribute("style").replace("none", "flex");
      popup.setAttribute("style", style);
    } else {
      Popup.makePopup(e, rjCode);
    }
  },

  out: function (e) {
    const rjCode = e.target.getAttribute("rjcode");
    const popup = document.querySelector("div#voice-" + rjCode);
    if (popup) {
      const style = popup.getAttribute("style").replace("flex", "none");
      popup.setAttribute("style", style);
    }
  },

  move: function (e) {
    const rjCode = e.target.getAttribute("rjcode");
    const popup = document.querySelector("div#voice-" + rjCode);
    if (popup) {
      // 如果右侧没有超出屏幕范围
      if (popup.offsetWidth + e.clientX + 24 < window.innerWidth) {
        popup.style.left = e.clientX + 8 + "px";
      } else {
        // 显示在左侧
        popup.style.left = e.clientX - popup.offsetWidth - 8 + "px";
      }

      // 如果下方超出屏幕范围
      if (popup.offsetHeight + e.clientY + 16 > window.innerHeight) {
        // 尽可能靠下
        popup.style.top = window.innerHeight - popup.offsetHeight - 16 + "px";
      } else {
        popup.style.top = e.clientY + "px";
      }
    }
  },
};

const DLsite = {
  parseWorkDOM: function (dom, rj) {
    // workInfo: {
    //     rj: any;
    //     img: string;
    //     title: any;
    //     circle: any;
    //     date: any;
    //     rating: any;
    //     tags: any[];
    //     cv: any;
    //     filesize: any;
    //     dateAnnounce: any;
    // }
    const workInfo = {};
    workInfo.rj = rj;

    let rj_group;
    if (rj.slice(5) == "000") rj_group = rj;
    else {
      rj_group = (parseInt(rj.slice(2, 5)) + 1).toString() + "000";
      rj_group = "RJ" + ("000000" + rj_group).substring(rj_group.length);
    }

    workInfo.img =
      "https://img.dlsite.jp/modpub/images2/work/doujin/" +
      rj_group +
      "/" +
      rj +
      "_img_main.jpg";
    workInfo.title = dom.getElementById("work_name").textContent;
    workInfo.circle = dom.querySelector("span.maker_name").textContent;

    const table_outline = dom.querySelector("table#work_outline");
    for (var i = 0, ii = table_outline.rows.length; i < ii; i++) {
      const row = table_outline.rows[i];
      const row_header = row.cells[0].textContent;
      const row_data = row.cells[1];
      switch (true) {
        case row_header.includes("贩卖日"):
          workInfo.date = row_data.textContent;
          break;
        case row_header.includes("年龄指定"):
          workInfo.rating = row_data.textContent;
          break;
        case row_header.includes("分类"):
          const tag_nodes = row_data.querySelectorAll("a");
          workInfo.tags = [...tag_nodes].map((a) => {
            return a.textContent;
          });
          break;
        case row_header.includes("声优"):
          workInfo.cv = row_data.textContent;
          break;
        case row_header.includes("文件容量"):
          workInfo.filesize = row_data.textContent.replace("合计", "").trim();
          break;
        default:
          break;
      }
    }

    const work_date_ana = dom.querySelector("strong.work_date_ana");
    if (work_date_ana) {
      workInfo.dateAnnounce = work_date_ana.innerText;
      workInfo.img =
        "https://img.dlsite.jp/modpub/images2/ana/doujin/" +
        rj_group +
        "/" +
        rj +
        "_ana_img_main.jpg";
    }
    console.log(workInfo);

    return workInfo;
  },

  request: function (rjCode, callback) {
    const url = `https://www.dlsite.com/maniax/work/=/product_id/${rjCode}.html/?locale=zh_CN`;
    getXmlHttpRequest()({
      method: "GET",
      url,
      headers: {
        Accept: "text/xml",
        "User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:67.0)",
      },
      onload: function (resp) {
        if (resp.readyState === 4 && resp.status === 200) {
          const dom = new DOMParser().parseFromString(
            resp.responseText,
            "text/html"
          );
          const workInfo = DLsite.parseWorkDOM(dom, rjCode);
          callback(workInfo);
        } else if (resp.readyState === 4 && resp.status === 404)
          DLsite.requestAnnounce(rjCode, callback);
      },
    });
  },

  requestAnnounce: function (rjCode, callback) {
    const url = `https://www.dlsite.com/maniax/announce/=/product_id/${rjCode}.html/?locale=ja_JP`;
    getXmlHttpRequest()({
      method: "GET",
      url,
      headers: {
        Accept: "text/xml",
        "User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:67.0)",
      },
      onload: function (resp) {
        if (resp.readyState === 4 && resp.status === 200) {
          const dom = new DOMParser().parseFromString(
            resp.responseText,
            "text/html"
          );
          const workInfo = DLsite.parseWorkDOM(dom, rjCode);
          callback(workInfo);
        } else if (resp.readyState === 4 && resp.status === 404) callback(null);
      },
    });
  },
};

document.addEventListener("DOMContentLoaded", function () {
  const style = document.createElement("style");
  style.innerHTML = css;
  document.head.appendChild(style);

  Parser.walkNodes(document.body);

  const observer = new MutationObserver(function (m) {
    for (let i = 0; i < m.length; ++i) {
      let addedNodes = m[i].addedNodes;

      for (let j = 0; j < addedNodes.length; ++j) {
        Parser.walkNodes(addedNodes[j]);
      }
    }
  });

  document.addEventListener("securitypolicyviolation", function (e) {
    if (e.blockedURI.includes("img.dlsite.jp")) {
      const img = document.querySelector(`img[src="${e.blockedURI}"]`);
      img.remove();
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
});