mirror of
https://github.com/friendica/friendica
synced 2024-12-23 04:00:15 +00:00
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.
This commit is contained in:
parent
a41692120e
commit
94c8d7693f
8 changed files with 24 additions and 4 deletions
|
@ -247,12 +247,17 @@ ACL.prototype.populate = function(data){
|
||||||
var height = Math.ceil(data.tot / that.nw) * 42;
|
var height = Math.ceil(data.tot / that.nw) * 42;
|
||||||
that.list_content.height(height);
|
that.list_content.height(height);
|
||||||
$(data.items).each(function(){
|
$(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);
|
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;
|
if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
|
||||||
//console.log(html);
|
//console.log(html);
|
||||||
that.list_content.append(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();
|
that.update_view();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="acl-list-item" rel="acl-template" style="display:none">
|
<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-show'>$show</a>
|
||||||
<a href="#" class='acl-button-hide'>$hide</a>
|
<a href="#" class='acl-button-hide'>$hide</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="acl-list-item" rel="acl-template" style="display:none">
|
<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-show'>{{$show}}</a>
|
||||||
<a href="#" class='acl-button-hide'>{{$hide}}</a>
|
<a href="#" class='acl-button-hide'>{{$hide}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="acl-list-item" rel="acl-template" style="display:none">
|
<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-show'>$show</a>
|
||||||
<a href="#" class='acl-button-hide'>$hide</a>
|
<a href="#" class='acl-button-hide'>$hide</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -247,12 +247,17 @@ ACL.prototype.populate = function(data){
|
||||||
/* var height = Math.ceil(data.tot / that.nw) * 42;
|
/* var height = Math.ceil(data.tot / that.nw) * 42;
|
||||||
that.list_content.height(height);*/
|
that.list_content.height(height);*/
|
||||||
$j(data.items).each(function(){
|
$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 );
|
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;
|
if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
|
||||||
//console.log(html);
|
//console.log(html);
|
||||||
that.list_content.append(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();
|
that.update_view();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="acl-list-item" rel="acl-template" style="display:none">
|
<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-show'>{{$show}}</a>
|
||||||
<a href="#" class='acl-button-hide'>{{$hide}}</a>
|
<a href="#" class='acl-button-hide'>{{$hide}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -247,12 +247,17 @@ ACL.prototype.populate = function(data){
|
||||||
var height = Math.ceil(data.tot / that.nw) * 42;
|
var height = Math.ceil(data.tot / that.nw) * 42;
|
||||||
that.list_content.height(height);
|
that.list_content.height(height);
|
||||||
$j(data.items).each(function(){
|
$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 );
|
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;
|
if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
|
||||||
//console.log(html);
|
//console.log(html);
|
||||||
that.list_content.append(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();
|
that.update_view();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="acl-list-item" rel="acl-template" style="display:none">
|
<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-show'>{{$show}}</a>
|
||||||
<a href="#" class='acl-button-hide'>{{$hide}}</a>
|
<a href="#" class='acl-button-hide'>{{$hide}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue