spee.ch/views/partials/trendingAssets.handlebars

38 lines
970 B
Handlebars
Raw Normal View History

<script src="/vendors/masonry/masonry.pkgd.min.js"></script>
<div class="full">
<h2>Trending</h2>
<div class="grid" data-masonry='{ "itemSelector": ".grid-item" }'>
{{#each trendingAssets}}
{{#unless this.nsfw}}
<a href="/{{this.name}}/{{this.claimId}}">
{{#ifConditional this.fileType '===' 'video/mp4'}}
2017-07-28 05:04:22 +02:00
<video class="grid-item trending-video" controls onloadeddata="resetLayout()">
<source src="/media/{{this.fileName}}" >
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</video>
{{else}}
2017-07-28 05:04:22 +02:00
<img class="grid-item trending-image" src="/media/{{this.fileName}}" onload="resetLayout()"/>
{{/ifConditional}}
</a>
{{/unless}}
2017-07-28 05:04:22 +02:00
{{/each}}
</div>
</div>
2017-07-28 05:04:22 +02:00
<script>
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
itemSelector: '.grid-item'
});
2017-07-28 05:04:22 +02:00
function resetLayout() {
console.log('resetting layout');
msnry.layout();
}
2017-07-28 05:04:22 +02:00
</script>