Metal Archives discography pages - Reviews column split and sortable tables

Splits the Reviews column into Reviews(count) and Ratings and makes the tables in all discography tabs sortable.

// ==UserScript==
// @name        Metal Archives discography pages - Reviews column split and sortable tables
// @namespace   darkred
// @version     2.1.0
// @date        2020.9.20
// @description Splits the Reviews column into Reviews(count) and Ratings and makes the tables in all discography tabs sortable.
// @author      RobG, Brock Adams, Mottie, darkred
// @license     MIT
// @include     /^https?:\/\/www\.metal-archives\.com/bands?/.*$/
// @grant       GM_addStyle
// @require     https://code.jquery.com/jquery-3.5.1.min.js
// @require     https://greasyfork.org/scripts/12036-mutation-summary/code/Mutation%20Summary.js
// @require     https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js
// @require     https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.widgets.min.js
// @require     https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/extras/jquery.tablesorter.pager.min.js
//
// This userscript uses jQuery v1.11.1,
// the jQuery plugin 'tablesorter' (forked by Rob Garrison (Mottie)) http://mottie.github.io/tablesorter/docs/index.html ,
// and the JavaScript library 'Mutation Summary' (https://github.com/rafaelw/mutation-summary) (by Rafael Weinstein).
//
// Thanks a lot for the invaluable help to RobG, Mottie and especially Brock Adams.
//
// @supportURL  https://github.com/darkred/Userscripts/issues
// ==/UserScript==


/* global MutationSummary */

// CSS rules in order to show 'up' and 'down' arrows in each table header
var stylesheet = `
<style>
thead th {
	background-repeat: no-repeat;
	background-position: right center;
}
thead th.up {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
thead th.down {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}
.discog th:nth-last-child(2){
	width: 38px;
}
.discog th:nth-last-child(1){
	width: 35px;
}
.tablesorter .filtered {
	display: none;
}



/* All of the following css is already contained within each theme file; modify it as desired */
/* filter row */
.tablesorter-filter-row td {
	background: #000;
  line-height: normal;
  text-align: center; /* center the input */
  -webkit-transition: line-height 0.1s ease;
  -moz-transition: line-height 0.1s ease;
  -o-transition: line-height 0.1s ease;
  transition: line-height 0.1s ease;
}
/* optional disabled input styling */
.tablesorter-filter-row .disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: not-allowed;
}

/* hidden filter row */
.tablesorter-filter-row.hideme td {
  /*** *********************************************** ***/
  /*** change this padding to modify the thickness     ***/
  /*** of the closed filter row (height = padding x 2) ***/
  padding: 2px;
  /*** *********************************************** ***/
  margin: 0;
  line-height: 0;
  cursor: pointer;
}
.tablesorter-filter-row.hideme * {
  height: 1px;
  min-height: 0;
  border: 0;
  padding: 0;
  margin: 0;
  /* don't use visibility: hidden because it disables tabbing */
  opacity: 0;
  filter: alpha(opacity=0);
}
/* filters */
.tablesorter-filter {
  width: 95%;
  height: inherit;
  margin: 4px;
  padding: 4px;
  background-color: #1b0b0b;
  color: #c2b8af;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: height 0.1s ease;
  -moz-transition: height 0.1s ease;
  -o-transition: height 0.1s ease;
  transition: height 0.1s ease;
}

</style>`;

$('head').append(stylesheet);





function appendColumn(jNode) {

	// STEP 1+2: SPLIT THE 'REVIEWS' COLUMN INTO A 'REVIEWS' COLUMN AND A 'RATINGS' COLUMN
	var tbl = jNode[0];     // table reference


	// If you have logged in (therefore the column 'Tools' exists in the discography table)
	if (document.getElementsByClassName('member_name').length >0){
		tbl.rows[0].cells[1].width = '45%';            // In order the column 'Name'(it's the 2nd) to have enough(in fact fixed) width
	} else {
		tbl.rows[0].cells[0].width = '53%';           // In order the column 'Name'(it's the 1nd) to have enough(in fact fixed) width
	}



	// If the current sub-table has no data, then stop the execution of the function
	if (tbl.rows[1].cells[0].innerHTML === '<em>Nothing entered yet. Please add the releases, if applicable. </em>') {
		return;
	}

	var newCell;

	const cols = tbl.rows[0].cells.length - 1;

	var tr = tbl.tHead.children[0],
		th = document.createElement('th');

	th.innerHTML = 'Ratings';
	th.className = 'ratingsCol';
	tr.appendChild(th);

	for (var i = 1; i < tbl.rows.length; i++) {
		var k = tbl.rows[i].cells[cols].innerHTML;    // Retrieve the content of the current cell of the Review column and store it to variable k


		var re1 = /<a [^>]*>[^(]*[(]([^)]+)/ ;        // (RegEx which matches the 'Ratings' percentage(incl.the % symbol)
		var l = re1.exec(k);                          // (Execute the RegEx and store it to variable l)

		newCell = tbl.rows[i].insertCell(-1);     // Add a new cell (for the new 'Ratings' column ) -for each row-

		if (re1.test(k)){                    // If the RegEx has matches, (only) then create new cells with...

			var re0 = /(<a [^>]*>)[0-9]*[^(]/ ;       // (RegEx which matches the reviews URL)
			var url = re0.exec(k);                    // (Execute the RegEx and store it to variable url)

			newCell.innerHTML = url[1] + l[1] + '</url>'; // ...the Ratings percentage (which is also a link to the Reviews)...


			var re2 = /<a [^>]*>([0-9]*)[^(]/ ;       // (RegEx which matches the 'Reviews' number)
			var m = re2.exec(k);                      // (Execute the RegEx and store it to variable m)

			newCell = tbl.rows[i].cells[cols];
			newCell.innerHTML = url[1] + m[1] + '</url>'; // ...and the Reviews number (which is also a link to the Reviews)
		}
	}


	// TODO: are you login? Then header0: sorter: false
	let login;
	// if login form doesn't exist (=you have login), then disable sorting (NOT filtering too) on column 0 ("Edit/Tools")
	$('#login_form > div > button').length === 0 ? login = false : login = true;

	//  STEP 3: MAKE THE DISCOGRAPHY TABLE SORTABLE  (using the jQuery plugin "tablesorter")
	$(tbl).tablesorter ( {
		cssAsc: 'up',
		cssDesc: 'down',
		headers: {
			// 0: {sorter: false}
			0: { sorter: login,
				filter: login}
		},
		widgets: ['filter'],
		ignoreCase: true,
		widgetOptions : {
			filter_hideFilters : true,
		},
	} );
}


function handleDiscographyChanges (muteSummaries) {
	var mSummary    = muteSummaries[0];
	if (mSummary.added.length) {
		appendColumn ( $(mSummary.added[0]) );
	}
}


new MutationSummary ( {
	callback: handleDiscographyChanges,
	rootNode: $('#band_disco')[0],
	queries: [ {element: '.discog'} ]
} );