spee.ch/views/partials/trendingAssets.handlebars

37 lines
959 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.claimId}}/{{this.name}}">
{{#ifConditional this.fileType '===' 'video/mp4'}}
<video class="grid-item trending-video" controls onloadeddata="resetTrendingLayout()">
2017-07-28 05:04:22 +02:00
<source src="/media/{{this.fileName}}" >
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</video>
{{else}}
<img class="grid-item trending-image" src="/media/{{this.fileName}}" onload="resetTrendingLayout()"/>
{{/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 resetTrendingLayout() {
2017-07-28 05:04:22 +02:00
msnry.layout();
}
2017-07-28 05:04:22 +02:00
</script>