☰

bangumi 显示 条目 wiki 版本差异

显示条目信息版本差异, 可以在 https://github.com/trim21/bgm-tv-userscripts/tree/master/packages/wiki-rev-diff#readme 查看效果图

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

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