%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /var/www/html/evablog/resources/assets/js/components/
Upload File :
Create Path :
Current File : /var/www/html/evablog/resources/assets/js/components/FullScreenImagePreviewComponent.vue

<template>
    <b-modal class="full-screen-modal" size="lg" ref="fullScreenImagePreview" @shown="onShow" hide-footer hide-header>
        <div class="row close-button">
            <button class="btn btn-outline-primary" @click="closeModal()">
                <span class="fa fa-fw fa-close"></span>
            </button>
        </div>
        <div class="row justify-content-center align-self-center h-100">
            <div class="col-sm-12 text-center align-self-center">
                <carousel ref="carousel"
                          :per-page="carouselOptions.perPage"
                          :loop="carouselOptions.loop"
                          :pagination-enabled="carouselOptions.paginationEnabled"
                          :navigation-enabled="carouselOptions.navigationEnabled"
                          :navigation-click-target-size="0"
                          class="justify-content-center align-self-center"
                          v-on:keyup="keymonitor()"
                          :navigate-to="currentImageIndex">
                    <slide class="image-container text-center align-self-center"
                           v-for="image in images"
                           :key="image.id">
                        <img class="img-fluid" :src="image.preview">
                    </slide>
                </carousel>
            </div>
        </div>
    </b-modal>
</template>

<script>
    import {Carousel, Slide} from 'vue-carousel';

    export default {
        name: 'FullScreenImagePreviewComponent',
        components: {
            Carousel,
            Slide
        },
        props: {
            images: {
                type: Array,
                required: true
            },
            setInstance: {
                type: Function,
                required: true
            },
            currentImageIndex: {
                type: Number,
                required: true
            }
        },
        data () {
            return {
                carouselOptions: {
                    perPage: 1,
                    paginationEnabled: false,
                    navigationEnabled: true,
                    loop: true
                }
            }
        },
        methods: {
            onShow: function () {
                this.triggerResize();
                this.updatePosition(this.currentImageIndex);
            },
            closeModal: function () {
                this.$refs.fullScreenImagePreview.hide();
            },
            triggerResize: function () {
                window.dispatchEvent(new Event('resize'));
            },
            updatePosition: function (position) {
                const vm = this;
                setTimeout(function () {
                    vm.$refs.carousel.goToPage(position);
                }, 100);
            }
        },
        created () {
            const vm = this;
            setTimeout(function () {
                vm.setInstance(vm.$refs.fullScreenImagePreview);
            }, 100);
            window.addEventListener('keyup', function (event) {
                switch (event.code) {
                    case 'ArrowRight':
                        vm.$refs.carousel.advancePage('forward');
                        break;
                    case 'ArrowLeft':
                        vm.$refs.carousel.advancePage('backward');
                        break;
                }
            });
        }
    }
</script>

Zerion Mini Shell 1.0