☰

GitHub Sortable Filelist

appends sorting function to github directories

目前为 2014-11-20 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub Sortable Filelist
  3. // @namespace   trespassersW
  4. // @description appends sorting function to github directories
  5. // @include https://github.com/*
  6. // @version 14.11.19.20
  7. //  .20 maquillage
  8. // 14.11.19.13 fixes for latest github changes
  9. //  .12 new age format; fix for chrome
  10. //  .11 patch for the very first page;
  11. //  .10 datetime auto-updating fix; right-aligned datetime column; proper local time; .ext sorting fix; 
  12. //  .8 sorting by file extention
  13. //  .7 date/time display mode switching
  14. //  .4 now works on all github pages
  15. // @created 2014-11-10
  16. // @updated 2014-11-20
  17. // @author  trespassersW
  18. // @license MIT
  19. // @icon https://i.imgur.com/8buFLcs.png
  20. // (C) Icon: Aaron Nichols CC Attribution 3.0 Unported
  21. // @run-at document-end
  22. // @grant GM_none
  23. // ==/UserScript==
  24.  
  25. if(document.body && document.querySelector('#js-repo-pjax-container')){
  26.  
  27. var llii=0, _l= function(){/* * /
  28.  for (var s=++llii +':', li=arguments.length, i = 0; i<li; i++) 
  29.   s+=' ' + arguments[i];
  30.  console.log(s)
  31. /* */
  32. }
  33. var fakejs = // avoid compiler warning
  34. (function(){ "use strict"; 
  35.  
  36. var ii=0,tt;
  37. var d0=[0,0,1];
  38. var C=[{c:1, d: 0, s: 0},{c:2, d: 0, s: 0},{c:3, d: 1, s: 0}];
  39. var ASC;
  40. var oa=[],ca=[],clock,ext,dtStyle;
  41. var D=document, TB;
  42. var catcher,locStor;
  43. var prefs={dtStyle:0, ext: 0};
  44.  
  45. function stickStyle(css){
  46.  var s=document.createElement("style"); s.type="text/css";
  47.  s.appendChild(document.createTextNode(css));
  48.  return (document.head||document.documentElement).appendChild(s);
  49. }
  50. function insBefore(n,e){
  51.   return e.parentNode.insertBefore(n,e);
  52. }
  53. function insAfter(n,e){
  54.   if(e.nextElementSibling)
  55.    return e.parentNode.insertBefore(n,e.nextElementSibling);
  56.   return e.parentNode.appendChild(n);
  57. }
  58. function outerNode(target, node) {
  59.  if (target.nodeName==node) return target;
  60.   if (target.parentNode) 
  61.   while (target = target.parentNode) try{
  62.    if (target.nodeName==node)
  63.     return target;
  64.   }catch(e){};
  65.  return null;
  66. }
  67. function savePrefs(){
  68.  if(locStor) locStor.setItem('GHSFL',JSON.stringify(prefs));
  69. }
  70.  
  71. function css(){
  72. stickStyle('\
  73. .fsort-butt,\n\
  74. .tables.file td.content, .tables.file td.message, .tables.file td.age\n\
  75.  {position: relative; }\n\
  76.  \n\
  77. .fsort-butt:before{\n\
  78.  position: absolute; display: inline-block;\n\
  79.  cursor: pointer;\n\
  80.  text-align:center; vertical-align: top;\n\
  81.  width: 18px;   height: 14px;\n\
  82.  line-height: 14px;\n\
  83.  padding:0; margin:0;\n\
  84.  border-color: transparent;\n\
  85.  border-width: 0;\n\
  86.  content: "";\n\
  87. }\n\
  88. .fsort-butt.fsort-asc:before,.fsort-butt.fsort-desc:before{\n\
  89.  opacity:.2;\n\
  90.  left:1.5em; top: -1em;\n\
  91. }\n\
  92. td.age.fsort-butt.fsort-asc:before,td.age.fsort-butt.fsort-desc:before{\n\
  93.  right:3em;\n\
  94. }\n\
  95. .fsort-asc:before,.fsort-desc:before{\n\
  96.  background-color: #654;\n\
  97. }\n\
  98. .fsort-asc:before{\n\
  99.  border-radius: 24px 24px 8px 8px;\n\
  100. }\n\
  101. .fsort-desc:before{\n\
  102.  border-radius: 8px 8px 24px 24px;\n\
  103. }\n\
  104. .fsort-asc:before,\n\
  105. .fsort-desc.fsort-sel:hover:before\n\
  106. {\n\
  107. content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAqklEQVR42mNgQAIfPnzg//fv3z4g3vjs2TNOBmzg27dv0kAFl/5DAZB95OPHj4Ioin79+qUFlHj0Hw0Axa5+//5dFqzo58+fGkCB9/9xAKDcw69fv0ow/P37twAqAAJLkRQsgLGBapIZQO4ACk798+eP9+/fv21gkkArZYAKYoFy09++fcuL4lZ0hQy4wMAqtIQpBEaAFE6FL1684AL6chcQb1m1ahUTshwAw2kAJAeNI30AAAAASUVORK5CYII=);\n\
  108. }\n\
  109. .fsort-desc:before,\n\
  110. .fsort-asc.fsort-sel:hover:before{content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAACXBIWXMAAAsTAAALEwEAmpwYAAAApUlEQVR42mNgQAKrVq1i+vfv3xYg3vXixQsuBlzg27dvUv+h4Pfv35Y4FX7//l0GSaHNYFH49u1bXqAvp//9+zcWXeGfP3+8gXJTP378KMgAVJAMkwQKLkBiLwXifyA2UE0Bw9evXyWA/If/cQCg3PufP39qwNwmCxS4ikXRo1+/fmmhuBXkDqDEESRFl4ARII3V18+ePeMEKtgIxPs+fPjAjywHANCcACRZ1c8XAAAAAElFTkSuQmCC);\n\
  111. }\n\
  112. \n\
  113. .fsort-sel:before,\n\
  114. .fsort-sel:before{\n\
  115.   background-color: #4183C4 !important;\n\
  116. }\n\
  117. \n\
  118. .fsort-butt.fsort-sel:before{ opacity: .6 }\n\
  119. .fsort-butt:hover:before{ opacity: 1 !important;}\n\
  120. \n\
  121. #fsort-clock:before{\n\
  122.  left:5em; top: -15px; \n\
  123.  text-align:center; vertical-align: top; top:-15px;\n\
  124.  width: 16px; height: 16px;\
  125.  border-radius: 16px;\n\
  126.  opacity:1;\n\
  127.  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAlZJREFUeNqkU0tLG1EUvjORFJPMw6mhTUgxy75EUxiJj6CGLKQV0o2IQd3pxp2bbPs/3MVCIHSRgC3uXBhCSErjtLRkK7TcNCYhk4eGPHvO6AwjXXrgu/fOOff77plzz2VGoxF5iI3hEA6HCcuyxGKxEIZhOMBLcHsAwt0+FfAbDvsFaA4GAzIcDkkqlboVMNlzB8+vzgUCq3N+v+xyOl3opFdXNJfN5nPn52dNVT0DV/FeBjpZcjrfR/b3Dzwul0e02ciPiwsyPTtLptxur7C25n0xMzMfPzoSypQmdREWB0iLt3NcKLK3dzAhSR5+fFxT/JbPG+row9g2HABZhpBjCMA/vZYDgRVOFD02q5WwDKOROp2OIYA+jDlgz8Ly8gpyDIF+v++d9vlkXDdubshlpaKhWCwaawTGsHg+WZaRY9QAPiYEUXyinzY1OanNzWbTWGv7gPynViO4FzlmARavcWgivw2FSDAYJDubm4TjOA0Oh4O8WVwk80tLGscsoLZUtWwThGf6afFEgmxvbZGP8biRAbac2u2S60ajjByjBr1e7/JrJqOMQSNhmmiCJGlknHVAAckjuI1cOq0gx3wLyudkMt1ttejgTkAXMRsWkO106KdEIo0cQwAC9b+l0umHaPRYrVaphWX/63n0XasqjR4eHlNKT5FzrxPBoXxXFEtkY6Ozs7u78G59/dVTt/sxdkSJ0uqXk5OfsVgsU6lUUjzPKzqPwdfo8/lIF4pTr9dJu92WID0/tjZAv8MKti48tqzdbq+JUAsrNFWhULgVeIj9E2AAamUckFr2UCoAAAAASUVORK5CYII=\n\
  128. );}\n\
  129. #fsort-clock:before{ background-color: #CCC  }\n\
  130. #fsort-clock.fsort-on:before{ background-color: #4183C4  }\n\
  131. \n\
  132. td.age .fsort-butt.fsort-asc:before,td.age .fsort-butt.fsort-desc:before{\n\
  133. left:3em !important;\n\
  134. }\
  135. #fsort-ext:before{\n\
  136.  left:4em; top:-14px;\n\
  137.  opacity:.6;\n\
  138.  width:28px; height: 14px;\n\
  139.  border-radius: 6px;\n\
  140. content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAANCAYAAAC3mX7tAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAABWUlEQVQ4y+2SP0sDQRDFT7BQTGtnITYSK8Emha1NCrXwC4gWYiUKiiB4jYKdWAmC4AewtxEExSqVjZ1/OEgwrEQwkLvbmd/aTCBI0IBYCD7YYmaYfW/mTRT9VWRZNq6qm79OBBwBrueGPM8ngWvgHbgXkQX7aC+EEFR1x+IDi7dUdQOQYACuviSp1+tDQA2oquoycAlInucT1Wp1EHgA3r3300AG3FUqlX4RKQOvQFNVV0Rk9ksiEZkzRbtJkgx476faqq1etnoK4L0vdazuqefVqepq6ALgKIqiKI7jPuDRcpVPHn1P5JwrxHHc1zHRofe+1H5pmo6akCWrv4QQgojMdxA9AI3vzPfAsXOuACRAXVW3VXUNOM2yrNhsNofNh1qapmPAG5A45wpGdGMiToD9bvdftKZ9I54ALoCGXd5tq9UaAc7Mr0Wbbr09vfk3Azybf+fRP36KDxJ2sN2uMATcAAAAAElFTkSuQmCC);\n\
  141. }\n\
  142. #fsort-ext:before{ background-color: #BBB}\n\
  143. #fsort-ext:hover:before{ opacity:1 !important;}\n\
  144. .fsort-butt:not([class*="fsort-sel"]) ~ .fsort-on#fsort-ext:not(:hover):before\n\
  145.  {opacity:.2 !important;}\n\
  146. .fsort-on:before{ background-color: #4183C4 !important; opacity: .5 !important;}\n\
  147. .fsort-on:hover:before{ opacity: 1 !important; }\n\
  148. \n\
  149. table.files td.age .css-truncate.css-truncate-target{\n\
  150.  width: 99% !important; \n\
  151.  max-width: none !important;\n\
  152. }\n\
  153. /*table.files td.age span.css-truncate time{\n\
  154.  position: relative !important;\n\
  155. }*/\n\
  156. .fsort-time {\n\
  157.  visibility: hidden;\n\
  158.  display: none;\n\
  159.  padding-right: 14px;\n\
  160. }\n\
  161. .fsort-time i {\n\
  162.  display:inline-block;\
  163.  color: #BBB;\
  164.  font-style: normal !important;\n\
  165.  transform:  scale(0.9);\n\
  166. /* font-size: 12px;*/\n\
  167. }\n\
  168. \n\
  169. /* patches */\n\
  170. table.files td.age {text-align: right !important; padding-right: 10px !important;\n\
  171. width:12em!important;\n\
  172. min-width:12em!important;\n\
  173. max-width:none!important;\n\
  174. overflow:visible!important;\n\
  175. }\n\
  176. table.files td.message {overflow: visible !important;}\n\
  177. /*.file-wrap .include-fragment-error { display: table-row !important;}*/\n\
  178. ');
  179.  
  180. dtStyle=stickStyle('\
  181. td.age  span.css-truncate time{\
  182.  visibility: hidden !important;\
  183.  display: none !important;\
  184. }\
  185. td.age  span.css-truncate .fsort-time {\
  186.  visibility: visible !important;\
  187.  display: inline !important;\
  188. }\
  189. ')
  190. }
  191.  
  192. function setC(n){
  193.  for(var i=0,il=C.length; i<il; i++ ){
  194.   if(i!=n) C[i].s= 0, C[i].d=d0[i];
  195.   else C[i].s=1;
  196.   oa[i].className='fsort-butt fsort-'+(C[i].d?'desc':'asc')+(C[i].s?' fsort-sel':'') ;
  197.   //oa[i].title=C[i].d? '\u21ca' : '\u21c8';
  198.  }
  199. }
  200.  
  201. function dd(s)
  202. { s=s.toString(); if(s.length<2)return'0'+s; return s}
  203. function d2s(n){
  204.  var hs=dd(n.getHours())+':'+dd(n.getMinutes());
  205.  return {  
  206.    d: n.getFullYear()+'-'+dd(n.getMonth()+1)+'-'+dd(n.getDate())+' <i>'+ hs+'</i>',
  207.    t: hs+':'+dd(n.getSeconds())
  208.  }
  209. }
  210.  
  211. function setDateTime(x){
  212.  var dt,dtm,dta,dtd,tc,m,now,t;
  213.  var DT=D.querySelectorAll('td.age span.css-truncate time');
  214.  _l('sDT',x?'refresh':'create');
  215.  try{
  216.   now = new Date();
  217.  for(var dl=DT.length, i=0; i<dl; i++){
  218.   dta=DT[i].getAttribute('datetime');
  219.   dtd=new Date(dta);
  220.   dt= d2s(dtd); // 2014-07-24T17:06:11Z
  221.   dtm=null;
  222.   if(x){
  223.    dtm=DT[i].parentNode.querySelector('.fsort-time');
  224.   }
  225.   if(!dtm){
  226.    dtm=D.createElement('span');
  227.    dtm.className='fsort-time';
  228.    x=0;
  229.   }
  230.   if(!x || !dtm.title || dtm.title != DT[i].title)
  231.   { dtm.title= DT[i].title;
  232.     t= dt.d;
  233.     if( (now.getTime() -  dtd.getTime() < 12*3600*1000) ||
  234.         ((now.getTime() -  dtd.getTime() < 24*3600*1000) &&
  235.          (now.getDate() == dtd.getDate()) )
  236.       )  t=dt.t;
  237.     dtm.innerHTML=t;
  238.   }
  239.   if(!x) insAfter(dtm,DT[i]);
  240.  }
  241.  }catch(e){(console.log(e+'\n*GHSFL* wrong datetime'+x))}
  242. }
  243.  
  244. function isDir(x){
  245.  var c= TB.rows[x].cells[0].querySelector("span");
  246.  if(c.className.indexOf("-directory")>0) return 0;
  247.  if(c.className.indexOf("-file")>0) return -1;
  248.  return 1;
  249. }
  250. function getCell(r,c,s,p){
  251.  var rc=TB.rows[r].cells[c],q=null;
  252.  if(typeof rc == "undefined") {
  253.  _l('r:',r,'c:',c,'- ???' );
  254.  }else
  255.    q=rc.querySelector(s);
  256.  if(q) q= p? q.getAttribute(p): q.textContent;
  257.  if(q) return q;
  258.  return "";
  259. }
  260. var sDir,sCells,sExts;
  261.  var fa=[
  262.   function(a){
  263.    return getCell(a,1,'span.css-truncate-target a');
  264.   },
  265.   function(a){
  266.    return getCell(a,2,'span.css-truncate');
  267.   },
  268.   function(a){
  269.    var c = getCell(a,3,'span.css-truncate>time','datetime');
  270.    if(c) return c;
  271.    return "2099-12-31T23:59:59Z"
  272.   }
  273.  ]
  274.  
  275. var b9='\x20\x20\x20'; b9+=b9+b9;
  276. function pad9(s){
  277.  if(s.length<9) return (s+b9).substr(0,9);
  278.  return s;
  279. }
  280. function sort_p(n){// prepare data for sorting
  281.  sDir=[],sCells=[];
  282.  for(var tl=TB.rows.length, a=0; a<tl; a++) 
  283.    sDir.push(isDir(a));
  284.  if( n === 0 && prefs.ext ){
  285.   for( a=0; a<tl; a++){ // f.x -> x.f
  286.    var x=fa[n](a),
  287.    m= x.match(/(.*)(\..*)$/);
  288.    if(!m || !m[2]) m=['',x,''];
  289.    x=pad9(m[2])+' '+m[1];
  290.    sCells.push(x);
  291.   }
  292.  }else for( a=0; a<tl; a++) sCells.push(fa[n](a));
  293. }
  294.  
  295. function sort_fn(a,b){ 
  296.  var x=sDir[a], y=sDir[b];
  297.  if(x!=y) return ((x<y)? 1: -1);
  298.  x= sCells[a], y= sCells[b];
  299.  return x==y? 0: (((x>y)^ASC)<<1)-1;
  300. }
  301.  
  302. var CNn={content: 0, message: 1, age: 2}
  303.  
  304. function oClr(){
  305.  var o= catcher.querySelectorAll('.fsort-butt,.fsort-time')
  306.  for(var ol=o.length,i=0;i<ol;i++)
  307.   o[i].parentNode.removeChild(o[i]);
  308. }
  309. //
  310. function extclassName(){
  311.   ext.className='fsort-butt'+ (prefs.ext? ' fsort-on': '' );
  312. }
  313. function clockclassName(){
  314.   clock.className='fsort-butt'+ (prefs.dtStyle? '': ' fsort-on');
  315. }
  316. //
  317. function doSort(t){
  318.  TB=outerNode(t,'TBODY');
  319.  if(!TB){  _l( "*GHSFL* TBODY not found"); return; }
  320.  var n=CNn[t.parentNode.className];
  321.  if(typeof n=="undefined"){  _l( "*GHSFL* undefined col"); return; }
  322.  
  323.  if(t.id=='fsort-clock'){
  324.    dtStyle.disabled = (prefs.dtStyle ^= 1);
  325.    savePrefs();
  326.    clockclassName();
  327.    return;
  328.  }
  329.  var xt = (t.id=='fsort-ext');
  330.  if( xt ){
  331.   if(C[n].s) prefs.ext ^= 1; 
  332.   else prefs.ext= 1;
  333.   savePrefs();
  334.   extclassName();
  335.   C[n].d^=C[n].s; // don't toggle dir on ext.click
  336.  }
  337.  var tb=[],ix=[], i, tl;
  338.  _l('n:'+n);
  339.  tl=TB.rows.length;
  340.  ASC=C[n].d^=C[n].s;
  341.  for( i=0; i<tl; i++)
  342.   ix.push(i);
  343.  oClr();
  344.  sort_p(n);
  345.  ix.sort(sort_fn);
  346.  for( i=0; i<tl; i++)
  347.   tb.push(TB.rows[ix[i]].innerHTML);
  348.  for( i=0; i<tl; i++)
  349.   TB.rows[i].innerHTML=tb[i];
  350.  setC(n);
  351.  gitDir1(0);
  352. }
  353.  
  354. function onClik(e){doSort(e.target)}
  355.  
  356. function gitDir1(x){
  357.  if(x && document.querySelector('.fsort-butt')) {
  358.   _l('gitDir'+x+ '- already'); return;
  359.  }
  360.  _l('gitDir',x?'create':'refresh')
  361.  var c,o;
  362.  ca=[];
  363.  c= D.querySelector('.file-wrap table.files td.content >span');
  364.  if(!c){ _l( '*GHSFL* no content') ; return; }
  365.  ca.push(c);
  366.  c=D.querySelector('.file-wrap table.files td.message >span');
  367.  if(!c){ _l( '*GHSFL* no messages'); return; }
  368.  ca.push(c);
  369.  c=D.querySelector('.file-wrap table.files td.age >span');
  370.  if(!c){_l( '*GHSFL* no ages'); return; }
  371.  ca.push(c);
  372.  if(x){  oClr(); oa=[];
  373.   o=D.createElement('span'); 
  374.   o.textContent=''; 
  375.   oa.push(o);
  376.   o=o.cloneNode(true); 
  377.   oa.push(o);
  378.   o=o.cloneNode(true); 
  379.   oa.push(o);
  380.   clock=D.createElement('span');
  381.   clock.id='fsort-clock'; clockclassName();
  382.   ext=D.createElement('span');
  383.   ext.id='fsort-ext'; extclassName();
  384.   setDateTime(); 
  385.   setC(-1);
  386.  }
  387.   insBefore(oa[0],ca[0]);
  388.   insBefore(ext,ca[0]);
  389.   insBefore(oa[1],ca[1]);
  390.   insBefore(oa[2],ca[2]);
  391.   insBefore(clock,ca[2]);
  392. }
  393.  
  394. function gitDir(){
  395.  gitDir1(1);
  396. }
  397.  
  398. catcher= D.querySelector('#js-repo-pjax-container');
  399. if(!catcher){  _l( "*GHSFL* err0r"); return; }
  400.  
  401. catcher.addEventListener('mousedown',function(e){
  402. if(e.target.nodeName && e.target.nodeName=='SPAN' &&
  403.    e.target.className.indexOf('fsort-butt')>-1)
  404.  { onClik(e); }
  405. }
  406. ,false);
  407.  
  408. _l('startup()');
  409.  
  410. try {
  411.   locStor = window.localStorage;
  412.   tt=locStor.getItem("GHSFL");
  413. } catch(e){ locStor =null}
  414.  
  415. if(locStor && tt) try{
  416.  prefs =JSON.parse(tt); 
  417. }catch(e){ console.log(e+"\n*GHSFL* bad prefs") }
  418.  
  419. css();
  420. dtStyle.disabled=(prefs.dtStyle===1);
  421.  
  422. gitDir();
  423. var target = catcher; //document.body; //D.querSelector('.file-wrap');
  424. var  MO = window.MutationObserver;
  425. if(!MO) MO= window.WebKitMutationObserver;
  426. if(!MO) return;
  427. var __started=0;
  428. var mutI=0;
  429. var  observer = new MO(function(mutations) {
  430.  
  431.  for(var m,t, ml=mutations.length, i=0; i<ml; i++) 
  432.  {
  433.     m=mutations[i],t = m.target; 
  434.     if( m.type=="attributes")
  435.     {
  436.       if( t.nodeName == 'DIV' &&  
  437.           t.className == "file-wrap"
  438.         ){ 
  439.            gitDir(); 
  440.            return;
  441.          }
  442.         
  443. // patch for the very first page
  444.       if( 0===__started && t.nodeName=='TIME' ) 
  445.       {
  446.         if( t.parentNode.parentNode.className=="age" )
  447.         {
  448. //_l('T'+mutI++,ml,' T:' +m.type,'N:'+t.nodeName, 'C:',"age" ) ;
  449.             if(!catcher.querySelector('.fsort-butt'))
  450.               gitDir(1); //chrome ?!11
  451.             setDateTime(1); 
  452.             __started=1;
  453.             return;
  454.         }
  455.         else continue;
  456.       }
  457.     }
  458.       
  459.     if( m.type=="childList" ) 
  460.     {
  461.        if( t.className=='age' ) 
  462.          {
  463.             if(!catcher.querySelector('.fsort-butt'))
  464.               gitDir(1); //chrome ?!11
  465. //_l('C'+mutI++,ml,' T:' +m.type,'N:'+t.nodeName,'C:'+ t.className,t.querySelector('TIME').textContent) ;
  466.           setDateTime(1);
  467.           return;
  468.          }
  469.         else continue;
  470.      }
  471.  }
  472. });
  473.  
  474. observer.observe(D.body, { attributes: true, childList: true, subtree: true } );
  475. /* attributes: true , childList: true, subtree: true,  
  476.   characterData: true,  attributeOldValue:true,  characterDataOldValue:true
  477. */
  478.  
  479. })()};