MagicoPagebuilder/src/components/plugin/SectionImage.vue

<template>
    <div class="row m-0 p-0 align-items-center">

        <div class="col-sm-12 col-md-6 p-0">
            <span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
                class="font-weight-bold text-primary">{{ langs.label }}</span>
        </div>

        <div class="col-sm-12 col-md-6 p-0 text-end">
            <a href="#" @click.prevent="modalOpen" title="Edytuj" class="text-primary me-2"><i
                    class="material-icons-outlined">create</i></a>
            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
                    class="material-icons-outlined">delete</i></a>
        </div>
        <b-modal v-model="modalBox" v-on:close="onCloseModal" :title="langs.label">
            <div>
                <div class="p-0 m-0">
                    <div class="form-group ">
                        <label class="w-100 col-form-label">{{ langs.label }}</label>
                        <div class="input-group mb-3">
                            <input class="form-control" type="text" v-model="text" />
                            <button @click="chooseImage" class="btn btn-outline-secondary" type="button" id="button-addon2">Wybierz</button>
                        </div>
                    </div>

                    <div class="form-group ">
                        <label class="w-100 col-form-label">{{ langs.title }}</label>
                        <input class="form-control" type="text" v-model="title" />
                    </div>
                    <div class="form-group ">
                        <label class="w-100 col-form-label">{{ langs.alt }}</label>
                        <input class="form-control" type="text" v-model="alt" />
                    </div>
                    <div class="form-group ">
                        <label class="w-100 col-form-label">Legenda obrazka</label>
                        <input class="form-control" type="text" v-model="figcaption" />
                    </div>
                    <div class="form-group ">
                        <label class="w-100 col-form-label">{{ langs.scaling }}</label>
                        <select v-model="scale" class="form-select">
                            <option v-for="item, ii  in scales" :key="ii" :value="item.key">{{ item.value }}
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="w-100 col-form-label">{{ langs.href }}</label>
                        <input class="form-control" type="text" v-model="href" />
                    </div>

                    <fieldset class="mt-3" v-show="scale == 'tak'">
                        <legend>{{ langs.proportions }}</legend>
                        Brak możliwości skalowania obrazków z zewnętrznego serwera.
                        <div class="form-group"><label class="w-100 col-form-label">{{ langs.width
                        }}</label><input class="form-control" v-model="width"></div>
                        <div class="form-group"><label class="w-100 col-form-label">{{ langs.height
                        }}</label><input class="form-control" v-model="height"></div>
                        <div class="form-group"><label class="w-100 col-form-label">{{ langs.ratio
                        }}</label><select class="form-select" v-model="ratio">
                                <option v-for="item, ri in ratios" :key="ri">{{ item }}</option>
                            </select></div>

                    </fieldset>

                    <img v-if="text" :src="text" style="max-width: 100%;" class="my-2">
                </div>

            </div>
            <div class="text-center mt-4"><button class="btn btn-outline-secondary mr-1"
                    @click.prevent="onCloseModal">{{
                            langs.saveclose
                    }}</button></div>
        </b-modal>

        <div v-if="text">
            <img :src="text" style="width:100px;" />
        </div>
    </div>
</template>
<script>
import MagicoModal from './../MagicoModal.vue'

export default {
    props: {
        value: Object,
    },
    data: function () {
        return {
            langs: {
                saveclose: "Zapisz",
                label: "Obrazek",
                close: "Zamknij",
                removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
                fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
                scaling: "Skalowanie",
                scalingyes: "Tak",
                scalingno: "Nie",
                proportions: "Proporcje",
                height: "Wysokość",
                width: "Szerokość",
                ratio: "Radio",
                href: "Adres URL",
                alt: "Tekst alternatywny",
                title: "Tytuł",
            },
            modalBox: false,
            items: [],
            text: '',
            name: '',
            alt: '',
            href: '',
            title: '',
            width: 1800,
            height: 600,
            ratio: 'crop',
            figcaption: '',
            ratios: ['crop', 'auto', 'width', 'height'],
            scales: [{
                "key": "nie",
                "value": "Nie"
            }, {
                "key": "tak",
                "value": "Tak"
            }],
            scale: "Nie"
        }
    },
    mounted: function () {
        console.log('mount image', this.value);
        this.alt = (this.value && this.value.alt) ? this.value.alt : this.alt;
        this.title = (this.value && this.value.title) ? this.value.title : this.title;
        this.name = (this.value && this.value.name) ? this.value.name : this.name;
        this.text = (this.value && this.value.text) ? this.value.text : this.text;
        this.width = (this.value && this.value.width) ? this.value.width : this.width;
        this.height = (this.value && this.value.height) ? this.value.height : this.height;
        this.ratio = (this.value && this.value.ratio) ? this.value.ratio : this.ratio;
        this.scale = (this.value && this.value.scale) ? this.value.scale : this.scale;
        this.href = (this.value && this.value.href) ? this.value.href : this.href;
        this.figcaption = (this.value && this.value.figcaption) ? this.value.figcaption : this.figcaption;

        if (this.value.open) this.modalBox = true;
    },
    components: {
        'b-modal': MagicoModal,
    },
    methods: {
        removeItem: function () {
            this.$emit('itemRemoved', this.value);
        },
        chooseImage: function () {
            if (this.$filechooser) {
                let vm = this;
                this.$filechooser.open({
                    chooseCallback: function (ev) {
                        vm.text = ev.publicUrl
                    }
                })
            }else{
                alert('No FileChooser implemented')
            }
        },
        onCloseModal: function () {
            this.modalBox = false;
            this.$emit('input', {
                name: this.name,
                text: this.text,
                height: this.height,
                width: this.width,
                ratio: this.ratio,
                scale: this.scale,
                alt: this.alt,
                href: this.href,
                title: this.title,
                figcaption: this.figcaption,
            })
        },
        setText: function (item) {
            this.text = 'files/images/' + item;
            this.$emit('input', {
                name: this.name,
                text: this.text,
                height: this.height,
                width: this.width,
                ratio: this.ratio,
                scale: this.scale,
                alt: this.alt,
                href: this.href,
                title: this.title,
                figcaption: this.figcaption,
            })
        },
        modalOpen: function () {
            this.modalBox = !this.modalBox;
            //this.getItems();
        },

    },

};
</script>