MediaWiki:Gadget-heroList.js

/* Author:      Karol "[[User:Nanaki]]" Dylewski */
/* Modified By: arrows
/*License:      CC-BY-SA 3.0 */
heroGridContainer = '#hero-grid';
heroGridFilters = {
    'search': 'search',
    'range' : ['All Range Types',
        ['melee', 'Melee'],
        ['ranged', 'Ranged']
    ],
    'difficulty' : ['All Difficulties',
        ['beginner', 'Beginner'],
        ['advanced', 'Advanced'],
        ['expert', 'Expert']
    ],
    'role' : ['All Roles',
        ['midlane', 'Midlane'],
        ['offlane', 'Offlane'],
        ['support', 'Support'],
        ['carry', 'Carry'],
        ['jungle', 'Jungle']
    ]
    
};

( function( $ ) {
	function heroGridFiltering() {
		var heroGrid = $(heroGridContainer)
		if(!heroGrid.length) return
		if(!heroGridFilteringSwitches()) return
 
		window.heroGridElements = []
		heroGrid.find('.module-heroes__icon').each(function() {
			var obj = {}
			var elem = $(this)
			obj['*'] = elem
            for(x in heroGridFilters) {
                var data = elem.data(x);
                if (typeof data ==='string') {
                    obj[x] = data.split(',');
                    for(var y=0;y<obj[x].length;y++) {
                        obj[x][y] = obj[x][y].replace(/^\s+|\s+$/g, '').toLowerCase();
                    }
                } else {
                    obj[x] = [];
                }
            }
			window.heroGridElements.push(obj)
		})
	}
 
	function heroGridFilteringSwitches() {
		var flag = false
		for(x in heroGridFilters) {
			var container = $('#hero-grid-filter-'+x)
			if(!container.length) continue
			flag = true
 
			if(heroGridFilters[x] == 'search') {
				var field = $('<input type="text" placeholder="Search..." />').appendTo(container).attr('id', container.attr('id')+'-field').data('type', 'search')
 
				field.keyup(function() {
					heroGridFilteringApply()
					if(window.heroGridFiltersTimeout) window.clearTimeout(window.heroGridFiltersTimeout)
					window.heroGridFiltersTimeout = window.setTimeout(heroGridFilteringClear, 120000)
				})
			} else if(heroGridFilters[x] instanceof Array) {
				var field = $('<select></select>').appendTo(container).attr('id', container.attr('id')+'-field').data('type', 'select')
				$('<option></option>').appendTo(field).attr('value', '').html(heroGridFilters[x][0])
				for(var y=1;y<heroGridFilters[x].length;y++) {
					$('<option></option>').appendTo(field).attr('value', heroGridFilters[x][y][0]).html(heroGridFilters[x][y][1])
				}
				field.val('')
 
				field.change(function() {
					heroGridFilteringApply()
					if(window.heroGridFiltersTimeout) window.clearTimeout(window.heroGridFiltersTimeout)
					window.heroGridFiltersTimeout = window.setTimeout(heroGridFilteringClear, 120000)
				})
			}
		}
		return flag
	}
	function heroGridFilteringClear() {
		for(x in heroGridFilters) {
			$('#hero-grid-filter-'+x+'-field').val('')
		}
		heroGridFilteringApply()
	}
	function heroGridFilteringApply() {
		for(var x=0;x<heroGridElements.length;x++) {
			var elem = $(heroGridElements[x]['*'])
			var active = true
			for(y in heroGridFilters) {
				var field = $('#hero-grid-filter-'+y+'-field')
 
				var value = field.val().toLowerCase()
				if(value == '') continue;
 
				var type = field.data('type')
				if(type == 'search') {
					var rx = new RegExp('^.*?(' + value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&") + ').*?$','i');
					var flag = rx.test(heroGridElements[x][y].join(', '))
					if(!flag) active = false
				} else if(type == 'select') {
					if(heroGridElements[x][y].indexOf(value) == -1) active = false
				}
			}
			if(active) heroGridFilteringShow(elem)
			else heroGridFilteringHide(elem)
		}
	}
	function heroGridFilteringHide(elem) {
		$(elem).stop(true);
		$(elem).fadeTo(200, 0.1);
	}
	function heroGridFilteringShow(elem) {
		$(elem).stop(true);
		$(elem).fadeTo(200, 1);
	}
	$( heroGridFiltering )
} )( jQuery );