☰

Metal Archives - Discography pages: 'Reviews' column split + sortable tables

Splits the Reviews column into Reviews(count) and Ratings(avg) and makes the table sortable.

当前为 2014-10-15 提交的版本，查看 最新版本。

// ==UserScript==
// @name        Metal Archives - Discography pages: 'Reviews' column split + sortable tables
// @namespace   rikkie
// @description Splits the Reviews column into Reviews(count) and Ratings(avg) and makes the table sortable.
// @include     http://www.metal-archives.com/bands/*
// @version     1
// @grant       none
// 
// This userscript uses jQuery and it's plugin "tablesorter" (forked by Rob Garrison (Mottie)) http://mottie.github.io/tablesorter/docs/index.html
//
// ==/UserScript==

window.addEventListener('load', function() {



// STEP 1+2: SPLIT THE REVIEWS COLUMN/ADD A COLUMN
// It appends a column to the HTML table containing the displayed discography sub-category
function appendColumn(table) {
var tbl = document.getElementsByClassName("display discog")[table], // table reference
        i;
    
    var newCell, newText;    
    
    var tr = document.getElementsByClassName('display discog')[table].tHead.children[0],
    th = document.createElement('th');
    th.innerHTML = "Ratings(avg)";
    tr.appendChild(th);

    
    
    
    for (i = 1; i < tbl.rows.length; i++) {
        k = tbl.rows[i].cells[4].innerHTML;    // Retrieve the content of the current cell of the Review column and store it to variable k
        
        re1 = /<a [^>]*>[^(]*[(]([^)]+)/ ;      // RegEx which matches only the number(and the %) inside the parentheses
        l = re1.exec(k);                        // Execute the RegEx and store it to variable l

        if (re1.test(k) !=0 ){                  // If the RegEx has matches, (only) then create each cell with the result of the RegEx
            newCell = tbl.rows[i].insertCell(-1);
            newCell.innerHTML = l[1];            
            re2 = /<a [^>]*>([0-9]*)[^(]/ ;   // RegEx which matches only the number before the parentheses
            m = re2.exec(k);                  // // Execute the RegEx
            newCell = tbl.rows[i].cells[4];
            newCell.innerHTML = m[1];          
            }
        
    }    
}


// The following part (between the dashes) identifies how many elements on the page are the sub-tabs of DISCOGRAPHY,
// it does that by finding the last and the first such elements (containing the following texts -inside a <span> tag- )
// ----------------------------------------------------------------------------------------------------------------------------------


var temp;
var init = "ui-id-";
var end;

for (var i = 20; i >= 1; i--) {
  temp = init.concat(i);   
  if (document.getElementById(temp) != null) {        
   if ((document.getElementById(temp).innerHTML == "<span>Misc.</span>" )  ||
       (document.getElementById(temp).innerHTML == "<span>Demos</span>") ||
       (document.getElementById(temp).innerHTML == "<span>Lives</span>") ||
       (document.getElementById(temp).innerHTML == "<span>Main</span>"))        
      {
        end = i;        
        break;
        }
}
}


var start, temp;
for (var i = 1; i <= end; i++) {  
  temp = init.concat(i);   
  if (document.getElementById(temp).innerHTML.indexOf("<span>Complete discography</span>") != -1) {
    start = i;    
    break;
  }
}




// ui-id-7 ... ui-id-11  (helper array)
var myArray = [];
var uiid="ui-id-";
var temp;
var g = 1;
for(var i=start; i <= end; i++){
    temp = uiid.concat(i);
    myArray.push([temp]);     
  }







appendColumn(0);sorting();
  var length = end-start+1;
  
  if (1<=(length)){ var tab1 = document.getElementById(myArray[0]); tab1.addEventListener('click', function(){setTimeout(function () {appendColumn(0);sorting();}, 1000);}, false); }    // added 1 sec=1000msec delay, in order to wait the page to load before calling the function to add the extra column
  if (2<=(length)){ var tab2 = document.getElementById(myArray[1]); tab2.addEventListener('click', function(){setTimeout(function () {appendColumn(1);sorting();}, 1000);}, false); }
  if (3<=(length)){ var tab3 = document.getElementById(myArray[2]); tab3.addEventListener('click', function(){setTimeout(function () {appendColumn(2);sorting();}, 1000);}, false); }
  if (4<=(length)){ var tab4 = document.getElementById(myArray[3]); tab4.addEventListener('click', function(){setTimeout(function () {appendColumn(3);sorting();}, 1000);}, false); }
  if (5<=(length)){ var tab5 = document.getElementById(myArray[4]); tab5.addEventListener('click', function(){setTimeout(function () {appendColumn(4);sorting();}, 1000);}, false); }     
  


// ---------------------------------------------------------------------------------------------------------------------------------------











//  STEP 3: MAKE THE TABLE SORTABLE  (using jQuery and it's plugin "tablesorter")
// ( based on http://mottie.github.io/tablesorter/docs/index.html#Getting-Started & http://stackoverflow.com/a/18867406/3231411 )
// It inserts these two inline scripts in the <HEAD> of the page and includes jquery on this file
function sorting(){

var jq = document.createElement('script');
jq.src = "http://code.jquery.com/jquery-2.1.1.js" ;
document.querySelector('head').appendChild(jq);

jq = document.createElement('script');
jq.src = "https://raw.githubusercontent.com/Mottie/tablesorter/master/js/jquery.tablesorter.min.js" ;
document.querySelector('head').appendChild(jq);

jq.onload = procede; //DON'T TYPE PARENTHESIS


function procede() {        
    $('.display').tablesorter();
  };
}
  
 
  
  
  
}, false);