GitHub Commit Compare

Add controls to compare commits.

目前为 2018-01-27 提交的版本。查看 最新版本

  1. // ==UserScript==
  2. // @name GitHub Commit Compare
  3. // @namespace https://github.com/jerone/UserScripts
  4. // @description Add controls to compare commits.
  5. // @author jerone
  6. // @copyright 2017+, jerone (http://jeroenvanwarmerdam.nl)
  7. // @license GPL-3.0
  8. // @homepage https://github.com/jerone/UserScripts/tree/master/GitHub_Commit_Compare
  9. // @homepageURL https://github.com/jerone/UserScripts/tree/master/GitHub_Commit_Compare
  10. // @supportURL https://github.com/jerone/UserScripts/issues
  11. // @contributionURL https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VCYMHWQ7ZMBKW
  12. // @icon https://assets-cdn.github.com/pinned-octocat.svg
  13. // @include https://github.com/*/*/commits
  14. // @include https://github.com/*/*/commits/*
  15. // @exclude https://github.com/*/*.diff
  16. // @exclude https://github.com/*/*.patch
  17. // @version 0.0.1
  18. // @grant none
  19. // ==/UserScript==
  20.  
  21. (function () {
  22.  
  23. function addButton() {
  24. var nav;
  25. if ((nav = document.querySelector('.file-navigation'))) {
  26.  
  27. // Check if our group of buttons are already attached.
  28. // Remove it, as the 'old' buttons don't have events anymore.
  29. const e = document.getElementById('GitHubCommitCompareGroup');
  30. if (e) {
  31. e.parentElement.removeChild(e);
  32. }
  33. Array.from(document.querySelectorAll('.GitHubCommitCompareButtonAB')).forEach(function (b) {
  34. b.parentElement.removeChild(b);
  35. });
  36.  
  37. const c = document.createElement('input');
  38. c.type = 'checkbox';
  39. c.addEventListener('change',
  40. function () {
  41. const bb = document.querySelectorAll('.GitHubCommitCompareButtonAB');
  42. if (this.checked) {
  43. if (bb.length === 0) {
  44. addCompareButtons();
  45. } else {
  46. Array.from(bb).forEach(function (b) {
  47. b.classList.remove('d-none');
  48. });
  49. }
  50. } else {
  51. Array.from(bb).forEach(function (b) {
  52. b.classList.add('d-none');
  53. });
  54. }
  55. const bbb = document.getElementById('GitHubCommitCompareButton');
  56. if (bbb) bbb.classList.remove('disabled');
  57. });
  58.  
  59. const l = document.createElement('label');
  60. l.classList.add('tooltipped', 'tooltipped-n');
  61. l.setAttribute('aria-label', 'Show commit compare buttons');
  62. l.style.cssText = `
  63. float: left;
  64. padding: 3px 10px;
  65. font-size: 12px;
  66. font-weight: 600;
  67. line-height: 20px;
  68. color: #24292e;
  69. vertical-align: middle;
  70. background-color: #fff;
  71. border: 1px solid rgba(27,31,35,0.2);
  72. border-right: 0;
  73. border-top-left-radius: 3px;
  74. border-bottom-left-radius: 3px;
  75. `;
  76. l.appendChild(c);
  77.  
  78. const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  79. p.setAttributeNS(null,
  80. 'd',
  81. 'M5 12H4c-.27-.02-.48-.11-.69-.31-.21-.2-.3-.42-.31-.69V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V11c.03.78.34 1.47.94 2.06.6.59 1.28.91 2.06.94h1v2l3-3-3-3v2zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm11 9.48V5c-.03-.78-.34-1.47-.94-2.06-.6-.59-1.28-.91-2.06-.94H9V0L6 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 12 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z');
  82.  
  83. const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  84. s.classList.add('octicon', 'octicon-diff');
  85. s.setAttributeNS(null, 'height', 16);
  86. s.setAttributeNS(null, 'width', 14);
  87. s.setAttributeNS(null, 'viewBox', '0 0 14 16');
  88. s.appendChild(p);
  89.  
  90. const a = document.createElement('a');
  91. a.id = 'GitHubCommitCompareButton';
  92. a.classList.add('btn', 'btn-sm', 'tooltipped', 'tooltipped-n', 'disabled');
  93. a.setAttribute('href', '#');
  94. a.setAttribute('rel', 'nofollow');
  95. a.setAttribute('aria-label', 'Compare these commits');
  96. a.style.cssText = `
  97. border-top-left-radius: 0;
  98. border-bottom-left-radius: 0;
  99. font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  100. `;
  101. a.appendChild(s);
  102. a.appendChild(document.createElement("span"));
  103.  
  104. const g = document.createElement('div');
  105. g.id = 'GitHubCommitCompareGroup';
  106. g.classList.add('float-right');
  107. g.appendChild(l);
  108. g.appendChild(a);
  109.  
  110. nav.appendChild(g);
  111. }
  112. }
  113.  
  114. function updateRadioButtons() {
  115. var compareAdisabled = true;
  116. var compareBdisabled = false;
  117.  
  118. const compares = document.querySelectorAll('.GitHubCommitCompareButtonAB');
  119. Array.from(compares).forEach(function (compare) {
  120. const compareA = compare.querySelector('[name="GitHubCommitCompareButtonA"]');
  121. const compareB = compare.querySelector('[name="GitHubCommitCompareButtonB"]');
  122.  
  123. compareA.disabled = compareAdisabled;
  124. compareA.parentNode.classList.toggle('disabled', compareAdisabled);
  125.  
  126. if (compareA.checked) {
  127. compareBdisabled = true;
  128. }
  129. if (compareB.checked) {
  130. compareAdisabled = false;
  131. }
  132.  
  133. compareB.disabled = compareBdisabled;
  134. compareB.parentNode.classList.toggle('disabled', compareBdisabled);
  135. });
  136.  
  137. updateCompareButton();
  138. }
  139.  
  140. function updateCompareButton() {
  141. const repo = document.querySelector('meta[property="og:url"]').content;
  142.  
  143. const compareA = document.querySelector('.GitHubCommitCompareButtonAB [name="GitHubCommitCompareButtonA"]:checked');
  144. const hashA = compareA.parentNode.parentNode.parentNode.querySelector('[data-clipboard-text]').dataset.clipboardText;
  145. const compareB = document.querySelector('.GitHubCommitCompareButtonAB [name="GitHubCommitCompareButtonB"]:checked');
  146. const hashB = compareB.parentNode.parentNode.parentNode.querySelector('[data-clipboard-text]').dataset.clipboardText;
  147.  
  148. const a = document.getElementById('GitHubCommitCompareButton');
  149. a.setAttribute('href', `${repo}/compare/${hashA}...${hashB}`);
  150. a.querySelector('span').textContent = ` ${hashA.substring(0, 7)}...${hashB.substring(0, 7)}`;
  151.  
  152. //localStorage.setItem('GitHubCommitCompareButtonHashA', hashA);
  153. //localStorage.setItem('GitHubCommitCompareButtonHashB', hashB);
  154. }
  155.  
  156. function addCompareButtons() {
  157. const commits = document.querySelectorAll('.commits-list-item .commit-links-cell');
  158. Array.from(commits).forEach(function (item, index) {
  159. const c1 = document.createElement('input');
  160. c1.name = 'GitHubCommitCompareButtonA';
  161. c1.type = 'radio';
  162. c1.addEventListener('change', updateRadioButtons);
  163. if (index === 1) c1.checked = true;
  164.  
  165. const l1 = document.createElement('label');
  166. l1.classList.add('btn', 'btn-outline', 'BtnGroup-item', 'tooltipped', 'tooltipped-s');
  167. l1.setAttribute('aria-label', 'Choose a base commit');
  168. l1.appendChild(c1);
  169.  
  170. const c2 = document.createElement('input');
  171. c2.name = 'GitHubCommitCompareButtonB';
  172. c2.type = 'radio';
  173. c2.addEventListener('change', updateRadioButtons);
  174. if (index === 0) c2.checked = true;
  175.  
  176. const l2 = document.createElement('label');
  177. l2.classList.add('btn', 'btn-outline', 'BtnGroup-item', 'tooltipped', 'tooltipped-s');
  178. l2.setAttribute('aria-label', 'Choose a head commit');
  179. l2.appendChild(c2);
  180.  
  181. // const p3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  182. // p3.setAttributeNS(null,
  183. //'d',
  184. //'M5 12H4c-.27-.02-.48-.11-.69-.31-.21-.2-.3-.42-.31-.69V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V11c.03.78.34 1.47.94 2.06.6.59 1.28.91 2.06.94h1v2l3-3-3-3v2zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm11 9.48V5c-.03-.78-.34-1.47-.94-2.06-.6-.59-1.28-.91-2.06-.94H9V0L6 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 12 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z');
  185.  
  186. // const s3 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  187. // s3.classList.add('octicon', 'octicon-diff');
  188. // s3.setAttributeNS(null, 'height', 16);
  189. // s3.setAttributeNS(null, 'width', 14);
  190. // s3.setAttributeNS(null, 'viewBox', '0 0 14 16');
  191. // s3.appendChild(p3);
  192.  
  193. // const l3 = document.createElement('a');
  194. // l3.classList.add('btn', 'btn-outline', 'BtnGroup-item', 'tooltipped', 'tooltipped-sw');
  195. // l3.setAttribute('aria-label', 'TODO');
  196. // l3.appendChild(s3);
  197.  
  198. const gg = document.createElement('div');
  199. gg.classList.add('GitHubCommitCompareButtonAB', 'commit-links-group', 'BtnGroup');
  200. gg.appendChild(l1);
  201. gg.appendChild(l2);
  202. //gg.appendChild(l3);
  203.  
  204. //item.style.width = '350px';
  205. if (item.querySelector('.muted-link')) { // Insert after number of comments button.
  206. item.insertBefore(gg, item.querySelector('.muted-link').nextSibling);
  207. } else {
  208. item.insertBefore(gg, item.firstChild);
  209. }
  210. });
  211.  
  212. updateRadioButtons(); // Update radio buttons.
  213. }
  214.  
  215. // Init.
  216. addButton();
  217.  
  218. // Pjax.
  219. document.addEventListener('pjax:end', addButton);
  220.  
  221. })();