Campaigns

by NOVUSIDEA

HTML

<script src="https://unpkg.com/[email protected]/dist/lazyload.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/macy.js"></script>
<img class="lazy" data-src="'https://source.unsplash.com/random/300x200" alt="Test">

<hr>

<div id="app">

    <div class="campaigns" ref="Campaigns">
        
        <article class="campaign-item" v-for="(campaign, index) in campaigns" v-bind:key="index">
        
            <img class="campaign-image lazy" :src="placeholder" :data-src="'https://source.unsplash.com/random/300x200?' + index" :alt="campaign.title">
            
            <!--svg class="campaign-image" version="1.1" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
                <rect width="300" height="200" fill="#ddd"/>
                <text x="50%" y="50%" fill="#777" dominant-baseline="middle" text-anchor="middle">{{ index+1 }}</text>
            </svg-->
            
            <div class="campaign-body">            
                <h3 class="campaign-title">{{ campaign.title }}</h3>
            </div>
            
        </article>
        
    </div>

    <!--pre>{{ campaigns }}</pre-->
    
</div>

SCSS

body {
    font-family: Arial, sans-serif;
    padding: 2rem;
}

.campaign-item {
    background: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.campaign-image {
    background: #ddd;
    width: 100%;
    height: auto;
}

.campaign-body {
    padding: 1rem;
}

JavaScript

var lazyLoadInstance = new LazyLoad({
    elements_selector: '.lazy'
});

new Vue({
	el: '#app',
    data: {
    	placeholder: 'data:image/svg+xml,<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="red"/></svg>',
    	campaigns: []
    },
    mounted: function() {
    
    	this.getCampaigns();
        
    },
    methods: {
    	getCampaigns: function(callback) {
            
        	var _this = this;

            fetch('https://jsonplaceholder.typicode.com/posts?_limit=30')            
                .then(function(response){
                
                    return response.json();
                    
                })
                .then(function(data){
                
                	// console.log(data);
                    
                    _this.campaigns = data;
                    
                    var lazyLoadInstance = new LazyLoad({
                        elements_selector: '.lazy'
                    });
                    
                    /*var macyInstance = Macy({
                        container: _this.$refs.Campaigns,
                        trueOrder: false,
                        waitForImages: false,
                        margin: 24,
                        columns: 3,
                        breakAt: {
                            520: 2,
                            400: 1
                        }
                    });
                    
                    macyInstance.runOnImageLoad(function () {
                        console.log('I only get called when all images are loaded');
                        macyInstance.recalculate(true, true);
                    }, true);*/
                    
                });
            
    	}
    }
});