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

section image lightbox

Browse Source
This commit is contained in:
Szymon Haczyk
2024-06-17 09:03:08 +02:00
parent 008b54431d
commit ab402a32f1
1 changed files with 216 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/components/plugin/SectionImage.vue
View File

@@ -1,45 +1,53 @@
<template> <template>
<div class="row m-0 p-0 align-items-center"> <div class="row m-0 p-0 align-items-center">
<div class="col-sm-12 col-md-6 p-0"> <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 <span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
class="font-weight-bold text-primary">{{ langs.label }}</span> ><span class="font-weight-bold text-primary">{{ langs.label }}</span>
</div> </div>
<div class="col-sm-12 col-md-6 p-0 text-end"> <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 <a href="#" @click.prevent="modalOpen" title="Edytuj" class="text-primary me-2"
class="material-icons-outlined">create</i></a> ><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> <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
><i class="material-icons-outlined">delete</i></a
>
</div> </div>
<b-modal v-model="modalBox" v-on:close="onCloseModal" :title="langs.label"> <b-modal v-model="modalBox" v-on:close="onCloseModal" :title="langs.label">
<div> <div>
<div class="p-0 m-0"> <div class="p-0 m-0">
<div class="form-group "> <div class="form-group">
<label class="w-100 col-form-label">{{ langs.label }}</label> <label class="w-100 col-form-label">{{ langs.label }}</label>
<div class="input-group mb-3"> <div class="input-group mb-3">
<input class="form-control" type="text" v-model="text" /> <input class="form-control" type="text" v-model="text" />
<button @click="chooseImage" class="btn btn-outline-secondary" type="button" id="button-addon2">Wybierz</button> <button
@click="chooseImage"
class="btn btn-outline-secondary"
type="button"
id="button-addon2"
>
Wybierz
</button>
</div> </div>
</div> </div>
<div class="form-group "> <div class="form-group">
<label class="w-100 col-form-label">{{ langs.title }}</label> <label class="w-100 col-form-label">{{ langs.title }}</label>
<input class="form-control" type="text" v-model="title" /> <input class="form-control" type="text" v-model="title" />
</div> </div>
<div class="form-group "> <div class="form-group">
<label class="w-100 col-form-label">{{ langs.alt }}</label> <label class="w-100 col-form-label">{{ langs.alt }}</label>
<input class="form-control" type="text" v-model="alt" /> <input class="form-control" type="text" v-model="alt" />
</div> </div>
<div class="form-group "> <div class="form-group">
<label class="w-100 col-form-label">Legenda obrazka</label> <label class="w-100 col-form-label">Legenda obrazka</label>
<input class="form-control" type="text" v-model="figcaption" /> <input class="form-control" type="text" v-model="figcaption" />
</div> </div>
<div class="form-group "> <div class="form-group">
<label class="w-100 col-form-label">{{ langs.scaling }}</label> <label class="w-100 col-form-label">{{ langs.scaling }}</label>
<select v-model="scale" class="form-select"> <select v-model="scale" class="form-select">
<option v-for="item, ii in scales" :key="ii" :value="item.key">{{ item.modelValue }} <option v-for="(item, ii) in scales" :key="ii" :value="item.key">
{{ item.modelValue }}
</option> </option>
</select> </select>
</div> </div>
@@ -51,29 +59,41 @@
<fieldset class="mt-3" v-show="scale == 'tak'"> <fieldset class="mt-3" v-show="scale == 'tak'">
<legend>{{ langs.proportions }}</legend> <legend>{{ langs.proportions }}</legend>
Brak możliwości skalowania obrazków z zewnętrznego serwera. Brak możliwości skalowania obrazków z zewnętrznego serwera.
<div class="form-group"><label class="w-100 col-form-label">{{ langs.width <div class="form-group">
}}</label><input class="form-control" v-model="width"></div> <label class="w-100 col-form-label">{{ langs.width }}</label
<div class="form-group"><label class="w-100 col-form-label">{{ langs.height ><input class="form-control" v-model="width" />
}}</label><input class="form-control" v-model="height"></div> </div>
<div class="form-group"><label class="w-100 col-form-label">{{ langs.ratio <div class="form-group">
}}</label><select class="form-select" v-model="ratio"> <label class="w-100 col-form-label">{{ langs.height }}</label
<option v-for="item, ri in ratios" :key="ri">{{ item }}</option> ><input class="form-control" v-model="height" />
</select></div> </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> </fieldset>
<div class="form-group">
<label class="w-100 col-form-label">Używaj lightbox</label>
<img v-if="text" :src="text" style="max-width: 100%;" class="my-2"> <select v-model="img_lightbox" class="form-select">
<option :value="false">NIE</option>
<option :value="true">TAK</option>
</select>
</div> </div>
<img v-if="text" :src="text" style="max-width: 100%; max-height: 30vh; width: 100%;object-fit:contain;" 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> </div>
<div class="text-center mt-4"><button class="btn btn-outline-secondary mr-1"
@click.prevent="onCloseModal">{{
langs.saveclose
}}</button></div>
</b-modal> </b-modal>
<div v-if="text"> <div v-if="text">
<img :src="text" style="width:100px;" /> <img :src="text" style="width: 100px" />
</div> </div>
</div> </div>
</template> </template>
@@ -82,26 +102,26 @@ import MagicoModal from './../MagicoModal.vue'
export default { export default {
props: { props: {
modelValue: Object, modelValue: Object
}, },
data: function () { data: function () {
return { return {
langs: { langs: {
saveclose: "Zapisz", saveclose: 'Zapisz',
label: "Obrazek", label: 'Obrazek',
close: "Zamknij", close: 'Zamknij',
removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>", removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>", fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
scaling: "Skalowanie", scaling: 'Skalowanie',
scalingyes: "Tak", scalingyes: 'Tak',
scalingno: "Nie", scalingno: 'Nie',
proportions: "Proporcje", proportions: 'Proporcje',
height: "Wysokość", height: 'Wysokość',
width: "Szerokość", width: 'Szerokość',
ratio: "Radio", ratio: 'Radio',
href: "Adres URL", href: 'Adres URL',
alt: "Tekst alternatywny", alt: 'Tekst alternatywny',
title: "Tytuł", title: 'Tytuł'
}, },
modalBox: false, modalBox: false,
items: [], items: [],
@@ -114,53 +134,61 @@ export default {
height: 600, height: 600,
ratio: 'crop', ratio: 'crop',
figcaption: '', figcaption: '',
img_lightbox: true,
ratios: ['crop', 'auto', 'width', 'height'], ratios: ['crop', 'auto', 'width', 'height'],
scales: [{ scales: [
"key": "nie", {
"value": "Nie" key: 'nie',
}, { value: 'Nie'
"key": "tak", },
"value": "Tak" {
}], key: 'tak',
scale: "Nie" value: 'Tak'
}
],
scale: 'Nie'
} }
}, },
mounted: function () { mounted: function () {
console.log('mount image', this.modelValue); console.log('mount image', this.modelValue)
this.alt = (this.modelValue && this.modelValue.alt) ? this.modelValue.alt : this.alt; this.alt = this.modelValue && this.modelValue.alt ? this.modelValue.alt : this.alt
this.title = (this.modelValue && this.modelValue.title) ? this.modelValue.title : this.title; this.title = this.modelValue && this.modelValue.title ? this.modelValue.title : this.title
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name; this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text; this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
this.width = (this.modelValue && this.modelValue.width) ? this.modelValue.width : this.width; this.width = this.modelValue && this.modelValue.width ? this.modelValue.width : this.width
this.height = (this.modelValue && this.modelValue.height) ? this.modelValue.height : this.height; this.height = this.modelValue && this.modelValue.height ? this.modelValue.height : this.height
this.ratio = (this.modelValue && this.modelValue.ratio) ? this.modelValue.ratio : this.ratio; this.ratio = this.modelValue && this.modelValue.ratio ? this.modelValue.ratio : this.ratio
this.scale = (this.modelValue && this.modelValue.scale) ? this.modelValue.scale : this.scale; this.scale = this.modelValue && this.modelValue.scale ? this.modelValue.scale : this.scale
this.href = (this.modelValue && this.modelValue.href) ? this.modelValue.href : this.href; this.href = this.modelValue && this.modelValue.href ? this.modelValue.href : this.href
this.figcaption = (this.modelValue && this.modelValue.figcaption) ? this.modelValue.figcaption : this.figcaption; this.figcaption =
this.modelValue && this.modelValue.figcaption ? this.modelValue.figcaption : this.figcaption
if (this.modelValue.open) this.modalBox = true; this.img_lightbox =
this.modelValue && this.modelValue.img_lightbox
? this.modelValue.img_lightbox
: this.img_lightbox
if (this.modelValue.open) this.modalBox = true
}, },
components: { components: {
'b-modal': MagicoModal, 'b-modal': MagicoModal
}, },
methods: { methods: {
removeItem: function () { removeItem: function () {
this.$emit('itemRemoved', this.modelValue); this.$emit('itemRemoved', this.modelValue)
}, },
chooseImage: function () { chooseImage: function () {
if (this.$filechooser) { if (this.$filechooser) {
let vm = this; let vm = this
this.$filechooser.open({ this.$filechooser.open({
chooseCallback: function (ev) { chooseCallback: function (ev) {
vm.text = ev.publicUrl vm.text = ev.publicUrl
} }
}) })
}else{ } else {
alert('No FileChooser implemented') alert('No FileChooser implemented')
} }
}, },
onCloseModal: function () { onCloseModal: function () {
this.modalBox = false; this.modalBox = false
this.$emit('update:modelValue', { this.$emit('update:modelValue', {
name: this.name, name: this.name,
text: this.text, text: this.text,
@@ -172,10 +200,11 @@ export default {
href: this.href, href: this.href,
title: this.title, title: this.title,
figcaption: this.figcaption, figcaption: this.figcaption,
img_lightbox: this.img_lightbox
}) })
}, },
setText: function (item) { setText: function (item) {
this.text = 'files/images/' + item; this.text = 'files/images/' + item
this.$emit('update:modelValue', { this.$emit('update:modelValue', {
name: this.name, name: this.name,
text: this.text, text: this.text,
@@ -187,14 +216,13 @@ export default {
href: this.href, href: this.href,
title: this.title, title: this.title,
figcaption: this.figcaption, figcaption: this.figcaption,
img_lightbox: this.img_lightbox
}) })
}, },
modalOpen: function () { modalOpen: function () {
this.modalBox = !this.modalBox; this.modalBox = !this.modalBox
//this.getItems(); //this.getItems();
}, }
}
}, }
};
</script> </script>