Browse Source

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.
pull/569/head
Olaf Conradi 10 years ago
parent
commit
94c8d7693f
  1. 9
      js/acl.js
  2. 1
      view/acl_selector.tpl
  3. 1
      view/smarty3/acl_selector.tpl
  4. 1
      view/theme/frost-mobile/acl_selector.tpl
  5. 7
      view/theme/frost-mobile/js/acl.js
  6. 1
      view/theme/frost-mobile/smarty3/acl_selector.tpl
  7. 7
      view/theme/frost/js/acl.js
  8. 1
      view/theme/frost/smarty3/acl_selector.tpl

9
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();
}

1
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>

1
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>

1
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>

7
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();
}

1
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>

7
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();
}

1
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>

Loading…
Cancel
Save