If you appreciate the work done within the wiki, please consider supporting The Cutting Room Floor on Patreon. Thanks for all your support!

Template talk:Compare

From The Cutting Room Floor
Jump to navigation Jump to search
This is the talk page for Template:Compare.
  • Sign and date your posts by typing four tildes (~~~~).
  • Put new text below old text.
  • Indent replies by prefixing with a colon :
  • Add new sections with the 'Add topic' button at the top right.
  • Be polite.
  • Assume good faith.
  • Don't delete discussions.
  • Be familiar with the talk help page.

People of TCRF! I bring a most interesting idea for this template! What if we had a small button (link) on the table that, after being pressed, puts both images in a single table cell... and alternates between showing image A and image B (in timed intervals or manually)? That'd be a great way to notice the differences between 2 images. Now, it's true, it's a small bit needless. One can download both images, open them both with paint, and alt-tab back and forth. One could also cross one's eyes so that both images overlap; differences will cause a certain irritating spazz on the eyesight (great way to cheat at difference games, but could be bad for your eyes). But you have to admit... it'd be fancy. With a bit of Javascript, I'm certain it could be easily done. It'd be helpful, and it'd be a neat little gadget. {EspyoT} 15:28, 7 November 2011 (EST)

That sounds nice, but I think it should be made an option the viewer can switch between with another link - Andlabs 15:39, 7 November 2011 (EST)
Of course, we'll still keep the side-by-side view. The method to toggle between 2 images in the same spot will be optional. Hmm... what should the link/button be named? It should be called "side-by-side" when you want to return to the regular side-by-side view, but what should it be called when you want the toggle dealy? {EspyoT} 17:59, 7 November 2011 (EST)
So, I've sketched up something, and I'm pleased with the result! This is the Javascript code:
var cmpShowing1st=true;		//If true, we are currently showing the 1st. False, the 2nd.
var cmpToggleHandles=[];		//Array of the handles for the toggling intervals.

//Adds a button to an element. caption: button's caption.
//js: the button's js code, without "javascript:" before or ";" after. where: element to add button to.
function cmpAddButton(caption, js, where){
	var buttonSpan=document.createElement("span");
	var buttonA=document.createElement("a");
	
	buttonA.setAttribute("href", "javascript:" + js + ";");
	buttonA.appendChild(document.createTextNode(caption));
	
	buttonSpan.appendChild(document.createTextNode("["));
	buttonSpan.appendChild(buttonA);
	buttonSpan.appendChild(document.createTextNode("]"));
	
	where.appendChild(buttonSpan);
	return buttonSpan;
}

//Adds a mouseover "button" to an element. caption: "button"'s caption.
//js: the "button"'s js code, without "javascript:" before or ";" after.
//ojs: code to run when the mouse is *o*ut, also without "javascript" nor ";".
//where: element to add "button" to. left: is this the leftmost "button"? Used for the margin.
function cmpAddMouseover(caption, js, ojs, where, left){
	var buttonA=document.createElement("a");
	buttonA.setAttribute("onmouseover", "javascript:" + js + ";");
	buttonA.setAttribute("onmouseout", "javascript:" + ojs + ";");
	buttonA.appendChild(document.createTextNode(caption));
	buttonA.style.paddingLeft="3px";
	buttonA.style.paddingRight="3px";
	buttonA.style.cursor="default";
	buttonA.style.border="1px solid";
	if(left)
		buttonA.style.marginRight="0px";
	else
		buttonA.style.marginLeft="0px";
	
	where.appendChild(buttonA);
	return buttonA;
}

//Creates the buttons on all comparison tables, and sets up some other things.
function cmpStart(){
	var indexNr=0;
	var tables=document.getElementsByTagName("table");
	
	for(var t=0;t<tables.length;t++){
		if(tables[t].className.match(/\bcompare\b/)){
			var controlBar=document.createElement("td");
			controlBar.setAttribute("id", "cmpControlBar" + indexNr);
			controlBar.setAttribute("colspan", "2");
			controlBar.style.display="none";
			
			//Add ids to the headers and image tds.
			var imgF=tables[t].getElementsByTagName("td")[0];
			var imgS=tables[t].getElementsByTagName("td")[1];
			var headF=tables[t].getElementsByTagName("th")[0];
			var headS=tables[t].getElementsByTagName("th")[1];
			if(!imgF || !imgS || !headF || !headS) continue;
			
			imgF.setAttribute("id", "cmpImg" + indexNr + "F");
			imgS.setAttribute("id", "cmpImg" + indexNr + "S");
			headF.setAttribute("id", "cmpHead" + indexNr + "F");
			headS.setAttribute("id", "cmpHead" + indexNr + "S");
			
			//Add a toggle controls button on the left part of the first header.
			var toggleControls=cmpAddButton("Show controls", "cmpToggleControls(" + indexNr + ")", headF);
			toggleControls.style.fontSize="7pt";
			toggleControls.style.cssFloat="left";
			toggleControls.style.paddingRight="4px";
			toggleControls.setAttribute("id", "cmpToggleControls" + indexNr);
			
			//Add the control bar's content.
			cmpAddButton("X", "cmpToggleControls(" + indexNr + ")", controlBar);
			
			var bControls=document.createElement("b");
			bControls.appendChild(document.createTextNode(" Controls: "));
			controlBar.appendChild(bControls);
			
			cmpAddButton("Normal","cmpBoth(" + indexNr + ")",controlBar);
			
			var aToggle=document.createElement("a");
			aToggle.appendChild(document.createTextNode(" - Toggle: "));
			controlBar.appendChild(aToggle);
			
			cmpAddButton("F","cmpToggle(" + indexNr + ",200)",controlBar);
			cmpAddButton("M","cmpToggle(" + indexNr + ",500)",controlBar);
			cmpAddButton("S","cmpToggle(" + indexNr + ",1000)",controlBar);
			
			var aShow=document.createElement("a");
			aShow.appendChild(document.createTextNode(" - Show only: "));
			controlBar.appendChild(aShow);
			
			cmpAddMouseover("First","cmpFirst(" + indexNr + ")","cmpBoth(" + indexNr + ")", controlBar, true);
			cmpAddMouseover("Second","cmpSecond(" + indexNr + ")","cmpBoth(" + indexNr + ")", controlBar, false);
			
			var tr=document.createElement("tr");
			tr.appendChild(controlBar);
			(tables[t].getElementsByTagName("tbody")[0] || tables[t]).appendChild(tr);
			
			indexNr++;
		}
	}
}

//Stops the toggling animation.
function cmpStopToggle(nr){
	if(typeof cmpToggleHandles[nr] != "undefined") clearInterval(cmpToggleHandles[nr]);
}


//Shows or hides the controls bar.
function cmpToggleControls(nr){
	var bar=document.getElementById("cmpControlBar" + nr);
	var toggler=document.getElementById("cmpToggleControls" + nr);
	if(bar.style.display=="none"){	//Show.
		bar.style.display="table-cell";
		toggler.style.display="none";
	}else{	//Hide.
		bar.style.display="none";
		toggler.style.display="block";
	}
}

//Shows or hides an image & title. If "first" is true, show the first, else the second. If "show" is true, show it, else hide it.
function cmpSet(nr,first,show,colspan){
	var img, head;
	if(first){
		var img=document.getElementById("cmpImg" + nr + "F");
		var head=document.getElementById("cmpHead" + nr + "F");
	}else{
		var img=document.getElementById("cmpImg" + nr + "S");
		var head=document.getElementById("cmpHead" + nr + "S");
	}
	
	var displayStr=((show) ? "table-cell" : "none");
	img.style.display=displayStr;
	head.style.display=displayStr;
	
	if(typeof colspan != "undefined"){
		img.colSpan=colspan;
		head.colSpan=colspan;
	}
}

//Shows both divs, like normal.
function cmpBoth(nr){
	cmpStopToggle(nr);
	cmpSet(nr, true, true, 1);
	cmpSet(nr, false, true, 1);
}

//Only shows the first div.
function cmpFirst(nr,stopToggle){
	if(typeof stopToggle == "undefined") stopToggle=true;
	if(stopToggle) cmpStopToggle(nr);
	cmpSet(nr, true, true, 2);
	cmpSet(nr, false, false, 0);
}

//Only shows the second div.
function cmpSecond(nr,stopToggle){
	if(typeof stopToggle == "undefined") stopToggle=true;
	if(stopToggle) cmpStopToggle(nr);
	cmpSet(nr, true, false, 0);
	cmpSet(nr, false, true, 2);
}

//Starts toggling, with the given interval, in milliseconds.
function cmpToggle(nr,interval){
	cmpDoToggle(nr);
	cmpStopToggle(nr);
	cmpToggleHandles[nr] = setInterval("cmpDoToggle(" + nr + ")", interval);
}

//Shows or hides the corresponding divs for the toggling effect.
function cmpDoToggle(nr){
	if(cmpShowing1st)
		cmpFirst(nr,false);
	else
		cmpSecond(nr,false);
	
	cmpShowing1st=!cmpShowing1st;
}
It's a bit long, but eh. If you want to see it in action, here. The tables used in Template:Compare need to have the "compare" class in order for it to work. Now all we need is for an admin to put this in MediaWiki:Common.js. Xkeeper? BMF54123? GlitterBerri? Anyone? {EspyoT} 16:21, 23 March 2013 (EDT)
That's pretty neat, but honestly, I'm not sure I want all those controls underneath every single compare template on the site. If this can be cleaned up at all, I'd be a bit more open to the idea.
Also, does this break gracefully on browsers with JavaScript disabled? --BMF54123 19:54, 27 March 2013 (EDT)
Well, the viewer has to be able to animate a certain comparison, not all. And even if it's all, there'd have to be a button at the top or something. I do agree that the buttons are a bit cumbersome, but that can be easily solved. A quick tiny button that hides or shows the buttons for every comparison might work. I'll sketch up something real quick when I get home. And I tried disabling Javascript and open the test page - it was perfectly normal, apart from an empty, almost 0-height row on the bottom of the table, for the controls. That won't be a problem, because of the hide/show controls button and all. {EspyoT} 09:41, 28 March 2013 (EDT)
Done. I've updated the code on this page. I've also updated the example page I linked to before, the url is the same (you might need to reload and skip the cache). Now I've made it so there's a small "[Show controls]" at the top-left of a table. The bulky controls will only show up if the user clicks that. {EspyoT} 16:23, 30 March 2013 (EDT)

What about multiple comparisons?

Maybe it is trivial, but what if I need to show more than one couple of images, like in this case? Game_Boy_Camera/Regional_Differences#Error_Faces
I think it would be nice to be able to create more rows, like in tables. --Crocodile91 (talk) 17:03, 16 September 2014 (EDT)

In those cases, we just use tables. No point in trying to replace a working method with another method. -Einstein95 (talk) 21:54, 16 September 2014 (EDT)