MediaWiki:Gadget-Filterable.js

/* experimental filterable table function */
(function(mw, $) {
    'use strict';
    var filterIdCounter = 0;
    var filterButtons = [];
    var filterInputs = [];
    var fb = new AttrData('filterable');
    var fbh = new AttrData('filterable-head');
    var fbb = new AttrData('filterable-button');
    var fbi = new AttrData('filterable-input');
    var fbig = new AttrData('filterable-input-group');
    function AttrData(name) {
        this.name = name;
        this.classSelector = '.' + name;
        this.activeClass = name + '-active';
        this.idPrefix = name + '-';
        this.idSelectorPrefix = '#' + name + '-';
    }
    function FilterButton($filterHead, filterid) {
        this.id = filterid;
        var $filterbutton = $('<span title="筛选" id="' + fbb.idPrefix + this.id + '" class="' + fbb.name + '"><i class="fa fa-filter" aria-hidden="true"></i></span>');
        $filterHead.append($filterbutton);
        $filterbutton.click(this.id, function(event) {
            event.stopPropagation();
            var filterinputid = $(this).attr('id').replace(fbb.idPrefix, fbi.idPrefix);
            for (var i = 0; i <= filterIdCounter; i++) {
                if (fbi.idPrefix + i === filterinputid) {
                    continue;
                }
                if ($(fbi.idSelectorPrefix + i).css('display') !== 'none') {
                    $(fbi.idSelectorPrefix + i).fadeToggle();
                }
            }
            $('#' + filterinputid).fadeToggle(200);
            updateFilterableInputPosition(event.data);
        });
    }
    function FilterInput(filterid) {
        this.id = filterid;
        var index = $(fbb.idSelectorPrefix + filterid).parent('th,td').index();
        var filterItems = new Set();
        var filterInputItemsPart = '';
        $(fbb.idSelectorPrefix + filterid).parent('td,th').parent('tr').parent('thead,tbody,tfoot').parent(fb.classSelector).children('tbody').children('tr').each(function() {
            if ($(this).children('td,th').eq(index).text() && !$(this).children('td,th').eq(index).hasClass(fbh.name)) {
                filterItems.add($(this).children('td,th').eq(index).text());
            }
        });
        if (filterItems.size > 0) {
            filterInputItemsPart += '<li role="separator"class="divider"></li><li class="dropdown-header">项目筛选：</li><li class="dropdown-content"><div class="btn-group btn-group-justified"role="group"><div class="btn-group btn-group-sm"role="group"><button type="button"class="btn btn-success checkbox-select-all">全选</button></div><div class="btn-group btn-group-sm"role="group"><button type="button"class="btn btn-warning checkbox-clear-all">全清</button></div></div></li><li class="dropdown-content"><div class="checkbox-group list-group">';
            filterItems.forEach(function(value) {
                filterInputItemsPart += '<div class="list-group-item"><input type="checkbox" checked="true" value="' + value + '" /><span title="' + value + '">' + value + '</span></div>';
            });
            filterInputItemsPart += '</div></li>'
        }
        var $filterinput = $('<ul id="' + fbi.idPrefix + filterid + '"class="' + fbig.name + ' dropdown-menu"><li class="dropdown-header">字段筛选：</li><li class="dropdown-content"><div class="input-group input-group-sm"><input type="text"class="' + fbi.name + ' form-control"placeholder="输入筛选字段"/><span class="input-group-btn"><button class="btn btn-warning btn-sm"type="button">清除</button></span></div></li>' + filterInputItemsPart + '</ul>');
        $(document.body).append($filterinput);
        $filterinput.find('.input-group input').keyup(function(event) {
            var filterid = $(this).parent('.input-group').parent('.dropdown-content').parent(fbig.classSelector).attr('id').match(/[0-9]+/);
            updateFilterButtonState(filterid);
            filterTable($(fbb.idSelectorPrefix + filterid).parent('td,th').parent('tr').parent('thead,tbody,tfoot').parent(fb.classSelector));
        });
        $filterinput.click(function(event) {
            event.stopPropagation();
        });
        $filterinput.find('.input-group-btn').click(function(event) {
            var filterid = $(this).parent('.input-group').parent('.dropdown-content').parent(fbig.classSelector).attr('id').match(/[0-9]+/);
            $(this).prev().val('');
            updateFilterButtonState(filterid);
            filterTable($(fbb.idSelectorPrefix + filterid).parent('td,th').parent('tr').parent('thead,tbody,tfoot').parent(fb.classSelector));
        });
        $filterinput.find('.checkbox-group input').click(function(event) {
            var filterid = $(this).parent('.list-group-item').parent('.checkbox-group').parent('.dropdown-content').parent(fbig.classSelector).attr('id').match(/[0-9]+/);
            updateFilterButtonState(filterid);
            filterTable($(fbb.idSelectorPrefix + filterid).parent('td,th').parent('tr').parent('thead,tbody,tfoot').parent(fb.classSelector));
        });
        $filterinput.find('.checkbox-select-all').click(function(event) {
            var filterid = $(this).parent('.btn-group').parent('.btn-group').parent('.dropdown-content').parent(fbig.classSelector).attr('id').match(/[0-9]+/);
            $(fbi.idSelectorPrefix + filterid + ' .checkbox-group input').prop('checked', true);
            updateFilterButtonState(filterid);
            filterTable($(fbb.idSelectorPrefix + filterid).parent('td,th').parent('tr').parent('thead,tbody,tfoot').parent(fb.classSelector));
        });
        $filterinput.find('.checkbox-clear-all').click(function(event) {
            var filterid = $(this).parent('.btn-group').parent('.btn-group').parent('.dropdown-content').parent(fbig.classSelector).attr('id').match(/[0-9]+/);
            $(fbi.idSelectorPrefix + filterid + ' .checkbox-group input').prop('checked', false);
            updateFilterButtonState(filterid);
            filterTable($(fbb.idSelectorPrefix + filterid).parent('td,th').parent('tr').parent('thead,tbody,tfoot').parent(fb.classSelector));
        });
    }
    function updateFilterButtonState(id) {
        var keyword = $(fbi.idSelectorPrefix + id + ' .input-group input').val();
        var items = $(fbi.idSelectorPrefix + id + ' .checkbox-group input:not(:checked)');
        if (keyword || items.length) {
            $(fbb.idSelectorPrefix + id).addClass(fbb.activeClass);
        } else {
            $(fbb.idSelectorPrefix + id).removeClass(fbb.activeClass);
        }
    }
    function setupFilterable($filterable) {
        $filterable.children('thead,tbody,tfoot').children('tr').children(fbh.classSelector).each(function() {
            filterButtons.push(new FilterButton($(this),filterIdCounter));
            filterInputs.push(new FilterInput(filterIdCounter));
            filterIdCounter++;
        });
    }
    function updateFilterableInputPosition(id) {
        var $filterinput = $(fbi.idSelectorPrefix + id);
        var $filtericon = $(fbb.idSelectorPrefix + id);
        var offset = $filtericon.offset();
        var top = offset.top + $filtericon.height();
        var left = offset.left - ($filterinput.width() / 2);
        var right = left + $filterinput.width();
        var bottom = top + $filterinput.height();
        if (left < 0) {
            left = 0;
        } else if (right > $(document).width()) {
            left = $(document).width() - $filterinput.width();
        }
        if (bottom > $(document).height()) {
            top = $(document).height() - $filterinput.height();
        }
        $filterinput.offset({
            top: top,
            left: left,
        });
    }
    function filterTable($filterabletable) {
        if (window.filterTimeoutId) {
            window.clearTimeout(window.filterTimeoutId);
            window.filterTimeoutId = null ;
        }
        window.filterTimeoutId = window.setTimeout(function() {
            var filters = {};
            $filterabletable.children('thead,tbody,tfoot').children('tr').children('th,td').children(fbb.classSelector).each(function() {
                var index = $(this).parent('th,td').index();
                filters[index] = {};
                var $filterInput = $('#' + $(this).attr('id').replace(fbb.idPrefix, fbi.idPrefix));
                filters[index].items = [];
                $filterInput.find('.checkbox-group input:not(:checked)').each(function() {
                    filters[index].items.push($(this).val());
                });
                filters[index].keyword = $filterInput.find('.input-group input').val().replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
            });
            $filterabletable.children('tbody').children('tr').each(function() {
                for (var col in filters) {
                    if (filters.hasOwnProperty(col)) {
                        var $cell = $(this).children('td,th').eq(col);
                        if ($cell.length === 0) {
                        	console.log('Filterable: Cannot find target cell(colspan?), skipping...')
                        	return;
                        }
                        if ($cell.hasClass(fbh.name)) {
                            return;
                        }
                        var keywordRegex = new RegExp(filters[col].keyword,'i');
                        if (!keywordRegex.test($cell.text())) {
                            $(this).hide();
                            return;
                        }
                        for (var item in filters[col].items) {
                            if (filters[col].items[item] == $cell.text()) {
                                $(this).hide();
                                return;
                            }
                        }
                    }
                }
                $(this).show();
            });
        }, 500);
    }
    $(document).ready(function() {
        if ($(fb.classSelector).length === 0) {
            return;
        }
        console.log('Filterable: Loading module...');
        $(fb.classSelector).each(function() {
        	if ($(this).prop('tagName') !== 'TABLE') {
        		console.log('Filterable: Invalid tag found, skipping...');
        		return;
        	}
            setupFilterable($(this));
        });
        
        $(window).resize(function(event) {
            for (var i = 0; i <= filterIdCounter; i++) {
                updateFilterableInputPosition(i);
            }
        });
        $(window).click(function() {
            for (var i = 0; i <= filterIdCounter; i++) {
                if ($(fbi.idSelectorPrefix + i).css('display') !== 'none') {
                    $(fbi.idSelectorPrefix + i).fadeToggle();
                }
            }
        });
    });
}(mediaWiki, jQuery));