From 94c8d7693fd43b75018dcab866affd7606a56a9c Mon Sep 17 00:00:00 2001
From: Olaf Conradi <olaf@conradi.org>
Date: Sat, 29 Dec 2012 23:44:26 +0100
Subject: [PATCH] Keep html in template, use data attribute for img

Revert previous changes to fix browser preloading a template variable as image.
Images use a data attribute within templates as src.
Javascript will substitute them.
---
 js/acl.js                                        | 9 +++++++--
 view/acl_selector.tpl                            | 1 +
 view/smarty3/acl_selector.tpl                    | 1 +
 view/theme/frost-mobile/acl_selector.tpl         | 1 +
 view/theme/frost-mobile/js/acl.js                | 7 ++++++-
 view/theme/frost-mobile/smarty3/acl_selector.tpl | 1 +
 view/theme/frost/js/acl.js                       | 7 ++++++-
 view/theme/frost/smarty3/acl_selector.tpl        | 1 +
 8 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/js/acl.js b/js/acl.js
index 4f4325284..36cf74970 100644
--- a/js/acl.js
+++ b/js/acl.js
@@ -247,12 +247,17 @@ ACL.prototype.populate = function(data){
 	var height = Math.ceil(data.tot / that.nw) * 42;
 	that.list_content.height(height);
 	$(data.items).each(function(){
-		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>";
-		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link );
+		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>";
+		html = html.format(this.photo, this.name, this.type, this.id, '', this.network, this.link);
 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
 		//console.log(html);
 		that.list_content.append(html);
 	});
+	$(".acl-list-item img[data-src]").each(function(i, el){
+		// Replace data-src attribute with src attribute for every image
+		$(el).attr('src', $(el).data("src"));
+		$(el).removeAttr("data-src");
+	});
 	that.update_view();
 }
 
diff --git a/view/acl_selector.tpl b/view/acl_selector.tpl
index e2b85e36b..837225a5b 100644
--- a/view/acl_selector.tpl
+++ b/view/acl_selector.tpl
@@ -9,6 +9,7 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
+	<img data-src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>$show</a>
 	<a href="#" class='acl-button-hide'>$hide</a>
 </div>
diff --git a/view/smarty3/acl_selector.tpl b/view/smarty3/acl_selector.tpl
index bc669a2ac..e9f8030d7 100644
--- a/view/smarty3/acl_selector.tpl
+++ b/view/smarty3/acl_selector.tpl
@@ -9,6 +9,7 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
+	<img data-src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>{{$show}}</a>
 	<a href="#" class='acl-button-hide'>{{$hide}}</a>
 </div>
diff --git a/view/theme/frost-mobile/acl_selector.tpl b/view/theme/frost-mobile/acl_selector.tpl
index e79a6891a..df34a1a2a 100644
--- a/view/theme/frost-mobile/acl_selector.tpl
+++ b/view/theme/frost-mobile/acl_selector.tpl
@@ -9,6 +9,7 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
+	<img data-src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>$show</a>
 	<a href="#" class='acl-button-hide'>$hide</a>
 </div>
diff --git a/view/theme/frost-mobile/js/acl.js b/view/theme/frost-mobile/js/acl.js
index 6feded6ab..20f0d4618 100644
--- a/view/theme/frost-mobile/js/acl.js
+++ b/view/theme/frost-mobile/js/acl.js
@@ -247,12 +247,17 @@ ACL.prototype.populate = function(data){
 /*	var height = Math.ceil(data.tot / that.nw) * 42;
 	that.list_content.height(height);*/
 	$j(data.items).each(function(){
-		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>";
+		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>";
 		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link );
 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
 		//console.log(html);
 		that.list_content.append(html);
 	});
+	$(".acl-list-item img[data-src]").each(function(i, el){
+		// Replace data-src attribute with src attribute for every image
+		$(el).attr('src', $(el).data("src"));
+		$(el).removeAttr("data-src");
+	});
 	that.update_view();
 }
 
diff --git a/view/theme/frost-mobile/smarty3/acl_selector.tpl b/view/theme/frost-mobile/smarty3/acl_selector.tpl
index 361bf8843..f3b1abea7 100644
--- a/view/theme/frost-mobile/smarty3/acl_selector.tpl
+++ b/view/theme/frost-mobile/smarty3/acl_selector.tpl
@@ -9,6 +9,7 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
+	<img data-src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>{{$show}}</a>
 	<a href="#" class='acl-button-hide'>{{$hide}}</a>
 </div>
diff --git a/view/theme/frost/js/acl.js b/view/theme/frost/js/acl.js
index 0f080cfe1..6b443b248 100644
--- a/view/theme/frost/js/acl.js
+++ b/view/theme/frost/js/acl.js
@@ -247,12 +247,17 @@ ACL.prototype.populate = function(data){
 	var height = Math.ceil(data.tot / that.nw) * 42;
 	that.list_content.height(height);
 	$j(data.items).each(function(){
-		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>";
+		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>";
 		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link );
 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
 		//console.log(html);
 		that.list_content.append(html);
 	});
+	$(".acl-list-item img[data-src]").each(function(i, el){
+		// Replace data-src attribute with src attribute for every image
+		$(el).attr('src', $(el).data("src"));
+		$(el).removeAttr("data-src");
+	});
 	that.update_view();
 }
 
diff --git a/view/theme/frost/smarty3/acl_selector.tpl b/view/theme/frost/smarty3/acl_selector.tpl
index 361bf8843..f3b1abea7 100644
--- a/view/theme/frost/smarty3/acl_selector.tpl
+++ b/view/theme/frost/smarty3/acl_selector.tpl
@@ -9,6 +9,7 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
+	<img data-src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>{{$show}}</a>
 	<a href="#" class='acl-button-hide'>{{$hide}}</a>
 </div>