Bangumi-History-Diff

compare two versions of subject history

当前为 2015-08-20 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Bangumi-History-Diff
  3. // @namespace BHD
  4. // @include /https?:\/\/(bgm|bangumi|chii)\.(tv|in)\/subject/\d+\/edit/
  5. // @include /https?:\/\/(bgm|bangumi|chii)\.(tv|in)\/subject/\d+\/edit_detail/diff\/\d+\.\.\.\d+/
  6. // @version 0.0.1
  7. // @grant none
  8. // @require https://code.jquery.com/jquery-2.1.1.min.js
  9. // @description compare two versions of subject history
  10. // ==/UserScript==
  11.  
  12. var domain, func, uri, params = {};
  13. var version1, version2;
  14.  
  15. //----------------------------------------
  16. //---- Edit ------------------------------
  17. //----------------------------------------
  18. editController = function() {
  19. $('<div id="diff-launcher"><input type="number" name="diff-left" class="inputtext" placeholder="左对比(通常是老版本)"><input type="number" name="diff-right" class="inputtext" placeholder="右对比(通常是新版本)"><input type="button" class="inputBtn" value="对比" name="diff-launch"></div>').insertBefore($('#pagehistory'));
  20.  
  21. $('#pagehistory li a').each(function() {
  22. var hrefMatch = $(this).attr('href').match(/undo\/(\d+)/);
  23. if(hrefMatch == null) return;
  24. var version = hrefMatch[1];
  25. $('<span>| <a href="#" class="l diff-add2left" data-version="' + version + '">加到左边对比</a> | <a href="#" class="l diff-add2right" data-version="' + version + '">加到右边对比</a></span>').insertAfter(this);
  26. });
  27. //binding events
  28. $('input[name="diff-launch"]').click(function() {
  29. window.location.href = '/subject/' + params.subject + '/edit_detail/diff/' + $('input[name="diff-left"]').val() + '...' + $('input[name="diff-right"').val();
  30. });
  31. $('.diff-add2left').click(function() {
  32. $('input[name="diff-left"]').val($(this).attr('data-version'));
  33. });
  34.  
  35. $('.diff-add2right').click(function() {
  36. $('input[name="diff-right"]').val($(this).attr('data-version'));
  37. });
  38. }
  39.  
  40. //----------------------------------------
  41. //---- Diff ------------------------------
  42. //----------------------------------------
  43.  
  44. diffController = function() {
  45. //Request the first version and load insert it into document.
  46. $.get('/subject/' + params.subject + '/edit_detail/undo/' + params.ver1, function(data) {
  47. $('body').html(data);
  48. //Change the links in navigation bar.
  49. $('.navSubTabs .focus').removeClass('focus');
  50. $('.navSubTabs').append('<li><a class="focus" href="#">对比</a></li>');
  51. //Get all infomations we need.
  52. var info = {ver1: {}, ver2: {}};
  53. //条目标题
  54. info.ver1.title = $('input[name="subject_title"]').val();
  55. //Infobox
  56. info.ver1.infobox = $('#subject_infobox').val();
  57. //简介
  58. info.ver1.summary = $('#subject_summary').val();
  59. //Clean workspace
  60. $('#columnInSubjectA').html('<h2>/ 正在对比版本 <a href="/subject/' + params.subject + '/edit_detail/undo/' + params.ver1 + '">' + params.ver1 + '</a> 与 <a href="/subject/' + params.subject + '/edit_detail/undo/' + params.ver2 + '">' + params.ver2 + '</a>' +
  61. ' <a class="chiiBtn" href="/subject/' + params.subject + '/edit_detail/diff/' + params.ver1 + '...' + params.ver2 + '"><span>交换方向</span></a></small></h2>' +
  62. '<div id="diff-workspace">' +
  63. '<style>#diff-workspace h1 { margin: 6px; padding: 3px; font-size: 18px; border-bottom: 1px solid #777; } .diff-added { background: #e9efe9; } .diff-deleted { background: #feebeb; } .diff-modified { background: #faffd9; } </style>' +
  64. '<h1>标题</h1> <table id="diff-title" class="settings" width="100%" cellpadding="5"><thead><tr><td>版本 #' + params.ver1 + '</td><td>版本 #' + params.ver2 + '</td></tr></thead><tbody></tbody></table>' +
  65. '<h1>Infobox</h1> <table id="diff-infobox" class="settings" width="100%" cellpadding="5"><thead><tr><td></td><td>版本 #' + params.ver1 + '</td><td>版本 #' + params.ver2 + '</td></tr></thead><tbody></tbody></table>' +
  66. '<h1>简介</h1> <table id="diff-summary" class="settings" width="100%" cellpadding="5"><thead><tr><td>版本 #' + params.ver1 + '</td><td>版本 #' + params.ver2 + '</td></tr></thead><tbody></tbody></table>' +
  67. '</div>');
  68.  
  69. //Loading another version and then diff them.
  70. $.get('/subject/' + params.subject + '/edit_detail/undo/' + params.ver2, function(data) {
  71. //Remove the input box, and add the table element for diff view.
  72. //[\S\s]* => See https://stackoverflow.com/questions/26929891/regex-to-match-a-multi-line-string
  73. info.ver2.title = data.match(/subject_title" class="inputtext" type="text" value="(.+?)" \/>/)[1];
  74. info.ver2.infobox = data.match(/subject_infobox"[^>]+>([\S\s]*?)<\/textarea>/m)[1];
  75. info.ver2.summary = data.match(/subject_summary"[^>]+>([\S\s]*?)<\/textarea>/m)[1];
  76.  
  77. //Diff - Title
  78. $('#diff-title tbody').append('<tr><td>' + info.ver1.title + '</td><td>' + info.ver2.title + '</td></tr>');
  79.  
  80. //Diff - Infobox
  81. var infobox = {ver1: {}, ver2: {}};
  82. infobox.ver1 = info.ver1.infobox.split(/\n/);
  83. infobox.ver2 = info.ver2.infobox.split(/\n/);
  84.  
  85. infoboxCompare = compare(infobox.ver1, infobox.ver2);
  86.  
  87. for(i in infoboxCompare) {
  88. switch(infoboxCompare[i].act) {
  89. case 'match':
  90. $('#diff-infobox tbody').append('<tr class="diff-match"><th></th><td>' + infoboxCompare[i].left + '</td><td>' + infoboxCompare[i].right + '</td></tr>');
  91. break;
  92. case 'added':
  93. $('#diff-infobox tbody').append('<tr class="diff-added"><th>++</th><td></td><td>' + infoboxCompare[i].right + '</td></tr>');
  94. break;
  95. case 'deleted':
  96. $('#diff-infobox tbody').append('<tr class="diff-deleted"><th>--</th><td>' + infoboxCompare[i].left + '</td><td></td></tr>');
  97. break;
  98. case 'modified':
  99. $('#diff-infobox tbody').append('<tr class="diff-modified"><th>MM</th><td>' + infoboxCompare[i].left + '</td><td>' + infoboxCompare[i].right + '</td></tr>');
  100. break;
  101. }
  102. }
  103. //Diff - Summary
  104. $('#diff-summary tbody').append('<tr><td>' + info.ver1.summary + '</td><td>' + info.ver2.summary + '</td></tr>');
  105.  
  106. }); //$.get('/subj...ver2...
  107. }); //$.get('/subj...ver1...
  108. }
  109. //----------------------------------------
  110. //---- Functions -------------------------
  111. //----------------------------------------
  112. compare = function(left, right) {
  113. var leftPointer = 0, rightPointer = 0;
  114. var retval = [];
  115.  
  116. while(leftPointer < left.length) {
  117. //May be they are the same...
  118. if(left[leftPointer] == right[rightPointer]) {
  119. retval.push({act: 'match', left: left[leftPointer], right: right[rightPointer]});
  120. leftPointer++;
  121. rightPointer++;
  122. continue;
  123. }
  124.  
  125. var matchShift = 0;
  126. var leftShift = 0, rightShift = 0;
  127. var leftTitleMatch = false, rightTitleMatch = false;
  128. while((rightPointer + rightShift) < right.length) {
  129. //for the line start with "|", we just compare their title("|title=", "|title =")
  130. if((left[leftPointer].length > 0 && left[leftPointer][0] == '|') &&
  131. (right[rightPointer + rightShift].length > 0 && right[rightPointer + rightShift][0] == '|')) {
  132. var leftTitle = left[leftPointer].match(/\|(.+?)=/)[1];
  133. var rightTitle = right[rightPointer + rightShift].match(/\|(.+?)=/)[1];
  134. if(leftTitle == rightTitle) {
  135. rightTitleMatch = true;
  136. break;
  137. }
  138. } else if(left[leftPointer] == right[rightPointer + rightShift]) break;
  139. rightShift++;
  140. } //while rightShift...
  141. matchShift = rightShift;
  142.  
  143. var leftShift = 0, rightShift = 0;
  144. while((leftShift + leftPointer) <= left.length - 1) {
  145. //for the line start with "|", we just compare their title("|title=", "|title =")
  146. if((left[leftPointer + leftShift].length > 0 && left[leftPointer + leftShift][0] == '|') &&
  147. (right[rightPointer].length > 0 && right[rightPointer][0] == '|')) {
  148. var leftTitle = left[leftPointer + leftShift].match(/\|(.+?)=/)[1];
  149. var rightTitle = right[rightPointer].match(/\|(.+?)=/)[1];
  150. if(leftTitle == rightTitle) {
  151. leftTitleMatch = true;
  152. break;
  153. }
  154. } else if(left[leftPointer + leftShift] == right[rightPointer]) break;
  155. leftShift++;
  156. } //while leftShift...
  157. rightShift = matchShift;
  158.  
  159. //Comparing...
  160. //Modified
  161. if(((leftPointer + leftShift) >= left.length - 1) && ((rightPointer + rightShift) >= right.length - 1)) {
  162. retval.push({act: 'deleted', left: left[leftPointer]});
  163. retval.push({act: 'added', right: right[rightPointer]});
  164. leftPointer++;
  165. rightPointer++;
  166. continue;
  167. }
  168. //Delete
  169. if(leftShift < rightShift) {
  170. for(var i = 0; i < leftShift; i++) {
  171. retval.push({act: 'deleted', left: left[leftPointer + i]});
  172. }
  173. var leftContent = left[leftPointer + leftShift].match(/=(.+)/);
  174. var rightContent = right[rightPointer].match(/=(.+)/);
  175. retval.push({act: (leftContent == rightContent ? 'match' : 'modified'), left: left[leftPointer + leftShift], right: right[rightPointer]});
  176. leftPointer += leftShift + 1;
  177. rightPointer++;
  178. continue;
  179. }
  180.  
  181. //Add
  182. if(leftShift > rightShift) {
  183. for(var i = 0; i < rightShift; i++) {
  184. retval.push({act: 'added', right: right[rightPointer + i]});
  185. }
  186. var leftContent = left[leftPointer].match(/=(.+)/);
  187. var rightContent = right[rightPointer + rightShift].match(/=(.+)/);
  188. retval.push({act: (leftContent == rightContent ? 'match' : 'modified'), left: left[leftPointer], right: right[rightPointer + rightShift]});
  189. leftPointer++;
  190. rightPointer += rightShift + 1;
  191. continue;
  192. }
  193. //Else... => the title of two lines are the same
  194. var leftContent = left[leftPointer].match(/=(.+)/);
  195. var rightContent = right[rightPointer].match(/=(.+)/);
  196. retval.push({act: (leftContent == rightContent ? 'match' : 'modified'), left: left[leftPointer], right: right[rightPointer]});
  197. leftPointer++;
  198. rightPointer++;
  199. continue;
  200. } //while leftPointer...
  201. return retval;
  202. }
  203.  
  204.  
  205. //----------------------------------------
  206. //---- Routing & Bootstrap ---------------
  207. //----------------------------------------
  208.  
  209. $(function() {
  210. var urlMatch = window.location.href.match(/\/\/(bgm|bangumi|chii).(tv|in)(\/.+)/);
  211. uri = urlMatch[3];
  212.  
  213. //Domain
  214. switch(urlMatch[1]) {
  215. case 'bgm':
  216. domain = 'bgm.tv';
  217. break;
  218. case 'bangumi':
  219. domain = 'bangumi.tv';
  220. break;
  221. case 'chii':
  222. domain = 'chii.in';
  223. break;
  224. }
  225. //URI & Params
  226. switch(true) {
  227. case (urlMatch[3].search('diff') >= 0):
  228. func = 'diff';
  229.  
  230. var matchParams = urlMatch[3].match(/\/subject\/(\d+)\/edit_detail\/diff\/(\d+)...(\d+)/);
  231. params = {
  232. subject: matchParams[1],
  233. ver1: matchParams[2],
  234. ver2: matchParams[3]
  235. };
  236. diffController();
  237. break;
  238. case (urlMatch[3].search('edit') >= 0):
  239. func = 'edit';
  240.  
  241. var matchParams = urlMatch[3].match(/\/subject\/(\d+)\/edit/);
  242. params = {
  243. subject: matchParams[1]
  244. };
  245. editController();
  246. break;
  247. }
  248. });