Template talk:Compare

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)