☰

GitHub Sortable Filelist

appends sorting function to github directories

目前為 2014-11-17 提交的版本，檢視 最新版本。

  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.17.10
  7. //  .10 datetime auto-updating fix; right-aligned datetime column; proper local time; .ext sorting fix; 
  8. //  .8 sorting by file extention
  9. //  .7 date/time display mode switching
  10. //  .4 now works on all github pages
  11. // @created 2014-11-10
  12. // @updated 2014-11-17
  13. // @author  trespassersW
  14. // @license MIT
  15. // @icon https://github.com/trespassersW/UserScripts/raw/master/res/github64.png
  16. // (C) Icon: Aaron Nichols CC Attribution 3.0 Unported
  17. // @run-at document-end
  18. // @grant GM_none
  19. // ==/UserScript==
  20.  
  21. if(document.body || document.querySelector('#js-repo-pjax-container')){ // .file-wrap
  22.  
  23. var llii=0; function _l(){/* * /
  24.  for (var s=++llii +':', li=arguments.length, i = 0; i<li; i++) 
  25.   s+=' ' + arguments[i];
  26.  console.log(s)
  27. /* */
  28. }
  29. var fakejs = // avoid compiler warning
  30. (function(){ "use strict"; 
  31.  
  32. var ii=0,tt;
  33. var d0=[0,0,1];
  34. var C=[{c:1, d: 0, s: 0},{c:2, d: 0, s: 0},{c:3, d: 1, s: 0}];
  35. var ASC;
  36. var oa=[],ca=[],clock,ext,dtStyle;
  37. var D=document, TB;
  38. var catcher,locStor;
  39. var prefs={dtStyle:0, ext: 0};
  40.  
  41. function stickStyle(css){
  42.  var s=document.createElement("style"); s.type="text/css";
  43.  s.appendChild(document.createTextNode(css));
  44.  return (document.head||document.documentElement).appendChild(s);
  45. }
  46. function insBefore(n,e){
  47.   return e.parentNode.insertBefore(n,e);
  48. }
  49. function insAfter(n,e){
  50.   if(e.nextElementSibling)
  51.    return e.parentNode.insertBefore(n,e.nextElementSibling);
  52.   return e.parentNode.appendChild(n);
  53. }
  54. function outerNode(target, node) {
  55.  if (target.nodeName==node) return target;
  56.   if (target.parentNode) 
  57.   while (target = target.parentNode) try{
  58.    if (target.nodeName==node)
  59.     return target;
  60.   }catch(e){};
  61.  return null;
  62. }
  63. function savePrefs(){
  64.  if(locStor) locStor.setItem('GHSFL',JSON.stringify(prefs));
  65. }
  66.  
  67. function css(){
  68. stickStyle('\
  69. .fsort-butt,\n\
  70. .tables.file td.content, .tables.file td.message, .tables.file td.age\n\
  71.  {position: relative; }\n\
  72. .fsort-butt:before{\n\
  73.  position: absolute; display: inline-block;\n\
  74.  cursor: pointer;\n\
  75.  content: "";\n\
  76.  width: 16px;  height: 16px;\n\
  77. }\n\
  78. .fsort-butt.fsort-asc:before,.fsort-butt.fsort-desc:before{\n\
  79.  opacity:.2;\n\
  80.  left:1.5em; top: -1em;\n\
  81.  width: 0;  height: 0;\n\
  82. }\n\
  83. td.age.fsort-butt.fsort-asc:before,td.age.fsort-butt.fsort-desc:before{\n\
  84.  right:3em;\n\
  85. }\n\
  86. .fsort-asc:before,.fsort-desc:before{\n\
  87.  border-style: solid;\n\
  88.  border-color: #654;\n\
  89. }\n\
  90. .fsort-asc:before,\n\
  91. .fsort-desc.fsort-sel:hover:before\n\
  92. {\n\
  93.  border-left: 6px solid transparent;\n\
  94.  border-right: 6px solid transparent;\n\
  95.  border-bottom-width: 14px;\n\
  96.  border-top-width: 0;\n\
  97. }\n\
  98. .fsort-desc:before,\n\
  99. .fsort-asc.fsort-sel:hover:before{\n\
  100.  border-left: 6px solid transparent;\n\
  101.  border-right: 6px solid transparent;\n\
  102.  border-bottom-width: 0;\n\
  103.  border-top-width: 14px;\n\
  104.  }\n\
  105. \n\
  106. .fsort-sel:before,\n\
  107. .fsort-sel:before{\n\
  108.  border-bottom-color: #4183C4 !important;\n\
  109.  border-top-color: #4183C4 !important;\n\
  110. }\n\
  111. \n\
  112. .fsort-butt.fsort-sel:before{ opacity: .6 }\n\
  113. .fsort-butt:hover:before{ opacity: 1 !important;}\n\
  114. \n\
  115. #fsort-clock:before{\n\
  116.  left:4.5em; top:-1.2em;\n\
  117.  border-radius: 16px;\n\
  118.  opacity:1;\n\
  119.  content: url(data:image/png;base64,\
  120. 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\
  121. );}\n\
  122. #fsort-clock:before{ background-color: #CCC  }\n\
  123. #fsort-clock.fsort-on:before{ background-color: #4183C4  }\n\
  124. \n\
  125. td.age .fsort-butt.fsort-asc:before,td.age .fsort-butt.fsort-desc:before{\
  126. left:3em !important;\
  127. }\
  128. #fsort-ext:before{\n\
  129.  left:4em; top:-14px;\n\
  130.  border-radius: 6px;\n\
  131.  width:28px;height:16px;\n\
  132.  opacity:.3;\n\
  133.  content:\ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAANCAYAAAC3mX7tAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAABWUlEQVQ4y+2SP0sDQRDFT7BQTGtnITYSK8Emha1NCrXwC4gWYiUKiiB4jYKdWAmC4AewtxEExSqVjZ1/OEgwrEQwkLvbmd/aTCBI0IBYCD7YYmaYfW/mTRT9VWRZNq6qm79OBBwBrueGPM8ngWvgHbgXkQX7aC+EEFR1x+IDi7dUdQOQYACuviSp1+tDQA2oquoycAlInucT1Wp1EHgA3r3300AG3FUqlX4RKQOvQFNVV0Rk9ksiEZkzRbtJkgx476faqq1etnoK4L0vdazuqefVqepq6ALgKIqiKI7jPuDRcpVPHn1P5JwrxHHc1zHRofe+1H5pmo6akCWrv4QQgojMdxA9AI3vzPfAsXOuACRAXVW3VXUNOM2yrNhsNofNh1qapmPAG5A45wpGdGMiToD9bvdftKZ9I54ALoCGXd5tq9UaAc7Mr0Wbbr09vfk3Azybf+fRP36KDxJ2sN2uMATcAAAAAElFTkSuQmCC);\n\
  134. }\n\
  135. #fsort-ext:before{ background-color: #CCC}\n\
  136. .fsort-sel ~ #fsort-ext:before  {opacity:.6;}\n\
  137. .fsort-on:before{ background-color: #4183C4 !important;}\n\
  138. .fsort-on:hover:before{ opacity:1}\n\
  139. \n\
  140. table.files td.age .css-truncate.css-truncate-target{\n\
  141.  width: 99% !important; \n\
  142.  max-width: none !important;\n\
  143. }\n\
  144. /*table.files td.age span.css-truncate time{\n\
  145.  position: relative !important;\n\
  146. }*/\n\
  147. .fsort-time {\n\
  148.  visibility: hidden;\n\
  149.  display: none;\n\
  150.  padding-right: 14px;\n\
  151. }\n\
  152. \n\
  153. /* patches */\n\
  154. table.files td.age {text-align: right !important; padding-right: 10px !important;\n\
  155. width:10em!important;\n\
  156. min-width:10em!important;\n\
  157. max-width:none!important;\n\
  158. overflow:visible!important;\n\
  159. }\n\
  160. table.files td.message {overflow: visible !important;}\n\
  161. ');
  162.  
  163.  
  164. dtStyle=stickStyle('\
  165. td.age  span.css-truncate time{\
  166.  visibility: hidden !important;\
  167.  display: none !important;\
  168. }\
  169. td.age  span.css-truncate .fsort-time {\
  170.  visibility: visible !important;\
  171.  display: inline !important;\
  172. }\
  173. ')
  174. }
  175.  
  176. function setC(n){
  177.  for(var i=0,il=C.length; i<il; i++ ){
  178.   if(i!=n) C[i].s= 0, C[i].d=d0[i];
  179.   else C[i].s=1;
  180.   oa[i].className='fsort-butt fsort-'+(C[i].d?'desc':'asc')+(C[i].s?' fsort-sel':'') ;
  181.   oa[i].title=C[i].d? '\u21ca' : '\u21c8';
  182.  }
  183. }
  184.  
  185. function dd(s)
  186. { s=s.toString(); if(s.length<2)return'0'+s; return s}
  187. function d2s(n){
  188.  return {  
  189.    d: n.getFullYear()+'-'+dd(n.getMonth())+'-'+dd(n.getDate()),
  190.    t: dd(n.getHours())+':'+dd(n.getMinutes())+':'+dd(n.getSeconds())
  191.  }
  192. }
  193.  
  194. function setDateTime(x){
  195.  var dt,dtm;
  196.  var DT=D.querySelectorAll('td.age span.css-truncate time');
  197.  try{
  198.  for(var dl=DT.length, i=0; i<dl; i++){
  199.   dt= d2s(new Date( DT[i].getAttribute('datetime') )); // 2014-07-24T17:06:11Z
  200.   if(x){
  201.    dtm=DT[i].parentNode.querySelector('.fsort-time');
  202.   }else{
  203.    dtm=D.createElement('span');
  204.    dtm.className='fsort-time';
  205.   }
  206.   if(!x || dtm.title != DT[i].title){
  207.     dtm.title= DT[i].title;
  208.     if(/minut|hour|just/.test(DT[i].textContent))
  209.      dtm.textContent=dt.t;
  210.     else
  211.      dtm.textContent=dt.d;
  212.   }
  213.   if(!x) insAfter(dtm,DT[i]);
  214.  }
  215.  }catch(e){(console.log(e+'\n*GHSFL* wrong datetime'))}
  216. }
  217.  
  218. function isDir(x){
  219.  return (TB.rows[x].cells[0].querySelector("span.octicon-file-directory")) != null;
  220. }
  221.  
  222. var sDir,sCells,sExts;
  223.  var fa=[
  224.   function(a){
  225.    return TB.rows[a].cells[1].querySelector('span.css-truncate-target a').textContent;
  226.   },
  227.   function(a){
  228.    return TB.rows[a].cells[2].querySelector('span.css-truncate').textContent;
  229.   },
  230.   function(a){
  231.    return TB.rows[a].cells[3].querySelector('span.css-truncate>time').getAttribute('datetime');
  232.   }
  233.  ]
  234.  
  235. var b9='\x20\x20\x20'; b9+=b9+b9;
  236. function pad9(s){
  237.  if(s.length<9) return (s+b9).substr(0,9);
  238.  return s;
  239. }
  240. function sort_p(n){// prepare data for sorting
  241.  sDir=[],sCells=[];
  242.  for(var tl=TB.rows.length, a=0; a<tl; a++) sDir.push(isDir(a));
  243.  if( n === 0 && prefs.ext ){
  244.   for( a=0; a<tl; a++){ // f.x -> x.f
  245.    var x=fa[n](a),
  246.    m= x.match(/(.*)(\..*)$/);
  247.    if(!m || !m[2]) m=['',x,''];
  248.    x=pad9(m[2])+' '+m[1];
  249.    sCells.push(x);
  250.   }
  251.  }else for( a=0; a<tl; a++) sCells.push(fa[n](a));
  252. }
  253.  
  254. function sort_fn(a,b){ 
  255.  var x=sDir[a], y=sDir[b];
  256.  if(x!=y) return ((x<y)<<1)-1;
  257.  x= sCells[a], y= sCells[b];
  258.  return x==y? 0: (((x>y)^ASC)<<1)-1;
  259. }
  260.  
  261. var CNn={content: 0, message: 1, age: 2}
  262.  
  263. function oClr(){
  264.  var o= catcher.querySelectorAll('.fsort-butt')
  265.  for(var ol=o.length,i=0;i<ol;i++)
  266.   o[i].parentNode.removeChild(o[i]);
  267. }
  268. //
  269. function extclassName(){
  270.   ext.className='fsort-butt'+ (prefs.ext? ' fsort-on': '' );
  271. }
  272. function clockclassName(){
  273.   clock.className='fsort-butt'+ (prefs.dtStyle? '': ' fsort-on');
  274. }
  275. //
  276. function doSort(t){
  277.  TB=outerNode(t,'TBODY');
  278.  if(!TB){  _l( "*GHSFL* TBODY not found"); return; }
  279.  var n=CNn[t.parentNode.className];
  280.  if(typeof n=="undefined"){  _l( "*GHSFL* undefined col"); return; }
  281.  
  282.  if(t.id=='fsort-clock'){
  283.    dtStyle.disabled = (prefs.dtStyle ^= 1);
  284.    savePrefs();
  285.    clockclassName();
  286.    return;
  287.  }
  288.  var xt = (t.id=='fsort-ext');
  289.  if( xt ){
  290.   if(C[n].s) prefs.ext ^= 1; 
  291.   else prefs.ext= 1;
  292.   savePrefs();
  293.   extclassName();
  294.   C[n].d^=C[n].s; // don't toggle dir on ext.click
  295.  }
  296.  var tb=[],ix=[], i, tl;
  297.  _l('n:'+n);
  298.  tl=TB.rows.length;
  299.  ASC=C[n].d^=C[n].s;
  300.  for( i=0; i<tl; i++)
  301.   ix.push(i);
  302.  oClr();
  303.  sort_p(n);
  304.  ix.sort(sort_fn);
  305.  for( i=0; i<tl; i++)
  306.   tb.push(TB.rows[ix[i]].innerHTML);
  307.  for( i=0; i<tl; i++)
  308.   TB.rows[i].innerHTML=tb[i];
  309.  setC(n);
  310.  gitDir1(0);
  311. }
  312.  
  313. function onClik(e){doSort(e.target)}
  314.  
  315. function gitDir1(x){
  316.  if(x && document.querySelector('.fsort-butt')) {
  317.   _l('gitDir'+x+ '- already'); return;
  318.  }
  319.  _l('gitDir'+x)
  320.  var c,o;
  321.  ca=[];
  322.  c= D.querySelector('.file-wrap table.files td.content >span');
  323.  if(!c){ _l( '*GHSFL* no content') ; return; }
  324.  ca.push(c);
  325.  c=D.querySelector('.file-wrap table.files td.message >span');
  326.  if(!c){ _l( '*GHSFL* no messages'); return; }
  327.  ca.push(c);
  328.  c=D.querySelector('.file-wrap table.files td.age >span');
  329.  if(!c){_l( '*GHSFL* no ages'); return; }
  330.  ca.push(c);
  331.  if(x){  oClr(); oa=[];
  332.   o=D.createElement('span'); 
  333.   o.textContent=''; 
  334.   oa.push(o);
  335.   o=o.cloneNode(true); 
  336.   oa.push(o);
  337.   o=o.cloneNode(true); 
  338.   oa.push(o);
  339.   clock=D.createElement('span');
  340.   clock.id='fsort-clock'; clockclassName();
  341.   ext=D.createElement('span');
  342.   ext.id='fsort-ext'; extclassName();
  343.   setDateTime(); 
  344.   setC(-1);
  345.  }
  346.   insBefore(oa[0],ca[0]);
  347.   insBefore(ext,ca[0]);
  348.   insBefore(oa[1],ca[1]);
  349.   insBefore(oa[2],ca[2]);
  350.   insBefore(clock,ca[2]);
  351. }
  352.  
  353. function gitDir(){
  354.  gitDir1(1);
  355. }
  356.  
  357.  
  358. catcher= D.querySelector('#js-repo-pjax-container');
  359. if(!catcher){  _l( "*GHSFL* err0r"); return; }
  360.  
  361. catcher.addEventListener('mousedown',function(e){
  362. if(e.target.nodeName && e.target.nodeName=='SPAN' &&
  363.    e.target.className.indexOf('fsort-butt')>-1)
  364.  { onClik(e); }
  365. }
  366. ,false);
  367. _l('startup()');
  368.  
  369. try {
  370.   locStor = window.localStorage;
  371.   tt=locStor.getItem("GHSFL");
  372. } catch(e){ locStor =null}
  373.  
  374. if(locStor && tt) try{
  375.  prefs =JSON.parse(tt); 
  376. }catch(e){ console.log(e+"\n*GHSFL* bad prefs") }
  377.  
  378. css();
  379. dtStyle.disabled=(prefs.dtStyle===1);
  380.  
  381. gitDir();
  382. var target = catcher; //document.body; //D.querSelector('.file-wrap');
  383. var  MO = window.MutationObserver;
  384. if(!MO) MO= window.WebKitMutationObserver;
  385. if(!MO) return;
  386. var mutI;
  387. var  observer = new MO(function(mutations) {
  388.    mutI=0;
  389.    mutations.forEach(function(m) {
  390.     var t=m.target; 
  391.     if( m.type== "attributes" ) {  
  392.       if(  t.nodeName == 'DIV' &&  
  393.            t.className == "file-wrap" && 
  394.            0===mutI++
  395.       ){  gitDir();  }
  396.       return; 
  397.     }
  398.     
  399.     if( m.type=="childList" && t.className=='age' &&
  400.         0===mutI++ ){ 
  401.  _l('.'+mutI,' T:' +m.type,'N:'+t.nodeName,'C:'+ t.className,t.querySelector('TIME').textContent) ;
  402.       setDateTime(1);
  403.     }
  404.     return;
  405.    })
  406. });
  407.  
  408. observer.observe(D.body, { attributes: true, childList: true, subtree: true } );
  409. /* attributes: true , childList: true, subtree: true,  
  410.   characterData: true,  attributeOldValue:true,  characterDataOldValue:true
  411. */
  412.  
  413. })()};