feature 2548 multisize - added a page to build missing derivatives

 - browser driven, chained ws calls to retrieve urls, visual feedback of progress through slideshow

git-svn-id: http://piwigo.org/svn/trunk@12865 68402e56-0260-453c-a942-63ccdbb3a9ee

2 files changed, 86 insertions, 2 deletions

diff --git a/themes/default/js/image.loader.js b/themes/default/js/image.loader.js
new file mode 100644
index 000000000..cd8b9cc52
--- /dev/null
+++ b/themes/default/js/image.loader.js
@@ -0,0 +1,84 @@
+
+function ImageLoader(opts) {
+	this.opts = jQuery.extend( {
+			maxRequests: 6,
+			onChanged: jQuery.noop
+		}, opts||{} );
+}
+
+ImageLoader.prototype = {
+	loaded: 0,
+	errors: 0,
+	errorEma: 0,
+
+	pause: false,
+
+	current: [],
+	queue: [],
+	pool: [],
+
+	remaining: function() {
+		return this.current.length + this.queue.length;
+	},
+
+	add: function(urls) {
+		this.queue = this.queue.concat( urls );
+		this._fireChanged("add");
+		this._checkQueue();
+	},
+
+	clear: function() {
+		this.queue.length = 0;
+		while (this.current.length)
+			jQuery( this.current.pop() ).unbind();
+		this.loaded = this.errors = this.errorEma = 0;
+	},
+
+	pause: function(val) {
+		if (val !== undefined)
+		{
+			this.paused = val;
+			this._checkQueue();
+		}
+		return this.paused;
+	},
+
+	_checkQueue: function() {
+		while (!this.paused
+			&& this.queue.length
+			&& this.current.length < this.opts.maxRequests)
+		{
+			this._processOne( this.queue.shift() );
+		}
+	},
+
+	_processOne: function(url) {
+		var img = this.pool.shift() || new Image;
+		this.current.push(img);
+		var that = this;
+		jQuery(img).bind( "load error abort", function(e) {
+		//img.onload = function(e) {
+			jQuery(img).unbind();
+			img.onload=null;
+			that.current.splice(jQuery.inArray(img, that.current), 1);
+			if (e.type==="load") {
+				that.loaded++;
+				that.errorEma *= 0.9;
+			}
+			else {
+				that.errors++;
+				that.errorEma++;
+				if (that.errorEma>=20 && that.errorEma<21)
+					that.paused = true;
+			}
+			that._fireChanged(e.type, img);
+			that._checkQueue();
+			that.pool.push(img);
+		} );
+		img.src = url;
+	},
+
+	_fireChanged: function(type, img) {
+		this.opts.onChanged(type, img);
+	}
+}
\ No newline at end of file
diff --git a/themes/default/template/picture_content.tpl b/themes/default/template/picture_content.tpl
index 47dcd5560..cc85a1e05 100644
--- a/themes/default/template/picture_content.tpl
+++ b/themes/default/template/picture_content.tpl
@@ -32,13 +32,13 @@ function toggleDerivativeSwitchBox()
 		elt.style.display="none";
 }
 {/literal}{/footer_script}
-<a id="derivativeSwitchLink" onclick="toggleDerivativeSwitchBox()" style="cursor:pointer">{$current.selected_derivative->get_type()|@translate}</a>
+<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()">{$current.selected_derivative->get_type()|@translate}</a>
 <div id="derivativeSwitchBox" onclick="toggleDerivativeSwitchBox()" style="display:none">
 {foreach from=$current.unique_derivatives item=derivative key=derivative_type}
 <a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}', '{$derivative_type}', '{$derivative->get_type()|@translate|@escape:javascript}')" style="cursor:pointer">{$derivative->get_type()|@translate} ({$derivative->get_size_hr()})</a><br>
 {/foreach}
 {if isset($U_ORIGINAL)}
-<a  href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" title="{'Click on the photo to see it in high definition'|@translate}">{'original'|@translate}</a>
+<a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" title="{'Click on the photo to see it in high definition'|@translate}">{'original'|@translate}</a>
 {/if}
 </div>
 {/if}
\ No newline at end of file