☰

Bangumi-History-Diff

compare two versions of subject history

  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.6
  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.   
  26.     $('<span>| <a href="#" class="l diff-add2left" data-version="' + version + '">加到左边对比</a> | <a href="#" class="l diff-add2right" data-version="' + version + '">加到右边对比</a></span>').insertAfter(this);
  27.   });
  28.   
  29.   //binding events
  30.   $('input[name="diff-launch"]').click(function() {
  31.     window.location.href = '/subject/' + params.subject + '/edit_detail/diff/' + $('input[name="diff-left"]').val() + '...' + $('input[name="diff-right"').val();
  32.   });
  33.   
  34.   $('.diff-add2left').click(function() {
  35.     $('input[name="diff-left"]').val($(this).attr('data-version'));
  36.   });
  37.  
  38.   $('.diff-add2right').click(function() {
  39.     $('input[name="diff-right"]').val($(this).attr('data-version'));
  40.   });
  41. }
  42.  
  43. //----------------------------------------
  44. //---- Diff ------------------------------
  45. //----------------------------------------
  46.  
  47. diffController = function() {
  48. //Request the first version and load insert it into document.
  49. $.get('/subject/' + params.subject + '/edit_detail/undo/' + params.ver1, function(data) {
  50.   $('body').html(data);
  51.   
  52.   //Change the links in navigation bar.
  53.   $('.navSubTabs .focus').removeClass('focus');
  54.   $('.navSubTabs').append('<li><a class="focus" href="#">对比</a></li>');
  55.   
  56.   //Get all infomations we need.
  57.   var info = {ver1: {}, ver2: {}};
  58.   //条目标题
  59.   info.ver1.title = $('input[name="subject_title"]').val();
  60.   //Infobox
  61.   info.ver1.infobox = $('#subject_infobox').val();
  62.   //简介
  63.   info.ver1.summary = $('#subject_summary').val();
  64.   
  65.   //Clean workspace
  66.   $('#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>' +
  67.                               '    <a class="chiiBtn" href="/subject/' + params.subject + '/edit_detail/diff/' + params.ver2 + '...' + params.ver1 + '"><span>交换方向</span></a></small></h2>' +
  68.                               '<div id="diff-workspace">' +
  69.                               '<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; } .diff-inline-add { background: rgba(0, 0, 0, .1); padding: 9px 0; } .diff-inline-delete { text-decoration: line-through; } </style>' +
  70.                               '<h1>标题</h1> <table id="diff-title" class="settings" width="100%" cellpadding="5"><thead><tr><th>版本 #' + params.ver1 + '</th><th>版本 #' + params.ver2 + '</th></tr></thead><tbody></tbody></table>' + 
  71.                               '<h1>Infobox</h1> <table id="diff-infobox" class="settings" width="100%" cellpadding="5"><thead><tr><th></td><th>版本 #' + params.ver1 + '</th><th></th><th>版本 #' + params.ver2 + '</th></tr></thead><tbody></tbody></table>' + 
  72.                               '<h1>简介</h1> <table id="diff-summary" class="settings" width="100%" cellpadding="5"><thead><tr><th>版本 #' + params.ver1 + '</th><th>版本 #' + params.ver2 + '</th></tr></thead><tbody></tbody></table>' +
  73.                               '</div>');
  74.  
  75.   //Loading another version and then diff them.
  76.   $.get('/subject/' + params.subject + '/edit_detail/undo/' + params.ver2, function(data) {
  77.     //Remove the input box, and add the table element for diff view.
  78.     //[\S\s]* => See https://stackoverflow.com/questions/26929891/regex-to-match-a-multi-line-string
  79.     info.ver2.title = data.match(/subject_title" class="inputtext" type="text" value="(.+?)" \/>/)[1];
  80.     info.ver2.infobox = data.match(/subject_infobox"[^>]+>([\S\s]*?)<\/textarea>/m)[1];
  81.     info.ver2.summary = data.match(/subject_summary"[^>]+>([\S\s]*?)<\/textarea>/m)[1];
  82.  
  83.     var infobox = {ver1: {}, ver2: {}};
  84.     //clean up
  85.     infobox.ver1 = info.ver1.infobox.replace(/\r/g, "");
  86.     infobox.ver2 = info.ver2.infobox.replace(/\r/g, "");
  87.     
  88.     //Diff - Title
  89.     var titleCompare = inlineCompare(info.ver1.title, info.ver2.title);
  90.     $('#diff-title tbody').append('<tr><td>' + titleCompare.left + '</td><td>' + titleCompare.right + '</td></tr>');
  91.  
  92.     //Diff - Infobox
  93.     infobox.ver1 = infobox.ver1.split(/\n/);
  94.     infobox.ver2 = infobox.ver2.split(/\n/);
  95.  
  96.     infoboxCompare = compare(infobox.ver1, infobox.ver2);
  97.     console.log(infoboxCompare);
  98.  
  99.     var leftPointer = 1, rightPointer = 1;
  100.     for(i in infoboxCompare) {
  101.       switch(infoboxCompare[i].act) {
  102.         case 'match':
  103.           $('#diff-infobox tbody').append('<tr class="diff-match"><td>' + (leftPointer++) + '</td><td>' + infoboxCompare[i].left.replace(/ /g, '&nbsp;') + '</td><td>' + (rightPointer++) + '</td><td>' + infoboxCompare[i].right.replace(/ /g, '&nbsp;') + '</td></tr>');
  104.           break;
  105.         case 'added':
  106.           $('#diff-infobox tbody').append('<tr><td></td><td></td><td>' + (rightPointer++) + '</td><td class="diff-added">' + infoboxCompare[i].right.replace(/ /g, '&nbsp;') + '</td></tr>');
  107.           break;
  108.         case 'deleted':
  109.           $('#diff-infobox tbody').append('<tr><td>' + (leftPointer++) + '</td><td class="diff-deleted">' + infoboxCompare[i].left.replace(/ /g, '&nbsp;') + '</td><td></td><td></td></tr>');
  110.           break;
  111.         case 'modified':
  112.           var compareResult = inlineCompare(infoboxCompare[i].left, infoboxCompare[i].right);
  113.           $('#diff-infobox tbody').append('<tr><td>' + (leftPointer++) + '</td><td class="diff-deleted">' + compareResult.left + '</td><td>' + (rightPointer++) + '</td><td class="diff-added">' + compareResult.right + '</td></tr>');
  114.           break;
  115.       }
  116.     }
  117.     
  118.     //Diff - Summary
  119.     var summaryCompare = inlineCompare(info.ver1.summary, info.ver2.summary);
  120.     $('#diff-summary tbody').append('<tr><td>' + summaryCompare.left + '</td><td>' + summaryCompare.right + '</td></tr>');
  121.  
  122.   }); //$.get('/subj...ver2...
  123. }); //$.get('/subj...ver1...
  124. }
  125.   
  126. //----------------------------------------
  127. //---- Functions -------------------------
  128. //----------------------------------------
  129. compare = function(left, right) {
  130.   var leftPointer = 0, rightPointer = 0;
  131.   var retval = [];
  132.  
  133.   while(leftPointer < left.length) {
  134.     //May be they are the same...
  135.     if(left[leftPointer] == right[rightPointer]) {
  136.       retval.push({act: 'match', left: left[leftPointer], right: right[rightPointer]});
  137.       leftPointer++;
  138.       rightPointer++;
  139.       continue;
  140.     }
  141.     //May be they are the same but there are some spaces...
  142.     if(left[leftPointer].trim() == right[rightPointer].trim()) {
  143.       retval.push({act: 'modified', left: left[leftPointer], right: right[rightPointer]});
  144.       leftPointer++;
  145.       rightPointer++;
  146.       continue;
  147.     }
  148.  
  149.     var matchShift = 0;
  150.     var leftShift = 0, rightShift = 0;
  151.     var leftTitleMatch = false, rightTitleMatch = false;
  152.       
  153.     while((rightPointer + rightShift) < right.length) {
  154.       //for the line start with "|", we just compare their title("|title=", "|title =")
  155.       if((left[leftPointer].length > 0 && left[leftPointer][0] == '|') &&
  156.          (right[rightPointer + rightShift].length > 0 && right[rightPointer + rightShift][0] == '|')) {
  157.         var leftTitle = left[leftPointer].match(/\|(.+?)=/)[1];
  158.         var rightTitle = right[rightPointer + rightShift].match(/\|(.+?)=/)[1];
  159.         if(leftTitle == rightTitle) {
  160.           rightTitleMatch = true;
  161.           break;
  162.         }
  163.       } else if(left[leftPointer].trim() == right[rightPointer + rightShift].trim()) break;
  164.       rightShift++;
  165.     } //while rightShift...
  166.     matchShift = rightShift;
  167.  
  168.     var leftShift = 0, rightShift = 0;
  169.     while((leftShift + leftPointer) < left.length) {
  170.       //for the line start with "|", we just compare their title("|title=", "|title =")
  171.       if((left[leftPointer + leftShift].length > 0 && left[leftPointer + leftShift][0] == '|') &&
  172.          (right[rightPointer].length > 0 && right[rightPointer][0] == '|')) {
  173.         var leftTitle = left[leftPointer + leftShift].match(/\|(.+?)=/)[1];
  174.         var rightTitle = right[rightPointer].match(/\|(.+?)=/)[1];
  175.         if(leftTitle == rightTitle) {
  176.           leftTitleMatch = true;
  177.           break;
  178.         }
  179.       } else if(left[leftPointer + leftShift].trim() == right[rightPointer].trim()) break;
  180.       leftShift++;
  181.     } //while leftShift...
  182.     rightShift = matchShift;
  183.  
  184.     //Comparing...
  185.       
  186.     //Modified
  187.     if(((leftPointer + leftShift) >= left.length - 1) && ((rightPointer + rightShift) >= right.length - 1)) {
  188.       retval.push({act: 'deleted', left: left[leftPointer]});
  189.       retval.push({act: 'added', right: right[rightPointer]});
  190.       leftPointer++;
  191.       rightPointer++;
  192.       continue;
  193.     }
  194.       
  195.     //Delete
  196.     if(leftShift < rightShift) {
  197.       for(var i = 0; i < leftShift; i++) {
  198.         retval.push({act: 'deleted', left: left[leftPointer + i]});
  199.       }
  200.       retval.push({act: (left[leftPointer + leftShift] == right[rightPointer] ? 'match' : 'modified'), left: left[leftPointer + leftShift], right: right[rightPointer]});
  201.       leftPointer += leftShift + 1;
  202.       rightPointer++;
  203.       continue;
  204.     }
  205.  
  206.     //Add
  207.     if(leftShift > rightShift) {
  208.       for(var i = 0; i < rightShift; i++) {
  209.         retval.push({act: 'added', right: right[rightPointer + i]});
  210.       }
  211.       retval.push({act: (left[leftPointer] == right[rightPointer + rightShift] ? 'match' : 'modified'), left: left[leftPointer], right: right[rightPointer + rightShift]});
  212.       leftPointer++;
  213.       rightPointer += rightShift + 1;
  214.       continue;
  215.     }
  216.     
  217.     //Else... => the title of two lines are the same
  218.     retval.push({act: 'modified', left: left[leftPointer], right: right[rightPointer]});
  219.     leftPointer++;
  220.     rightPointer++;
  221.     continue;
  222.   } //while leftPointer...
  223.   return retval;
  224. }
  225.  
  226. inlineCompare = function(left, right) {
  227.   var retval = {left: '', right: ''};
  228.   var leftPointer = 0, rightPointer = 0;
  229.   var modOpen = false;
  230.   
  231.   var cleanSp = function(char) {
  232.     return (char == ' ') ? '&nbsp;' : char;
  233.   }
  234.  
  235.   while(leftPointer < left.length) {
  236.     if(left[leftPointer] == right[rightPointer]) {
  237.       if(modOpen) { retval.left += '</span>'; retval.right += '</span>'; modOpen = false; }
  238.       retval.left += cleanSp(left[leftPointer]);
  239.       retval.right += cleanSp(right[rightPointer]);
  240.       leftPointer++;
  241.       rightPointer++;
  242.       continue;
  243.     }
  244.     
  245.     if(rightPointer >= right.length) {
  246.       if(modOpen) { retval.left += '</span>'; retval.right += '</span>'; modOpen = false; }
  247.       retval.left += '<span class="diff-inline-delete">';
  248.       for(var i = 0; leftPointer + i < left.length; i++) retval.left += cleanSp(left[leftPointer + i]);
  249.       retval.left += '</span>';
  250.       break;
  251.     }
  252.     
  253.     var leftShift = 0, rightShift = 0;
  254.     while(rightPointer + rightShift < right.length) {
  255.       if(left[leftPointer] == right[rightPointer + rightShift]) break;
  256.       rightShift++;
  257.     }
  258.  
  259.     while(leftPointer + leftShift < left.length) {
  260.       if(left[leftPointer + leftShift] == right[rightPointer]) break;
  261.       leftShift++;
  262.     }
  263.     
  264.     console.log(leftPointer, leftShift, rightPointer, rightShift);
  265.     //Modified
  266.     if((leftPointer + leftShift) >= left.length && (rightPointer + rightShift) >= right.length) {
  267.       if(!modOpen) {
  268.         retval.left += '<span class="diff-inline-delete">';
  269.         retval.right += '<span class="diff-inline-add">';
  270.       }
  271.       retval.left += cleanSp(left[leftPointer]);
  272.       retval.right += cleanSp(right[rightPointer]);
  273.       modOpen = true;
  274.       leftPointer++;
  275.       rightPointer++;
  276.       continue;
  277.     }
  278.     
  279.     //Add or Delete
  280.     if(rightShift < leftShift) {
  281.       if(modOpen) { retval.left += '</span>'; retval.right += '</span>'; modOpen = false; }
  282.       retval.right += '<span class="diff-inline-add">';
  283.       for(var i = 0; i < rightShift; i++) retval.right += cleanSp(right[rightPointer + i]);
  284.       retval.right += '</span>';
  285.       rightPointer += rightShift;
  286.       continue;
  287.     } else {
  288.       if(modOpen) { retval.left += '</span>'; retval.right += '</span>'; modOpen = false; }
  289.       retval.left += '<span class="diff-inline-delete">';
  290.       for(var i = 0; i < leftShift; i++) retval.left += cleanSp(left[leftPointer + i]);
  291.       retval.left += '</span>';
  292.       leftPointer += leftShift;
  293.       continue;
  294.     }
  295.   }
  296.   if(rightPointer < right.length) {
  297.     if(modOpen) { retval.left += '</span>'; retval.right += '</span>'; modOpen = false; }
  298.     retval.right += '<span class="diff-inline-add">';
  299.     while(rightPointer < right.length) {
  300.       retval.right += cleanSp(right[rightPointer++]);
  301.     }
  302.     retval.right += '</span>';
  303.   }
  304.  
  305.   return retval;
  306. }
  307.  
  308. //----------------------------------------
  309. //---- Routing & Bootstrap ---------------
  310. //----------------------------------------
  311.  
  312. $(function() {
  313.   var urlMatch = window.location.href.match(/\/\/(bgm|bangumi|chii).(tv|in)(\/.+)/);
  314.   uri = urlMatch[3];
  315.  
  316.   //Domain
  317.   switch(urlMatch[1]) {
  318.     case 'bgm':
  319.       domain = 'bgm.tv';
  320.       break;
  321.     case 'bangumi':
  322.       domain = 'bangumi.tv';
  323.       break;
  324.     case 'chii':
  325.       domain = 'chii.in';
  326.       break;
  327.   }
  328.   
  329.   //URI & Params
  330.   switch(true) {
  331.     case (urlMatch[3].search('diff') >= 0):
  332.       func = 'diff';
  333.  
  334.       var matchParams = urlMatch[3].match(/\/subject\/(\d+)\/edit_detail\/diff\/(\d+)...(\d+)/);
  335.       params = {
  336.         subject: matchParams[1],
  337.         ver1: matchParams[2],
  338.         ver2: matchParams[3]
  339.       };
  340.       diffController();
  341.       break;
  342.     case (urlMatch[3].search('edit') >= 0):
  343.       func = 'edit';
  344.  
  345.       var matchParams = urlMatch[3].match(/\/subject\/(\d+)\/edit/);
  346.       params = {
  347.         subject: matchParams[1]
  348.       };
  349.       editController();
  350.       break;
  351.   }
  352. });