
<template>
  <div v-bind:class="{'fotkipress-directory-component-preloader': isPreloader()}"
       class="fotkipress-directory-component"
       draggable="true"
       :data-path="file.path">
    <img v-if="isPreloader()" :src="preloaderUrl"/>
    <span v-if="isName()">{{file.name}}</span>

    <a v-if="isImage()" data-fancybox="gallery" :href="file.thumbnails['1000']"><img :src="file.thumbnails['250']"/></a>
  </div>
</template>


<script>
export default {
    props: {
        file: {
            type: Object,
            required: true
        },
        isloading: {
            type: Boolean,
            default: false
        }
    },

    data() {
        return {
            preloaderUrl: fotkiPress.content + '/plugins/fotkipress/static/svg/file-preloader.svg'
        };
    },

    methods: {
        isPreloader: function() {
            return !this.file.thumbnails['250'] && this.isloading;
        },

        isName: function() {
            return !this.file.thumbnails['250'] && !this.isloading;
        },

        isImage: function() {
            return this.file.thumbnails['250'];
        }
    }
};
</script>
