public/MagicoPagebuilder
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

core_image

Browse Source
This commit is contained in:
Szymon Haczyk
2022-07-18 11:51:43 +02:00
parent 5eded33414
commit 2bcbb0f5a9
3 changed files with 210 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
src/components/plugin/SectionImage.vue Normal file
View File

@@ -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>