User:Ketil3/recuGall2.js

// recuGall2.js.  
//      adds a button for showing subcat images
//      adds a button for opening up subcats

var maxImgPerCat=50; // never load more from each subcat
var hideImages = true; // whether to hide images (or not)

function extractImages (response) {
	var t = ""; // to return
	if (response.query === undefined) { return "(no images)"; } // skip if empty
	var subpages = response.query.pages; // when using generator=
	var imgcount = 0;
	for (var x in subpages) {
		var page = subpages[x];
		if ( page.ns != 6) { continue; } // only interested in images (ns 6)
		var imgtitle = page.title;
		//mylog (imgtitle ); mylog (page);
		if ( page.imageinfo === undefined) { continue; } // old images cant be scaled so imageinfo is not included in repy ...
		imgcount++;
		if ( imgcount > maxImgPerCat) { break; } // stop adding images, so break (not continue))
		var imgthumb = page.imageinfo[0].thumburl;
		t +=  "<img src='" + imgthumb + "'/>";   // " (Image:" + imgtitle + ")";
//		mylog (imgtitle + ": " + imgthumb);
	}
	return t;
} 

function getImages (title, place) {		
	var urlprefix = "https://commons.wikimedia.org";
	var ajaxcall = $.ajax({	
		// url: urlprefix + "/w/api.php?action=query&list=categorymembers&cmtitle=" + encodeURI(title) + "&cmlimit=500&cmnamespace=6&format=json", //ns=6 for image
		context: { "title": title, "place": place }, // becomes "this" when response has arrived (in the "success" function, see below)
		//url: urlprefix + "/w/api.php?action=query&generator=categorymembers&gcmtitle=" + encodeURI(title) + "&gcmlimit=500&prop=imageinfo&iiprop=url&iiurlheight=120&format=json", 
		url: urlprefix + "/w/api.php?action=query&generator=categorymembers&gcmtitle=" + title + "&gcmlimit=500&prop=imageinfo&iiprop=url&iiurlheight=80&format=json", 
		success: function( response ) { 
			console.log ("getImages done for: " + this.title);
			this.place.html (extractImages (response));
//			this.place.toggle();
		}
	});
}
var myName = "recuGall";
var myPlace = '#'+myName;
var myButton = myName + 'ToggleBtn';
var myClass = "catImages";
var subcatPlace = "#mw-subcategories"; // where WP puts all subcategories in the document

function checkGallery() {	
	$(".CategoryTreeSection:not([hasimages])").each( function( index ) {	
		$(this).attr("hasImages", "yes");
		$(this).after("<div style='border: thin solid black' class='" + myClass + "'>" + "(waiting for images...)" + "</div>"); // make a place for the images
		getImages ("Category:" + $(this).find("a").text(),  $(this).next() );        // get category images into this new place (next)
	});
}
function toggleGallery () { 
	checkGallery();  // will initiate data collection for subcategories without images
	if (hideImages)	$("."+myClass).show(); // if first time, this toggle() will run BEFORE any of the images are collected
	else $("."+myClass).hide();
	hideImages = !hideImages;
}

function openallCats() {
  $( '.CategoryTreeToggle' ).click(); // the clickable arrow has class "CategoryTreeToggle"
}

function insertButtons () {
    // set where buttons will appear:
    $("#mw-subcategories p").append("<span id='myButtons'/>");
    
    // add (append) two buttons to button place
    $("#myButtons").append("<button id='" + myButton + "' onclick='toggleGallery()'>Images on/off</button>"); 
    $("#myButtons").append("<button id='openallCatsButton' onclick='openallCats()'>Open subcats</button>");

    // unsuccessful attempt to let user regulate #images shown:
    //$("#myButtons").append('<input type="range" min="1" max="10" value="' + maxImgPerCat + '" class="slider" data-show-value="true" id="myMaxCnt">');
    //$("#myMaxCnt").oninput=function() { maxImgPerCat=this.value; this.text=maxImgPerCat; } // react to changes in the maxImgPerCat slider
} 

mw.loader.using( 'oojs-ui-core' ).done( function () {
	
	$( function () { // when document has finished loading
		insertButtons();
	});
	
	
	//	var button = new OO.ui.ButtonWidget( { 
	//		label: 'Click mex!' 
	//	} );
	//	button.on( 'click', function () {
	//		alert( 'You clicked the button!' );
	//	} );
	//	$( '#mw-content-text' ).append( button.$element );
	
} );