Gazelle/static/functions/stylesheetgallery.js

(function ($){
	
	/*  
	 *  How rendering works:
	 *  The page is fit into the browser window with fixed dimensions (defined below) and then html2canvas
	 *  rebuilds the DOM to capture an initial snapshot of it. However, since the full sized screenshot
	 *  is too large to be cached (you can attempt this but will likely encounter the cache returning
	 *  failed status as the key is too large) the initial snapshot is then used as a background for a
	 *  div that is resized along with the said background. After resizing, a second snapshot is taken of
	 *  the now resized previous snapshot and this small version is sent to cache through $.post().
	 *  Javascript is user-agnostic, all security checks are done on PHP side, the interface isn't
	 *  available and no keys are cached if the required privileges aren't present. Check your privilege.
	 */

	/* html2canvas 0.4.0 <http://html2canvas.hertzen.com> Copyright (c)2013 Niklas von Hertzen (@niklasvh) Released under MIT License */
	(function(window,document,undefined){"use strict";var _html2canvas={},previousElement,computedCSS,html2canvas;function h2clog(a){if(_html2canvas.logging && window.console && window.console.log){window.console.log(a);}}_html2canvas.Util={};_html2canvas.Util.trimText=(function(isNative){return function(input){if(isNative){return isNative.apply(input );}else {return ((input || '')+ '').replace(/^\s+|\s+$/g ,'' );}};})(String.prototype.trim );_html2canvas.Util.parseBackgroundImage=function (value){var whitespace=' \r\n\t',method,definition,prefix,prefix_i,block,results=[],c,mode=0,numParen=0,quote,args;var appendResult=function(){if(method){if(definition.substr(0,1 )==='"'){definition=definition.substr(1,definition.length - 2 );}if(definition){args.push(definition);}if(method.substr(0,1 )==='-' && (prefix_i=method.indexOf('-',1 )+ 1)> 0){prefix=method.substr(0,prefix_i);method=method.substr(prefix_i );}results.push({prefix: prefix,method: method.toLowerCase(),value: block,args: args });}args=[];/*for some odd reason,setting .length=0 didn't work in safari*/ method=prefix=definition=block='';};appendResult();for(var i=0,ii=value.length;i<ii;i++){c=value[i];if(mode===0 && whitespace.indexOf(c )> -1){continue;}switch(c){case '"': if(!quote){quote=c;}else if(quote===c){quote=null;}break;case '(': if(quote){break;}else if(mode===0){mode=1;block +=c;continue;}else {numParen++;}break;case ')': if(quote){break;}else if(mode===1){if(numParen===0){mode=0;block +=c;appendResult();continue;}else {numParen--;}}break;case ',': if(quote){break;}else if(mode===0){appendResult();continue;}else if(mode===1){if(numParen===0 && !method.match(/^url$/i)){args.push(definition);definition='';block +=c;continue;}}break;}block +=c;if(mode===0){method +=c;}else {definition +=c;}}appendResult();return results;};_html2canvas.Util.Bounds=function getBounds (el){var clientRect,bounds={};if(el.getBoundingClientRect){clientRect=el.getBoundingClientRect();/* TODO add scroll position to bounds,so no scrolling of window necessary*/ bounds.top=clientRect.top;bounds.bottom=clientRect.bottom || (clientRect.top + clientRect.height);bounds.left=clientRect.left;/* older IE doesn't have width/height,but top/bottom instead*/ bounds.width=clientRect.width || (clientRect.right - clientRect.left);bounds.height=clientRect.height || (clientRect.bottom - clientRect.top);return bounds;}};_html2canvas.Util.getCSS=function (el,attribute,index){/* return $(el).css(attribute);*/ var val,isBackgroundSizePosition=attribute.match(/^background(Size|Position)$/ );function toPX(attribute,val ){var rsLeft=el.runtimeStyle && el.runtimeStyle[ attribute ],left,style=el.style;/* Check ifwe are not dealing with pixels,(Opera has issues with this)*/ /* Ported from jQuery css.js*/ /* From the awesome hack by Dean Edwards*/ /* http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291*/ /* If we're not dealing with a regular pixel number*/ /* but a number that has a weird ending,we need to convert it to pixels*/ if(!/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test(val )&& /^-?\d/.test(val )){/* Remember the original values*/ left=style.left;/* Put in the new values to get a computed value out*/ if(rsLeft ){el.runtimeStyle.left=el.currentStyle.left;}style.left=attribute==="fontSize" ? "1em" : (val || 0);val=style.pixelLeft + "px";/* Revert the changed values*/ style.left=left;if(rsLeft ){el.runtimeStyle.left=rsLeft;}}if(!/^(thin|medium|thick)$/i.test(val )){return Math.round(parseFloat(val ))+ "px";}return val;}if(previousElement !==el){computedCSS=document.defaultView.getComputedStyle(el,null);}val=computedCSS[attribute];if(isBackgroundSizePosition){val=(val || '').split(',' );val=val[index || 0] || val[0] || 'auto';val=_html2canvas.Util.trimText(val).split(' ');if(attribute==='backgroundSize' && (!val[ 0 ] || val[ 0 ].match(/cover|contain|auto/ ))){/*these values will be handled in the parent function*/ }else {val[ 0 ]=(val[ 0 ].indexOf("%" )===-1 )? toPX(attribute + "X",val[ 0 ] ): val[ 0 ];if(val[ 1 ]===undefined){if(attribute==='backgroundSize'){val[ 1 ]='auto';return val;}else {/* IE 9 doesn't 
																																																									
	// Used to update the user with the status of rendering.
	function colorstatus(color){
		$('html').empty();
		$('html').css('background', 'none repeat scroll 0 0 '+color);
	}
	
	// These two objects control the dimensions of rendering.
	// IMPORTANT: The first object needs to contain the default page size or the render will have undefined results.
	var sizeInitially = {
		width: 1200
	};
	sizeInitially.height = sizeInitially.width*5/6;
	// The size of the final rendering, the larger the dimensions, the larger the cached image, but the better the quality.
	var sizeFinally = {
		width: 450
	};
	sizeFinally.height = sizeFinally.width*5/6;
	
	$(document).ready(function (){
		// Ensure static document dimensions regardless of actual viewport size
		$('html').width(sizeInitially.width);
		$('html').height(sizeInitially.height);
		$('body').width(sizeInitially.width);
		$('body').height(sizeInitially.height);
		// Get the currently rendered stylesheet name, used for $.post() later.
		var stylesheetName = $('body').attr('stylesheet');
		console.log("Start: "+stylesheetName);
		// If we can render, start doing so, if we can't, error out.
		if(html2canvas){
		// First render
		html2canvas(document.body,{
			logging: true,
			width: sizeInitially.width,
			height: sizeInitially.height,
			onrendered: function(canvas){
				// Oh no, inline css. *Gasp.* Actually practical here to ensure the render has no borders regardless of browser actions.
				$('body').empty();
				$('link[rel=stylesheet]').remove();
				$('body').css('background', 'url('+canvas.toDataURL()+') no-repeat scroll center top');
				$('body').css('background-size', '100% 100%');
				$('body').css('position', 'relative');
				$('html').width(sizeFinally.width);
				$('html').height(sizeFinally.height);
				$('body').width(sizeFinally.width);
				$('body').height(sizeFinally.height);
				// Secondary, smaller render based on the first one
				html2canvas(document.body,{
					logging: true,
					width: sizeFinally.width,
					height: sizeFinally.height,
					onrendered: function(canvas){
						console.log("Finished render: "+stylesheetName);
						$('body').empty();
						$('link[rel=stylesheet]').remove();
						colorstatus("yellow");
						var imageData = canvas.toDataURL();
						// Send the rendered image along with the stylesheet name to PHP for caching.
						var postData = $.ajax({
							cache: false,
							url: "tools.php",
							type: 'post',
							data: {
								ajax: true,
								action: "rerender_gallery",
								image: imageData,
								stylesheet: stylesheetName
							}
						}).done(function(response){
							console.log("Finished post: "+stylesheetName);
							// Update the user about the received response once done.
							var reply = $.parseJSON(response);
							if(reply.status == "0"){
								// All good, time to consider replacing all comments with just "Snafucate".
								colorstatus("yellowgreen");
							} else if(reply.status == "-1") {
								// PHP returned an error for saving the image
								colorstatus("blue");
							} else if(reply.status == "-1") {
								// PHP didn't receive the full $.post()
								colorstatus("purple");
							} else {
								// Unknown status, panic.
								colorstats("black");
							}
							$('html').click();
							return 0;
						}).fail(function(){
							// Failed to $.post() data to PHP.
							colorstatus("red");
							console.log("Failed to $.post() data to PHP.");
							$('html').click();
						});
					}
				});
				// No loops, no hoops. Ensure the browser knows we're finished.
				return 0;
			}
		});
	} else {
		// Failed to start html2canvas
		colorstatus("red");
		console.log("Failed to start html2canvas.");
	}
	});
})(jQuery);