User:Magnus Manske/intercat.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/*
USAGE : Add the following line to your [[Special:Mypage/common.js|common.js page]]:
importScript('User:Magnus Manske/intercat.js');

Then, add category intersection tags to pages, like:
<div class='intercat'>American men|American writers</div>
or, to auto-open the first 100, like:
<div class='intercat_open'>American men|American writers</div>
You can add as many categories as you want, separated by "|".
*/

var intercat = {
	e : [] ,
	max : 100 ,
	columns : 4 ,
	
	init : function () {
		var me = this ;
		me.page = mw.config.get('wgPageName') ;
		me.server = mw.config.get('wgServer').match ( /^\/*([^.]+)\.([^.]+)/ ) ;
		$('div.intercat,div.intercat_open').each ( function () {
			var o = $(this) ;
			var cats = o.text().split('|') ;
			var h = "<div>Intersection of " ;
			$.each ( cats , function ( k , v ) {
				if ( k > 0 ) h += " &times; " ;
				h += "<a href='/wiki/" + escape ( v.replace(/ /g,'_') ) + "'>" + v.replace(/_/g,' ') + "</a> " ;
			} ) ;
			h += " | <span class='intercat_sh'><a href='#'>Show</a></span>" ;
			h += "<span class='intercat_loading' style='margin-left:20px;display:none'><i>Loading...</i></span>" ;
			h += "</div><div class='intercat_display' style='display:none'></div>" ;
			o.html ( h ) . css ( { border:'1px solid #DDDDDD' , padding:'2px' } ) ;
			var display = $(o.find('div.intercat_display')) ;
			var my_e = me.e.length ;
			me.e.push ( { o:o , cats:cats , loaded:{} , data:{} , offset:0 } ) ;
			$(o.find('span.intercat_sh a')).click ( function () {
				var h = display.is(':visible') ? 'Show' : 'Hide' ;
				$(this).text ( h ) ;
				display.toggle() ;
				if ( display.is(':visible') ) me.show ( my_e ) ;
				return false ;
			} ) ;
		} ) ;
		$.each ( me.e , function ( my_e , v ) {
			if ( v.o.hasClass('intercat_open') ) {
				$(v.o.find('span.intercat_sh a')).click() ;
			}
		} ) ;
	} ,
	
	load : function ( my_e ) {
		var me = this ;
		$(me.e[my_e].o.find('.intercat_loading')).show() ;
		$.getJSON ( '//tools.wmflabs.org/catscan2/quick_intersection.php?callback=?' , {
			lang:me.server[1] ,
			project:me.server[2] ,
			cats:me.e[my_e].cats.join("\n") ,
			start:me.e[my_e].offset ,
			ns:0,
			format:'json',
			max:me.max
		} , function ( d ) {
			me.e[my_e].data[me.e[my_e].offset] = d.pages ;
			me.e[my_e].loaded[me.e[my_e].offset] = d.pages.length ;
			$(me.e[my_e].o.find('.intercat_loading')).hide() ;
			me.show ( my_e ) ;
		} ) ;
	} ,
	
	getRangeLink : function ( my_e , offset ) {
		var me = this ;
		if ( me.e[my_e].offset == offset ) return "<b>" + (offset+1) + "&mdash;" + (offset+me.max) + "</b>" ;
		return "<a href='#' onclick='intercat.e["+my_e+"].offset="+offset+";intercat.show("+my_e+");return false;'>" + (offset+1) + "&mdash;" + (offset+me.max) + "</a>" ;
	} ,
	
	show : function ( my_e ) {
		var me = this ;
		var off = me.e[my_e].offset ;
		if ( undefined === me.e[my_e].loaded[off] ) return me.load  ( my_e ) ;

		var navbar = [] ;
		for ( var p = 0 ; p < off ; p += me.max ) {
			navbar.push ( me.getRangeLink ( my_e , p ) ) ;
		}
		navbar.push ( me.getRangeLink ( my_e , off ) ) ;
		if ( me.e[my_e].data[off].length == me.max ) {
			navbar.push ( me.getRangeLink ( my_e , off+me.max ) ) ;
			navbar.push ( '...' ) ;
		}
		
		var h = '' ;
		h += "<div style='border-bottom:1px solid #DDDDDD;'>" + navbar.join(" | ") + "</div>" ; ;
		h += "<ol style='-moz-column-count:"+me.columns+";-webkit-column-count:"+me.columns+";column-count:"+me.columns+";list-style-position: inside;' start='" + (off+1) + "'>" ;
		$.each ( me.e[my_e].data[off] , function ( k , v ) {
			h += "<li><a href='/wiki/" + v.page_title + "'>" ;
			h += v.page_title.replace(/_/g,' ') ;
			h += "</a></li>" ;
		} ) ;
		h += "</ol>" ;
		h += "<div style='border-top:1px solid #DDDDDD;'>" + navbar.join(" | ") + "</div>" ; ;
		
		$(me.e[my_e].o.find('div.intercat_display')).html ( h ) ;
	} ,
	
	the_end : ''
} ;

$ ( function() {
	if ( mw.config.get('wgAction') != 'view' ) return ;
	intercat.init() ;
} ) ;