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.

diff --git a/js/acl.js b/js/acl.js
index 4f43252847ff6ae9ef487aff5583fad0f2d572c4..36cf74970fbac1e83df66fa67da46f4d0711040c 100644 (file)
--- 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 e2b85e36bc294ce554b4b31a6dbfc53c13e39f4e..837225a5b12fa9594732895d9d29d91cc3f9f4dd 100644 (file)
--- 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 bc669a2ac6a3b46a2875b8d1700f0807dbd582f0..e9f8030d7ccb301652bf3be6899430d58504c333 100644 (file)
--- 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 e79a6891a55dab93e3a93843d930294806c43a29..df34a1a2aee941a526db545d2a2af7e75db9a820 100644 (file)
--- 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 6feded6ab4b7e5bcb9a3a2aa07f217eac68513d8..20f0d461895cc1898d8fd28c8def9b9d1798b0c8 100644 (file)
--- 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 361bf8843a68cf1e76f17790cd94c7c005b3568b..f3b1abea7ccfb3e9283d454b10ec48aad4128c49 100644 (file)
--- 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 0f080cfe134979df4aabe780b664d3e973a9f895..6b443b248165c582b9f87d863d9e4f6bea3598ca 100644 (file)
--- 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 361bf8843a68cf1e76f17790cd94c7c005b3568b..f3b1abea7ccfb3e9283d454b10ec48aad4128c49 100644 (file)
--- 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>