tornado-gallery/tornado_gallery/static/generator.thtml

{% extends "master.thtml" %}
{# vim: set ts=8 noet sw=8 syn=html fileencoding=utf-8: #}
{% block html_head %}
	<style type="text/css">
body {
	margin: 2em;
	text-align: center;
}

#progress {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	border: 1px solid white;
	padding: 0.2em;
}

#progdone {
	color: white;
	background-color: blue;
	font-size: x-small;
	text-align: center;
	width: 0%;
}
	</style>
	<title>Image: {{photo.annotation}} ?> ({{photo.name}})</title>
	<script lang="type/javascript">
	function display() {
		if ( this.readyState == 4 ) {
			document.photo.src = '';
			document.last = document.data;
			eval( 'document.data = (' + this.responseText + ');' );
			var ratio = document.data.photo.origwidth /
				document.data.photo.origheight;
			if ( ratio > 1 ) {
				document.photo.width = 400;
				document.photo.height = 400/ratio;
			} else {
				document.photo.width = 300*ratio;
				document.photo.height = 300;
			}
			document.photo.src = '{{static_uri}}/'
						+ document.data.photo.resized;
			var index = Math.floor(document.data.photo.index);
			var count = Math.floor(document.data.gallery.length);
			var progress = Math.round(
					100*( index + 1 )
					/ count );
			document.progress.style.width = progress + '%';
			document.progress.innerHTML = progress+'%';
			document.xhr.onreadystatechange = display;
			if (	( document.data.photo.width <= 100 ) &&
				( document.data.photo.height <= 100 ) ) {
				document.xhr.open('GET',
						'{{site_uri}}/'
						+ document.data.gallery.name
						+ '/'
						+ document.data.photo.name
						+ '?json=1'
						+ document.scaledata);
			} else {
				document.lastphotolink.href =
						'{{site_uri}}/'
						+ document.data.gallery.name
						+ '/'
						+ document.last.photo.name;
				document.lastphoto.src = '';
				document.lastphoto.width =
					document.photo.width;
				document.lastphoto.height =
					document.photo.height;
				document.lastphoto.src = document.photo.src;
				if ( document.data.photo.name !=
						document.data.photo.next ) {
					document.xhr.open('GET',
						'{{site_uri}}/'
						+ document.data.gallery.name
						+ '/'
						+ document.data.photo.next
						+ '?json=1'
						+ document.thumbdata);
				}
			}
			document.xhr.send(null);
		}
	}

	function main() {
		document.lastphotolink = document.getElementById('lastphotolink');
		document.lastphoto = document.getElementById('lastphoto');
		document.photo = document.getElementById('photo');
		document.progress = document.getElementById('progdone');
		document.base = window.location.protocol
				+ window.location.host;
		document.thumbdata = '&width=100&height=100&quality=25';
		document.scaledata 	= '&width={{settings.width}}'
					+ '&height={{settings.height}}'
					+ '&quality={{settings.quality}}'
					+ '&rotation={{settings.rotation}}';

		document.xhr = getXHR();
		document.xhr.onreadystatechange = display;
		document.xhr.open('GET','{{site_uri}}/{{gallery.name}}/{{photo.name}}?json=1'+document.thumbdata);
		document.xhr.send(null);
	}
	</script>
	<script lang="text/javascript" src="{{static_uri}}/lib.js"></script>
	<script lang="text/javascript" src="{{static_uri}}/wheellib.js"></script>
{% end %}

{% block html_body %}
	<div id="progress">
		<div id="progdone"></div>
	</div>
	<a href="#" id="lastphotolink" target="_blank">	<img id="lastphoto"
		alt="" width="400" height="300" /></a>
	<img id="photo" alt="" width="400" height="300" />
	<p>
		Photo gallery images are being generated.  Click the left photo
		to view the last resized image.
	</p>
{% end %}

{% block html_body_args %}onload="main();"'{% end %}