☰

bgm-wiki-rev-diff

show diff between bgm.tv wiki versions

目前為 2021-11-20 提交的版本，檢視 最新版本。

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