GitHub - Make PRs easier to diff

Add some js buttons to diffs

2015-12-07 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

  1. // ==UserScript==
  2. // @name GitHub - Make PRs easier to diff
  3. // @namespace https://github.com/drKnoxy/
  4. // @version 1.0
  5. // @description Add some js buttons to diffs
  6. // @author DrKnoxy
  7. // @include https://github.com/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. var tool = (function() {
  12. // Prep global variables
  13. var isWhitespaceVisible = _isWhitespaceVisible();
  14.  
  15. /**
  16. * The collapse headers feature
  17. */
  18. var collapse = (function(){
  19. var toggleId = 'js-blob-toggle';
  20. var blobSelector = '.blob-wrapper, .render-wrapper, .file-header + .empty';
  21. var isAllVisible = true;
  22. return {
  23. addElement: addElement,
  24. monitor: monitor
  25. };
  26.  
  27. //////////////////////
  28.  
  29. function monitor() {
  30. _monitorHeader();
  31. _monitorToggle();
  32. }
  33.  
  34. function _monitorHeader() {
  35. $(document).on('click', '.file-header', function(e) {
  36. $(this).next(blobSelector).toggle();
  37. });
  38. }
  39.  
  40. function _monitorToggle() {
  41. $(document).on('click', '#' + toggleId, function(e) {
  42. e.preventDefault();
  43.  
  44. // can't use toggle, because we need to obey our state
  45. // not the items state
  46. if (isAllVisible) {
  47. $(this).addClass('selected');
  48. $(blobSelector).hide();
  49. } else {
  50. $(this).removeClass('selected');
  51. $(blobSelector).show();
  52. }
  53.  
  54. isAllVisible = !isAllVisible;
  55. });
  56. }
  57.  
  58. function addElement() {
  59. var toggle = {
  60. id: toggleId,
  61. label: 'Collapse'
  62. };
  63.  
  64. _addToggle(toggle);
  65. }
  66. })();
  67.  
  68. /**
  69. * The hide whitespace features
  70. */
  71. var whitespace = (function(isWhitespaceVisible){
  72. var toggleId = 'js-whitespace-toggle';
  73. var isWhitespaceVisible = isWhitespaceVisible;
  74.  
  75. return {
  76. addElement: addElement,
  77. monitor: monitor
  78. };
  79.  
  80. //////////////////////
  81.  
  82. function monitor() {
  83. $(document).on('click', '#' + toggleId, function(e) {
  84. e.preventDefault();
  85.  
  86. // blow away the whole search query...
  87. window.location.search = isWhitespaceVisible ? '' : 'w=1';
  88. });
  89. }
  90.  
  91. function addElement() {
  92. var toggle = {
  93. id: toggleId,
  94. label: 'Ignore Whitespace',
  95. isSelected: isWhitespaceVisible
  96. };
  97.  
  98. _addToggle(toggle);
  99. }
  100.  
  101. })(isWhitespaceVisible);
  102.  
  103. /**
  104. * Public methods
  105. */
  106. return {
  107. monitor: monitor,
  108. addElements: addElements
  109. }
  110.  
  111. //////////////////////
  112.  
  113. function monitor() {
  114. // Watch for events
  115. collapse.monitor();
  116. whitespace.monitor();
  117. }
  118.  
  119. function addElements() {
  120. collapse.addElement();
  121. whitespace.addElement();
  122. }
  123.  
  124. /**
  125. * Add a button to the page
  126. * @param options {id, label, isSelected}
  127. */
  128. function _addToggle(options) {
  129. var toggleTemplate = '<a id="{{id}}" class="{{cssClass}}" style="margin-left: 4px;">{{label}}</a>';
  130.  
  131. // Make sure it isn't on the page already
  132. if (!$('#' + options.id).length) {
  133. options.cssClass = 'btn btn-sm right';
  134. if (options.isSelected) {
  135. options.cssClass += ' selected';
  136. }
  137. tmpl = _render(toggleTemplate, options);
  138.  
  139. $('#toc .btn-group').before(tmpl);
  140. }
  141. }
  142.  
  143. function _isWhitespaceVisible() {
  144. var search = {};
  145. if (window.location.search) {
  146. window.location.search.replace('?', '').split('&').forEach(function(el) {
  147. var group = el.split('=');
  148. var prop = group[0];
  149. var val = group[1] || '';
  150. search[prop] = val;
  151. });
  152. }
  153.  
  154. return (search.w && parseInt(search.w, 10) == 1);
  155. }
  156.  
  157. /**
  158. * Simple template rendering
  159. * double curly brace syntax {{id}} or {{ id }}
  160. *
  161. * @param {string} tmpl
  162. * @param {obj} data [description]
  163. * @return {string}
  164. */
  165. function _render(tmpl, data) {
  166. var curlyBraceRegex = /{{([^}}]+)}}/g
  167. var finds = tmpl.match(curlyBraceRegex);
  168.  
  169. finds.forEach(function(curlyProp) {
  170. var prop = curlyProp.replace('{{', '').replace('}}','').trim();
  171.  
  172. if (data[prop]){
  173. tmpl = tmpl.split(curlyProp).join(data[prop]);
  174. }
  175. });
  176.  
  177. return tmpl;
  178. }
  179.  
  180. })();
  181.  
  182. // ready!
  183. $(function() {
  184. // Make sure monitoring is going
  185. tool.monitor();
  186.  
  187. // Add elements on page load
  188. tool.addElements();
  189.  
  190. // Add elements on page change
  191. $(document).on('pjax:complete pjax:popstate', function(e) {
  192. tool.addElements();
  193. });
  194. });
  195.