MediaWiki:Common.js

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */

function templateResourceLoader() {
	$('.resourceLoader').each(function() {
		var $x = $(this);
		var text = $.trim($x.text());
		
		if (!text) return;
		
		//加载模块
		if ($x.data('isModule') == true) 
			return mw.loader.load(text);	
		
		//自动补充MediaWiki命名空间
		var ns = text.match('^.*?:');
		if (!ns) text = 'MediaWiki:' + text;
		
		//加载CSS样式表
		var mime = ($x.data('mime') || "text/javascript").toLowerCase();
		if (mime == "text/css") {
			if (text.slice(-4).toLowerCase() !== '.css') text = text + '.css';
			//if ($x.data('debug') !== true) text = text + '&debug=false';
			return mw.loader.load("//wiki.17173.com/hs/index.php?title="+text+"&action=raw&ctype=text/css", "text/css");
		}
		
		//加载JS脚本
		if (ns && ns[0].toLowerCase() !== 'mediawiki:') {
			return console.log('ResourceLoader: 不允许加载MediaWiki以外的js脚本');
		}
		if (text.slice(-3).toLowerCase() !== '.js') text = text + '.js';
		//加载ES6模块
		if ($x.data('isModuleEs6') == true) 
			return loadModuleES6("//wiki.17173.com/hs/index.php?title="+text+"&action=raw&ctype=text/javascript", function() {
				console.log("ResourceLoader: 加载ES6模块 => " + text);
			});
		//加载React模块
		if ($x.data('isModuleReact')) {
			if ($x.data('isModuleReact')[0]) {
			    $.getScript("//wiki.17173.com/hs/index.php?title=MediaWiki:React.development.min.js&action=raw&ctype=text/javascript", function() {
					$.getScript("//wiki.17173.com/hs/index.php?title=MediaWiki:React-dom.development.min.js&action=raw&ctype=text/javascript", function() {
						console.log("ReactENV => React/ReactDOM Loaded! React is Available For This Page!");
						console.log("%c React开发提示 %c 请务必在JS编辑界面右下角使用React同步器同步编译你的JSX代码，否则它将不起任何作用", "color: #fff; padding: 5px 0; background: blue;", "padding: 5px 5px 5px 0; background: #e5e5ff; color:blue");
			    		$('.resourceLoader').each(function() {
							var $xr = $(this);
							var textr = $.trim($xr.text());
							if (!textr) return;
							//自动为React模块补充MediaWiki命名空间与-babel后缀
							var nsr = textr.match('^.*?:');
							if (!nsr) textr = 'MediaWiki:' + textr.slice(0, -3);
							textr += '-babel.js';
							if ($xr.data('isModuleReact') && $xr.data('isModuleReact')[1]) {
								loadModuleES6("//wiki.17173.com/hs/index.php?title="+textr+"&action=raw&ctype=text/javascript", function() {
									console.log("ResourceLoader: 加载React模块 => " + textr);
								});
							}
						});
					});
			    });
				return;
			}
		}
		//加载普通脚本
		console.log('ResourceLoader: 加载JS => ' + text);
		//if ($x.data('debug') !== true) text = text + '&debug=false';
		return mw.loader.load("//wiki.17173.com/hs/index.php?title="+text+"&action=raw&ctype=text/javascript", "text/javascript");
	});
}

if (document.readyState == 'loading') {
	document.addEventListener('DOMContentLoaded', templateResourceLoader);
} else {
	templateResourceLoader();
}

//加载ES6模块
function loadModuleES6(src, callback) {
	var script = document.createElement('script'),
	head = document.getElementsByTagName('head')[0];
	script.type = 'module';
	script.charset = 'UTF-8';
	script.src = src;
	if (script.addEventListener) {
			script.addEventListener('load', function () {
			callback();
		}, false);
	} else if (script.attachEvent) {
		script.attachEvent('onreadystatechange', function () {
			var target = window.event.srcElement;
			if (target.readyState == 'loaded') {
				callback();
			}
		});
	}
	head.appendChild(script);
}

$(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 (var 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);

                $x.click($x, OnSelectOptionClick);

                return $x;
            });

        //$head = $('#CardSelectTabHeader');

        tableRows = $("#CardSelectTr>tbody>tr")
            .toArray()
            .map(function (x) {
                var $x = $(x);

                //if (x == $head[0]) continue;

                for (var i in filterKeys) {
                    var key = filterKeys[i];
                    var val = $x.data("param" + key);
                    if (val === undefined) continue;

                    if (typeof val == "number") {
                        val = val.toString(10);
                    }

                    var splt = val.split(",");
                    for (var 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);
                        }
                    }
                }

                return $x;
            });

        //computedRows = tableRows.concat([]);

        $("#CardSelectTr>thead>tr>th").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);
            }
        });
    };

    //t1中包含t2中所有项
    function includeAll(t1, t2) {
        for (var 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 (var 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 (var 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 (!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);
        $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")));
    }

    self.Init();

    console.log("CardSelectTr.js Initialized.");
    return self;
});