☰

bgm-wiki-rev-diff

show diff between bgm.tv wiki versions

当前为 2022-10-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         bgm-wiki-rev-diff
  3. // @name:zh      显示条目信息版本差异
  4. // @namespace    https://trim21.me/
  5. // @version      0.2.8
  6. // @source       https://github.com/trim21/bgm-wiki-rev-diff
  7. // @supportURL   https://github.com/trim21/bgm-wiki-rev-diff/issues
  8. // @license      MIT
  9. // @match        https://bgm.tv/subject/*/edit*
  10. // @match        https://bangumi.tv/subject/*/edit*
  11. // @match        https://chii.in/subject/*/edit*
  12. // @require      https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js
  13. // @require      https://cdn.jsdelivr.net/npm/diff2html@3.4.19/bundles/js/diff2html.min.js
  14. // @require      https://cdn.jsdelivr.net/npm/diff@5.1.0/dist/diff.min.js
  15. // @require      https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
  16. // @resource     diff2html https://cdn.jsdelivr.net/npm/diff2html@3.4.19/bundles/css/diff2html.min.css
  17. // @grant        GM.getResourceUrl
  18. // @grant        GM.registerMenuCommand
  19. // @grant        GM.setValue
  20. // @grant        GM.getValue
  21. // @run-at       document-end
  22. // @author       Trim21 <i@trim21.me>
  23. // @description show diff between bgm.tv wiki versions
  24. // ==/UserScript==
  25.  
  26.  
  27. /******/ (() => { // webpackBootstrap
  28. /******/ 	"use strict";
  29. var __webpack_exports__ = {};
  30.  
  31. ;// CONCATENATED MODULE: external "$"
  32. const external_$_namespaceObject = $;
  33. ;// CONCATENATED MODULE: external "_"
  34. const external_namespaceObject = _;
  35. ;// CONCATENATED MODULE: ./src/parser.ts
  36.  
  37.  
  38. function parseRevDetails(html) {
  39.   var _a, _b, _c;
  40.   const jq = external_$_namespaceObject(html);
  41.   const rawInfo = ((_a = jq.find("#subject_infobox").val()) == null ? void 0 : _a.toString()) ?? "";
  42.   const title = ((_b = jq.find('input[name="subject_title"]').val()) == null ? void 0 : _b.toString()) ?? "";
  43.   const description = ((_c = jq.find("textarea#subject_summary").val()) == null ? void 0 : _c.toString()) ?? "";
  44.   return {
  45.     title,
  46.     rawInfo,
  47.     description
  48.   };
  49. }
  50. function parseRevEl(el) {
  51.   const date = el.find("a:not(.compare-previous-trim21-cn)").first().html();
  52.   const revEL = el.find('a.l:contains("恢复")');
  53.   const revCommentEl = el.find("span.comment");
  54.   let comment = "";
  55.   if (revCommentEl.length > 0) {
  56.     comment = revCommentEl.html();
  57.     comment = comment.substring(1, comment.length - 1);
  58.   }
  59.   const revHref = revEL.attr("href");
  60.   if (!revHref) {
  61.     return void 0;
  62.   }
  63.   const revID = revHref.split("/").pop();
  64.   if (!revID) {
  65.     throw new Error(`can't parse rev id from ${revHref}`);
  66.   }
  67.   return {
  68.     id: revID,
  69.     comment,
  70.     date,
  71.     url: revHref
  72.   };
  73. }
  74. function getRevs() {
  75.   const revs = [];
  76.   external_$_namespaceObject("#pagehistory li").each(function() {
  77.     const rev = parseRevEl(external_$_namespaceObject(this));
  78.     if (rev != null) {
  79.       revs.push(rev);
  80.     }
  81.   });
  82.   return revs;
  83. }
  84. function getRevInfo(revID) {
  85.   for (const rev of getRevs()) {
  86.     if (rev.id === revID) {
  87.       return rev;
  88.     }
  89.   }
  90. }
  91.  
  92. ;// CONCATENATED MODULE: external "Diff2Html"
  93. const external_Diff2Html_namespaceObject = Diff2Html;
  94. ;// CONCATENATED MODULE: ./src/config.ts
  95.  
  96. const configKey = "view-mode";
  97.  
  98. ;// CONCATENATED MODULE: external "Diff"
  99. const external_Diff_namespaceObject = Diff;
  100. ;// CONCATENATED MODULE: ./src/differ.ts
  101.  
  102.  
  103. function diff(revOld, revNew, style) {
  104.   const options = { context: 100 };
  105.   if (style === "line-by-line") {
  106.     options.context = 4;
  107.   }
  108.   return [
  109.     titleDiff(revOld, revNew, options),
  110.     infoDiff(revOld, revNew, options),
  111.     descriptionDiff(revOld, revNew, options)
  112.   ].join("\n");
  113. }
  114. function titleDiff(rev1, rev2, options) {
  115.   if (rev1.details.title === rev2.details.title) {
  116.     return "";
  117.   }
  118.   return external_Diff_namespaceObject.createPatch("条目名", rev1.details.title, rev2.details.title, rev1.rev.date, rev2.rev.date, options);
  119. }
  120. function infoDiff(rev1, rev2, options) {
  121.   if (rev1.details.rawInfo === rev2.details.rawInfo) {
  122.     return "";
  123.   }
  124.   return external_Diff_namespaceObject.createPatch(
  125.     "相关信息",
  126.     rev1.details.rawInfo,
  127.     rev2.details.rawInfo,
  128.     rev1.rev.date,
  129.     rev2.rev.date,
  130.     options
  131.   );
  132. }
  133. function descriptionDiff(rev1, rev2, options) {
  134.   if (rev1.details.description === rev2.details.description) {
  135.     return "";
  136.   }
  137.   return external_Diff_namespaceObject.createPatch(
  138.     "简介",
  139.     rev1.details.description,
  140.     rev2.details.description,
  141.     rev1.rev.date,
  142.     rev2.rev.date,
  143.     options
  144.   );
  145. }
  146.  
  147. ;// CONCATENATED MODULE: ./src/ui.ts
  148.  
  149.  
  150.  
  151.  
  152.  
  153. async function render(revOld, revNew) {
  154.   var _a;
  155.   let outputFormat = await GM.getValue(configKey);
  156.   if (!outputFormat) {
  157.     outputFormat = "line-by-line";
  158.   }
  159.   const patch = diff(revOld, revNew, outputFormat);
  160.   const html = external_Diff2Html_namespaceObject.html(patch, { outputFormat });
  161.   const elID = `show-diff-view-${outputFormat}`;
  162.   show("");
  163.   external_$_namespaceObject(`#${elID}`).html(html);
  164.   (_a = document.getElementById(elID)) == null ? void 0 : _a.scrollIntoView({
  165.     behavior: "smooth"
  166.   });
  167. }
  168. function show(html) {
  169.   external_$_namespaceObject("#show-diff-info").html(html);
  170. }
  171. function clear() {
  172.   external_$_namespaceObject("#show-diff-view-line-by-line").html("");
  173.   external_$_namespaceObject("#show-diff-view-side-by-side").html("");
  174.   show("");
  175. }
  176.  
  177. ;// CONCATENATED MODULE: ./src/model.ts
  178.  
  179. class Commit {
  180.   rev;
  181.   details;
  182.   constructor(rev, detail) {
  183.     this.rev = rev;
  184.     this.details = detail;
  185.   }
  186. }
  187.  
  188. ;// CONCATENATED MODULE: ./src/compare.ts
  189.  
  190.  
  191.  
  192.  
  193. function compare(revID1, revID2) {
  194.   clear();
  195.   show("<h2>loading versions...</h2>");
  196.   const rev1 = getRevInfo(revID1);
  197.   const rev2 = getRevInfo(revID2);
  198.   if (rev1 == null) {
  199.     throw new Error(`error finding ${revID1}`);
  200.   }
  201.   const ps = [fetchRev(rev1), fetchRev(rev2)];
  202.   Promise.all(ps).then(async (values) => {
  203.     return await render(values[1], values[0]);
  204.   }).catch((e) => {
  205.     console.error(e);
  206.     show('<div style="color: red">获取历史修改失败，请刷新页面后重试</div>');
  207.   });
  208. }
  209. const _cache = {};
  210. async function fetchRev(rev) {
  211.   if (rev == null) {
  212.     return new Commit(
  213.       {
  214.         id: "0",
  215.         comment: "",
  216.         date: "",
  217.         url: ""
  218.       },
  219.       {
  220.         title: "",
  221.         rawInfo: "",
  222.         description: ""
  223.       }
  224.     );
  225.   }
  226.   if (!_cache[rev.id]) {
  227.     const res = await fetch(rev.url);
  228.     _cache[rev.id] = new Commit(rev, parseRevDetails(await res.text()));
  229.   }
  230.   return _cache[rev.id];
  231. }
  232.  
  233. ;// CONCATENATED MODULE: ./src/index.ts
  234.  
  235.  
  236.  
  237.  
  238.  
  239.  
  240. async function main() {
  241.   console.log("start bgm-wiki-rev-diff UserScript");
  242.   await initUI();
  243. }
  244. const style = `
  245. <style>
  246. #show-diff-view-side-by-side {
  247.   margin:0 auto;
  248.   max-width: 100em;
  249. }
  250.  
  251. .show-version-diff .d2h-code-line, .show-version-diff .d2h-code-side-line {
  252.   width: calc(100% - 8em);
  253.   padding-right: 0;
  254. }
  255.  
  256. .show-version-diff .d2h-code-line-ctn {
  257.   width: calc(100% - 8em);
  258. }
  259.  
  260. #columnInSubjectA .rev-trim21-cn {
  261.   margin: 0 0.2em;
  262. }
  263.  
  264. ul#pagehistory > li > * {
  265.   vertical-align: middle;
  266. }
  267. </style>
  268. `;
  269. async function initUI() {
  270.   GM.registerMenuCommand("切换diff视图", function() {
  271.     void (async () => {
  272.       let outputFormat = await GM.getValue(configKey);
  273.       if (!outputFormat || outputFormat === "side-by-side") {
  274.         outputFormat = "line-by-line";
  275.       } else {
  276.         outputFormat = "side-by-side";
  277.       }
  278.       await GM.setValue(configKey, outputFormat);
  279.     })();
  280.   });
  281.   external_$_namespaceObject("#headerSubject").after('<div id="show-diff-view-side-by-side" class="show-version-diff"></div>');
  282.   external_$_namespaceObject("#columnInSubjectA > hr.board").after(
  283.     style + '<div id="show-diff-view-line-by-line" class="show-version-diff"></div>'
  284.   );
  285.   external_$_namespaceObject("#columnInSubjectA .subtitle").after('<div id="show-diff-info"></div>');
  286.   const diff2htmlStyle = await GM.getResourceUrl("diff2html");
  287.   external_$_namespaceObject("head").append(style).append(`<link rel='stylesheet' type='text/css' href='${diff2htmlStyle}' />`);
  288.   const s = external_$_namespaceObject("#pagehistory li");
  289.   const revs = Array.from(s).map(function(e) {
  290.     var _a;
  291.     return (_a = parseRevEl(external_$_namespaceObject(e))) == null ? void 0 : _a.id;
  292.   });
  293.   s.each(function(index) {
  294.     const el = external_$_namespaceObject(this);
  295.     const id = revs[index];
  296.     if (!id) {
  297.       el.prepend('<span style="padding-right: 1.4em"> 无法参与比较 </span>');
  298.       return;
  299.     }
  300.     el.prepend(`<input type='radio' class='rev-trim21-cn' name='rev-right' label='select to compare' value='${id}'>`);
  301.     el.prepend(`<input type='radio' class='rev-trim21-cn' name='rev-left' label='select to compare' value='${id}'>`);
  302.     const previous = external_namespaceObject.find(revs, Boolean, index + 1) ?? "";
  303.     el.prepend(
  304.       `(<a href='#' data-rev='${id}' data-previous='${previous}' class='l compare-previous-trim21-cn'>显示修改</a>) `
  305.     );
  306.   });
  307.   const typeRevert = {
  308.     "rev-left": "rev-right",
  309.     "rev-right": "rev-left"
  310.   };
  311.   external_$_namespaceObject('input[type="radio"]').on("change", function(e) {
  312.     const name = e.target.getAttribute("name");
  313.     if (!name) {
  314.       return;
  315.     }
  316.     const selectName = typeRevert[name];
  317.     const rev = e.target.getAttribute("value");
  318.     if (rev) {
  319.       external_$_namespaceObject(`input[name="${selectName}"][value="${rev}"]`).css("visibility", "hidden");
  320.       external_$_namespaceObject(`input[name="${selectName}"][value!="${rev}"]`).css("visibility", "visible");
  321.     }
  322.   });
  323.   external_$_namespaceObject(".compare-previous-trim21-cn").on("click", function() {
  324.     const el = external_$_namespaceObject(this);
  325.     const left = String(el.data("rev"));
  326.     const right = String(el.data("previous"));
  327.     compare(left, right);
  328.     external_$_namespaceObject(`input[name="rev-left"][value="${left}"]`).prop("checked", true);
  329.     external_$_namespaceObject(`input[name="rev-left"][value!="${left}"]`).prop("checked", null);
  330.     external_$_namespaceObject(`input[name="rev-right"][value="${left}"]`).css("visibility", "hidden");
  331.     external_$_namespaceObject(`input[name="rev-right"][value!="${left}"]`).css("visibility", "visible");
  332.     external_$_namespaceObject('input[name="rev-left"]').css("visibility", "visible");
  333.     external_$_namespaceObject('input[name="rev-right"]').prop("checked", null);
  334.     if (right) {
  335.       external_$_namespaceObject(`input[name="rev-right"][value="${right}"]`).prop("checked", true);
  336.       external_$_namespaceObject(`input[name="rev-left"][value="${right}"]`).css("visibility", "hidden");
  337.     }
  338.   });
  339.   external_$_namespaceObject("#columnInSubjectA span.text").append('<a href="#" id="compare-trim21-cn" class="l"> > 比较选中的版本</a>');
  340.   external_$_namespaceObject("#compare-trim21-cn").on("click", function() {
  341.     const selectedRevs = getSelectedVersion();
  342.     compare(selectedRevs[0], selectedRevs[1]);
  343.   });
  344. }
  345. function getSelectedVersion() {
  346.   const selectedVersion = [];
  347.   const selectedRev = external_$_namespaceObject(".rev-trim21-cn:checked");
  348.   if (selectedRev.length < 2) {
  349.     window.alert("请选中两个版本进行比较");
  350.     throw new Error();
  351.   }
  352.   selectedRev.each(function() {
  353.     const val = external_$_namespaceObject(this).val();
  354.     selectedVersion.push(val);
  355.   });
  356.   selectedVersion.sort((a, b) => parseInt(b) - parseInt(a));
  357.   return selectedVersion;
  358. }
  359. main().catch(console.error);
  360.  
  361. /******/ })()
  362. ;