MediaWiki:CardSelectTr.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
• Opera：按 Ctrl-F5。

// 用于对CardSelectTr表格进行筛选排序
/*
// 筛选按钮表格
{|
! 显示全部
| li.cardSelectOption[data-group="0"][data-option="0|0"]{显示全部}
|-
! 筛选组1 （取并集）
| li.cardSelectOption[data-group="1"][data-option="1|驱逐"]{驱逐}
  li.cardSelectOption[data-group="1"][data-option="1|轻巡"][data-opt="OR"]{轻巡}
|-
! 筛选组2 （取交集）
| li.cardSelectOption[data-group="2"][data-option="2|炮击"][data-opt="AND"]{炮击}
  li.cardSelectOption[data-group="2"][data-option="2|雷击"][data-opt="AND"]{雷击}
|}
// 数据表格
table#CardSelectTr
thead
	tr#CardSelectTabHeader
		td{名称}
		td.headerSort{类型}
		td{分类}
tbody
	tr[data-param1="驱逐"][data-param2="炮击"]{ td{标枪}, td{驱逐}, td{炮击} }
	tr[data-param1="轻巡"][data-param2="炮击,雷击"]{ td{五十铃}, td{轻巡}, td{炮击,雷击} }
*/

function updateFilterData() {}

$(function InitCardSelect() {
	var self = {};
	
	var selectOptions;			//所有筛选按钮
	var filters = {};			//当前筛选规则
	var filterKeys = [];		//所有筛选Key
	var showAll = true;			//不筛选，显示全部
	var tableRows;				//所有要被筛选的行
	var computedRows;			//筛选后的行
	var $sorter;				//当前进行排序的表头
	var sortDesent = false;		//反向排序
	
	function isNil(s) {
		return s === '' || s === undefined || s === null || s === false
	}
	
	//点击筛选按钮时
	function OnSelectOptionClick(e) {
		var $x = e.data;
		e.preventDefault();
		
		var label = '['+$.trim($x.text())+'] 筛选';
		console.time(label);
		
		//显示全部
		if ($x.FilterKey == 0) {
			for (i in selectOptions) {
				selectOptions[i].Select = false;
				selectOptions[i].removeClass('selected');
			}
			filters = {};
			showAll = true;
			
			//更新表格
			self.FilterRows();
			console.timeEnd(label);
			return;
		}
		showAll = false;
		
		var select = !$x.Select;
		$x.Select = select;
		
		//变更筛选状态
		var key = $x.FilterKey;
		filters[key] = filters[key] || {};
		
		var opt = $x.FilterOpt == "AND" ? "AND" : "OR";
		filters[key][opt] = filters[key][opt] || [];
		if (select) {
			filters[key][opt].push($x.FilterValue);
		} else {
			filters[key][opt] = filters[key][opt].filter(function(x) {
				return x !== $x.FilterValue;
			});
			if (filters[key][opt].length < 1) delete filters[key][opt];
		}
		
		
		select ? $x.addClass('selected') : $x.removeClass('selected');
		self.FilterRows();
		console.timeEnd(label);
		
	}
	
	
	function OnHeaderSortClick(e) {
		var $x = e.data;
		e.preventDefault();
		
		var label = '['+$.trim($x.text())+'] 排序';
		console.time(label);
		if ($sorter !== $x) {
			//第一次：新的排序
			$sorter = $x;
			sortDesent = false;
		} else if (!sortDesent) {
			//第二次：切换排序
			sortDesent = true;
		} else {
			//第三次：不进行排序
			$sorter = null;
		}
		
		self.SortRows();
		
		console.timeEnd(label);
	}
	
	//初始化
	self.Init = function () {
		selectOptions = $('.cardSelectOption').toArray().map(function(x) {
			var $x = $(x);
			
			var dataOption = $.trim($x.data('option'));
			var dataGroup = $.trim($x.data('group'));
			
			if (isNil(dataOption) || isNil(dataGroup)) return $x;
			var splt = dataOption.split('|');
			$x.FilterKey = dataGroup;
			$x.FilterValue = $.trim(splt[1]);
			$x.FilterOpt = $.trim($x.data('opt') || 'OR').toUpperCase();
			
			if (filterKeys.indexOf(dataGroup) < 0)
				filterKeys.push(dataGroup);
			
			return $x;
		});
		
		//$head = $('#CardSelectTabHeader');
		updateFilterData = function () {
			var rows = $('#CardSelectTr>tbody>tr').toArray();
			if (rows.length == 0) {
				rows = $('#CardSelectTr .divsort').toArray();
			}
			tableRows = rows.map( function(x) {
				var $x = $(x);
				
				//if (x == $head[0]) continue;
				
				for (i in filterKeys) {
					var key = filterKeys[i];
					var val = x.dataset['param'+key];
					if (val === undefined) continue;
					
					if (typeof val == 'number'){
						val = val.toString(10);
					}
					
					var splt = val.split(',');
					for (j in splt) {
						var s = $.trim(splt[j]);
						if (!isNil(s)) {
							$x.FilterData = $x.FilterData || {};
							$x.FilterData[key] = $x.FilterData[key] || [];
							$x.FilterData[key].push(s);
						}
					}
					if($x.FilterData[key] === undefined) {
						$x.FilterData[key] = ['0'];
					}
				}
				
				return $x;
			});
		}
		
		updateFilterData();
		
		//computedRows = tableRows.concat([]);
		
		$('#CardSelectTr>thead>tr>th.dataHeader').each(function(index, x) {
			var $x = $(x);
			$x.off('click').off('mousedown');
			
			if ($x.hasClass('headerSort')) {
				$x.Index = index;
				//$x.SortKey = $x.data('group');
				$x.click($x, OnHeaderSortClick);
			}
		});

		for (i in selectOptions) {
			selectOptions[i].click(selectOptions[i], OnSelectOptionClick);
		}
		
	}
	
	//t1中包含t2中所有项
	function includeAll(t1, t2) {
		for (i in t2) {
			if (t1.indexOf(t2[i]) < 0) return false;
		}
		return true;
	}
	//t1中包含t2中的任一项
	function includeAny(t1, t2) {
		if (t2.length == 0) return true;
		for (i in t2) {
			if (t1.indexOf(t2[i]) > -1) return true;
		}
		return false;
	}
	
	
	//使用show/hide来显示表格行
	self.FilterRows = function() {
		if (showAll) {
			filters = {};
		}
		
		$('#CardSelectTr>tbody').hide();
		
		for (var idx in tableRows) {
			var $x = tableRows[idx];
			var data = $x.FilterData;
			var hide = false;
			
			for (key in filters) {
				hide = !data || !data[key];
				
				if (!hide && filters[key]['AND']) {
					hide = !includeAll(data[key],filters[key]['AND']);
				}
				if (!hide && filters[key]['OR']) {
					hide = !includeAny(data[key],filters[key]['OR']);
				}
				if (hide) break;
			}
			
			if (!$x.Hide || (!hide != !$x.Hide)) {
				$x.Hide = hide;
				hide ? $x.hide() : $x.show();
			}
		}
		
		
		$('#CardSelectTr .headerSort').removeClass('headerSortDown headerSortUp');
		$('#CardSelectTr>tbody').show();
		$sorter = null;
	}
	
	
	function grabSortData($tr, index) {
		$tr.SortData = $tr.SortData || [];
		if ($tr.SortData[index] !== undefined) return $tr.SortData[index];
		
		var td = $tr.children('td')[index];
		if (!td) {
			$tr.SortData[index] = -1;
			return -1;
		}
		
		var text = $.trim(td.textContent);
		if (text.endsWith("s/轮")) {
			text = text.substring(0, text.length-3)
		}
		$tr.SortData[index] = text;
		return text;
	}
	
	//对行排序，不显示的行会被移除
	self.SortRows = function() {
		
		//var residues = [];
		
		if (!$sorter) {
			computedRows = tableRows.filter(function($x) { return !$x.Hide; });
			$('#CardSelectTr .headerSort').removeClass('headerSortDown headerSortUp');
		}
		else if (!sortDesent) {
			var index = $sorter.Index;
			computedRows = tableRows.filter(function($x) { return !$x.Hide; });
			computedRows.sort(function compareFunction($x, $y) {
				var x = grabSortData($x, index);
				var y = grabSortData($y, index);
				var nx = + x;
				var ny = + y;
				
				return (isNaN(nx) || isNaN(ny)) 
						? isNaN(nx) && isNaN(ny) 
							? x < y ? -1 : 1
							: isNaN(nx) ? 1 : -1	//字符串排后
						: nx === ny
							? 0
							: nx < ny ? -1 : 1;		//数值小的排前
				//console.log (`${x} ~ ${y} => ${ret}`);
				//return ret;
			});
			$('#CardSelectTr .headerSort').removeClass('headerSortDown headerSortUp');
			$sorter.addClass('headerSortDown');
			
		}
		else {
			computedRows.reverse();
			$('#CardSelectTr .headerSort').removeClass('headerSortDown headerSortUp');
			$sorter.addClass('headerSortUp');
		}
		
		$('#CardSelectTr>tbody').hide()
			.prepend(computedRows)
			.show();
	}
	
	
	$('.cardSelectOption').off('click').off('mousedown');

	if ($('#CardSelectTabHeader').parent().is('tbody')){
		$('#CardSelectTr').prepend( $('<thead/>').append($('#CardSelectTabHeader')));
	}
	if ($('#CardSelectTabHeader1').parent().is('tbody')){
		$('#CardSelectTr>thead').append($('#CardSelectTabHeader1'));
	}
	
	self.Init();
	
	console.log('CardSelectTr.js Initialized.');
	return self;
});