core_image

src/components/MagicoPagebuilderPlugin.js

@@ -18,6 +18,10 @@ export default {
                 'core_section_html': {
                     label: 'Pole HTML',
                     svg: '<svg version="1.1" height="128" width="128" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M467,0H45C20.187,0,0,20.187,0,45v422c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V45C512,20.187,491.813,0,467,0z M482,467c0,8.271-6.729,15-15,15H45c-8.271,0-15-6.729-15-15V150h452V467z M482,120H30V45c0-8.271,6.729-15,15-15h422c8.271,0,15,6.729,15,15V120z"/></g></g><g><g><path d="M127.213,316l49.393-49.393c5.858-5.858,5.858-15.356,0-21.214c-5.857-5.858-15.355-5.858-21.213,0l-60,60c-5.858,5.858-5.858,15.355,0,21.213l60,60c5.857,5.857,15.355,5.858,21.213,0c5.858-5.858,5.858-15.355,0-21.213L127.213,316z"/></g></g><g><g><path d="M416.607,305.393l-60.001-60c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213L384.787,316l-49.393,49.393c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l60-60C422.465,320.748,422.465,311.251,416.607,305.393z"/></g></g><g><g><path d="M290.744,211.77c-7.862-2.621-16.354,1.628-18.974,9.487l-60,180c-2.62,7.859,1.628,16.354,9.487,18.974c7.861,2.62,16.355-1.629,18.974-9.487l60-180C302.85,222.884,298.603,214.389,290.744,211.77z"/></g></g><g><g><path d="M106,60H76c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S114.284,60,106,60z"/></g></g><g><g><path d="M196,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S204.284,60,196,60z"/></g></g><g><g><path d="M286,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S294.284,60,286,60z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
+                },
+                'core_section_image': {
+                    label: 'Obrazek',
+                    svg: '<svg version="1.1" id="Capa_1" height="128" width="128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M446.575,0H65.425C29.349,0,0,29.35,0,65.426v381.149C0,482.65,29.349,512,65.425,512h381.15C482.651,512,512,482.65,512,446.574V65.426C512,29.35,482.651,0,446.575,0z M481.842,446.575c0,19.447-15.821,35.267-35.267,35.267H65.425c-19.447,0-35.268-15.821-35.268-35.267v-55.007l99.255-84.451c3.622-3.082,8.906-3.111,12.562-0.075l62.174,51.628c5.995,4.977,14.795,4.569,20.304-0.946L372.181,209.77c2.67-2.675,5.783-2.935,7.408-2.852c1.62,0.083,4.695,0.661,7.078,3.596l95.176,117.19V446.575z M481.842,279.865l-71.766-88.366c-7.117-8.764-17.666-14.122-28.942-14.701c-11.268-0.57-22.317,3.672-30.294,11.662L212.832,326.681l-51.59-42.839c-14.959-12.422-36.563-12.293-51.373,0.308l-79.712,67.822V65.426c0-19.447,15.821-35.268,35.268-35.268h381.15c19.447,0,35.267,15.821,35.267,35.268V279.865z"/></g></g><g><g><path d="M161.174,62.995c-40.095,0-72.713,32.62-72.713,72.713c0,40.094,32.619,72.713,72.713,72.713s72.713-32.619,72.713-72.713S201.269,62.995,161.174,62.995z M161.174,178.264c-23.466,0-42.556-19.091-42.556-42.556c0-23.466,19.09-42.556,42.556-42.556c23.466,0,42.556,19.091,42.556,42.556S184.64,178.264,161.174,178.264z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
                 }
             },
             axios: null,

src/components/PagebuilderContent.vue

@@ -53,6 +53,7 @@ import MagicoModal from './MagicoModal.vue'
 import SectionText from './plugin/SectionText.vue'
 import SectionTextarea from './plugin/SectionTextarea.vue'
 import SectionHtml from './plugin/SectionHtml.vue'
+import SectionImage from './plugin/SectionImage.vue'
 
 import DropdownSectionSection from './DropdownSectionSection.vue'
 
@@ -65,6 +66,8 @@ export default {
         'core_section_textarea': SectionTextarea,
         'core_section_text': SectionText,
         'core_section_html': SectionHtml,
+        'core_section_image': SectionImage,
+
         DropdownSectionSection
 
     },

src/components/plugin/SectionImage.vue

@@ -0,0 +1,200 @@
+
+<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>